Make elements default constructible, testing wip

js/template/pin/BoolPinTemplate.js

@@ -2,9 +2,9 @@ import { html } from "lit"
 import MouseIgnore from "../../input/mouse/MouseIgnore"
 import PinTemplate from "./PinTemplate"
 
-/**
- * @extends PinTemplate<Boolean>
- */
+/** @typedef {import("lit").PropertyValues} PropertyValues */
+
+/** @extends PinTemplate<Boolean> */
 export default class BoolInputPinTemplate extends PinTemplate {
 
     /** @type {HTMLInputElement?} */
@@ -12,10 +12,14 @@ export default class BoolInputPinTemplate extends PinTemplate {
 
     #onChangeHandler = _ => this.element.setDefaultValue(this.#input.checked)
 
-    /** @param {Map} changedProperties */
+    /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         this.#input = this.element.querySelector(".ueb-pin-input")
+    }
+
+    setup() {
+        super.setup()
         this.#input?.addEventListener("change", this.#onChangeHandler)
     }
 

js/template/pin/IInputPinTemplate.js

@@ -3,6 +3,8 @@ import MouseIgnore from "../../input/mouse/MouseIgnore"
 import PinTemplate from "./PinTemplate"
 import Utility from "../../Utility"
 
+/** @typedef {import("lit").PropertyValues} PropertyValues */
+
 /**
  * @template T
  * @typedef {import("../../element/PinElement").default<T>} PinElement
@@ -39,15 +41,17 @@ export default class IInputPinTemplate extends PinTemplate {
 
     #onFocusOutHandler = () => this.setInputs(this.getInputs(), true)
 
-    /** @param {Map} changedProperties */
+    /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")])
-        if (this.#inputContentElements.length) {
-            this.#inputContentElements.forEach(element => {
-                element.addEventListener("focusout", this.#onFocusOutHandler)
-            })
-        }
+    }
+
+    setup() {
+        super.setup()
+        this.#inputContentElements.forEach(element => {
+            element.addEventListener("focusout", this.#onFocusOutHandler)
+        })
     }
 
     cleanup() {
@@ -75,10 +79,9 @@ export default class IInputPinTemplate extends PinTemplate {
         )
     }
 
-    /** @param {String[]?} values */
+    /** @param {String[]} values */
     setInputs(values = [], updateDefaultValue = true) {
-        // @ts-expect-error
-        this.#inputContentElements.forEach(this.constructor.singleLineInput
+        this.#inputContentElements.forEach(/** @type {typeof IInputPinTemplate } */(this.constructor).singleLineInput
             ? (elem, i) => elem.innerText = values[i]
             : (elem, i) => elem.innerText = values[i].replaceAll("\n", "")
         )
@@ -96,10 +99,8 @@ export default class IInputPinTemplate extends PinTemplate {
     }
 
     renderInput() {
-        // @ts-expect-error
-        const singleLine = this.constructor.singleLineInput
-        // @ts-expect-error
-        const selectOnFocus = this.constructor.selectOnFocus
+        const singleLine = /** @type {typeof IInputPinTemplate} */(this.constructor).singleLineInput
+        const selectOnFocus = /** @type {typeof IInputPinTemplate} */(this.constructor).selectOnFocus
         return html`
             <div class="ueb-pin-input">
                 <ueb-input .singleLine="${singleLine}" .selectOnFocus="${selectOnFocus}"

js/template/pin/InputTemplate.js

@@ -22,19 +22,20 @@ export default class InputTemplate extends ITemplate {
         /** @param {KeyboardEvent} e */
         e => {
             if (e.code == "Enter" && !e.shiftKey) {
-                    /** @type {HTMLElement} */(e.target).blur()
+                /** @type {HTMLElement} */(e.target).blur()
             }
         }
 
     /** @param {InputElement} element */
-    constructed(element) {
-        super.constructed(element)
+    initialize(element) {
+        super.initialize(element)
         this.element.classList.add("ueb-pin-input-content")
         this.element.setAttribute("role", "textbox")
         this.element.contentEditable = "true"
     }
 
-    connectedCallback() {
+    setup() {
+        super.setup()
         this.element.addEventListener("focus", this.#focusHandler)
         this.element.addEventListener("focusout", this.#focusoutHandler)
         if (this.element.singleLine) {
@@ -46,13 +47,10 @@ export default class InputTemplate extends ITemplate {
     }
 
     cleanup() {
+        super.cleanup()
         this.element.removeEventListener("focus", this.#focusHandler)
         this.element.removeEventListener("focusout", this.#focusoutHandler)
-        if (this.element.singleLine) {
-            this.element.removeEventListener("input", this.#inputSingleLineHandler)
-        }
-        if (this.element.blurOnEnter) {
-            this.element.removeEventListener("keydown", this.#onKeydownBlurOnEnterHandler)
-        }
+        this.element.removeEventListener("input", this.#inputSingleLineHandler)
+        this.element.removeEventListener("keydown", this.#onKeydownBlurOnEnterHandler)
     }
 }

js/template/pin/LinearColorPinTemplate.js

@@ -6,6 +6,7 @@ import PinTemplate from "./PinTemplate"
 
 /**
  * @typedef {import("../../element/WindowElement").default} WindowElement
+ * @typedef {import("../../element/WindowElement").WindowElementConstructor} WindowElementConstructor
  * @typedef {import("../../entity/LinearColorEntity").default} LinearColorEntity
  */
 
@@ -19,9 +20,10 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
     #launchColorPickerWindow = e => {
         e.preventDefault()
         this.element.blueprint.setFocused(true)
-        this.#window = /** @type {WindowElement} */ (
-            new (ElementFactory.getConstructor("ueb-window"))({
-                type: ColorPickerWindowTemplate,
+        /** @type {WindowElement} */
+        this.#window = /** @type {WindowElementConstructor} */(ElementFactory.getConstructor("ueb-window"))
+            .newObject({
+                type: new ColorPickerWindowTemplate(),
                 windowOptions: {
                     // The created window will use the following functions to get and set the color
                     getPinColor: () => this.element.defaultValue,
@@ -29,7 +31,6 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
                     setPinColor: color => this.element.setDefaultValue(color),
                 },
             })
-        )
         this.element.blueprint.append(this.#window)
         const windowApplyHandler = () => {
             this.element.setDefaultValue(

js/template/pin/PinTemplate.js

@@ -5,7 +5,10 @@ import MouseCreateLink from "../../input/mouse/MouseCreateLink"
 import SVGIcon from "../../SVGIcon"
 import Utility from "../../Utility"
 
-/** @typedef {import("../../input/IInput").default} IInput */
+/**
+ * @typedef {import("../../input/IInput").default} IInput
+ * @typedef {import("lit").PropertyValues} PropertyValues
+ */
 /**
  * @template T
  * @typedef {import("../../element/PinElement").default<T>} PinElement
@@ -23,8 +26,8 @@ export default class PinTemplate extends ITemplate {
         return this.#iconElement
     }
 
-    connectedCallback() {
-        super.connectedCallback()
+    setup() {
+        super.setup()
         this.element.nodeElement = this.element.closest("ueb-node")
     }
 
@@ -66,7 +69,7 @@ export default class PinTemplate extends ITemplate {
         return html``
     }
 
-    /** @param {Map} changedProperties */
+    /** @param {PropertyValues} changedProperties */
     updated(changedProperties) {
         super.updated(changedProperties)
         if (this.element.isInput() && changedProperties.has("isLinked")) {
@@ -77,8 +80,7 @@ export default class PinTemplate extends ITemplate {
         }
     }
 
-
-    /** @param {Map} changedProperties */
+    /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.getPinColor(this.element).cssText)