Refactoring

js/graph/GraphElement.js

@@ -1,17 +1,27 @@
+/**
+ * @typedef {import("../Blueprint").default} Blueprint
+ * @typedef {import("../entity/Entity").default} Entity
+ * @typedef {import("../input/Context").default} Context
+ * @typedef {import("../template/Template").default} Template
+ */
+
 export default class GraphElement extends HTMLElement {
 
     /**
      * 
-     * @param {import("../template/Template").default} template The template to render this node
+     * @param {Entity} entity The entity containing blueprint related data for this graph element
+     * @param {Template} template The template to render this node
      */
     constructor(entity, template) {
         super()
-        /** @type {import("../Blueprint").default}" */
+        /** @type {Blueprint}" */
         this.blueprint = null
-        /** @type {import("../entity/Entity").default}" */
+        /** @type {Entity}" */
         this.entity = entity
-        /** @type {import("../template/Template").default}" */
+        /** @type {Template}" */
         this.template = template
+        /** @type {Context[]} */
+        this.inputObjects = []
     }
 
     getTemplate() {
@@ -21,8 +31,14 @@ export default class GraphElement extends HTMLElement {
     connectedCallback() {
         this.blueprint = this.closest("ueb-blueprint")
         this.template.apply(this)
+        this.inputObjects = this.createInputObjects()
     }
 
     disconnectedCallback() {
+        this.inputObjects.forEach(v => v.unlistenDOMElement())
+    }
+
+    createInputObjects() {
+        return []
     }
 }

js/graph/GraphLink.js

@@ -17,8 +17,8 @@ export default class GraphLink extends GraphElement {
     #nodeDragDestinatonHandler = _ => this.setDestinationLocation(this.#destination.getLinkLocation())
 
     /**
-     * @param {?GraphPin} source 
-     * @param {?GraphPin} destination 
+     * @param {?GraphPin} source
+     * @param {?GraphPin} destination
      */
     constructor(source, destination) {
         super(this, new LinkTemplate())

js/graph/GraphNode.js

@@ -23,10 +23,6 @@ export default class GraphNode extends SelectableDraggable {
         return new GraphNode(entity)
     }
 
-    connectedCallback() {
-        super.connectedCallback()
-    }
-
     disconnectedCallback() {
         super.disconnectedCallback()
         this.dispatchDeleteEvent()

js/graph/GraphPin.js

@@ -1,69 +1,70 @@
-import GraphElement from "./GraphElement"
-import PinTemplate from "../template/PinTemplate"
-import DragLink from "../input/DragLink"
-import GraphLink from "./GraphLink"
-
-export default class GraphPin extends GraphElement {
-
-    constructor(entity) {
-        super(entity, new PinTemplate())
-        /** @type {import("../entity/PinEntity").default} */
-        this.entity
-        /** @type {HTMLElement} */
-        this.clickableElement = null
-    }
-
-    connectedCallback() {
-        super.connectedCallback()
-        new DragLink(this.clickableElement, this.blueprint, {
-            moveEverywhere: true
-        })
-    }
-
-    /**
-     * 
-     * @returns {String}
-     */
-    getPinDisplayName() {
-        return this.entity.PinName
-    }
-
-    getAttributes() {
-        return PinEntity.attributes
-    }
-
-    isInput() {
-        return this.entity.isInput()
-    }
-
-    isOutput() {
-        return this.entity.isOutput()
-    }
-
-    isConnected() {
-        return this.entity.isConnected()
-    }
-
-    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)
+import GraphElement from "./GraphElement"
+import PinTemplate from "../template/PinTemplate"
+import DragLink from "../input/DragLink"
+import GraphLink from "./GraphLink"
+
+export default class GraphPin extends GraphElement {
+
+    constructor(entity) {
+        super(entity, new PinTemplate())
+        /** @type {import("../entity/PinEntity").default} */
+        this.entity
+        /** @type {HTMLElement} */
+        this.clickableElement = null
+    }
+
+    createInputObjects() {
+        return [
+            new DragLink(this.clickableElement, this.blueprint, {
+                moveEverywhere: true
+            }),
+        ]
+    }
+
+    /**
+     * 
+     * @returns {String}
+     */
+    getPinDisplayName() {
+        return this.entity.PinName
+    }
+
+    getAttributes() {
+        return PinEntity.attributes
+    }
+
+    isInput() {
+        return this.entity.isInput()
+    }
+
+    isOutput() {
+        return this.entity.isOutput()
+    }
+
+    isConnected() {
+        return this.entity.isConnected()
+    }
+
+    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

@@ -17,16 +17,12 @@ export default class SelectableDraggable extends GraphElement {
         }
     }
 
-    connectedCallback() {
-        super.connectedCallback()
-        this.dragObject = new DragMove(this, this.blueprint, {
-            looseTarget: true
-        })
-    }
-
-    disconnectedCallback() {
-        super.disconnectedCallback()
-        this.dragObject.unlistenDOMElement()
+    createInputObjects() {
+        return [
+            new DragMove(this, this.blueprint, {
+                looseTarget: true
+            }),
+        ]
     }
 
     setLocation(value = [0, 0]) {