New templates, node advanced display, style fixes

js/template/ExecPinTemplate.js

@@ -15,7 +15,31 @@ export default class ExecPinTemplate extends PinTemplate {
     renderIcon(pin) {
         return html`
             <svg class="ueb-pin-icon-exec" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7.08a2 2 0 0 0 1.519-.698l4.843-5.651a1 1 0 0 0 0-1.302L10.6 1.7A2 2 0 0 0 9.08 1H2zm7.08 1a1 1 0 0 1 .76.35L14.682 8l-4.844 5.65a1 1 0 0 1-.759.35H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h7.08z"/>
+                <path d="
+                    M 2 1
+                    a 2 2 0 0 0 -2 2
+                    v 10
+                    a 2 2 0 0 0 2 2
+                    h 7.08
+                    a 2 2 0 0 0 1.519 -.698
+                    l 4.843 -5.651
+                    a 1 1 0 0 0 0 -1.302
+                    L 10.6 1.7
+                    A 2 2 0 0 0 9.08 1
+                    H 2
+                    z
+                    m 7.08 1
+                    a 1 1 0 0 1 .76 .35
+                    L 14.682 8
+                    l -4.844 5.65
+                    a 1 1 0 0 1 -.759 .35
+                    H 2
+                    a 1 1 0 0 1 -1 -1
+                    V 3
+                    a 1 1 0 0 1 1 -1
+                    h 7.08
+                    z
+                " />
             </svg>
         `
     }

js/template/IInputPinTemplate.js

@@ -0,0 +1,95 @@
+// @ts-check
+
+import html from "./html"
+import MouseIgnore from "../input/mouse/MouseIgnore"
+import PinTemplate from "./PinTemplate"
+import sanitizeText from "./sanitizeText"
+import Utility from "../Utility"
+
+/**
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+
+export default class IInputPinTemplate extends PinTemplate {
+
+    /** @type {HTMLElement} */
+    input = null
+    hasInput = true
+
+    /**
+     * @param {PinElement} pin
+     */
+    setup(pin) {
+        super.setup(pin)
+        if (this.input = pin.querySelector(".ueb-pin-input-content")) {
+            let self = this
+            this.onFocusHandler = (e) => {
+                pin.blueprint.dispatchEditTextEvent(true)
+            }
+            this.onFocusOutHandler = (e) => {
+                e.preventDefault()
+                document.getSelection().removeAllRanges() // Deselect text inside the input
+                self.acceptInput(pin)
+                pin.blueprint.dispatchEditTextEvent(false)
+            }
+            this.input.addEventListener("focus", this.onFocusHandler)
+            this.input.addEventListener("focusout", this.onFocusOutHandler)
+        }
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    cleanup(pin) {
+        super.cleanup(pin)
+        if (this.input) {
+            this.input.removeEventListener("focus", this.onFocusHandler)
+            this.input.removeEventListener("focusout", this.onFocusOutHandler)
+        }
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    createInputObjects(pin) {
+        if (pin.isInput()) {
+            return [
+                ...super.createInputObjects(pin),
+                new MouseIgnore(pin.querySelector(".ueb-pin-input-content"), pin.blueprint),
+            ]
+        }
+        return super.createInputObjects(pin)
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    getInput(pin) {
+        return Utility.sanitizeString(
+            /** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText
+        )
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    acceptInput(pin) {
+        pin.entity.DefaultValue = this.getInput(pin)
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    renderInput(pin) {
+        if (pin.isInput()) {
+            return html`
+                <div class="ueb-pin-input">
+                    <div class="ueb-pin-input-content" role="textbox" contenteditable="true">
+                        ${Utility.renderInputString(sanitizeText(pin.entity.getDefaultValue()))}
+                    </div>
+                </div>
+            `
+        }
+        return ""
+    }
+}

js/template/ITemplate.js

@@ -11,7 +11,11 @@
 export default class ITemplate {
 
     /** @type {IInput[]} */
-    inputObjects = []
+    #inputObjects = []
+
+    get inputObjects() {
+        return this.#inputObjects
+    }
 
     /**
      * @param {T} entity
@@ -32,14 +36,14 @@ export default class ITemplate {
      * @param {T} element
      */
     inputSetup(element) {
-        this.inputObjects = this.createInputObjects(element)
+        this.#inputObjects = this.createInputObjects(element)
     }
 
     /**
      * @param {T} element
      */
     cleanup(element) {
-        this.inputObjects.forEach(v => v.unlistenDOMElement())
+        this.#inputObjects.forEach(v => v.unlistenDOMElement())
     }
 
     /**

js/template/NodeTemplate.js

@@ -11,6 +11,8 @@ import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
 
 export default class NodeTemplate extends SelectableDraggableTemplate {
 
+    toggleAdvancedDisplayHandler
+
     /**
      * Computes the html content of the target element.
      * @param {NodeElement} node Graph node element
@@ -32,17 +34,36 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
                         <div class="ueb-node-inputs"></div>
                         <div class="ueb-node-outputs"></div>
                     </div>
-                </div>
-                <div class="ueb-node-expand">
-                    <span class="ueb-node-expand-icon"></span>
+                    ${node.entity.AdvancedPinDisplay ? html`
+                        <div class="ueb-node-expansion">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                fill="currentColor"
+                                class="ueb-node-expansion-icon"
+                                viewBox="4 2 24 24"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="
+                                        M 16.003 18.626
+                                        l 7.081 -7.081
+                                        L 25 13.46
+                                        l -8.997 8.998 -9.003 -9 1.917 -1.916
+                                        z
+                                    "
+                                />
+                            </svg>
+                        </div>
+                    ` : ""}
                 </div>
             </div>
         `
     }
 
     /**
-     * Applies the style to the element.
-     * @param {NodeElement} node Element of the graph
+     * @param {NodeElement} node
      */
     setup(node) {
         super.setup(node)
@@ -51,9 +72,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
         if (node.selected) {
             node.classList.add("ueb-selected")
         }
-        if (node.entity.AdvancedPinDisplay) {
-            node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString()
-        }
+        this.applyAdvancedPinDisplay(node)
         node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0]))
         node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1]))
         /** @type {HTMLElement} */
@@ -63,11 +82,24 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
         let pins = node.getPinEntities()
         pins.filter(v => v.isInput()).forEach(v => inputContainer.appendChild(new PinElement(v)))
         pins.filter(v => v.isOutput()).forEach(v => outputContainer.appendChild(new PinElement(v)))
+        let self = this
+        this.toggleAdvancedDisplayHandler = _ => {
+            node.toggleShowAdvancedPinDisplay()
+        }
+        node.querySelector(".ueb-node-expansion").addEventListener("click", this.toggleAdvancedDisplayHandler)
     }
 
     /**
-     * Applies the style to the element.
-     * @param {NodeElement} node Element of the graph
+     * @param {NodeElement} node
+     */
+    applyAdvancedPinDisplay(node) {
+        if (node.entity.AdvancedPinDisplay) {
+            node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString()
+        }
+    }
+
+    /**
+     * @param {NodeElement} node
      */
     applyRename(node) {
         const nodeName = node.entity.getFullName()

js/template/PinTemplate.js

@@ -14,6 +14,8 @@ import Utility from "../Utility"
 
 export default class PinTemplate extends ITemplate {
 
+    hasInput = false
+
     /**
      * @param {PinElement} pin
      * @returns {IInput[]}
@@ -27,10 +29,6 @@ export default class PinTemplate extends ITemplate {
         ]
     }
 
-    hasInput() {
-        return false
-    }
-
     /**
      * @param {PinElement} pin
      */

js/template/RealPinTemplate.js

@@ -0,0 +1,11 @@
+// @ts-check
+
+import PinTemplate from "./PinTemplate"
+
+/**
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+
+export default class RealPinTemplate extends PinTemplate {
+
+}

js/template/SelectableDraggableTemplate.js

@@ -1,7 +1,7 @@
 // @ts-check
 
-import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 import ITemplate from "./ITemplate"
+import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 import sanitizeText from "./sanitizeText"
 
 /**

js/template/StringPinTemplate.js

@@ -1,87 +1,17 @@
 // @ts-check
 
-import html from "./html"
-import MouseIgnore from "../input/mouse/MouseIgnore"
-import PinTemplate from "./PinTemplate"
-import Utility from "../Utility"
+import IInputPinTemplate from "./IInputPinTemplate"
 
 /**
  * @typedef {import("../element/PinElement").default} PinElement
  */
 
-export default class StringPinTemplate extends PinTemplate {
-
-    /** @type {HTMLElement} */
-    input = null
-
-    hasInput() {
-        return true
-    }
-
-    /**
-     * @param {PinElement} pin
-     */
-    getInput(pin) {
-        return Utility.sanitizeInputString(
-            /** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText
-        )
-    }
-
-    /**
-     * @param {PinElement} pin
-     */
-    renderInput(pin) {
-        if (pin.isInput()) {
-            return html`
-                <div class="ueb-pin-input">
-                    <div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
-                </div>
-            `
-        }
-        return ""
-    }
+export default class StringPinTemplate extends IInputPinTemplate {
 
     /**
      * @param {PinElement} pin
      */
     setup(pin) {
         super.setup(pin)
-        if (this.input = pin.querySelector(".ueb-pin-input-content")) {
-            this.onFocusHandler = (e) => {
-                pin.blueprint.dispatchEditTextEvent(true)
-            }
-            this.onFocusOutHandler = (e) => {
-                e.preventDefault()
-                document.getSelection().removeAllRanges() // Deselect text inside the input
-                pin.entity.DefaultValue = this.getInput(pin)
-                pin.blueprint.dispatchEditTextEvent(false)
-            }
-            this.input.addEventListener("focus", this.onFocusHandler)
-            this.input.addEventListener("focusout", this.onFocusOutHandler)
-        }
-    }
-
-    /**
-     * @param {PinElement} pin
-     */
-    cleanup(pin) {
-        super.cleanup(pin)
-        if (this.input) {
-            this.input.removeEventListener("focus", this.onFocusHandler)
-            this.input.removeEventListener("focusout", this.onFocusOutHandler)
-        }
-    }
-
-    /**
-     * @param {PinElement} pin
-     */
-    createInputObjects(pin) {
-        if (pin.isInput()) {
-            return [
-                ...super.createInputObjects(pin),
-                new MouseIgnore(pin.querySelector(".ueb-pin-input-content"), pin.blueprint),
-            ]
-        }
-        return super.createInputObjects(pin)
     }
 }