Links wip

js/element/LinkElement.js

@@ -42,6 +42,19 @@ export default class LinkElement extends IElement {
         if (destination) {
             this.setDestinationPin(destination)
         }
+        if (source && destination) {
+            this.#linkPins()
+        }
+    }
+
+    #linkPins() {
+        this.#source.linkTo(this.#destination)
+        this.#destination.linkTo(this.#source)
+    }
+
+    #unlinkPins() {
+        this.#source.unlinkFrom(this.#destination)
+        this.#destination.unlinkFrom(this.#source)
     }
 
     /**
@@ -118,6 +131,9 @@ export default class LinkElement extends IElement {
             const nodeElement = this.#source.getNodeElement()
             nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler)
             nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragSourceHandler)
+            if (this.#destination) {
+                this.#unlinkPins()
+            }
         }
         this.#source = pin
         if (this.#source) {
@@ -126,6 +142,9 @@ export default class LinkElement extends IElement {
             nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler)
             nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragSourceHandler)
             this.setSourceLocation()
+            if (this.#destination) {
+                this.#linkPins()
+            }
         }
     }
 
@@ -144,6 +163,9 @@ export default class LinkElement extends IElement {
             const nodeElement = this.#destination.getNodeElement()
             nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler)
             nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler)
+            if (this.#source) {
+                this.#unlinkPins()
+            }
         }
         this.#destination = pin
         if (this.#destination) {
@@ -151,6 +173,9 @@ export default class LinkElement extends IElement {
             nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler)
             nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler)
             this.setDestinationLocation()
+            if (this.#source) {
+                this.#linkPins()
+            }
         }
     }
 

js/element/NodeElement.js

@@ -30,6 +30,10 @@ export default class NodeElement extends ISelectableDraggableElement {
         this.dispatchDeleteEvent()
     }
 
+    getNodeName() {
+        return this.entity.getName()
+    }
+
     /**
      * @returns {PinEntity[]}
      */

js/element/PinElement.js

@@ -2,10 +2,16 @@ import IElement from "./IElement"
 import MouseCreateLink from "../input/mouse/MouseCreateLink"
 import PinTemplate from "../template/PinTemplate"
 
+/**
+ * @typedef {import("./NodeElement").default} NodeElement
+ */
 export default class PinElement extends IElement {
 
     static tagName = "ueb-pin"
 
+    /** @type {NodeElement} */
+    nodeElement
+
     /** @type {HTMLElement} */
     clickableElement
 
@@ -37,10 +43,17 @@ export default class PinElement extends IElement {
     /**
      * @returns {String}
      */
-    getPinDisplayName() {
+    getPinName() {
         return this.entity.PinName
     }
 
+    /**
+     * @returns {String}
+     */
+    getPinDisplayName() {
+        return this.entity.PinFriendlyName
+    }
+
     isInput() {
         return this.entity.isInput()
     }
@@ -76,6 +89,20 @@ export default class PinElement extends IElement {
     getNodeElement() {
         return this.closest("ueb-node")
     }
+
+    /**
+     * @param {PinElement} targetPinElement
+     */
+    linkTo(targetPinElement) {
+        this.entity.linkTo(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity)
+    }
+
+    /**
+     * @param {PinElement} targetPinElement
+     */
+    unlinkFrom(targetPinElement) {
+        this.entity.unlinkFrom(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity)
+    }
 }
 
 customElements.define(PinElement.tagName, PinElement)