Graph link work in progress

js/graph/GraphElement.js

@@ -18,4 +18,7 @@ export default class GraphElement extends HTMLElement {
         this.blueprint = this.closest("ueb-blueprint")
         this.template.apply(this)
     }
+
+    disconnectedCallback() {
+    }
 }

js/graph/GraphLink.js

@@ -1,21 +1,62 @@
 import GraphElement from "./GraphElement"
 import LinkTemplate from "../template/LinkTemplate"
+import GraphPin from "./GraphPin"
 
+
+/**
+ * @type {import("./GraphPin").default} GraphPin
+ */
 export default class GraphLink extends GraphElement {
 
+    /** @type {GraphPin} */
+    #source
+    /** @type {GraphPin} */
+    #destination
+    #nodeDeleteHandler = _ => this.blueprint.removeGraphElement(this)
+    #nodeDragSourceHandler = _ => this.setSourceLocation(this.#source.getLinkLocation())
+    #nodeDragDestinatonHandler = _ => this.setDestinationLocation(this.#destination.getLinkLocation())
+
     /**
-     * 
-     * @typedef {{
-     *      node: String,
-     *      pin: String
-     * }} PinReference
-     * @param {?PinReference} source 
-     * @param {?PinReference} destination 
+     * @param {?GraphPin} source 
+     * @param {?GraphPin} destination 
      */
     constructor(source, destination) {
         super(this, new LinkTemplate())
-        this.source = source
-        this.destination = destination
+        /** @type {import("../template/LinkTemplate").default} */
+        this.template
+        this.setSource(source)
+        this.setDestination(destination)
+    }
+
+    setSourceLocation(location) {
+        this.template.applySourceLocation(this.#source.getLinkLocation())
+    }
+
+    setDestinationLocation(location) {
+        this.template.applyDestinationLocation(this.#destination.getLinkLocation())
+    }
+
+    /**
+     * @param {GraphPin} graphPin 
+     */
+    setSourcePin(graphPin) {
+        this.#source?.removeEventListener("ueb-node-delete", this.#nodeDeleteHandler)
+        this.#source?.removeEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
+        this.#source = graphPin
+        this.#source?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler)
+        this.#source?.addEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
+    }
+
+    /**
+     * 
+     * @param {GraphPin} graphPin 
+     */
+    setDestinationPin(graphPin) {
+        this.#destination?.removeEventListener("ueb-node-delete", this.#nodeDeleteHandler)
+        this.#destination?.removeEventListener("ueb-node-drag", this.#nodeDragDestinatonHandler)
+        this.#destination = graphPin
+        this.#destination?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler)
+        this.#destination?.addEventListener("ueb-node-drag", this.#nodeDragDestinatonHandler)
     }
 }
 

js/graph/GraphNode.js

@@ -2,7 +2,6 @@ import NodeTemplate from "../template/NodeTemplate"
 import ObjectEntity from "../entity/ObjectEntity"
 import SelectableDraggable from "./SelectableDraggable"
 import SerializerFactory from "../serialization/SerializerFactory"
-import DragLink from "../input/DragLink"
 import PinEntity from "../entity/PinEntity"
 
 export default class GraphNode extends SelectableDraggable {
@@ -15,7 +14,6 @@ export default class GraphNode extends SelectableDraggable {
         super(entity, new NodeTemplate())
         /** @type {ObjectEntity} */
         this.entity
-        this.graphNodeName = "n/a"
         this.dragLinkObjects = []
         super.setLocation([this.entity.NodePosX, this.entity.NodePosY])
     }
@@ -25,6 +23,15 @@ export default class GraphNode extends SelectableDraggable {
         return new GraphNode(entity)
     }
 
+    connectedCallback() {
+        super.connectedCallback()
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        this.dispatchDeleteEvent()
+    }
+
     /**
      * 
      * @returns {PinEntity[]}
@@ -44,6 +51,14 @@ export default class GraphNode extends SelectableDraggable {
         this.entity.NodePosY = new nodeType(value[1])
         super.setLocation(value)
     }
+
+    dispatchDeleteEvent(value) {
+        let dragEvent = new CustomEvent("ueb-node-delete", {
+            bubbles: true,
+            cancelable: true,
+        })
+        this.dispatchEvent(dragEvent)
+    }
 }
 
 customElements.define("ueb-node", GraphNode)

js/graph/GraphPin.js

@@ -1,6 +1,7 @@
 import GraphElement from "./GraphElement"
 import PinTemplate from "../template/PinTemplate"
 import DragLink from "../input/DragLink"
+import GraphLink from "./GraphLink"
 
 export default class GraphPin extends GraphElement {
 
@@ -46,6 +47,23 @@ export default class GraphPin extends GraphElement {
     getType() {
         return this.entity.getType()
     }
+
+    /**
+     * 
+     * @returns {GraphLink} The link created
+     */
+    dragLink() {
+        let link = new GraphLink(this)
+        return link
+    }
+
+    /**
+     * Returns The exact location where the link originates from or arrives at.
+     * @returns {Number[]} The location array
+     */
+    getLinkLocation() {
+        return [0, 0];
+    }
 }
 
 customElements.define("ueb-pin", GraphPin)

js/graph/SelectableDraggable.js

@@ -25,6 +25,7 @@ export default class SelectableDraggable extends GraphElement {
     }
 
     disconnectedCallback() {
+        super.disconnectedCallback()
         this.dragObject.unlistenDOMElement()
     }
 
@@ -37,33 +38,31 @@ export default class SelectableDraggable extends GraphElement {
         this.setLocation([this.location[0] + value[0], this.location[1] + value[1]])
     }
 
-    dispatchDragEvent(value) {
-        if (!this.selected) {
-            this.blueprint.unselectAll()
-            this.setSelected(true)
-        }
-        let dragEvent = new CustomEvent("uDragSelected", {
-            detail: {
-                instigator: this,
-                value: value
-            },
-            bubbles: false,
-            cancelable: true,
-            composed: false,
-        })
-        this.blueprint.dispatchEvent(dragEvent)
-    }
-
     setSelected(value = true) {
         if (this.selected == value) {
             return
         }
         this.selected = value
         if (this.selected) {
-            this.blueprint.addEventListener("uDragSelected", this.dragHandler)
+            this.blueprint.addEventListener("ueb-node-drag", this.dragHandler)
         } else {
-            this.blueprint.removeEventListener("uDragSelected", this.dragHandler)
+            this.blueprint.removeEventListener("ueb-node-drag", this.dragHandler)
         }
         this.template.applySelected(this)
     }
+
+    dispatchDragEvent(value) {
+        if (!this.selected) {
+            this.blueprint.unselectAll()
+            this.setSelected(true)
+        }
+        let dragEvent = new CustomEvent("ueb-node-drag", {
+            detail: {
+                instigator: this,
+                value: value
+            },
+            cancelable: true
+        })
+        this.blueprint.dispatchEvent(dragEvent)
+    }
 }