Adapt input interface for multiple fields

js/element/ISelectableDraggableElement.js

@@ -24,9 +24,7 @@ export default class ISelectableDraggableElement extends IElement {
         this.selected = false
 
         let self = this
-        this.dragHandler = (e) => {
-            self.addLocation(e.detail.value)
-        }
+        this.dragHandler = e => self.addLocation(e.detail.value)
     }
 
     #setSelected(value = true) {

js/element/PinElement.js

@@ -1,5 +1,6 @@
 // @ts-check
 
+import BoolPinTemplate from "../template/BoolPinTemplate"
 import ExecPinTemplate from "../template/ExecPinTemplate"
 import IElement from "./IElement"
 import LinkElement from "./LinkElement"
@@ -21,6 +22,7 @@ import Utility from "../Utility"
 export default class PinElement extends IElement {
 
     static #typeTemplateMap = {
+        "bool": BoolPinTemplate,
         "exec": ExecPinTemplate,
         "real": RealPinTemplate,
         "string": StringPinTemplate,

js/template/BoolPinTemplate.js

@@ -0,0 +1,61 @@
+// @ts-check
+
+import html from "./html"
+import IInputPinTemplate from "./IInputPinTemplate"
+
+/**
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+
+export default class BoolPinTemplate extends IInputPinTemplate {
+
+    /** @type {HTMLInputElement} */
+    #input
+
+    /**
+     * @param {PinElement} pin
+     */
+    setup(pin) {
+        super.setup(pin)
+        this.#input = pin.querySelector(".ueb-pin-input")
+        let self = this
+        this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false"
+        this.#input.addEventListener("change", this.onChangeHandler)
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    cleanup(pin) {
+        super.cleanup(pin)
+        this.#input.removeEventListener("change", this.onChangeHandler)
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    getInputs(pin) {
+        return [this.#input.checked ? "true" : "false"]
+    }
+
+    /**
+     * @param {PinElement} pin
+     * @param {String[]?} value
+     */
+    setInputs(pin, value = []) {
+        pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin)
+        this.#input.checked = pin.entity.DefaultValue == "true"
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    renderInput(pin) {
+        if (pin.isInput()) {
+            return html`
+                <input type="checkbox" class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""} />
+            `
+        }
+        return super.renderInput(pin)
+    }
+}

js/template/IInputPinTemplate.js

@@ -3,7 +3,6 @@
 import html from "./html"
 import MouseIgnore from "../input/mouse/MouseIgnore"
 import PinTemplate from "./PinTemplate"
-import sanitizeText from "./sanitizeText"
 import Utility from "../Utility"
 
 /**
@@ -12,8 +11,8 @@ import Utility from "../Utility"
 
 export default class IInputPinTemplate extends PinTemplate {
 
-    /** @type {HTMLElement} */
-    input = null
+    /** @type {HTMLElement[]} */
+    #inputContentElements
     hasInput = true
 
     /**
@@ -21,20 +20,23 @@ export default class IInputPinTemplate extends PinTemplate {
      */
     setup(pin) {
         super.setup(pin)
-        if (this.input = pin.querySelector(".ueb-pin-input-content")) {
-            this.setInput(pin, pin.entity.DefaultValue)
+        this.#inputContentElements = /** @type {HTMLElement[]} */(
+            [...pin.querySelectorAll(".ueb-pin-input-content")]
+        )
+        if (this.#inputContentElements.length) {
+            this.setInputs(pin, [pin.entity.DefaultValue])
             let self = this
-            this.onFocusHandler = (e) => {
-                pin.blueprint.dispatchEditTextEvent(true)
-            }
-            this.onFocusOutHandler = (e) => {
+            this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true)
+            this.onFocusOutHandler = e => {
                 e.preventDefault()
                 document.getSelection().removeAllRanges() // Deselect text inside the input
-                self.setInput(pin, this.getInput(pin))
+                self.setInputs(pin, this.getInputs(pin))
                 pin.blueprint.dispatchEditTextEvent(false)
             }
-            this.input.addEventListener("focus", this.onFocusHandler)
-            this.input.addEventListener("focusout", this.onFocusOutHandler)
+            this.#inputContentElements.forEach(element => {
+                element.addEventListener("focus", this.onFocusHandler)
+                element.addEventListener("focusout", this.onFocusOutHandler)
+            })
         }
     }
 
@@ -43,43 +45,43 @@ export default class IInputPinTemplate extends PinTemplate {
      */
     cleanup(pin) {
         super.cleanup(pin)
-        if (this.input) {
-            this.input.removeEventListener("focus", this.onFocusHandler)
-            this.input.removeEventListener("focusout", this.onFocusOutHandler)
-        }
+        this.#inputContentElements.forEach(element => {
+            element.removeEventListener("focus", this.onFocusHandler)
+            element.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)
+        return [
+            ...super.createInputObjects(pin),
+            ...this.#inputContentElements.map(element => new MouseIgnore(element, pin.blueprint))
+        ]
     }
 
     /**
      * @param {PinElement} pin
      */
     getInput(pin) {
-        return Utility.encodeInputString(
-            /** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText
-        )
+        return this.getInputs(pin).reduce((acc, cur) => acc + cur, "")
     }
 
     /**
      * @param {PinElement} pin
-     * @param {String} value
      */
-    setInput(pin, value) {
+    getInputs(pin) {
+        return this.#inputContentElements.map(element => Utility.encodeInputString(element.innerText))
+    }
+
+    /**
+     * @param {PinElement} pin
+     * @param {String[]?} values
+     */
+    setInputs(pin, values = []) {
         pin.entity.DefaultValue = this.getInput(pin)
-        pin.querySelector(".ueb-pin-input-content")
-            // @ts-expect-error
-            .innerText = Utility.decodeInputString(value)
+        this.#inputContentElements.forEach((element, i) => element.innerText = Utility.decodeInputString(values[i]))
     }
 
     /**

js/template/RealPinTemplate.js

@@ -11,14 +11,14 @@ export default class RealPinTemplate extends IInputPinTemplate {
 
     /**
      * @param {PinElement} pin
-     * @param {String} value
+     * @param {String[]?} values
      */
-    setInput(pin, value) {
-        let num = parseFloat(this.getInput(pin))
+    setInputs(pin, values = []) {
+        let num = parseFloat(values.length ? values[0] : this.getInput(pin))
         if (isNaN(num)) {
             num = parseFloat(pin.entity.AutogeneratedDefaultValue)
         }
-        value = Utility.minDecimals(num)
-        super.setInput(pin, value)
+        values[0] = Utility.minDecimals(num)
+        super.setInputs(pin, values)
     }
 }