Resizeable comments

js/element/IDraggableElement.js

@@ -24,6 +24,14 @@ export default class IDraggableElement extends IElement {
             type: Number,
             attribute: false,
         },
+        sizeX: {
+            type: Number,
+            attribute: false,
+        },
+        sizeY: {
+            type: Number,
+            attribute: false,
+        },
     }
     static dragEventName = Configuration.dragEventName
     static dragGeneralEventName = Configuration.dragGeneralEventName
@@ -36,6 +44,16 @@ export default class IDraggableElement extends IElement {
         super(entity, template)
         this.locationX = 0
         this.locationY = 0
+        this.sizeX = -1
+        this.sizeY = -1
+    }
+
+    /** @param {Map} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        const boundaries = this.getBoundingClientRect()
+        this.sizeX = boundaries.width
+        this.sizeY = boundaries.height
     }
 
     /** @param {Number[]} param0 */
@@ -80,4 +98,20 @@ export default class IDraggableElement extends IElement {
             this.setLocation(snappedLocation)
         }
     }
+
+    topBoundary() {
+        return this.locationY
+    }
+
+    rightBoundary() {
+        return this.locationX + this.sizeX
+    }
+
+    bottomBoundary() {
+        return this.locationY + this.sizeY
+    }
+
+    leftBoundary() {
+        return this.locationX
+    }
 }

js/element/NodeElement.js

@@ -1,3 +1,4 @@
+import CommentNodeTemplate from "../template/CommentNodeTemplate"
 import Configuration from "../Configuration"
 import IdentifierEntity from "../entity/IdentifierEntity"
 import ISelectableDraggableElement from "./ISelectableDraggableElement"
@@ -9,7 +10,6 @@ import PinReferenceEntity from "../entity/PinReferenceEntity"
 import SerializerFactory from "../serialization/SerializerFactory"
 import Utility from "../Utility"
 import VariableAccessNodeTemplate from "../template/VariableAccessNodeTemplate"
-import CommentNodeTemplate from "../template/CommentNodeTemplate"
 
 /** @typedef {import("./IElement").default} IElement */
 
@@ -96,6 +96,12 @@ 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
+        }
     }
 
     /**