Initialize events handler in class

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