Create knot on link double click

js/element/ElementFactory.js

@@ -0,0 +1,25 @@
+/**
+ * @typedef {new (...args) => IElement} ElementConstructor
+ * @typedef {import("./IElement").default} IElement
+ */
+
+export default class ElementFactory {
+
+    /** @type {Map<String, ElementConstructor>} */
+    static #elementConstructors = new Map()
+
+    /**
+     * @param {String} tagName
+     * @param {ElementConstructor} entityConstructor
+     */
+    static registerElement(tagName, entityConstructor) {
+        ElementFactory.#elementConstructors.set(tagName, entityConstructor)
+    }
+
+    /**
+     * @param {String} tagName
+     */
+    static getConstructor(tagName) {
+        return ElementFactory.#elementConstructors.get(tagName)
+    }
+}

js/element/ISelectableDraggableElement.js

@@ -1,5 +1,4 @@
 import Configuration from "../Configuration"
-import IElement from "./IElement"
 import Utility from "../Utility"
 import IDraggableElement from "./IDraggableElement"
 

js/element/NodeElement.js

@@ -4,7 +4,6 @@ import ISelectableDraggableElement from "./ISelectableDraggableElement"
 import KnotNodeTemplate from "../template/KnotNodeTemplate"
 import NodeTemplate from "../template/NodeTemplate"
 import ObjectEntity from "../entity/ObjectEntity"
-import PinElement from "./PinElement"
 import PinEntity from "../entity/PinEntity"
 import PinReferenceEntity from "../entity/PinReferenceEntity"
 import SerializerFactory from "../serialization/SerializerFactory"

js/element/PinElement.js

@@ -1,12 +1,12 @@
 import BoolPinTemplate from "../template/BoolPinTemplate"
 import Configuration from "../Configuration"
+import ElementFactory from "./ElementFactory"
 import ExecPinTemplate from "../template/ExecPinTemplate"
 import IElement from "./IElement"
 import IntPinTemplate from "../template/IntPinTemplate"
 import ISerializer from "../serialization/ISerializer"
 import LinearColorEntity from "../entity/LinearColorEntity"
 import LinearColorPinTemplate from "../template/LinearColorPinTemplate"
-import LinkElement from "./LinkElement"
 import NamePinTemplate from "../template/NamePinTemplate"
 import PinTemplate from "../template/PinTemplate"
 import RealPinTemplate from "../template/RealPinTemplate"
@@ -103,7 +103,6 @@ export default class PinElement extends IElement {
     /** @type {NodeElement} */
     nodeElement
 
-
     connections = 0
 
     /**
@@ -116,7 +115,7 @@ export default class PinElement extends IElement {
         this.pinType = this.entity.getType()
         this.advancedView = this.entity.bAdvancedView
         this.defaultValue = this.entity.getDefaultValue()
-        this.color = PinElement.properties.color.converter.fromAttribute(Configuration.pinColor[this.pinType]?.toString())
+        this.color = PinElement.properties.color.converter.fromAttribute(this.getColor().toString())
         this.isLinked = false
         this.pinDirection = entity.isInput() ? "input" : entity.isOutput() ? "output" : "hidden"
         this.nodeElement = nodeElement
@@ -132,15 +131,10 @@ export default class PinElement extends IElement {
     }
 
     /** @return {GuidEntity} */
-    GetPinId() {
+    getPinId() {
         return this.entity.PinId
     }
 
-    /** @return {String} */
-    GetPinIdValue() {
-        return this.GetPinId().value
-    }
-
     /** @returns {String} */
     getPinName() {
         return this.entity.PinName
@@ -158,6 +152,13 @@ export default class PinElement extends IElement {
         return Utility.formatStringName(this.entity.PinName)
     }
 
+    getColor() {
+        if (!this.pinType) {
+            return Configuration.pinColor["default"]
+        }
+        return Configuration.pinColor[this.pinType]
+    }
+
     isInput() {
         return this.entity.isInput()
     }
@@ -195,7 +196,7 @@ export default class PinElement extends IElement {
                 }
                 let link = this.blueprint.getLink(this, pin, true)
                 if (!link) {
-                    this.blueprint.addGraphElement(new LinkElement(this, pin))
+                    this.blueprint.addGraphElement(new (ElementFactory.getConstructor("ueb-link"))(this, pin))
                 }
             }
             return pin

js/element/defineElements.js

@@ -1,5 +1,6 @@
 import ColorHandlerElement from "./ColorHandlerElement"
 import ColorSliderElement from "./ColorSliderElement"
+import ElementFactory from "./ElementFactory"
 import InputElement from "./InputElement"
 import LinkElement from "./LinkElement"
 import NodeElement from "./NodeElement"
@@ -9,11 +10,19 @@ import WindowElement from "./WindowElement"
 
 export default function defineElements() {
     customElements.define("ueb-color-handler", ColorHandlerElement)
+    ElementFactory.registerElement("ueb-color-handler", ColorHandlerElement)
     customElements.define("ueb-input", InputElement)
+    ElementFactory.registerElement("ueb-input", InputElement)
     customElements.define("ueb-link", LinkElement)
+    ElementFactory.registerElement("ueb-link", LinkElement)
     customElements.define("ueb-node", NodeElement)
+    ElementFactory.registerElement("ueb-node", NodeElement)
     customElements.define("ueb-pin", PinElement)
+    ElementFactory.registerElement("ueb-pin", PinElement)
     customElements.define("ueb-selector", SelectorElement)
+    ElementFactory.registerElement("ueb-selector", SelectorElement)
     customElements.define("ueb-ui-slider", ColorSliderElement)
+    ElementFactory.registerElement("ueb-ui-slider", ColorSliderElement)
     customElements.define("ueb-window", WindowElement)
-}
+    ElementFactory.registerElement("ueb-window", WindowElement)
+}