Various improvements

js/template/ColorPickerWindowTemplate.js

@@ -124,9 +124,10 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
 
     #tempColor = new LinearColorEntity()
 
-    #colorHexReplace(channel, value) {
+    #colorHexReplace(channel, value, opaque = false) {
         const colorHex = this.color.toRGBAString()
-        return `${colorHex.substring(0, 2 * channel)}${value}${colorHex.substring(2 + 2 * channel)}`
+        const result = `${colorHex.substring(0, 2 * channel)}${value}${colorHex.substring(2 + 2 * channel)}`
+        return opaque ? `${result.substring(0, 6)}FF` : result
     }
 
     connectedCallback() {
@@ -225,7 +226,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
         let channelValue = 0
         let background = ""
         const getCommonBackground = channel =>
-            `linear-gradient(to right, #${this.#colorHexReplace(channel, '00')}, #${this.#colorHexReplace(channel, 'ff')})`
+            `linear-gradient(to right, #${this.#colorHexReplace(channel, '00', true)}, #${this.#colorHexReplace(channel, 'ff', true)})`
         switch (channel) {
             case 0:
                 channelLetter = "r"
@@ -261,13 +262,13 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
                         this.color.H.value,
                         0,
                         this.color.V.value,
-                        this.color.A.value
+                        1
                     ), this.#tempColor.toRGBAString()},`
                     + `#${this.#tempColor.setFromHSVA(
                         this.color.H.value,
                         1,
                         this.color.V.value,
-                        this.color.A.value,
+                        1,
                     ), this.#tempColor.toRGBAString()})`
                 break
             case 6:
@@ -366,7 +367,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
                             </div>
                         </div>
                         <div class="ueb-color-control">
-                            <span class="ueb-color-control-label">Hex sRGB</span>
+                             <span class="ueb-color-control-label">Hex sRGB</span>
                             <div class="ueb-color-picker-hex-srgb ueb-text-input">
                                 <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
                                     .innerText="${colorSRGB}"

js/template/IInputPinTemplate.js

@@ -37,19 +37,15 @@ export default class IInputPinTemplate extends PinTemplate {
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
-        this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll(".ueb-pin-input-content")])
+        this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")])
         if (this.#inputContentElements.length) {
             this.setInputs(this.getInputs(), false)
             let self = this
-            this.onFocusHandler = _ => this.element.blueprint.dispatchEditTextEvent(true)
             this.onFocusOutHandler = e => {
                 e.preventDefault()
-                document.getSelection()?.removeAllRanges() // Deselect text inside the input
                 self.setInputs(this.getInputs(), true)
-                this.element.blueprint.dispatchEditTextEvent(false)
             }
             this.#inputContentElements.forEach(element => {
-                element.addEventListener("focus", this.onFocusHandler)
                 element.addEventListener("focusout", this.onFocusOutHandler)
             })
         }
@@ -58,7 +54,6 @@ export default class IInputPinTemplate extends PinTemplate {
     cleanup() {
         super.cleanup()
         this.#inputContentElements.forEach(element => {
-            element.removeEventListener("focus", this.onFocusHandler)
             element.removeEventListener("focusout", this.onFocusOutHandler)
         })
     }
@@ -99,9 +94,9 @@ export default class IInputPinTemplate extends PinTemplate {
         if (this.element.isInput()) {
             return html`
                 <div class="ueb-pin-input">
-                    <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
+                    <ueb-input
                         .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}">
-                    </span>
+                    </ueb-input>
                 </div>
             `
         }

js/template/ITemplate.js

@@ -1,4 +1,4 @@
-import { css, html } from "lit"
+import { css, nothing } from "lit"
 
 /**
  * @typedef {import("../element/IElement").default} IElement
@@ -24,6 +24,11 @@ export default class ITemplate {
         this.element = element
     }
 
+    /** @returns {IInput[]} */
+    createInputObjects() {
+        return []
+    }
+
     connectedCallback() {
     }
 
@@ -36,7 +41,7 @@ export default class ITemplate {
     }
 
     render() {
-        return html``
+        return nothing
     }
 
     /** @param {Map} changedProperties */
@@ -54,9 +59,4 @@ export default class ITemplate {
     cleanup() {
         this.#inputObjects.forEach(v => v.unlistenDOMElement())
     }
-
-    /** @returns {IInput[]} */
-    createInputObjects() {
-        return []
-    }
 }

js/template/InputTemplate.js

@@ -1,3 +1,4 @@
+import FocusTextEdit from "../input/common/FocusTextEdit"
 import ITemplate from "./ITemplate"
 
 /** @typedef {import ("../element/InputElement").default} InputElement */
@@ -5,20 +6,18 @@ import ITemplate from "./ITemplate"
 /** @extends {ITemplate<InputElement>} */
 export default class InputTemplate extends ITemplate {
 
+    createInputObjects() {
+        return [
+            ...super.createInputObjects(),
+            new FocusTextEdit(this.element, this.element.blueprint),
+        ]
+    }
+
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
-        this.onFocusHandler =
-            /** @param {FocusEvent} e */
-            e => this.element.blueprint.dispatchEditTextEvent(true)
-        this.onFocusOutHandler =
-            /** @param {FocusEvent} e */
-            e => {
-                e.preventDefault()
-                document.getSelection()?.removeAllRanges() // Deselect text inside the input
-                this.element.blueprint.dispatchEditTextEvent(false)
-            }
-        this.element.addEventListener("focus", this.onFocusHandler)
-        this.element.addEventListener("focusout", this.onFocusOutHandler)
+        this.element.classList.add("ueb-pin-input-content")
+        this.element.setAttribute("role", "textbox")
+        this.element.contentEditable = "true"
     }
 }

js/template/RealPinTemplate.js

@@ -17,9 +17,9 @@ export default class RealPinTemplate extends INumericPinTemplate {
         if (this.element.isInput()) {
             return html`
                 <div class="ueb-pin-input">
-                    <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
+                    <ueb-input
                         .innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))}">
-                    </span>
+                    </ueb-input>
                 </div>
             `
         }