Refactoring WIP

js/element/LinkElement.js

@@ -5,6 +5,7 @@ import Utility from "../Utility.js"
 import BooleanEntity from "../entity/BooleanEntity.js"
 import LinkTemplate from "../template/LinkTemplate.js"
 import IFromToPositionedElement from "./IFromToPositionedElement.js"
+import LinearColorEntity from "../entity/LinearColorEntity.js"
 
 /** @extends {IFromToPositionedElement<Object, LinkTemplate>} */
 export default class LinkElement extends IFromToPositionedElement {
@@ -43,6 +44,9 @@ export default class LinkElement extends IFromToPositionedElement {
             converter: BooleanEntity.booleanConverter,
             reflect: true,
         },
+        color: {
+            type: LinearColorEntity,
+        },
         svgPathD: {
             type: String,
             attribute: false,
@@ -75,6 +79,29 @@ export default class LinkElement extends IFromToPositionedElement {
         this.#setPin(pin, true)
     }
 
+    /** @param {UEBNodeUpdateEvent} e */
+    #nodeUpdateHandler = e => {
+        if (this.#origin.nodeElement === e.target) {
+            if (this.originNode != this.#origin.nodeElement.nodeTitle) {
+                this.originNode = this.#origin.nodeElement.nodeTitle
+            }
+            this.setOriginLocation()
+        } else if (this.#target.nodeElement === e.target) {
+            if (this.targetNode != this.#target.nodeElement.nodeTitle) {
+                this.targetNode = this.#target.nodeElement.nodeTitle
+            }
+            this.setTargetLocation()
+        } else {
+            throw new Error("Unexpected node update")
+        }
+    }
+    /** @param {UEBNodeUpdateEvent} e */
+    #pinUpdateHandler = e => {
+        const colorReferencePin = this.getOutputPin(true)
+        if (!this.color?.equals(colorReferencePin.color)) {
+            this.color = colorReferencePin.color
+        }
+    }
     #nodeDeleteHandler = () => this.remove()
     /** @param {UEBDragEvent} e */
     #nodeDragOriginHandler = e => this.addOriginLocation(...e.detail.value)
@@ -104,6 +131,7 @@ export default class LinkElement extends IFromToPositionedElement {
         this.targetNode = ""
         this.targetPin = ""
         this.originatesFromInput = false
+        this.color = new LinearColorEntity()
         this.startPercentage = 0
         this.svgPathD = ""
         this.startPixels = 0
@@ -153,15 +181,13 @@ export default class LinkElement extends IFromToPositionedElement {
         }
         if (getCurrentPin()) {
             const nodeElement = getCurrentPin().getNodeElement()
+            nodeElement.removeEventListener(Configuration.nodeUpdateEventName, this.#nodeUpdateHandler)
             nodeElement.removeEventListener(Configuration.removeEventName, this.#nodeDeleteHandler)
             nodeElement.removeEventListener(
                 Configuration.nodeDragEventName,
                 isTargetPin ? this.#nodeDragTargetHandler : this.#nodeDragOriginHandler
             )
-            nodeElement.removeEventListener(
-                Configuration.nodeReflowEventName,
-                isTargetPin ? this.#nodeReflowTargetHandler : this.#nodeReflowOriginHandler
-            )
+            getCurrentPin().removeEventListener(Configuration.pinUpdateEventName, this.#pinUpdateHandler)
             this.#unlinkPins()
         }
         if (isTargetPin) {
@@ -175,20 +201,20 @@ export default class LinkElement extends IFromToPositionedElement {
         }
         if (getCurrentPin()) {
             const nodeElement = getCurrentPin().getNodeElement()
+            nodeElement.addEventListener(Configuration.nodeUpdateEventName, this.#nodeUpdateHandler)
+            nodeElement.addEventListener(Configuration.pinUpdateEventName, this.#pinUpdateHandler)
             nodeElement.addEventListener(Configuration.removeEventName, this.#nodeDeleteHandler)
             nodeElement.addEventListener(
                 Configuration.nodeDragEventName,
                 isTargetPin ? this.#nodeDragTargetHandler : this.#nodeDragOriginHandler
             )
-            nodeElement.addEventListener(
-                Configuration.nodeReflowEventName,
-                isTargetPin ? this.#nodeReflowTargetHandler : this.#nodeReflowOriginHandler
-            )
+            getCurrentPin().addEventListener(Configuration.pinUpdateEventName, this.#pinUpdateHandler)
             isTargetPin
                 ? this.setTargetLocation()
                 : (this.setOriginLocation(), this.originatesFromInput = this.origin.isInputVisually())
             this.#linkPins()
         }
+        this.color = this.getOutputPin(true)?.color
     }
 
     #linkPins() {

js/element/NodeElement.js

@@ -138,18 +138,11 @@ export default class NodeElement extends ISelectableDraggableElement {
                 this.#redirectLinksBeforeRename(newName?.toString())
                 this.nodeTitle = newName?.toString()
                 this.nodeDisplayName = nodeTitle(entity)
+                this.acknowledgeUpdate()
             }
         )
     }
 
-    async getUpdateComplete() {
-        let result = await super.getUpdateComplete()
-        for (const pin of this.getPinElements()) {
-            result &&= await pin.updateComplete
-        }
-        return result
-    }
-
     /** @param {NodeElement} commentNode */
     bindToComment(commentNode) {
         if (commentNode != this && !this.boundComments.includes(commentNode)) {
@@ -192,14 +185,14 @@ export default class NodeElement extends ISelectableDraggableElement {
     setNodeWidth(value) {
         this.entity.setNodeWidth(value)
         this.sizeX = value
-        this.acknowledgeReflow()
+        this.acknowledgeUpdate(true)
     }
 
     /** @param {Number} value */
     setNodeHeight(value) {
         this.entity.setNodeHeight(value)
         this.sizeY = value
-        this.acknowledgeReflow()
+        this.acknowledgeUpdate(true)
     }
 
     /** @param  {IElement[]} nodesWhitelist */
@@ -222,11 +215,13 @@ export default class NodeElement extends ISelectableDraggableElement {
         super.setLocation(x, y, acknowledge)
     }
 
-    acknowledgeReflow() {
-        this.requestUpdate()
-        this.updateComplete.then(() => this.computeSizes())
-        let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName)
-        this.dispatchEvent(reflowEvent)
+    acknowledgeUpdate(resize = false) {
+        const event = new CustomEvent(Configuration.nodeUpdateEventName)
+        if (resize) {
+            this.requestUpdate()
+            this.updateComplete.then(() => this.computeSizes())
+        }
+        this.dispatchEvent(event)
     }
 
     setShowAdvancedPinDisplay(value) {

js/element/PinElement.js

@@ -44,7 +44,8 @@ export default class PinElement extends IElement {
                 fromAttribute: (value, type) => value
                     ? LinearColorEntity.getLinearColorFromAnyFormat().parse(value)
                     : null,
-                toAttribute: (value, type) => value ? LinearColorEntity.printLinearColor(value) : null,
+                /** @param {LinearColorEntity} value */
+                toAttribute: (value, type) => value?.toString() ?? "",
             },
             attribute: "data-color",
             reflect: true,
@@ -96,10 +97,11 @@ export default class PinElement extends IElement {
         this.connectable = !entity.bNotConnectable?.valueOf()
         super.initialize(entity, template)
         this.pinId = this.entity.PinId
-        this.pinType = this.entity.getType()
+        this.updateType()
         this.defaultValue = this.entity.getDefaultValue()
         this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden"
-        this.updateColor()
+        /** @type {LinearColorEntity} */
+        this.color = PinElement.properties.color.converter.fromAttribute(this.entity.pinColor().toString())
     }
 
     setup() {
@@ -107,8 +109,13 @@ export default class PinElement extends IElement {
         this.nodeElement = this.closest("ueb-node")
     }
 
-    updateColor() {
-        this.color = PinElement.properties.color.converter.fromAttribute(this.entity.pinColor().toString())
+    updateType() {
+        this.pinType = this.entity.getType()
+        const newColor = PinElement.properties.color.converter.fromAttribute(this.entity.pinColor().toString())
+        if (!this.color?.equals(newColor)) {
+            this.color = newColor
+            this.acknowledgeUpdate()
+        }
     }
 
     createPinReference() {
@@ -289,4 +296,9 @@ export default class PinElement extends IElement {
         }
         return false
     }
+
+    acknowledgeUpdate() {
+        let event = new CustomEvent(Configuration.pinUpdateEventName)
+        this.dispatchEvent(event)
+    }
 }