Initialize events handler in class

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "files.trimFinalNewlines": true,
-    "files.insertFinalNewline": true
+    "files.insertFinalNewline": true,
+    "javascript.format.semicolons": "remove"
 }

js/element/PinElement.js

@@ -103,8 +103,6 @@ export default class PinElement extends IElement {
     /** @type {NodeElement} */
     nodeElement
 
-    /** @type {HTMLElement} */
-    clickableElement
 
     connections = 0
 
@@ -166,10 +164,6 @@ export default class PinElement extends IElement {
         return this.entity.isOutput()
     }
 
-    getClickableElement() {
-        return this.clickableElement
-    }
-
     getLinkLocation() {
         return this.template.getLinkLocation()
     }

js/entity/IEntity.js

@@ -21,11 +21,9 @@ export default class IEntity extends Observable {
          * @param {Object} values
          * @param {String} prefix
          */
-        const defineAllAttributes = (target, attributes, values, prefix = "") => {
-            for (let attribute of Utility.mergeArrays(
-                Object.getOwnPropertyNames(attributes),
-                Object.getOwnPropertyNames(values ?? {})
-            )) {
+        const defineAllAttributes = (target, attributes, values = {}, prefix = "") => {
+            const valuesPropertyNames = Object.getOwnPropertyNames(values)
+            for (let attribute of Utility.mergeArrays(Object.getOwnPropertyNames(attributes), valuesPropertyNames)) {
                 let value = Utility.objectGet(values, [attribute])
                 let defaultValue = attributes[attribute]
                 let defaultType = Utility.getType(defaultValue)
@@ -39,7 +37,8 @@ export default class IEntity extends Observable {
                         `Attribute ${prefix}${attribute} in the serialized data is not defined in ${this.constructor.name}.attributes`
                     )
                 } else if (
-                    !(attribute in values)
+                    valuesPropertyNames.length > 0
+                    && !(attribute in values)
                     && defaultValue !== undefined
                     && !(defaultValue instanceof TypeInitialization && (!defaultValue.showDefault || defaultValue.ignored))
                 ) {

js/input/mouse/IMouseClick.js

@@ -8,11 +8,45 @@ import IPointing from "./IPointing"
  */
 export default class IMouseClick extends IPointing {
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseDownHandler
+    #mouseDownHandler =
+        /** @param {MouseEvent} e */
+        e => {
+            this.blueprint.setFocused(true)
+            switch (e.button) {
+                case this.options.clickButton:
+                    // Either doesn't matter or consider the click only when clicking on the target, not descandants
+                    if (!this.options.strictTarget || e.target == e.currentTarget) {
+                        if (this.options.consumeEvent) {
+                            e.stopImmediatePropagation() // Captured, don't call anyone else
+                        }
+                        // Attach the listeners
+                        document.addEventListener("mouseup", this.#mouseUpHandler)
+                        this.clickedPosition = this.locationFromEvent(e)
+                        this.clicked(this.clickedPosition)
+                    }
+                    break
+                default:
+                    if (!this.options.exitAnyButton) {
+                        this.#mouseUpHandler(e)
+                    }
+                    break
+            }
+        }
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseUpHandler
+    #mouseUpHandler =
+        /** @param {MouseEvent} e */
+        e => {
+            if (!this.options.exitAnyButton || e.button == this.options.clickButton) {
+                if (this.options.consumeEvent) {
+                    e.stopImmediatePropagation() // Captured, don't call anyone else
+                }
+                // Remove the handlers of "mousemove" and "mouseup"
+                document.removeEventListener("mouseup", this.#mouseUpHandler)
+                this.unclicked()
+            }
+        }
+
+    clickedPosition = [0, 0]
 
     constructor(target, blueprint, options = {}) {
         options.clickButton ??= 0
@@ -20,43 +54,6 @@ export default class IMouseClick extends IPointing {
         options.exitAnyButton ??= true
         options.strictTarget ??= 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.strictTarget || 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()
     }
 

js/input/mouse/IMouseClickDrag.js

@@ -1,39 +1,117 @@
 import Configuration from "../../Configuration"
+import IDraggableElement from "../../element/IDraggableElement"
 import IPointing from "./IPointing"
 import Utility from "../../Utility"
 
 /**
  * @typedef {import("../../Blueprint").default} Blueprint
- * @typedef {import("../../element/IDraggableElement").default} IDraggableElement
+ * @typedef {import("../../element/IElement").default} IElement
  */
 
 /**
- * @template {IDraggableElement} T
+ * @template {IElement} T
  * @extends {IPointing<T>}
  */
 export default class IMouseClickDrag extends IPointing {
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseDownHandler
+    #mouseDownHandler =
+        /** @param {MouseEvent} e  */
+        e => {
+            this.blueprint.setFocused(true)
+            switch (e.button) {
+                case this.options.clickButton:
+                    // Either doesn't matter or consider the click only when clicking on the parent, not descandants
+                    if (!this.options.strictTarget || e.target == e.currentTarget) {
+                        if (this.options.consumeEvent) {
+                            e.stopImmediatePropagation() // Captured, don't call anyone else
+                        }
+                        // Attach the listeners
+                        this.#movementListenedElement.addEventListener("mousemove", this.#mouseStartedMovingHandler)
+                        document.addEventListener("mouseup", this.#mouseUpHandler)
+                        this.clickedPosition = this.locationFromEvent(e)
+                        if (this.target instanceof IDraggableElement) {
+                            this.clickedOffset = [
+                                this.clickedPosition[0] - this.target.locationX,
+                                this.clickedPosition[1] - this.target.locationY,
+                            ]
+                        }
+                        this.clicked(this.clickedPosition)
+                    }
+                    break
+                default:
+                    if (!this.options.exitAnyButton) {
+                        this.#mouseUpHandler(e)
+                    }
+                    break
+            }
+        }
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseStartedMovingHandler
+    #mouseStartedMovingHandler =
+        /** @param {MouseEvent} e  */
+        e => {
+            if (this.options.consumeEvent) {
+                e.stopImmediatePropagation() // Captured, don't call anyone else
+            }
+            // Delegate from now on to this.#mouseMoveHandler
+            this.#movementListenedElement.removeEventListener("mousemove", this.#mouseStartedMovingHandler)
+            this.#movementListenedElement.addEventListener("mousemove", this.#mouseMoveHandler)
+            // Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
+            const dragEvent = this.getEvent(Configuration.trackingMouseEventName.begin)
+            this.#trackingMouse = this.target.dispatchEvent(dragEvent) == false
+            const location = this.locationFromEvent(e)
+            // Do actual actions
+            this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
+            this.startDrag(location)
+            this.started = true
+        }
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseMoveHandler
+    #mouseMoveHandler =
+        /** @param {MouseEvent} e  */
+        e => {
+            if (this.options.consumeEvent) {
+                e.stopImmediatePropagation() // Captured, don't call anyone else
+            }
+            const location = this.locationFromEvent(e)
+            const movement = [e.movementX, e.movementY]
+            this.dragTo(location, movement)
+            if (this.#trackingMouse) {
+                this.blueprint.mousePosition = this.locationFromEvent(e)
+            }
+        }
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseUpHandler
+    #mouseUpHandler =
+        /** @param {MouseEvent} e  */
+        e => {
+            if (!this.options.exitAnyButton || e.button == this.options.clickButton) {
+                if (this.options.consumeEvent) {
+                    e.stopImmediatePropagation() // Captured, don't call anyone else
+                }
+                // Remove the handlers of "mousemove" and "mouseup"
+                this.#movementListenedElement.removeEventListener("mousemove", this.#mouseStartedMovingHandler)
+                this.#movementListenedElement.removeEventListener("mousemove", this.#mouseMoveHandler)
+                document.removeEventListener("mouseup", this.#mouseUpHandler)
+                if (this.started) {
+                    this.endDrag()
+                }
+                this.unclicked()
+                if (this.#trackingMouse) {
+                    const dragEvent = this.getEvent(Configuration.trackingMouseEventName.end)
+                    this.target.dispatchEvent(dragEvent)
+                    this.#trackingMouse = false
+                }
+                this.started = false
+            }
+        }
 
     #trackingMouse = false
     #movementListenedElement
     #draggableElement
 
+    clickedOffset = [0, 0]
+    clickedPosition = [0, 0]
+    mouseLocation = [0, 0]
     started = false
     stepSize = 1
-    clickedPosition = [0, 0]
-    clickedOffset = [0, 0]
-    mouseLocation = [0, 0]
 
     /**
      * 
@@ -52,89 +130,8 @@ export default class IMouseClickDrag extends IPointing {
         options.strictTarget ??= false
         super(target, blueprint, options)
         this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
-
         this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
         this.#draggableElement = this.options.draggableElement
-        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 parent, not descandants
-                    if (!self.options.strictTarget || e.target == e.currentTarget) {
-                        if (self.options.consumeEvent) {
-                            e.stopImmediatePropagation() // Captured, don't call anyone else
-                        }
-                        // Attach the listeners
-                        self.#movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
-                        document.addEventListener("mouseup", self.#mouseUpHandler)
-                        self.clickedPosition = self.locationFromEvent(e)
-                        self.clickedOffset = [
-                            self.clickedPosition[0] - self.target.locationX,
-                            self.clickedPosition[1] - self.target.locationY,
-                        ]
-                        self.clicked(self.clickedPosition)
-                    }
-                    break
-                default:
-                    if (!self.options.exitAnyButton) {
-                        self.#mouseUpHandler(e)
-                    }
-                    break
-            }
-        }
-
-        this.#mouseStartedMovingHandler = e => {
-            if (self.options.consumeEvent) {
-                e.stopImmediatePropagation() // Captured, don't call anyone else
-            }
-            // Delegate from now on to 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
-        }
-
-        this.#mouseMoveHandler = e => {
-            if (self.options.consumeEvent) {
-                e.stopImmediatePropagation() // Captured, don't call anyone else
-            }
-            const location = self.locationFromEvent(e)
-            const movement = [e.movementX, e.movementY]
-            self.dragTo(location, movement)
-            if (self.#trackingMouse) {
-                self.blueprint.mousePosition = self.locationFromEvent(e)
-            }
-        }
-
-        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"
-                self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
-                self.#movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
-                document.removeEventListener("mouseup", self.#mouseUpHandler)
-                if (self.started) {
-                    self.endDrag()
-                }
-                self.unclicked()
-                if (self.#trackingMouse) {
-                    const dragEvent = self.getEvent(Configuration.trackingMouseEventName.end)
-                    self.target.dispatchEvent(dragEvent)
-                    self.#trackingMouse = false
-                }
-                self.started = false
-            }
-        }
 
         this.listenEvents()
     }

js/input/mouse/IMouseWheel.js

@@ -3,11 +3,17 @@ import IPointing from "./IPointing"
 
 export default class IMouseWheel extends IPointing {
 
-    /** @type {(e: WheelEvent) => void} */
-    #mouseWheelHandler
+    #mouseWheelHandler =
+        /** @param {WheelEvent} e */
+        e => {
+            e.preventDefault()
+            const location = this.locationFromEvent(e)
+            this.wheel(Math.sign(e.deltaY * Configuration.mouseWheelFactor), location)
+        }
 
-    /** @type {(e: WheelEvent) => void} */
-    #mouseParentWheelHandler
+    #mouseParentWheelHandler =
+        /** @param {WheelEvent} e */
+        e => e.preventDefault()
 
     /**
      * @param {HTMLElement} target
@@ -19,18 +25,6 @@ export default class IMouseWheel extends IPointing {
         options.strictTarget ??= false
         super(target, blueprint, options)
         this.strictTarget = options.strictTarget
-
-        const self = this
-        this.#mouseWheelHandler = e => {
-            e.preventDefault()
-            const location = self.locationFromEvent(e)
-            self.wheel(Math.sign(e.deltaY * Configuration.mouseWheelFactor), location)
-        }
-        this.#mouseParentWheelHandler = e => e.preventDefault()
-
-        if (this.blueprint.focused) {
-            this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false)
-        }
     }
 
     listenEvents() {

js/input/mouse/MouseClickAction.js

@@ -1,28 +0,0 @@
-import IMouseClick from "./IMouseClick"
-
-export default class MouseClickAction extends IMouseClick {
-
-    static #ignoreEvent =
-        /** @param {MouseClickAction} self */
-        self => { }
-
-    constructor(
-        target,
-        blueprint,
-        options,
-        onMouseDown = MouseClickAction.#ignoreEvent,
-        onMouseUp = MouseClickAction.#ignoreEvent
-    ) {
-        super(target, blueprint, options)
-        this.onMouseDown = onMouseDown
-        this.onMouseUp = onMouseUp
-    }
-
-    clicked() {
-        this.onMouseDown(this)
-    }
-
-    unclicked() {
-        this.onMouseUp(this)
-    }
-}

js/input/mouse/MouseCreateLink.js

@@ -9,11 +9,39 @@ export default class MouseCreateLink extends IMouseClickDrag {
     /** @type {NodeListOf<PinElement>} */
     #listenedPins
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseenterHandler
+    #mouseenterHandler =
+        /** @param {MouseEvent} e */
+        e => {
+            if (!this.enteredPin) {
+                this.linkValid = false
+                this.enteredPin = /** @type {PinElement} */ (e.target)
+                const a = this.enteredPin
+                const b = this.target
+                if (a.getNodeElement() == b.getNodeElement()) {
+                    this.link.setMessageSameNode()
+                } else if (a.isOutput() == b.isOutput()) {
+                    this.link.setMessageDirectionsIncompatible()
+                } else if (a.isOutput() == b.isOutput()) {
+                    this.link.setMessageDirectionsIncompatible()
+                } else if (this.blueprint.getLinks([a, b]).length) {
+                    this.link.setMessageReplaceLink()
+                    this.linkValid = true
+                } else {
+                    this.link.setMessageCorrect()
+                    this.linkValid = true
+                }
+            }
+        }
 
-    /** @type {(e: MouseEvent) => void} */
-    #mouseleaveHandler
+    #mouseleaveHandler =
+        /** @param {MouseEvent} e */
+        e => {
+            if (this.enteredPin == e.target) {
+                this.enteredPin = null
+                this.linkValid = false
+                this.link?.setMessagePlaceNode()
+            }
+        }
 
     /** @type {LinkElement?} */
     link
@@ -23,39 +51,6 @@ export default class MouseCreateLink extends IMouseClickDrag {
 
     linkValid = false
 
-    constructor(target, blueprint, options) {
-        super(target, blueprint, options)
-        let self = this
-        this.#mouseenterHandler = e => {
-            if (!self.enteredPin) {
-                self.linkValid = false
-                self.enteredPin = /** @type {PinElement} */ (e.target)
-                const a = self.enteredPin
-                const b = self.target
-                if (a.getNodeElement() == b.getNodeElement()) {
-                    self.link.setMessageSameNode()
-                } else if (a.isOutput() == b.isOutput()) {
-                    self.link.setMessageDirectionsIncompatible()
-                } else if (a.isOutput() == b.isOutput()) {
-                    self.link.setMessageDirectionsIncompatible()
-                } else if (self.blueprint.getLinks([a, b]).length) {
-                    self.link.setMessageReplaceLink()
-                    self.linkValid = true
-                } else {
-                    self.link.setMessageCorrect()
-                    self.linkValid = true
-                }
-            }
-        }
-        this.#mouseleaveHandler = e => {
-            if (self.enteredPin == e.target) {
-                self.enteredPin = null
-                self.linkValid = false
-                self.link?.setMessagePlaceNode()
-            }
-        }
-    }
-
     startDrag(location) {
         this.link = new LinkElement(this.target, null)
         this.blueprint.linksContainerElement.prepend(this.link)
@@ -63,8 +58,9 @@ export default class MouseCreateLink extends IMouseClickDrag {
         this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
         this.#listenedPins.forEach(pin => {
             if (pin != this.target) {
-                pin.getClickableElement().addEventListener("mouseenter", this.#mouseenterHandler)
-                pin.getClickableElement().addEventListener("mouseleave", this.#mouseleaveHandler)
+                const clickableElement = pin.template.getClickableElement()
+                clickableElement.addEventListener("mouseenter", this.#mouseenterHandler)
+                clickableElement.addEventListener("mouseleave", this.#mouseleaveHandler)
             }
         })
         this.link.startDragging()

js/template/BoolPinTemplate.js

@@ -10,18 +10,18 @@ export default class BoolPinTemplate extends PinTemplate {
     /** @type {HTMLInputElement} */
     #input
 
+    #onChangeHandler = _ => this.element.setDefaultValue(this.#input.checked)
+
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         this.#input = this.element.querySelector(".ueb-pin-input")
-        let self = this
-        this.onChangeHandler = _ => this.element.setDefaultValue(self.#input.checked)
-        this.#input.addEventListener("change", this.onChangeHandler)
+        this.#input.addEventListener("change", this.#onChangeHandler)
     }
 
     cleanup() {
         super.cleanup()
-        this.#input.removeEventListener("change", this.onChangeHandler)
+        this.#input.removeEventListener("change", this.#onChangeHandler)
     }
 
     createInputObjects() {

js/template/LinearColorPinTemplate.js

@@ -2,7 +2,6 @@ import { html } from "lit"
 import ColorPickerWindowTemplate from "./ColorPickerWindowTemplate"
 import Configuration from "../Configuration"
 import IInputPinTemplate from "./IInputPinTemplate"
-import MouseClickAction from "../input/mouse/MouseClickAction"
 import WindowElement from "../element/WindowElement"
 
 /**
@@ -19,44 +18,40 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
     /** @type {WindowElement} */
     #window
 
+    #launchColorPickerWindow =
+        /** @param {MouseEvent} e */
+        e => {
+            //e.preventDefault()
+            this.#window = new WindowElement({
+                type: ColorPickerWindowTemplate,
+                windowOptions: {
+                    // The created window will use the following functions to get and set the color
+                    getPinColor: () => this.element.defaultValue,
+                    /** @param {LinearColorEntity} color */
+                    setPinColor: color => this.element.setDefaultValue(color),
+                },
+            })
+            this.element.blueprint.append(this.#window)
+            const windowApplyHandler = () => {
+                this.element.setDefaultValue(
+                /** @type {ColorPickerWindowTemplate} */(this.#window.template).color
+                )
+            }
+            const windowCloseHandler = () => {
+                this.#window.removeEventListener(Configuration.windowApplyEventName, windowApplyHandler)
+                this.#window.removeEventListener(Configuration.windowCloseEventName, windowCloseHandler)
+                this.#window = null
+            }
+            this.#window.addEventListener(Configuration.windowApplyEventName, windowApplyHandler)
+            this.#window.addEventListener(Configuration.windowCloseEventName, windowCloseHandler)
+        }
+
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         this.#input = this.element.querySelector(".ueb-pin-input")
     }
 
-    createInputObjects() {
-        return [
-            ...super.createInputObjects(),
-            new MouseClickAction(this.#input, this.element.blueprint, undefined,
-                inputInstance => {
-                    this.#window = new WindowElement({
-                        type: ColorPickerWindowTemplate,
-                        windowOptions: {
-                            // The created window will use the following functions to get and set the color
-                            getPinColor: () => this.element.defaultValue,
-                            /** @param {LinearColorEntity} color */
-                            setPinColor: color => this.element.setDefaultValue(color),
-                        },
-                    })
-                    this.element.blueprint.append(this.#window)
-                    const windowApplyHandler = () => {
-                        this.element.setDefaultValue(
-                            /** @type {ColorPickerWindowTemplate} */(this.#window.template).color
-                        )
-                    }
-                    const windowCloseHandler = () => {
-                        this.#window.removeEventListener(Configuration.windowApplyEventName, windowApplyHandler)
-                        this.#window.removeEventListener(Configuration.windowCloseEventName, windowCloseHandler)
-                        this.#window = null
-                    }
-                    this.#window.addEventListener(Configuration.windowApplyEventName, windowApplyHandler)
-                    this.#window.addEventListener(Configuration.windowCloseEventName, windowCloseHandler)
-                },
-            ),
-        ]
-    }
-
     getInputs() {
         return [this.#input.dataset.linearColor]
     }
@@ -69,6 +64,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
         if (this.element.isInput() && !this.element.isLinked) {
             return html`
                 <span class="ueb-pin-input" data-linear-color="${this.element.defaultValue.toString()}"
+                    @click="${this.#launchColorPickerWindow}"
                     style="--ueb-linear-color: rgba(${this.element.defaultValue.toString()})">
                 </span>
             `

js/template/NodeTemplate.js

@@ -7,7 +7,10 @@ import PinElement from "../element/PinElement"
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class NodeTemplate extends ISelectableDraggableTemplate {
 
-    toggleAdvancedDisplayHandler
+    toggleAdvancedDisplayHandler = _ => {
+        this.element.toggleShowAdvancedPinDisplay()
+        this.element.addNextUpdatedCallbacks(() => this.element.dispatchReflowEvent(), true)
+    }
 
     render() {
         return html`
@@ -50,7 +53,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     }
 
     /** @param {Map} changedProperties */
-    async firstUpdated(changedProperties) {
+    firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         const inputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-inputs"))
         const outputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-outputs"))
@@ -62,10 +65,6 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                 outputContainer.appendChild(p)
             }
         })
-        this.toggleAdvancedDisplayHandler = _ => {
-            this.element.toggleShowAdvancedPinDisplay()
-            this.element.addNextUpdatedCallbacks(() => this.element.dispatchReflowEvent(), true)
-        }
         this.element.nodeNameElement = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-name-text"))
     }
 

js/template/PinTemplate.js

@@ -18,6 +18,12 @@ import Utility from "../Utility"
  */
 export default class PinTemplate extends ITemplate {
 
+    /** @param {PinElement<T>} element */
+    constructed(element) {
+        super.constructed(element)
+        this.element.dataset.id = this.element.GetPinIdValue()
+    }
+
     connectedCallback() {
         super.connectedCallback()
         this.element.nodeElement = this.element.closest("ueb-node")
@@ -26,7 +32,7 @@ export default class PinTemplate extends ITemplate {
     /** @returns {IInput[]} */
     createInputObjects() {
         return [
-            new MouseCreateLink(this.element.clickableElement, this.element.blueprint, {
+            new MouseCreateLink(this.getClickableElement(), this.element.blueprint, {
                 moveEverywhere: true,
             })
         ]
@@ -66,13 +72,6 @@ export default class PinTemplate extends ITemplate {
         return nothing
     }
 
-    /** @param {Map} changedProperties */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties)
-        this.element.dataset.id = this.element.GetPinIdValue()
-        this.element.clickableElement = this.element
-    }
-
     getLinkLocation() {
         const rect = this.element.querySelector(".ueb-pin-icon").getBoundingClientRect()
         const location = Utility.convertLocation(
@@ -81,4 +80,8 @@ export default class PinTemplate extends ITemplate {
         )
         return this.element.blueprint.compensateTranslation(location)
     }
+
+    getClickableElement() {
+        return this.element
+    }
 }