Some performance improvement

dist/ueblueprint.js

@@ -785,6 +785,29 @@ class LinearColorEntity extends IEntity {
         /** @type {Number} */ this.B;
         /** @type {Number} */ this.A;
     }
+
+    /**
+     * @param {Number} number
+     */
+    static numberToString(number) {
+        return Math.round(number * 255).toString(16)
+    }
+
+    static fromString(value) {
+        return new LinearColorEntity({
+            R: parseInt(value.substr(0, 2), 16) / 255,
+            G: parseInt(value.substr(2, 2), 16) / 255,
+            B: parseInt(value.substr(4, 2), 16) / 255,
+            A: parseInt(value.substr(6, 2), 16) / 255,
+        })
+    }
+
+    toString() {
+        return "#" + LinearColorEntity.numberToString(this.R)
+            + LinearColorEntity.numberToString(this.G)
+            + LinearColorEntity.numberToString(this.B)
+            + LinearColorEntity.numberToString(this.A)
+    }
 }
 
 // @ts-check
@@ -903,7 +926,7 @@ class PinEntity extends IEntity {
          * }}
          */ this.PinType;
         /** @type {PinReferenceEntity[]} */ this.LinkedTo;
-        /** @type {String} */ this.DefaultValue;
+        /** @type {String | LinearColorEntity} */ this.DefaultValue;
         /** @type {String} */ this.AutogeneratedDefaultValue;
         /** @type {ObjectReferenceEntity} */ this.DefaultObject;
         /** @type {GuidEntity} */ this.PersistentGuid;
@@ -3005,8 +3028,6 @@ class MouseCreateLink extends IMouseClickDrag {
 
 class PinTemplate extends ITemplate {
 
-    hasInput = false
-
     /**
      * @param {PinElement} pin
      * @returns {IInput[]}
@@ -3108,7 +3129,6 @@ class IInputPinTemplate extends PinTemplate {
     get inputContentElements() {
         return this.#inputContentElements
     }
-    hasInput = true
 
     /**
      * @param {PinElement} pin
@@ -3119,7 +3139,9 @@ class IInputPinTemplate extends PinTemplate {
             [...pin.querySelectorAll(".ueb-pin-input-content")]
         );
         if (this.#inputContentElements.length) {
-            this.setInputs(pin, [Utility.decodeInputString(pin.entity.DefaultValue)]);
+            this.setInputs(pin, [
+                Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue))
+            ]);
             let self = this;
             this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true);
             this.onFocusOutHandler = e => {
@@ -3167,7 +3189,9 @@ class IInputPinTemplate extends PinTemplate {
      * @param {PinElement} pin
      */
     getInputs(pin) {
-        return this.#inputContentElements.map(element => element.innerText)
+        return this.#inputContentElements.map(element =>
+            // Faster than innerText which causes reflow
+            element.innerHTML.replaceAll("<br>", "\n"))
     }
 
     /**
@@ -3188,7 +3212,7 @@ class IInputPinTemplate extends PinTemplate {
         if (pin.isInput()) {
             return html`
                 <div class="ueb-pin-input">
-                    <div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
+                    <span class="ueb-pin-input-content" role="textbox" contenteditable="true"></span>
                 </div>
             `
         }
@@ -3291,6 +3315,7 @@ class ExecPinTemplate extends PinTemplate {
 
 /**
  * @typedef {import("../element/PinElement").default} PinElement
+ * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)}
  */
 
 class LinearColorPinTemplate extends IInputPinTemplate {
@@ -3304,24 +3329,14 @@ class LinearColorPinTemplate extends IInputPinTemplate {
     setup(pin) {
         super.setup(pin);
         this.#input = pin.querySelector(".ueb-pin-input");
-        let self = this;
+        this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString();
-        this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false";
-        this.#input.addEventListener("change", this.onChangeHandler);
-    }
-
-    /**
-     * @param {PinElement} pin
-     */
-    cleanup(pin) {
-        super.cleanup(pin);
-        this.#input.removeEventListener("change", this.onChangeHandler);
     }
 
     /**
      * @param {PinElement} pin
      */
     getInputs(pin) {
-        return [this.#input.checked ? "true" : "false"]
+        return [this.#input.dataset.linearColor]
     }
 
     /**
@@ -3329,8 +3344,6 @@ class LinearColorPinTemplate extends IInputPinTemplate {
      * @param {String[]?} value
      */
     setInputs(pin, value = []) {
-        pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin);
-        this.#input.checked = pin.entity.DefaultValue == "true";
     }
 
     /**
@@ -3339,7 +3352,7 @@ class LinearColorPinTemplate extends IInputPinTemplate {
     renderInput(pin) {
         if (pin.isInput()) {
             return html`
-                <span class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""}></span>
+                <span class="ueb-pin-input"></span>
             `
         }
         return super.renderInput(pin)
@@ -3388,12 +3401,19 @@ class NamePinTemplate extends IInputPinTemplate {
         });
     }
 
+    /**
+     * @param {PinElement} pin
+     */
+    getInputs(pin) {
+        return this.inputContentElements.map(element => element.textContent) // textContent for performance reason
+    }
+
     /**
      * @param {PinElement} pin
      * @param {String[]?} values
      */
     setInputs(pin, values = [], updateDefaultValue = true) {
-        values = values.map(value => value.replaceAll("\n", ""));
+        values = values.map(value => value.replaceAll("\n", "")); // get rid of the new lines
         super.setInputs(pin, values, updateDefaultValue);
     }
 }

js/entity/LinearColorEntity.js

@@ -18,4 +18,27 @@ export default class LinearColorEntity extends IEntity {
         /** @type {Number} */ this.B
         /** @type {Number} */ this.A
     }
+
+    /**
+     * @param {Number} number
+     */
+    static numberToString(number) {
+        return Math.round(number * 255).toString(16)
+    }
+
+    static fromString(value) {
+        return new LinearColorEntity({
+            R: parseInt(value.substr(0, 2), 16) / 255,
+            G: parseInt(value.substr(2, 2), 16) / 255,
+            B: parseInt(value.substr(4, 2), 16) / 255,
+            A: parseInt(value.substr(6, 2), 16) / 255,
+        })
+    }
+
+    toString() {
+        return "#" + LinearColorEntity.numberToString(this.R)
+            + LinearColorEntity.numberToString(this.G)
+            + LinearColorEntity.numberToString(this.B)
+            + LinearColorEntity.numberToString(this.A)
+    }
 }

js/entity/PinEntity.js

@@ -66,7 +66,7 @@ export default class PinEntity extends IEntity {
          * }}
          */ this.PinType
         /** @type {PinReferenceEntity[]} */ this.LinkedTo
-        /** @type {String} */ this.DefaultValue
+        /** @type {String | LinearColorEntity} */ this.DefaultValue
         /** @type {String} */ this.AutogeneratedDefaultValue
         /** @type {ObjectReferenceEntity} */ this.DefaultObject
         /** @type {GuidEntity} */ this.PersistentGuid

js/template/IInputPinTemplate.js

@@ -16,7 +16,6 @@ export default class IInputPinTemplate extends PinTemplate {
     get inputContentElements() {
         return this.#inputContentElements
     }
-    hasInput = true
 
     /**
      * @param {PinElement} pin
@@ -27,7 +26,9 @@ export default class IInputPinTemplate extends PinTemplate {
             [...pin.querySelectorAll(".ueb-pin-input-content")]
         )
         if (this.#inputContentElements.length) {
-            this.setInputs(pin, [Utility.decodeInputString(pin.entity.DefaultValue)])
+            this.setInputs(pin, [
+                Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue))
+            ])
             let self = this
             this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true)
             this.onFocusOutHandler = e => {
@@ -75,7 +76,9 @@ export default class IInputPinTemplate extends PinTemplate {
      * @param {PinElement} pin
      */
     getInputs(pin) {
-        return this.#inputContentElements.map(element => element.innerText)
+        return this.#inputContentElements.map(element =>
+            // Faster than innerText which causes reflow
+            element.innerHTML.replaceAll("<br>", "\n"))
     }
 
     /**
@@ -96,7 +99,7 @@ export default class IInputPinTemplate extends PinTemplate {
         if (pin.isInput()) {
             return html`
                 <div class="ueb-pin-input">
-                    <div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
+                    <span class="ueb-pin-input-content" role="textbox" contenteditable="true"></span>
                 </div>
             `
         }

js/template/LinearColorPinTemplate.js

@@ -5,6 +5,7 @@ import IInputPinTemplate from "./IInputPinTemplate"
 
 /**
  * @typedef {import("../element/PinElement").default} PinElement
+ * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)}
  */
 
 export default class LinearColorPinTemplate extends IInputPinTemplate {
@@ -18,24 +19,15 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
     setup(pin) {
         super.setup(pin)
         this.#input = pin.querySelector(".ueb-pin-input")
+        this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString()
         let self = this
-        this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false"
-        this.#input.addEventListener("change", this.onChangeHandler)
-    }
-
-    /**
-     * @param {PinElement} pin
-     */
-    cleanup(pin) {
-        super.cleanup(pin)
-        this.#input.removeEventListener("change", this.onChangeHandler)
     }
 
     /**
      * @param {PinElement} pin
      */
     getInputs(pin) {
-        return [this.#input.checked ? "true" : "false"]
+        return [this.#input.dataset.linearColor]
     }
 
     /**
@@ -43,8 +35,6 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
      * @param {String[]?} value
      */
     setInputs(pin, value = []) {
-        pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin)
-        this.#input.checked = pin.entity.DefaultValue == "true"
     }
 
     /**
@@ -53,7 +43,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
     renderInput(pin) {
         if (pin.isInput()) {
             return html`
-                <span class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""}></span>
+                <span class="ueb-pin-input"></span>
             `
         }
         return super.renderInput(pin)

js/template/NamePinTemplate.js

@@ -42,12 +42,19 @@ export default class NamePinTemplate extends IInputPinTemplate {
         })
     }
 
+    /**
+     * @param {PinElement} pin
+     */
+    getInputs(pin) {
+        return this.inputContentElements.map(element => element.textContent) // textContent for performance reason
+    }
+
     /**
      * @param {PinElement} pin
      * @param {String[]?} values
      */
     setInputs(pin, values = [], updateDefaultValue = true) {
-        values = values.map(value => value.replaceAll("\n", ""))
+        values = values.map(value => value.replaceAll("\n", "")) // get rid of the new lines
         super.setInputs(pin, values, updateDefaultValue)
     }
 }

js/template/PinTemplate.js

@@ -14,8 +14,6 @@ import Utility from "../Utility"
 
 export default class PinTemplate extends ITemplate {
 
-    hasInput = false
-
     /**
      * @param {PinElement} pin
      * @returns {IInput[]}