Comments selectable by header only, links fixes

js/Blueprint.js

@@ -101,11 +101,11 @@ export default class Blueprint extends IElement {
     /** @param {NodeElement} node */
     nodeBoundariesSupplier = node => {
         return /** @type {BoundariesInfo} */ {
-            primaryInf: node.leftBoundary(),
-            primarySup: node.rightBoundary(),
+            primaryInf: node.leftBoundary(true),
+            primarySup: node.rightBoundary(true),
             // Counter intuitive here: the y (secondary axis is positive towards the bottom, therefore upper bound "sup" is bottom)
-            secondaryInf: node.topBoundary(),
-            secondarySup: node.bottomBoundary(),
+            secondaryInf: node.topBoundary(true),
+            secondarySup: node.bottomBoundary(true),
         }
     }
     /** @type {(node: NodeElement, selected: Boolean) => void}} */

js/element/IDraggableElement.js

@@ -104,19 +104,19 @@ export default class IDraggableElement extends IElement {
         }
     }
 
-    topBoundary() {
-        return this.locationY
+    topBoundary(justSelectableArea = false) {
+        return this.template.topBoundary(justSelectableArea)
     }
 
-    rightBoundary() {
-        return this.locationX + this.sizeX
+    rightBoundary(justSelectableArea = false) {
+        return this.template.rightBoundary(justSelectableArea)
     }
 
-    bottomBoundary() {
-        return this.locationY + this.sizeY
+    bottomBoundary(justSelectableArea = false) {
+        return this.template.bottomBoundary(justSelectableArea)
     }
 
-    leftBoundary() {
-        return this.locationX
+    leftBoundary(justSelectableArea = false) {
+        return this.template.leftBoundary(justSelectableArea)
     }
 }

js/element/NodeElement.js

@@ -133,7 +133,7 @@ export default class NodeElement extends ISelectableDraggableElement {
     }
 
     getUpdateComplete() {
-        return Promise.all([super.getUpdateComplete(), ...this.#pins.map(pin => pin.updateComplete)]).then(() => true)
+        return Promise.all([super.getUpdateComplete(), ...this.getPinElements().map(pin => pin.updateComplete)]).then(() => true)
     }
 
     /** @param {NodeElement} commentNode */

js/element/PinElement.js

@@ -207,6 +207,7 @@ export default class PinElement extends IElement {
             }
             return pin
         })
+        this.isLinked = this.entity.isLinked()
     }
 
     /** @param {PinElement} targetPinElement */

js/serialization/Grammar.js

@@ -307,6 +307,7 @@ export default class Grammar {
         r.String,
         r.LocalizedText,
         r.InvariantText,
+        r.PinReference,
         Grammar.createEntityGrammar(r, VectorEntity, true),
         Grammar.createEntityGrammar(r, LinearColorEntity, true),
         r.UnknownKeys,

js/template/CommentNodeTemplate.js

@@ -11,6 +11,7 @@ import LinearColorEntity from "../entity/LinearColorEntity"
 export default class CommentNodeTemplate extends IResizeableTemplate {
 
     #color = LinearColorEntity.getWhite()
+    #selectableAreaHeight = 0
 
     /** @param {NodeElement} element */
     constructed(element) {
@@ -44,6 +45,13 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
         `
     }
 
+    /** @param {Map} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        const bounding = this.getDraggableElement().getBoundingClientRect()
+        this.#selectableAreaHeight = bounding.height
+    }
+
     manageNodesBind() {
         let nodes = this.element.blueprint.getNodes()
         for (let node of nodes) {
@@ -83,4 +91,22 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
     endResize() {
         this.manageNodesBind()
     }
+
+    topBoundary(justSelectableArea = false) {
+        return this.element.locationY
+    }
+
+    rightBoundary(justSelectableArea = false) {
+        return this.element.locationX + this.element.sizeX
+    }
+
+    bottomBoundary(justSelectableArea = false) {
+        return justSelectableArea
+            ? this.element.locationY + this.#selectableAreaHeight
+            : super.bottomBoundary()
+    }
+
+    leftBoundary(justSelectableArea = false) {
+        return this.element.locationX
+    }
 }

js/template/IDraggableTemplate.js

@@ -28,4 +28,20 @@ export default class IDraggableTemplate extends ITemplate {
             this.createDraggableObject(),
         ]
     }
+
+    topBoundary(justSelectableArea = false) {
+        return this.element.locationY
+    }
+
+    rightBoundary(justSelectableArea = false) {
+        return this.element.locationX + this.element.sizeX
+    }
+
+    bottomBoundary(justSelectableArea = false) {
+        return this.element.locationY + this.element.sizeY
+    }
+
+    leftBoundary(justSelectableArea = false) {
+        return this.element.locationX
+    }
 }