Window introduced

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>
+        `
+    }
+}