Comment now drag nodes

js/Blueprint.js

@@ -10,6 +10,7 @@ import Utility from "./Utility"
  * @typedef {import("./element/PinElement").default} PinElement
  * @typedef {import("./entity/GuidEntity").default} GuidEntity
  * @typedef {import("./entity/PinReferenceEntity").default} PinReferenceEntity
+ * @typedef {import("./template/CommentNodeTemplate").default} CommentNodeTemplate
  * @typedef {{
  *     primaryInf: Number,
  *     primarySup: Number,
@@ -297,10 +298,12 @@ export default class Blueprint extends IElement {
         return result
     }
 
-    getComments() {
-        let result = /** @type {NodeElement[]} */ ([...this.template.getComments()])
+    getCommentNodes(justSelected = false) {
+        let result = /** @type {NodeElement[]} */ ([...this.template.getCommentNodes(justSelected)])
         if (result.length === 0) {
-            result = this.nodes.filter(n => n.getType() === Configuration.nodeType.comment)
+            result = this.nodes.filter(n =>
+                n.getType() === Configuration.nodeType.comment && (!justSelected || n.selected)
+            )
         }
         return result
     }
@@ -378,6 +381,11 @@ export default class Blueprint extends IElement {
                 this.nodes.push(element)
                 nodeElements.push(element)
                 this.nodesContainerElement?.appendChild(element)
+                if (element.getType() == Configuration.nodeType.comment) {
+                    element.addNextUpdatedCallbacks(() =>
+                        /** @type {CommentNodeTemplate} */(element.template).manageNodesBind()
+                    )
+                }
             } else if (element instanceof LinkElement && !this.links.includes(element)) {
                 this.links.push(element)
                 if (this.linksContainerElement && !this.linksContainerElement.contains(element)) {

js/element/NodeElement.js

@@ -78,7 +78,16 @@ export default class NodeElement extends ISelectableDraggableElement {
     }
 
     #pins
-    #boundComments
+    /** @type {NodeElement[]} */
+    boundComments = []
+    #commentDragged = false
+    #commentDragHandler = e => {
+        if (!this.selected && !this.#commentDragged) {
+            this.addLocation(e.detail.value) // if selected it will already move
+            this.#commentDragged = true
+            this.addNextUpdatedCallbacks(() => this.#commentDragged = false)
+        }
+    }
 
     /**
      * @param {ObjectEntity} entity
@@ -122,6 +131,32 @@ export default class NodeElement extends ISelectableDraggableElement {
         return new NodeElement(entity)
     }
 
+    /** @param {NodeElement} commentNode */
+    bindToComment(commentNode) {
+        if (!this.boundComments.includes(commentNode)) {
+            commentNode.addEventListener(Configuration.nodeDragEventName, this.#commentDragHandler)
+            this.boundComments.push(commentNode)
+        }
+    }
+
+    /** @param {NodeElement} commentNode */
+    unbindFromComment(commentNode) {
+        const commentIndex = this.boundComments.indexOf(commentNode)
+        if (commentIndex >= 0) {
+            commentNode.removeEventListener(Configuration.nodeDragEventName, this.#commentDragHandler)
+            this.boundComments[commentIndex] = this.boundComments[this.boundComments.length - 1]
+            this.boundComments.pop()
+        }
+    }
+
+    /** @param {NodeElement} commentNode */
+    isInsideComment(commentNode) {
+        return this.topBoundary() >= commentNode.topBoundary()
+            && this.rightBoundary() <= commentNode.rightBoundary()
+            && this.bottomBoundary() <= commentNode.bottomBoundary()
+            && this.leftBoundary() >= commentNode.leftBoundary()
+    }
+
     disconnectedCallback() {
         super.disconnectedCallback()
         this.acknowledgeDelete()

js/input/common/Paste.js

@@ -45,6 +45,7 @@ export default class Paste extends IInput {
         if (nodes.length > 0) {
             this.blueprint.unselectAll()
         }
+        this.blueprint.addGraphElement(...nodes)
         let mousePosition = this.blueprint.mousePosition
         nodes.forEach(node => {
             const locationOffset = [
@@ -55,7 +56,6 @@ export default class Paste extends IInput {
             node.snapToGrid()
             node.setSelected(true)
         })
-        this.blueprint.addGraphElement(...nodes)
         return true
     }
 }

js/input/mouse/MouseMoveNodes.js

@@ -2,10 +2,11 @@ import MouseMoveDraggable from "./MouseMoveDraggable"
 
 /**
  * @typedef {import("../../Blueprint").default} Blueprint
- * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
+ * @typedef {import("../../element/NodeElement").default} NodeElement
+ * @typedef {import("../../template/CommentNodeTemplate").default} CommentNodeTemplate
  */
 
-/** @extends {MouseMoveDraggable<ISelectableDraggableElement>} */
+/** @extends {MouseMoveDraggable<NodeElement>} */
 export default class MouseMoveNodes extends MouseMoveDraggable {
 
     startDrag() {
@@ -23,6 +24,15 @@ export default class MouseMoveNodes extends MouseMoveDraggable {
         if (!this.started) {
             this.blueprint.unselectAll()
             this.target.setSelected(true)
+        } else {
+            this.blueprint.getNodes(true).forEach(node =>
+                node.boundComments
+                    .filter(comment => !node.isInsideComment(comment))
+                    .forEach(comment => node.unbindFromComment(comment))
+            )
+            this.blueprint.getCommentNodes(true).forEach(comment =>
+                /** @type {CommentNodeTemplate} */(comment.template).manageNodesBind()
+            )
         }
     }
 }

js/serialization/Grammar.js

@@ -261,7 +261,7 @@ export default class Grammar {
             referencePath.wrap(P.string(`'"`), P.string(`"'`)),
         ]),
         P.seqMap(
-            r.Word, // Goes into referenceType
+            Grammar.ReferencePath(r, r.PathSymbolOptSpaces), // Goes into referenceType
             P.optWhitespace, // Goes into _1 (ignored)
             P.alt(...[Grammar.ReferencePath(r, r.PathSymbolOptSpaces)].flatMap(referencePath => [
                 referencePath.wrap(P.string(`"`), P.string(`"`)),

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: