Dropdown implementation, switch refactoring

* Various fixes

* Fix tests

* Dropdown names deduced from pin names

* Remove update callbacks

* Fix double pins issue

* return undefined if not switch

js/element/DropdownElement.js

@@ -0,0 +1,37 @@
+import DropdownTemplate from "../template/pin/DropdownTemplate.js"
+import IElement from "./IElement.js"
+
+/** @extends {IElement<Object, DropdownTemplate>} */
+export default class DropdownElement extends IElement {
+
+    static properties = {
+        ...super.properties,
+        options: {
+            type: Object,
+        },
+        selected: {
+            type: String,
+        },
+    }
+
+    constructor() {
+        super()
+        super.initialize({}, new DropdownTemplate())
+        this.options = /** @type {[String, String][]} */([])
+        this.selected = ""
+    }
+
+    /** @param {[String, String][]} options */
+    static newObject(options) {
+        const result = new DropdownElement()
+        return result
+    }
+
+    initialize() {
+        // Initialized in the constructor, this method does nothing
+    }
+
+    getValue() {
+        return this.template.getSelectedValue()
+    }
+}

js/element/IElement.js

@@ -15,8 +15,6 @@ import Configuration from "../Configuration.js"
  */
 export default class IElement extends LitElement {
 
-    #nextUpdatedCallbacks = []
-
     /** @type {Blueprint} */
     #blueprint
     get blueprint() {
@@ -83,11 +81,6 @@ export default class IElement extends LitElement {
         return this
     }
 
-    /** @param {PropertyValues} changedProperties */
-    shouldUpdate(changedProperties) {
-        return this.isInitialized && this.isConnected
-    }
-
     setup() {
         this.template.setup()
         this.isSetup = true
@@ -125,18 +118,6 @@ export default class IElement extends LitElement {
     updated(changedProperties) {
         super.updated(changedProperties)
         this.template.updated(changedProperties)
-        // Remember the array might change while iterating
-        for (const f of this.#nextUpdatedCallbacks) {
-            f(changedProperties)
-        }
-        this.#nextUpdatedCallbacks = []
-    }
-
-    addNextUpdatedCallbacks(callback, requestUpdate = false) {
-        this.#nextUpdatedCallbacks.push(callback)
-        if (requestUpdate) {
-            this.requestUpdate()
-        }
     }
 
     acknowledgeDelete() {

js/element/NodeElement.js

@@ -13,7 +13,6 @@ import Utility from "../Utility.js"
 import VariableAccessNodeTemplate from "../template/node/VariableAccessNodeTemplate.js"
 import VariableConversionNodeTemplate from "../template/node/VariableConversionNodeTemplate.js"
 import VariableOperationNodeTemplate from "../template/node/VariableOperationNodeTemplate.js"
-import UnknownPinEntity from "../entity/UnknownPinEntity.js"
 
 /**
  * @typedef {import("./IDraggableElement.js").DragEvent} DragEvent
@@ -90,7 +89,8 @@ export default class NodeElement extends ISelectableDraggableElement {
         // If selected, it will already drag, also must check if under nested comments, it must drag just once
         if (!this.selected && !this.#commentDragged) {
             this.#commentDragged = true
-            this.addNextUpdatedCallbacks(() => this.#commentDragged = false)
+            this.requestUpdate()
+            this.updateComplete.then(() => this.#commentDragged = false)
             this.addLocation(...e.detail.value)
         }
     }
@@ -193,11 +193,12 @@ export default class NodeElement extends ISelectableDraggableElement {
         }
     }
 
-    getUpdateComplete() {
-        return Promise.all([
-            super.getUpdateComplete(),
-            ...this.getPinElements().map(pin => pin.updateComplete)
-        ]).then(() => true)
+    async getUpdateComplete() {
+        let result = await super.getUpdateComplete()
+        for (const pin of this.getPinElements()) {
+            result &&= await pin.updateComplete
+        }
+        return result
     }
 
     /** @param {NodeElement} commentNode */

js/element/PinElement.js

@@ -1,5 +1,7 @@
 import BoolPinTemplate from "../template/pin/BoolPinTemplate.js"
+import Configuration from "../Configuration.js"
 import ElementFactory from "./ElementFactory.js"
+import EnumPinTemplate from "../template/pin/EnumPinTemplate.js"
 import ExecPinTemplate from "../template/pin/ExecPinTemplate.js"
 import Grammar from "../serialization/Grammar.js"
 import GuidEntity from "../entity/GuidEntity.js"
@@ -39,18 +41,19 @@ import VectorPinTemplate from "../template/pin/VectorPinTemplate.js"
 export default class PinElement extends IElement {
 
     static #inputPinTemplates = {
-        "/Script/CoreUObject.LinearColor": LinearColorPinTemplate,
-        "/Script/CoreUObject.Rotator": RotatorPinTemplate,
-        "/Script/CoreUObject.Vector": VectorPinTemplate,
-        "/Script/CoreUObject.Vector2D": Vector2DPinTemplate,
         "bool": BoolPinTemplate,
         "byte": IntPinTemplate,
+        "enum": EnumPinTemplate,
         "int": IntPinTemplate,
         "int64": Int64PinTemplate,
         "MUTABLE_REFERENCE": ReferencePinTemplate,
         "name": NamePinTemplate,
         "real": RealPinTemplate,
         "string": StringPinTemplate,
+        [Configuration.nodeType.linearColor]: LinearColorPinTemplate,
+        [Configuration.nodeType.rotator]: RotatorPinTemplate,
+        [Configuration.nodeType.vector]: VectorPinTemplate,
+        [Configuration.nodeType.vector2D]: Vector2DPinTemplate,
     }
 
     static properties = {

js/element/defineElements.js

@@ -1,5 +1,6 @@
 import ColorHandlerElement from "./ColorHandlerElement.js"
 import ColorSliderElement from "./ColorSliderElement.js"
+import DropdownElement from "./DropdownElement.js"
 import ElementFactory from "./ElementFactory.js"
 import InputElement from "./InputElement.js"
 import LinkElement from "./LinkElement.js"
@@ -9,20 +10,17 @@ import SelectorElement from "./SelectorElement.js"
 import WindowElement from "./WindowElement.js"
 
 export default function defineElements() {
-    customElements.define("ueb-color-handler", ColorHandlerElement)
-    ElementFactory.registerElement("ueb-color-handler", ColorHandlerElement)
-    customElements.define("ueb-input", InputElement)
-    ElementFactory.registerElement("ueb-input", InputElement)
-    customElements.define("ueb-link", LinkElement)
-    ElementFactory.registerElement("ueb-link", LinkElement)
-    customElements.define("ueb-node", NodeElement)
-    ElementFactory.registerElement("ueb-node", NodeElement)
-    customElements.define("ueb-pin", PinElement)
-    ElementFactory.registerElement("ueb-pin", PinElement)
-    customElements.define("ueb-selector", SelectorElement)
-    ElementFactory.registerElement("ueb-selector", SelectorElement)
-    customElements.define("ueb-ui-slider", ColorSliderElement)
-    ElementFactory.registerElement("ueb-ui-slider", ColorSliderElement)
-    customElements.define("ueb-window", WindowElement)
-    ElementFactory.registerElement("ueb-window", WindowElement)
+    const define = (tag, type) => {
+        customElements.define(tag, type)
+        ElementFactory.registerElement(tag, type)
+    }
+    define("ueb-color-handler", ColorHandlerElement)
+    define("ueb-dropdown", DropdownElement)
+    define("ueb-input", InputElement)
+    define("ueb-link", LinkElement)
+    define("ueb-node", NodeElement)
+    define("ueb-pin", PinElement)
+    define("ueb-selector", SelectorElement)
+    define("ueb-ui-slider", ColorSliderElement)
+    define("ueb-window", WindowElement)
 }