Mergin better performance branch

js/template/NodeTemplate.js

@@ -1,8 +1,5 @@
-// @ts-check
-
-import html from "./html"
+import { html } from "lit"
 import PinElement from "../element/PinElement"
-import sanitizeText from "./sanitizeText"
 import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
 
 /**
@@ -14,9 +11,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
     toggleAdvancedDisplayHandler
 
     /**
-     * Computes the html content of the target element.
-     * @param {NodeElement} node Graph node element
-     * @returns The result html
+     * @param {NodeElement} node
      */
     render(node) {
         return html`
@@ -26,7 +21,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
                         <div class="ueb-node-name">
                             <span class="ueb-node-name-symbol"></span>
                             <span class="ueb-node-name-text">
-                                ${sanitizeText(node.getNodeDisplayName())}
+                                ${node.nodeDisplayName}
                             </span>
                         </div>
                     </div>
@@ -34,11 +29,11 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
                         <div class="ueb-node-inputs"></div>
                         <div class="ueb-node-outputs"></div>
                     </div>
-                    ${node.entity.EnabledState?.toString() == "DevelopmentOnly" ? html`
+                    ${node.enabledState?.toString() == "DevelopmentOnly" ? html`
                         <div class="ueb-node-developmentonly">Development Only</div>
-                    ` : ""}
-                    ${node.entity.AdvancedPinDisplay ? html`
-                        <div class="ueb-node-expansion">
+                    ` : html``}
+                    ${node.advancedPinDisplay ? html`
+                        <div class="ueb-node-expansion" @click="${this.toggleAdvancedDisplayHandler}">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="16"
@@ -47,18 +42,10 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
                                 class="ueb-node-expansion-icon"
                                 viewBox="4 4 24 24"
                             >
-                                <path
-                                    d="
-                                        M 16.003 18.626
-                                        l 7.081 -7.081
-                                        L 25 13.46
-                                        l -8.997 8.998 -9.003 -9 1.917 -1.916
-                                        z
-                                    "
-                                />
+                                <path d="M 16.003 18.626 l 7.081 -7.081 L 25 13.46 l -8.997 8.998 -9.003 -9 1.917 -1.916 z" />
                             </svg>
                         </div>
-                    ` : ""}
+                    ` : html``}
                 </div>
             </div>
         `
@@ -66,52 +53,25 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
 
     /**
      * @param {NodeElement} node
+     * @param {Map} changedProperties
      */
-    setup(node) {
-        super.setup(node)
-        node.dataset.name = sanitizeText(node.entity.getObjectName())
-        if (node.entity.EnabledState) {
-            node.dataset.enabledState = node.entity.EnabledState.toString()
-        }
-        if (node.selected) {
-            node.classList.add("ueb-selected")
-        }
-        this.applyAdvancedPinDisplay(node)
-        node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0]))
-        node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1]))
-        /** @type {HTMLElement} */
-        let inputContainer = node.querySelector(".ueb-node-inputs")
-        /** @type {HTMLElement} */
-        let outputContainer = node.querySelector(".ueb-node-outputs")
-        let pins = node.getPinEntities()
-        pins.filter(v => v.isInput()).forEach(v => inputContainer.appendChild(new PinElement(v)))
-        pins.filter(v => v.isOutput()).forEach(v => outputContainer.appendChild(new PinElement(v)))
-        let self = this
+    async firstUpdated(node, changedProperties) {
+        super.firstUpdated(node, changedProperties)
+        const inputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-inputs"))
+        const outputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-outputs"))
+        Promise.all(node.getPinElements().map(n => n.updateComplete)).then(() => node.dispatchReflowEvent())
+        node.getPinElements().forEach(p => {
+            if (p.isInput()) {
+                inputContainer.appendChild(p)
+            } else if (p.isOutput()) {
+                outputContainer.appendChild(p)
+            }
+        })
         this.toggleAdvancedDisplayHandler = _ => {
             node.toggleShowAdvancedPinDisplay()
+            node.addNextUpdatedCallbacks(() => node.dispatchReflowEvent(), true)
         }
-        if (node.entity.AdvancedPinDisplay) {
-            node.querySelector(".ueb-node-expansion").addEventListener("click", this.toggleAdvancedDisplayHandler)
-        }
-    }
-
-    /**
-     * @param {NodeElement} node
-     */
-    applyAdvancedPinDisplay(node) {
-        if (node.entity.AdvancedPinDisplay) {
-            node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString()
-        }
-    }
-
-    /**
-     * @param {NodeElement} node
-     */
-    applyRename(node) {
-        const nodeName = node.entity.getObjectName()
-        node.dataset.name = sanitizeText(nodeName)
-        // @ts-expect-error
-        node.querySelector(".ueb-node-name-text").innerText = sanitizeText(node.getNodeDisplayName())
+        node.nodeNameElement = /** @type {HTMLElement} */(node.querySelector(".ueb-node-name-text"))
     }
 
     /**