Comment now drag nodes

js/template/BlueprintTemplate.js

@@ -123,8 +123,10 @@ export default class BlueprintTemplate extends ITemplate {
         }
     }
 
-    getComments() {
-        return this.element.querySelectorAll(`ueb-node[data-type="${Configuration.nodeType.comment}"]`)
+    getCommentNodes(justSelected = false) {
+        return this.element.querySelectorAll(
+            `ueb-node[data-type="${Configuration.nodeType.comment}"]${justSelected ? '[data-selected="true"]' : ''}`
+        )
     }
 
     /** @param {PinReferenceEntity} pinReference */

js/template/CommentNodeTemplate.js

@@ -32,6 +32,14 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
         return this.element.querySelector(".ueb-node-top")
     }
 
+    /** @param {Map} changedProperties */
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties)
+        if (changedProperties.has("sizeX") || changedProperties.has("sizeY")) {
+            this.manageNodesBind()
+        }
+    }
+
     render() {
         return html`
             <div class="ueb-node-border">
@@ -44,6 +52,18 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
         `
     }
 
+    manageNodesBind() {
+        this.element.blueprint
+            .getNodes(false, [
+                this.element.topBoundary(),
+                this.element.rightBoundary(),
+                this.element.bottomBoundary(),
+                this.element.leftBoundary(),
+            ])
+            .filter(node => !node.boundComments.includes(this.element))
+            .forEach(node => node.bindToComment(this.element))
+    }
+
     /** @param {Number} value */
     setSizeX(value) {
         value = Math.round(value)

js/template/ISelectableDraggableTemplate.js

@@ -2,12 +2,12 @@ import IDraggablePositionedTemplate from "./IDraggablePositionedTemplate"
 import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 
 /**
- * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
+ * @typedef {import("../element/NodeElement").default} NodeElement
  * @typedef {import("../input/mouse/MouseMoveDraggable").default} MouseMoveDraggable
  */
 
 /**
- * @template {ISelectableDraggableElement} T
+ * @template {NodeElement} T
  * @extends {IDraggablePositionedTemplate<T>}
  */
 export default class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {

js/template/KnotNodeTemplate.js

@@ -28,6 +28,12 @@ export default class KnotNodeTemplate extends NodeTemplate {
         return this.#outputPin
     }
 
+    /** @param {NodeElement} element */
+    constructed(element) {
+        super.constructed(element)
+        this.element.classList.add("ueb-node-style-minimal")
+    }
+
     /** @param {PinElement} startingPin */
     findDirectionaPin(startingPin) {
         if (

js/template/NodeTemplate.js

@@ -48,10 +48,9 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         const pureFunctionColor = css`95, 129, 90`
         switch (this.element.entity.getClass()) {
             case Configuration.nodeType.callFunction:
-                if (this.element.entity.bIsPureFunc) {
-                    return pureFunctionColor
-                }
-                return functionColor
+                return this.element.entity.bIsPureFunc
+                    ? pureFunctionColor
+                    : functionColor
             case Configuration.nodeType.makeArray:
             case Configuration.nodeType.makeMap:
             case Configuration.nodeType.select: