Links improved, refactoring

js/graph/GraphLink.js

@@ -2,11 +2,13 @@ import GraphElement from "./GraphElement"
 import LinkTemplate from "../template/LinkTemplate"
 import Configuration from "../Configuration"
 
-
 /**
  * @typedef {import("./GraphPin").default} GraphPin
+ * @typedef {import("./GraphLinkMessage").default} GraphLinkMessage
  */
 export default class GraphLink extends GraphElement {
+
+    static tagName = "ueb-link"
     /** @type {GraphPin} */
     #source
     /** @type {GraphPin} */
@@ -14,6 +16,13 @@ export default class GraphLink extends GraphElement {
     #nodeDeleteHandler
     #nodeDragSourceHandler
     #nodeDragDestinatonHandler
+    sourceLocation = [0, 0]
+    /** @type {SVGPathElement} */
+    pathElement
+    /** @type {GraphLinkMessage} */
+    linkMessageElement
+    originatesFromInput = false
+    destinationLocation = [0, 0]
 
     /**
      * @param {?GraphPin} source
@@ -23,17 +32,16 @@ export default class GraphLink extends GraphElement {
         super({}, new LinkTemplate())
         /** @type {import("../template/LinkTemplate").default} */
         this.template
-        /** @type {SVGPathElement} */
-        this.pathElement = null
-        this.originatesFromInput = false
-        this.sourceLocation = [0, 0]
-        this.destinationLocation = [0, 0]
         const self = this
-        this.#nodeDeleteHandler = _ => self.blueprint.removeGraphElement(self)
+        this.#nodeDeleteHandler = _ => self.remove()
         this.#nodeDragSourceHandler = e => self.addSourceLocation(e.detail.value)
         this.#nodeDragDestinatonHandler = e => self.addDestinationLocation(e.detail.value)
-        this.setSourcePin(source)
-        this.setDestinationPin(destination)
+        if (source) {
+            this.setSourcePin(source)
+        }
+        if (destination) {
+            this.setDestinationPin(destination)
+        }
     }
 
     /**
@@ -101,7 +109,6 @@ export default class GraphLink extends GraphElement {
         this.template.applyFullLocation(this)
     }
 
-
     /**
      * 
      * @returns {GraphPin}
@@ -143,17 +150,26 @@ export default class GraphLink extends GraphElement {
      */
     setDestinationPin(graphPin) {
         if (this.#destination) {
-            const nodeElement = this.#source.getGraphNode()
+            const nodeElement = this.#destination.getGraphNode()
             nodeElement.removeEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler)
             nodeElement.removeEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler)
         }
         this.#destination = graphPin
         if (this.#destination) {
-            const nodeElement = this.#source.getGraphNode()
+            const nodeElement = this.#destination.getGraphNode()
             nodeElement.addEventListener(Configuration.nodeDeleteEventName, this.#nodeDeleteHandler)
             nodeElement.addEventListener(Configuration.nodeDragLocalEventName, this.#nodeDragDestinatonHandler)
+            this.setDestinationLocation()
         }
     }
+
+    /**
+     * 
+     * @param {GraphLinkMessage} linkMessage 
+     */
+    setLinkMessage(linkMessage) {
+        this.template.applyLinkMessage(this, linkMessage)
+    }
 }
 
-customElements.define("ueb-link", GraphLink)
+customElements.define(GraphLink.tagName, GraphLink)

js/graph/GraphLinkMessage.js

@@ -0,0 +1,58 @@
+import LinkMessageTemplate from "../template/LinkMessageTemplate";
+import GraphElement from "./GraphElement";
+
+/**
+ * @typedef {import("./GraphPin").default} GraphPin
+ * @typedef {import("./GraphLink").default} GraphLink
+ * @typedef {(sourcePin: GraphPin, sourcePin: GraphPin) => String} LinkRetrieval
+ */
+export default class GraphLinkMessage extends GraphElement {
+
+    static tagName = "ueb-link-message"
+    static CONVERT_TYPE = _ => new GraphLinkMessage(
+        "ueb-icon-conver-type",
+        /** @type {LinkRetrieval} */
+        (s, d) => `Convert ${s.getType()} to ${d.getType()}.`
+    )
+    static DIRECTIONS_INCOMPATIBLE = _ => new GraphLinkMessage(
+        "ueb-icon-directions-incompatible",
+        /** @type {LinkRetrieval} */
+        (s, d) => "Directions are not compatbile."
+    )
+    static PLACE_NODE = _ => new GraphLinkMessage(
+        "ueb-icon-place-node",
+        /** @type {LinkRetrieval} */
+        (s, d) => "Place a new node."
+    )
+    static REPLACE_LiNK = _ => new GraphLinkMessage(
+        "ueb-icon-replace-link",
+        /** @type {LinkRetrieval} */
+        (s, d) => "Replace existing input connections."
+    )
+    static SAME_NODE = _ => new GraphLinkMessage(
+        "ueb-icon-same-node",
+        /** @type {LinkRetrieval} */
+        (s, d) => "Both are on the same node."
+    )
+    static TYPES_INCOMPATIBLE = _ => new GraphLinkMessage(
+        "ueb-icon-types-incompatible",
+        /** @type {LinkRetrieval} */
+        (s, d) => `${s.getType()} is not compatible with ${d.getType()}.`
+    )
+
+    /** @type {String} */
+    icon
+    /** @type {String} */
+    message
+    /** @type {GraphLink} */
+    linkElement
+
+    constructor(icon, message) {
+        super({}, new LinkMessageTemplate())
+        this.icon = icon
+        this.message = message
+    }
+
+}
+
+customElements.define(GraphLinkMessage.tagName, GraphLinkMessage)

js/graph/GraphNode.js

@@ -7,6 +7,8 @@ import Configuration from "../Configuration"
 
 export default class GraphNode extends SelectableDraggable {
 
+    static tagName = "ueb-node"
+
     /**
      * 
      * @param {ObjectEntity} entity 
@@ -50,12 +52,12 @@ export default class GraphNode extends SelectableDraggable {
     }
 
     dispatchDeleteEvent(value) {
-        let dragEvent = new CustomEvent(Configuration.nodeDragEventName, {
+        let deleteEvent = new CustomEvent(Configuration.nodeDeleteEventName, {
             bubbles: true,
             cancelable: true,
         })
-        this.dispatchEvent(dragEvent)
+        this.dispatchEvent(deleteEvent)
     }
 }
 
-customElements.define("ueb-node", GraphNode)
+customElements.define(GraphNode.tagName, GraphNode)

js/graph/GraphPin.js

@@ -4,6 +4,8 @@ import MouseCreateLink from "../input/mouse/MouseCreateLink"
 
 export default class GraphPin extends GraphElement {
 
+    static tagName = "ueb-pin"
+
     constructor(entity) {
         super(entity, new PinTemplate())
         /** @type {import("../entity/PinEntity").default} */
@@ -51,6 +53,10 @@ export default class GraphPin extends GraphElement {
         return this.entity.getType()
     }
 
+    getClickableElement() {
+        return this.clickableElement
+    }
+
     /**
      * Returns The exact location where the link originates from or arrives at.
      * @returns {Number[]} The location array
@@ -64,4 +70,4 @@ export default class GraphPin extends GraphElement {
     }
 }
 
-customElements.define("ueb-pin", GraphPin)
+customElements.define(GraphPin.tagName, GraphPin)

js/graph/GraphSelector.js

@@ -4,6 +4,8 @@ import SelectorTemplate from "../template/SelectorTemplate"
 
 export default class GraphSelector extends GraphElement {
 
+    static tagName = "ueb-selector"
+
     constructor() {
         super({}, new SelectorTemplate())
         this.selectionModel = null
@@ -35,4 +37,4 @@ export default class GraphSelector extends GraphElement {
     }
 }
 
-customElements.define("ueb-selector", GraphSelector)
+customElements.define(GraphSelector.tagName, GraphSelector)