Window introduced

js/Configuration.js

@@ -59,6 +59,7 @@ export default class Configuration {
         begin: "ueb-tracking-mouse-begin",
         end: "ueb-tracking-mouse-end",
     }
+    static windowCloseEventName = "ueb-window-close"
     static ModifierKeys = [
         "Ctrl",
         "Shift",

js/element/IDraggableElement.js

@@ -0,0 +1,75 @@
+import Configuration from "../Configuration"
+import IElement from "./IElement"
+import Utility from "../Utility"
+
+/**
+ * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
+ * @typedef {import("../entity/IEntity").default} IEntity
+ */
+
+/**
+ * @template {IEntity} T
+ * @template {SelectableDraggableTemplate} U
+ * @extends {IElement<T, U>}
+ */
+export default class IDraggableElement extends IElement {
+
+    static properties = {
+        ...super.properties,
+        locationX: {
+            type: Number,
+            attribute: false,
+        },
+        locationY: {
+            type: Number,
+            attribute: false,
+        },
+    }
+
+    constructor(...args) {
+        super(...args)
+        this.locationX = 0
+        this.locationY = 0
+    }
+
+    /** @param {Number[]} param0 */
+    setLocation([x, y]) {
+        const d = [x - this.locationX, y - this.locationY]
+        this.locationX = x
+        this.locationY = y
+        if (this.blueprint) {
+            const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {
+                detail: {
+                    value: d,
+                },
+                bubbles: false,
+                cancelable: true
+            })
+            this.dispatchEvent(dragLocalEvent)
+        }
+    }
+
+    /** @param {Number[]} param0 */
+    addLocation([x, y]) {
+        this.setLocation([this.locationX + x, this.locationY + y])
+    }
+
+    /** @param {Number[]} value */
+    dispatchDragEvent(value) {
+        const dragEvent = new CustomEvent(Configuration.nodeDragEventName, {
+            detail: {
+                value: value
+            },
+            bubbles: true,
+            cancelable: true
+        })
+        this.dispatchEvent(dragEvent)
+    }
+
+    snapToGrid() {
+        const snappedLocation = Utility.snapToGrid([this.locationX, this.locationY], Configuration.gridSize)
+        if (this.locationX != snappedLocation[0] || this.locationY != snappedLocation[1]) {
+            this.setLocation(snappedLocation)
+        }
+    }
+}

js/element/IFromToPositionedElement.js

@@ -1,4 +1,4 @@
-import IElement from "./IElement";
+import IElement from "./IElement"
 
 /**
  * @typedef {import("../entity/IEntity").default} IEntity

js/element/ISelectableDraggableElement.js

@@ -1,6 +1,7 @@
 import Configuration from "../Configuration"
 import IElement from "./IElement"
 import Utility from "../Utility"
+import IDraggableElement from "./IDraggableElement"
 
 /**
  * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
@@ -9,10 +10,10 @@ import Utility from "../Utility"
 
 /**
  * @template {IEntity} T
- * @template {SelectableDraggableTemplate} U
+ * @template {IDraggableElement} U
  * @extends {IElement<T, U>}
  */
-export default class ISelectableDraggableElement extends IElement {
+export default class ISelectableDraggableElement extends IDraggableElement {
 
     static properties = {
         ...super.properties,
@@ -22,24 +23,12 @@ export default class ISelectableDraggableElement extends IElement {
             reflect: true,
             converter: Utility.booleanConverter,
         },
-        locationX: {
-            type: Number,
-            attribute: false,
-        },
-        locationY: {
-            type: Number,
-            attribute: false,
-        },
     }
 
     constructor(...args) {
         super(...args)
         this.selected = false
-        this.locationX = 0
-        this.locationY = 0
-
         this.listeningDrag = false
-
         let self = this
         this.dragHandler = e => self.addLocation(e.detail.value)
     }
@@ -54,32 +43,6 @@ export default class ISelectableDraggableElement extends IElement {
         this.blueprint.removeEventListener(Configuration.nodeDragEventName, this.dragHandler)
     }
 
-    /**
-     * @param {Number[]} param0
-     */
-    setLocation([x, y]) {
-        const d = [x - this.locationX, y - this.locationY]
-        this.locationX = x
-        this.locationY = y
-        if (this.blueprint) {
-            const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {
-                detail: {
-                    value: d,
-                },
-                bubbles: false,
-                cancelable: true
-            })
-            this.dispatchEvent(dragLocalEvent)
-        }
-    }
-
-    /**
-     * @param {Number[]} param0
-     */
-    addLocation([x, y]) {
-        this.setLocation([this.locationX + x, this.locationY + y])
-    }
-
     setSelected(value = true) {
         this.selected = value
         if (this.blueprint) {
@@ -92,25 +55,4 @@ export default class ISelectableDraggableElement extends IElement {
             }
         }
     }
-
-    /**
-     * @param {Number[]} value 
-     */
-    dispatchDragEvent(value) {
-        const dragEvent = new CustomEvent(Configuration.nodeDragEventName, {
-            detail: {
-                value: value
-            },
-            bubbles: true,
-            cancelable: true
-        })
-        this.dispatchEvent(dragEvent)
-    }
-
-    snapToGrid() {
-        const snappedLocation = Utility.snapToGrid([this.locationX, this.locationY], Configuration.gridSize)
-        if (this.locationX != snappedLocation[0] || this.locationY != snappedLocation[1]) {
-            this.setLocation(snappedLocation)
-        }
-    }
 }

js/element/PinElement.js

@@ -31,8 +31,8 @@ export default class PinElement extends IElement {
         "exec": ExecPinTemplate,
         "name": NamePinTemplate,
         "real": RealPinTemplate,
-        "string": StringPinTemplate,
         "REFERENCE": ReferencePinTemplate,
+        "string": StringPinTemplate,
     }
 
     static properties = {

js/element/WindowElement.js

@@ -0,0 +1,41 @@
+import Configuration from "../Configuration"
+import ISelectableDraggableElement from "./ISelectableDraggableElement"
+import WindowTemplate from "../template/WindowTemplate"
+
+/** @extends {ISelectableDraggableElement<Object, WindowTemplate>} */
+export default class WindowElement extends ISelectableDraggableElement {
+
+    static #typeTemplateMap = {
+        "window": WindowTemplate,
+    }
+
+    static properties = {
+        ...ISelectableDraggableElement.properties,
+        type: {
+            type: String,
+            attribute: "data-type",
+            reflect: true,
+        },
+    }
+
+    constructor(properties = {}) {
+        properties.type ??= "window"
+        super({}, new WindowElement.#typeTemplateMap[properties.type]())
+        this.type = properties.type
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        this.dispatchCloseEvent()
+    }
+
+    dispatchCloseEvent(value) {
+        let deleteEvent = new CustomEvent(Configuration.windowCloseEventName, {
+            bubbles: true,
+            cancelable: true,
+        })
+        this.dispatchEvent(deleteEvent)
+    }
+}
+
+customElements.define("ueb-window", WindowElement)

js/entity/SimpleSerializationVectorEntity.js

@@ -1,4 +1,4 @@
-import VectorEntity from "./VectorEntity";
+import VectorEntity from "./VectorEntity"
 
 export default class SimpleSerializationVectorEntity extends VectorEntity {
 }

js/input/mouse/IMouseClick.js

@@ -0,0 +1,80 @@
+import IPointing from "./IPointing"
+
+/** @typedef {import("../../Blueprint").default} Blueprint */
+
+/**
+ * @template {HTMLElement} T
+ * @extends {IPointing<T>}
+ */
+export default class IMouseClick extends IPointing {
+
+    /** @type {(e: MouseEvent) => void} */
+    #mouseDownHandler
+
+    /** @type {(e: MouseEvent) => void} */
+    #mouseUpHandler
+
+    constructor(target, blueprint, options = {}) {
+        options.clickButton ??= 0
+        options.consumeEvent ??= true
+        options.exitAnyButton ??= true
+        options.looseTarget ??= false
+        super(target, blueprint, options)
+        this.clickedPosition = [0, 0]
+        let self = this
+
+        this.#mouseDownHandler = e => {
+            self.blueprint.setFocused(true)
+            switch (e.button) {
+                case self.options.clickButton:
+                    // Either doesn't matter or consider the click only when clicking on the target, not descandants
+                    if (self.options.looseTarget || e.target == e.currentTarget) {
+                        if (self.options.consumeEvent) {
+                            e.stopImmediatePropagation() // Captured, don't call anyone else
+                        }
+                        // Attach the listeners
+                        document.addEventListener("mouseup", self.#mouseUpHandler)
+                        self.clickedPosition = self.locationFromEvent(e)
+                        self.clicked(self.clickedPosition)
+                    }
+                    break
+                default:
+                    if (!self.options.exitAnyButton) {
+                        self.#mouseUpHandler(e)
+                    }
+                    break
+            }
+        }
+
+        this.#mouseUpHandler = e => {
+            if (!self.options.exitAnyButton || e.button == self.options.clickButton) {
+                if (self.options.consumeEvent) {
+                    e.stopImmediatePropagation() // Captured, don't call anyone else
+                }
+                // Remove the handlers of "mousemove" and "mouseup"
+                document.removeEventListener("mouseup", self.#mouseUpHandler)
+                self.unclicked()
+            }
+        }
+
+        this.listenEvents()
+    }
+
+    listenEvents() {
+        this.target.addEventListener("mousedown", this.#mouseDownHandler)
+        if (this.options.clickButton == 2) {
+            this.target.addEventListener("contextmenu", e => e.preventDefault())
+        }
+    }
+
+    unlistenEvents() {
+        this.target.removeEventListener("mousedown", this.#mouseDownHandler)
+    }
+
+    /* Subclasses will override the following methods */
+    clicked(location) {
+    }
+
+    unclicked(location) {
+    }
+}

js/input/mouse/IMouseClickDrag.js

@@ -1,12 +1,12 @@
 import Configuration from "../../Configuration"
 import IPointing from "./IPointing"
+import Utility from "../../Utility"
 
 /**
  * @typedef {import("../../Blueprint").default} Blueprint
  */
 
 /**
- * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
  * @template {HTMLElement} T
  * @extends {IPointing<T>}
  */
@@ -25,19 +25,26 @@ export default class IMouseClickDrag extends IPointing {
     #mouseUpHandler
 
     #trackingMouse = false
+    #movementListenedElement
+    #draggableElement
 
     started = false
+    stepSize = 1
+    clickedPosition = [0, 0]
+    mouseLocation = [0, 0]
 
     constructor(target, blueprint, options = {}) {
         options.clickButton ??= 0
         options.consumeEvent ??= true
         options.exitAnyButton ??= true
+        options.draggableElement ??= target
         options.looseTarget ??= false
         options.moveEverywhere ??= false
         super(target, blueprint, options)
-        this.clickedPosition = [0, 0]
+        this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
 
-        const movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
+        this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
+        this.#draggableElement = this.options.draggableElement
         let self = this
 
         this.#mouseDownHandler = e => {
@@ -50,7 +57,7 @@ export default class IMouseClickDrag extends IPointing {
                             e.stopImmediatePropagation() // Captured, don't call anyone else
                         }
                         // Attach the listeners
-                        movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
+                        self.#movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
                         document.addEventListener("mouseup", self.#mouseUpHandler)
                         self.clickedPosition = self.locationFromEvent(e)
                         self.clicked(self.clickedPosition)
@@ -69,13 +76,14 @@ export default class IMouseClickDrag extends IPointing {
                 e.stopImmediatePropagation() // Captured, don't call anyone else
             }
             // Delegate from now on to self.#mouseMoveHandler
-            movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
-            movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
+            self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
+            self.#movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
             // Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
             const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin)
             self.#trackingMouse = self.target.dispatchEvent(dragEvent) == false
             const location = self.locationFromEvent(e)
             // Do actual actions
+            this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
             self.startDrag(location)
             self.started = true
         }
@@ -98,8 +106,8 @@ export default class IMouseClickDrag extends IPointing {
                     e.stopImmediatePropagation() // Captured, don't call anyone else
                 }
                 // Remove the handlers of "mousemove" and "mouseup"
-                movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
-                movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
+                self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
+                self.#movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
                 document.removeEventListener("mouseup", self.#mouseUpHandler)
                 if (self.started) {
                     self.endDrag()
@@ -118,14 +126,14 @@ export default class IMouseClickDrag extends IPointing {
     }
 
     listenEvents() {
-        this.target.addEventListener("mousedown", this.#mouseDownHandler)
+        this.#draggableElement.addEventListener("mousedown", this.#mouseDownHandler)
         if (this.options.clickButton == 2) {
-            this.target.addEventListener("contextmenu", e => e.preventDefault())
+            this.#draggableElement.addEventListener("contextmenu", e => e.preventDefault())
         }
     }
 
     unlistenEvents() {
-        this.target.removeEventListener("mousedown", this.#mouseDownHandler)
+        this.#draggableElement.removeEventListener("mousedown", this.#mouseDownHandler)
     }
 
     getEvent(eventName) {

js/input/mouse/MouseIgnore.js

@@ -1,4 +1,4 @@
-import IMouseClickDrag from "./IMouseClickDrag";
+import IMouseClickDrag from "./IMouseClickDrag"
 
 /**
  * @typedef {import("../../element/PinElement").default} PinElement

js/input/mouse/MouseMoveDraggable.js

@@ -0,0 +1,31 @@
+import IMouseClickDrag from "./IMouseClickDrag"
+import Utility from "../../Utility"
+
+/**
+ * @typedef {import("../../Blueprint").default} Blueprint
+ * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
+ */
+
+/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
+export default class MouseMoveDraggable extends IMouseClickDrag {
+
+    dragTo(location, movement) {
+        const initialTargetLocation = [this.target.locationX, this.target.locationY]
+        const [mouseLocation, targetLocation] = this.stepSize > 1
+            ? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(initialTargetLocation, this.stepSize)]
+            : [location, initialTargetLocation]
+        const d = [
+            mouseLocation[0] - this.mouseLocation[0],
+            mouseLocation[1] - this.mouseLocation[1]
+        ]
+        if (d[0] == 0 && d[1] == 0) {
+            return
+        }
+        // Make sure it snaps on the grid
+        d[0] += targetLocation[0] - this.target.locationX
+        d[1] += targetLocation[1] - this.target.locationY
+        this.target.addLocation(d)
+        // Reassign the position of mouse
+        this.mouseLocation = mouseLocation
+    }
+}

js/input/mouse/MouseMoveNodes.js

@@ -1,5 +1,5 @@
-import Configuration from "../../Configuration"
 import IMouseClickDrag from "./IMouseClickDrag"
+import MouseMoveDraggable from "./MouseMoveDraggable"
 import Utility from "../../Utility"
 
 /**
@@ -7,21 +7,10 @@ import Utility from "../../Utility"
  * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
  */
 
-/**
- * @extends {IMouseClickDrag<ISelectableDraggableElement>}
- */
-export default class MouseMoveNodes extends IMouseClickDrag {
-
-    constructor(target, blueprint, options) {
-        super(target, blueprint, options)
-        this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
-        this.mouseLocation = [0, 0]
-    }
+/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
+export default class MouseMoveNodes extends MouseMoveDraggable {
 
     startDrag() {
-        // Get the current mouse position
-        this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
-
         if (!this.target.selected) {
             this.blueprint.unselectAll()
             this.target.setSelected(true)
@@ -37,17 +26,13 @@ export default class MouseMoveNodes extends IMouseClickDrag {
             mouseLocation[0] - this.mouseLocation[0],
             mouseLocation[1] - this.mouseLocation[1]
         ]
-
         if (d[0] == 0 && d[1] == 0) {
             return
         }
-
         // Make sure it snaps on the grid
         d[0] += targetLocation[0] - this.target.locationX
         d[1] += targetLocation[1] - this.target.locationY
-
         this.target.dispatchDragEvent(d)
-
         // Reassign the position of mouse
         this.mouseLocation = mouseLocation
     }

js/input/mouse/MouseOpenWindow.js

@@ -0,0 +1,26 @@
+import IMouseClick from "./IMouseClick"
+import WindowElement from "../../element/WindowElement"
+
+/**
+ * @template {HTMLElement} T
+ * @extends {IMouseClick<T>}
+ */
+export default class MouseOpenWindow extends IMouseClick {
+
+    #window
+
+    constructor(target, blueprint, options = {}) {
+        options.windowType ??= "window"
+        super(target, blueprint, options)
+    }
+
+    clicked(location) {
+    }
+
+    unclicked(location) {
+        this.#window = new WindowElement({
+            type: this.options.windowType
+        })
+        this.blueprint.append(this.#window)
+    }
+}

js/template/ColorPickerWindowTemplate.js

@@ -0,0 +1,7 @@
+import WindowTemplate from "./WindowTemplate"
+
+/** @typedef {import("../element/NodeElement").default} NodeElement */
+
+export default class ColorPickerWindowTemplate extends WindowTemplate {
+
+}

js/template/IDraggableTemplate.js

@@ -0,0 +1,47 @@
+import ITemplate from "./ITemplate"
+import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+
+/**
+ * @typedef {import("../element/IDraggableElement").default} IDraggableElement
+ */
+
+/**
+ * @template {ISelectableDraggableElement} T
+ * @extends {ITemplate<T>}
+ */
+export default class IDraggableTemplate extends ITemplate {
+
+    /** @param {T} element */
+    getDraggableElement(element) {
+        return element
+    }
+
+    createDraggableObject(element) {
+        return new MouseMoveDraggable(element, element.blueprint, {
+            draggableElement: this.getDraggableElement(element),
+            looseTarget: true,
+        })
+    }
+
+    /** @param {T} element */
+    createInputObjects(element) {
+        return [
+            ...super.createInputObjects(element),
+            this.createDraggableObject(element),
+        ]
+    }
+
+    /**
+     * @param {T} element
+     * @param {Map} changedProperties
+     */
+    update(element, changedProperties) {
+        super.update(element, changedProperties)
+        if (changedProperties.has("locationX")) {
+            element.style.setProperty("--ueb-position-x", `${element.locationX}`)
+        }
+        if (changedProperties.has("locationY")) {
+            element.style.setProperty("--ueb-position-y", `${element.locationY}`)
+        }
+    }
+}

js/template/ITemplate.js

@@ -18,15 +18,11 @@ export default class ITemplate {
         return this.#inputObjects
     }
 
-    /**
-     * @param {T} element
-     */
+    /** @param {T} element */
     constructed(element) {
     }
 
-    /**
-     * @param {T} element
-     */
+    /** @param {T} element */
     connectedCallback(element) {
     }
 
@@ -44,9 +40,7 @@ export default class ITemplate {
     update(element, changedProperties) {
     }
 
-    /**
-     * @param {T} element
-     */
+    /** @param {T} element */
     render(element) {
         return html``
     }
@@ -65,16 +59,12 @@ export default class ITemplate {
     updated(element, changedProperties) {
     }
 
-    /**
-     * @param {T} element
-     */
+    /** @param {T} element */
     inputSetup(element) {
         this.#inputObjects = this.createInputObjects(element)
     }
 
-    /**
-     * @param {T} element
-     */
+    /** @param {T} element */
     cleanup(element) {
         this.#inputObjects.forEach(v => v.unlistenDOMElement())
     }

js/template/LinearColorPinTemplate.js

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import MouseOpenWindow from "../input/mouse/MouseOpenWindow"
 import IInputPinTemplate from "./IInputPinTemplate"
 
 /**
@@ -20,6 +21,20 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
         this.#input = pin.querySelector(".ueb-pin-input")
     }
 
+    /**
+     * @param {PinElement} pin
+     * @returns {IInput[]}
+     */
+    createInputObjects(pin) {
+        return [
+            ...super.createInputObjects(pin),
+            new MouseOpenWindow(this.#input, pin.blueprint, {
+                moveEverywhere: true,
+                looseTarget: true
+            })
+        ]
+    }
+
     /**
      * @param {PinElement} pin
      */
@@ -40,11 +55,8 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
     renderInput(pin) {
         if (pin.isInput()) {
             return html`
-                <span
-                    class="ueb-pin-input"
-                    data-linear-color="${pin.defaultValue.toString()}"
-                    style="--ueb-linear-color:rgba(${pin.defaultValue.toString()})"
-                >
+                <span class="ueb-pin-input" data-linear-color="${pin.defaultValue.toString()}"
+                    .style="--ueb-linear-color:rgba(${pin.defaultValue.toString()})">
                 </span>
             `
         }

js/template/SelectableDraggableTemplate.js

@@ -1,3 +1,4 @@
+import IDraggableTemplate from "./IDraggableTemplate"
 import ITemplate from "./ITemplate"
 import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 
@@ -9,32 +10,18 @@ import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
  * @template {ISelectableDraggableElement} T
  * @extends {ITemplate<T>}
  */
-export default class SelectableDraggableTemplate extends ITemplate {
+export default class SelectableDraggableTemplate extends IDraggableTemplate {
 
-    /**
-     * @param {T} element
-     */
-    createInputObjects(element) {
-        return [
-            ...super.createInputObjects(element),
-            new MouseMoveNodes(element, element.blueprint, {
-                looseTarget: true
-            }),
-        ]
+    /** @param {T} element */
+    getDraggableElement(element) {
+        return element
     }
 
-    /**
-     * @param {T} element
-     * @param {Map} changedProperties
-     */
-    update(element, changedProperties) {
-        super.update(element, changedProperties)
-        if (changedProperties.has("locationX")) {
-            element.style.setProperty("--ueb-position-x", `${element.locationX}`)
-        }
-        if (changedProperties.has("locationY")) {
-            element.style.setProperty("--ueb-position-y", `${element.locationY}`)
-        }
+    createDraggableObject(element) {
+        return new MouseMoveNodes(element, element.blueprint, {
+            draggableElement: this.getDraggableElement(element),
+            looseTarget: true,
+        })
     }
 
     /**

js/template/WindowTemplate.js

@@ -0,0 +1,46 @@
+import { html } from "lit"
+import IDraggableTemplate from "./IDraggableTemplate"
+import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+
+/** @typedef {import("../element/WindowElement").default} WindowElement */
+
+/** @extends {SelectableDraggableTemplate<WindowElement>} */
+export default class WindowTemplate extends IDraggableTemplate {
+
+    static windowName = html`Window`
+
+    toggleAdvancedDisplayHandler
+
+    /** @param {WindowElement} element */
+    getDraggableElement(element) {
+        return element.querySelector(".ueb-window-top")
+    }
+
+    createDraggableObject(element) {
+        return new MouseMoveDraggable(element, element.blueprint, {
+            draggableElement: this.getDraggableElement(element),
+            looseTarget: true,
+            stepSize: 1,
+        })
+    }
+
+    /** @param {WindowElement} element */
+    render(element) {
+        return html`
+            <div class="ueb-window">
+                <div class="ueb-window-top">
+                    <div class="ueb-window-name">${this.constructor.windowName}</div>
+                    <div class="ueb-window-close">
+                        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                            <line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
+                            <line x1="30" y1="2" x2="2" y2="30" stroke="currentColor" stroke-width="4" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="ueb-window-content">
+                    Content
+                </div>
+            </div>
+        `
+    }
+}