Save sizes in the element

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]
     }