Mergin better performance branch

js/element/NodeElement.js

@@ -1,10 +1,9 @@
-// @ts-check
-
 import Configuration from "../Configuration"
 import IdentifierEntity from "../entity/IdentifierEntity"
 import ISelectableDraggableElement from "./ISelectableDraggableElement"
 import NodeTemplate from "../template/NodeTemplate"
 import ObjectEntity from "../entity/ObjectEntity"
+import PinElement from "./PinElement"
 import PinEntity from "../entity/PinEntity"
 import PinReferenceEntity from "../entity/PinReferenceEntity"
 import SerializerFactory from "../serialization/SerializerFactory"
@@ -14,13 +13,64 @@ import SerializerFactory from "../serialization/SerializerFactory"
  */
 export default class NodeElement extends ISelectableDraggableElement {
 
+    static properties = {
+        ...ISelectableDraggableElement.properties,
+        name: {
+            type: String,
+            attribute: "data-name",
+            reflect: true,
+        },
+        advancedPinDisplay: {
+            type: String,
+            attribute: "data-advanced-display",
+            converter: IdentifierEntity.attributeConverter,
+            reflect: true,
+        },
+        enabledState: {
+            type: String,
+            attribute: "data-enabled-state",
+            reflect: true,
+        },
+        nodeDisplayName: {
+            type: String,
+            attribute: false,
+        },
+    }
+
+    get blueprint() {
+        return super.blueprint
+    }
+    set blueprint(v) {
+        super.blueprint = v
+        this.#pins.forEach(p => p.blueprint = v)
+    }
+
+    /** @type {HTMLElement} */
+    #nodeNameElement
+    get nodeNameElement() {
+        return this.#nodeNameElement
+    }
+    set nodeNameElement(value) {
+        this.#nodeNameElement = value
+    }
+
+    #pins
+
     /**
      * @param {ObjectEntity} entity
      */
     constructor(entity) {
         super(entity, new NodeTemplate())
+        this.#pins = this.getPinEntities().filter(v => !v.isHidden()).map(v => new PinElement(v))
+        this.#pins.forEach(pin => pin.nodeElement = this)
+        this.name = entity.getObjectName()
+        this.advancedPinDisplay = entity.AdvancedPinDisplay?.toString()
+        this.enabledState = entity.EnabledState
+        this.nodeDisplayName = entity.getDisplayName()
         this.dragLinkObjects = []
         super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value])
+        this.entity.subscribe("AdvancedPinDisplay", value => this.advancedPinDisplay = value)
+        this.entity.subscribe("Name", value => this.name = value)
     }
 
     /**
@@ -70,11 +120,10 @@ export default class NodeElement extends ISelectableDraggableElement {
             }
         }
         this.entity.Name = name
-        this.template.applyRename(this)
     }
 
     getPinElements() {
-        return this.template.getPinElements(this)
+        return this.#pins
     }
 
     /**
@@ -86,9 +135,7 @@ export default class NodeElement extends ISelectableDraggableElement {
 
     setLocation(value = [0, 0]) {
         let nodeType = this.entity.NodePosX.constructor
-        // @ts-expect-error
         this.entity.NodePosX = new nodeType(value[0])
-        // @ts-expect-error
         this.entity.NodePosY = new nodeType(value[1])
         super.setLocation(value)
     }
@@ -101,13 +148,20 @@ export default class NodeElement extends ISelectableDraggableElement {
         this.dispatchEvent(deleteEvent)
     }
 
+    dispatchReflowEvent() {
+        let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName, {
+            bubbles: true,
+            cancelable: true
+        })
+        this.dispatchEvent(reflowEvent)
+    }
+
     setShowAdvancedPinDisplay(value) {
         this.entity.AdvancedPinDisplay = new IdentifierEntity(value ? "Shown" : "Hidden")
-        this.template.applyAdvancedPinDisplay(this)
     }
 
     toggleShowAdvancedPinDisplay() {
-        this.setShowAdvancedPinDisplay(this.entity.AdvancedPinDisplay.value != "Shown")
+        this.setShowAdvancedPinDisplay(this.entity.AdvancedPinDisplay?.toString() != "Shown")
     }
 }