Save sizes in the element

js/Blueprint.js

@@ -97,16 +97,16 @@ export default class Blueprint extends IElement {
     headerElement
     focused = false
     waitingExpandUpdate = false
+    /** @param {NodeElement} node */
     nodeBoundariesSupplier = node => {
-        let rect = node.getBoundingClientRect()
         let gridRect = this.nodesContainerElement.getBoundingClientRect()
         const scaleCorrection = 1 / this.getScale()
         return /** @type {BoundariesInfo} */ {
-            primaryInf: (rect.left - gridRect.left) * scaleCorrection,
-            primarySup: (rect.right - gridRect.right) * scaleCorrection,
+            primaryInf: (node.leftBoundary() - gridRect.left) * scaleCorrection,
+            primarySup: (node.rightBoundary() - gridRect.right) * scaleCorrection,
             // Counter intuitive here: the y (secondary axis is positive towards the bottom, therefore upper bound "sup" is bottom)
-            secondaryInf: (rect.top - gridRect.top) * scaleCorrection,
-            secondarySup: (rect.bottom - gridRect.bottom) * scaleCorrection
+            secondaryInf: (node.topBoundary() - gridRect.top) * scaleCorrection,
+            secondarySup: (node.bottomBoundary() - gridRect.bottom) * scaleCorrection
         }
     }
     /** @type {(node: NodeElement, selected: Boolean) => void}} */

js/element/IDraggableElement.js

@@ -48,12 +48,16 @@ export default class IDraggableElement extends IElement {
         this.sizeY = -1
     }
 
+    computeSizes() {
+        const bounding = this.getBoundingClientRect()
+        this.sizeX = bounding.width
+        this.sizeY = bounding.height
+    }
+
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
-        const boundaries = this.getBoundingClientRect()
-        this.sizeX = boundaries.width
-        this.sizeY = boundaries.height
+        this.computeSizes()
     }
 
     /** @param {Number[]} param0 */

js/element/IElement.js

@@ -96,7 +96,10 @@ export default class IElement extends LitElement {
     updated(changedProperties) {
         super.updated(changedProperties)
         this.template.updated(changedProperties)
-        this.#nextUpdatedCallbacks.forEach(f => f(changedProperties))
+        // Remember the array might change while iterating
+        for (const f of this.#nextUpdatedCallbacks) {
+            f(changedProperties)
+        }
         this.#nextUpdatedCallbacks = []
     }
 

js/element/NodeElement.js

@@ -96,11 +96,11 @@ export default class NodeElement extends ISelectableDraggableElement {
         super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value])
         this.entity.subscribe("AdvancedPinDisplay", value => this.advancedPinDisplay = value)
         this.entity.subscribe("Name", value => this.nodeName = value)
-        if (this.entity.NodeWidth) {
-            this.sizeX = this.entity.NodeWidth
-        }
-        if (this.entity.NodeHeight) {
-            this.sizeY = this.entity.NodeHeight
+        if (this.entity.NodeWidth && this.entity.NodeHeight) {
+            this.sizeX = this.entity.NodeWidth.value
+            this.sizeY = this.entity.NodeHeight.value
+        } else {
+            Promise.all([this.updateComplete, ...this.#pins.map(p => p.updateComplete)]).then(() => this.computeSizes())
         }
     }
 
@@ -183,6 +183,7 @@ export default class NodeElement extends ISelectableDraggableElement {
     }
 
     dispatchReflowEvent() {
+        this.addNextUpdatedCallbacks(() => this.computeSizes(), true)
         let reflowEvent = new CustomEvent(Configuration.nodeReflowEventName)
         this.dispatchEvent(reflowEvent)
     }

js/element/SelectorElement.js

@@ -7,6 +7,7 @@ export default class SelectorElement extends IFromToPositionedElement {
 
     constructor() {
         super({}, new SelectorTemplate())
+        /** @type {FastSelectionModel} */
         this.selectionModel = null
     }
 
@@ -24,8 +25,7 @@ export default class SelectorElement extends IFromToPositionedElement {
 
     /** @param {Number[]} finalPosition */
     selectTo(finalPosition) {
-        /** @type {FastSelectionModel} */ (this.selectionModel)
-            .selectTo(finalPosition)
+        this.selectionModel.selectTo(finalPosition)
         this.toX = finalPosition[0]
         this.toY = finalPosition[1]
     }

js/template/NodeTemplate.js

@@ -153,7 +153,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                 if (!this.#hasTargetInputNode && v.getDisplayName() === "Target") {
                     this.#hasTargetInputNode = true
                 }
-                return/** @type {PinElement} */(
+                return /** @type {PinElement} */(
                     new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
                 )
             })

js/template/PinTemplate.js

@@ -68,6 +68,7 @@ export default class PinTemplate extends ITemplate {
 
     /** @param {Map} changedProperties */
     updated(changedProperties) {
+        super.updated(changedProperties)
         if (this.element.isInput() && changedProperties.has("isLinked")) {
             // When connected, an input may drop its input fields which means the node has to reflow
             const node = this.element.nodeElement