Input cleanup

js/element/InputElement.js

@@ -12,6 +12,12 @@ export default class InputElement extends IElement {
             converter: Utility.booleanConverter,
             reflect: true,
         },
+        selectOnFocus: {
+            type: Boolean,
+            attribute: "data-select-focus",
+            converter: Utility.booleanConverter,
+            reflect: true,
+        },
         blurOnEnter: {
             type: Boolean,
             attribute: "data-blur-enter",
@@ -23,6 +29,7 @@ export default class InputElement extends IElement {
     constructor() {
         super({}, new InputTemplate())
         this.singleLine = false
+        this.selectOnFocus = true
         this.blurOnEnter = true
     }
 }

js/template/IInputPinTemplate.js

@@ -2,6 +2,7 @@ import { html, nothing } from "lit"
 import MouseIgnore from "../input/mouse/MouseIgnore"
 import PinTemplate from "./PinTemplate"
 import Utility from "../Utility"
+
 /**
  * @template T
  * @typedef {import("../element/PinElement").default<T>} PinElement
@@ -13,6 +14,9 @@ import Utility from "../Utility"
  */
 export default class IInputPinTemplate extends PinTemplate {
 
+    static singleLineInput = false
+    static selectOnFocus = true
+
     /** @type {HTMLElement[]} */
     #inputContentElements
     get inputContentElements() {
@@ -74,8 +78,10 @@ export default class IInputPinTemplate extends PinTemplate {
 
     /** @param {String[]?} values */
     setInputs(values = [], updateDefaultValue = true) {
-        this.#inputContentElements.forEach(
-            (elem, i) => elem.innerText = values[i]
+        // @ts-expect-error 
+        this.#inputContentElements.forEach(this.constructor.singleLineInput
+            ? (elem, i) => elem.innerText = values[i]
+            : (elem, i) => elem.innerText = values[i].replaceAll("\n", "")
         )
         if (updateDefaultValue) {
             this.setDefaultValue(values.map(v => IInputPinTemplate.stringFromInputToUE(v)), values)
@@ -83,14 +89,21 @@ export default class IInputPinTemplate extends PinTemplate {
     }
 
     setDefaultValue(values = [], rawValues = values) {
-        this.element.setDefaultValue(values.reduce((acc, cur) => acc + cur, ""))
+        this.element.setDefaultValue(
+            // @ts-expect-error
+            values.join("")
+        )
     }
 
     renderInput() {
         if (this.element.isInput()) {
+            // @ts-expect-error
+            const singleLine = this.constructor.singleLineInput
+            // @ts-expect-error
+            const selectOnFocus = this.constructor.selectOnFocus
             return html`
                 <div class="ueb-pin-input">
-                    <ueb-input
+                    <ueb-input .singleLine="${singleLine}" .selectOnFocus="${selectOnFocus}"
                         .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}">
                     </ueb-input>
                 </div>

js/template/INumericPinTemplate.js

@@ -6,6 +6,8 @@ import IInputPinTemplate from "./IInputPinTemplate"
  */
 export default class INumericPinTemplate extends IInputPinTemplate {
 
+    static singleLineInput = true
+
     /** @param {String[]} values */
     setInputs(values = [], updateDefaultValue = false) {
         if (!values || values.length == 0) {

js/template/InputTemplate.js

@@ -5,7 +5,12 @@ import ITemplate from "./ITemplate"
 /** @extends {ITemplate<InputElement>} */
 export default class InputTemplate extends ITemplate {
 
-    #focusHandler = () => this.element.blueprint.dispatchEditTextEvent(true)
+    #focusHandler = () => {
+        this.element.blueprint.dispatchEditTextEvent(true)
+        if (this.element.selectOnFocus) {
+            getSelection().selectAllChildren(this.element)
+        }
+    }
     #focusoutHandler = () => {
         this.element.blueprint.dispatchEditTextEvent(false)
         document.getSelection()?.removeAllRanges() // Deselect eventually selected text inside the input

js/template/NamePinTemplate.js

@@ -4,42 +4,5 @@ import IInputPinTemplate from "./IInputPinTemplate"
 
 export default class NamePinTemplate extends IInputPinTemplate {
 
-    /** @type {(e : InputEvent) => void} */
-    onInputHandler
-
-    /** @param {Map} changedProperties */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties)
-        this.onInputHandler = e => {
-            e.stopPropagation()
-            if (
-                e.inputType == "insertParagraph"
-                || e.inputType == "insertLineBreak"
-                || (e.inputType == "insertFromPaste" && /** @type {HTMLElement} */(e.target).innerText.includes("\n"))
-            ) {
-                /** @type {HTMLElement} */(e.target).blur() // Loose focus in case it tries to insert newline
-                this.inputContentElements.forEach(element => element.innerText = element.innerText.replaceAll("\n", ""))
-            }
-        }
-        this.inputContentElements.forEach(element => {
-            element.addEventListener("input", /** @type {(e : Event) => void} */(this.onInputHandler))
-        })
-    }
-
-    cleanup() {
-        super.cleanup()
-        this.inputContentElements.forEach(element => {
-            element.removeEventListener("input", /** @type {(e : Event) => void} */(this.onInputHandler))
-        })
-    }
-
-    getInputs() {
-        return this.inputContentElements.map(element => element.textContent) // textContent for performance reason
-    }
-
-    /** @param {String[]} values */
-    setInputs(values = [], updateDefaultValue = true) {
-        values = values.map(value => value.replaceAll("\n", "")) // get rid of the new lines
-        super.setInputs(values, updateDefaultValue)
-    }
+    static singleLineInput = true
 }

js/template/VectorPinTemplate.js

@@ -32,21 +32,21 @@ export default class VectorPinTemplate extends INumericPinTemplate {
                 <div class="ueb-pin-input-wrapper">
                     <span class="ueb-pin-input-label">X</span>
                     <div class="ueb-pin-input">
-                        <span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate
-                                    .stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().X))
-                                }"></span>
+                        <ueb-input .singleLine="${true}"
+                            .innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().X))}">
+                        </ueb-input>
                     </div>
                     <span class="ueb-pin-input-label">Y</span>
                     <div class="ueb-pin-input">
-                        <span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate
-                                    .stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Y))
-                                }"></span>
+                        <ueb-input .singleLine="${true}"
+                            .innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Y))}">
+                        </ueb-input>
                     </div>
                     <span class="ueb-pin-input-label">Z</span>
                     <div class="ueb-pin-input">
-                        <span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true" .innerText="${IInputPinTemplate
-                                    .stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Z))
-                                }"></span>
+                        <ueb-input .singleLine="${true}"
+                            .innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Z))}">
+                        </ueb-input>
                     </div>
                 </div>
             `