Create knot on link double click

2026-02-23 15:24:45 +08:00 · 2022-11-15 14:31:26 +01:00
parent decef44d02
commit f2c09faedb
26 changed files with 2136 additions and 1800 deletions
--- a/js/Blueprint.js
+++ b/js/Blueprint.js
@@ -298,7 +298,7 @@ export default class Blueprint extends IElement {
        return [... this.nodes
            .find(n => pinReference.objectName.toString() == n.getNodeName())
            ?.getPinElements() ?? []]
-            .find(p => pinReference.pinGuid.toString() == p.GetPinIdValue())
+            .find(p => pinReference.pinGuid.toString() == p.getPinId().toString())
    }

    /**
--- a/js/element/ElementFactory.js
+++ b/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)
+    }
+}
--- a/js/element/ISelectableDraggableElement.js
+++ b/js/element/ISelectableDraggableElement.js
@@ -1,5 +1,4 @@
 import Configuration from "../Configuration"
-import IElement from "./IElement"
 import Utility from "../Utility"
 import IDraggableElement from "./IDraggableElement"

--- a/js/element/NodeElement.js
+++ b/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"
--- a/js/element/PinElement.js
+++ b/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
--- a/js/element/defineElements.js
+++ b/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)
+}
--- a/js/entity/IEntity.js
+++ b/js/entity/IEntity.js
@@ -94,7 +94,7 @@ export default class IEntity extends Observable {
        }
        // @ts-expect-error
        const attributes = this.constructor.attributes
-        if (values.constructor !== Object && Object.getOwnPropertyNames(attributes).length == 1) {
+        if (values.constructor !== Object && Object.getOwnPropertyNames(attributes).length === 1) {
            // Where there is just one attribute, option can be the value of that attribute
            values = {
                [Object.getOwnPropertyNames(attributes)[0]]: values
--- a/js/entity/ObjectReferenceEntity.js
+++ b/js/entity/ObjectReferenceEntity.js
@@ -8,6 +8,11 @@ export default class ObjectReferenceEntity extends IEntity {
    }

    constructor(options = {}) {
+        if (options.constructor !== Object) {
+            options = {
+                path: options
+            }
+        }
        super(options)
        /** @type {String} */ this.type
        /** @type {String} */ this.path
--- a/js/entity/PinEntity.js
+++ b/js/entity/PinEntity.js
@@ -37,7 +37,7 @@ export default class PinEntity extends IEntity {
        PinId: GuidEntity,
        PinName: "",
        PinFriendlyName: new TypeInitialization(LocalizedTextEntity, false, null),
-        PinToolTip: "",
+        PinToolTip: new TypeInitialization(String, false, ""),
        Direction: new TypeInitialization(String, false, ""),
        PinType: {
            PinCategory: "",
--- a/js/entity/objects/KnotEntity.js
+++ b/js/entity/objects/KnotEntity.js
@@ -0,0 +1,21 @@
+import ObjectEntity from "../ObjectEntity"
+import ObjectReferenceEntity from "../ObjectReferenceEntity"
+import PinEntity from "../PinEntity"
+
+export default class KnotEntity extends ObjectEntity {
+
+    constructor(options = {}) {
+        super(options)
+        this.Class = new ObjectReferenceEntity("/Script/BlueprintGraph.K2Node_Knot")
+        this.Name = "K2Node_Knot"
+        this.CustomProperties = [
+            new PinEntity({
+                PinName: "InputPin",
+            }),
+            new PinEntity({
+                PinName: "OutputPin",
+                Direction: "EGPD_Output",
+            })
+        ]
+    }
+}
--- a/js/input/common/Paste.js
+++ b/js/input/common/Paste.js
@@ -1,7 +1,9 @@
+import ElementFactory from "../../element/ElementFactory"
 import IInput from "../IInput"
-import NodeElement from "../../element/NodeElement"
 import ObjectSerializer from "../../serialization/ObjectSerializer"

+/** @typedef {import("../../element/NodeElement").default} NodeElement */
+
 export default class Paste extends IInput {

    static #serializer = new ObjectSerializer()
@@ -30,7 +32,9 @@ export default class Paste extends IInput {
        let left = 0
        let count = 0
        let nodes = Paste.#serializer.readMultiple(value).map(entity => {
-            let node = new NodeElement(entity)
+            /** @type {NodeElement} */
+            // @ts-expect-error
+            let node = new (ElementFactory.getConstructor("ueb-node"))(entity)
            top += node.locationY
            left += node.locationX
            ++count
--- a/js/input/mouse/IMouseClick.js
+++ b/js/input/mouse/IMouseClick.js
@@ -6,7 +6,7 @@ import IPointing from "./IPointing"
 * @template {HTMLElement} T
 * @extends {IPointing<T>}
 */
-export default class IMouseClick extends IPointing {
+export default class MouseClick extends IPointing {

    #mouseDownHandler =
        /** @param {MouseEvent} e */
@@ -15,7 +15,7 @@ export default class IMouseClick extends IPointing {
            switch (e.button) {
                case this.options.clickButton:
                    // Either doesn't matter or consider the click only when clicking on the target, not descandants
-                    if (!this.options.strictTarget || e.target == e.currentTarget) {
+                    if (!this.options.strictTarget || e.target === e.currentTarget) {
                        if (this.options.consumeEvent) {
                            e.stopImmediatePropagation() // Captured, don't call anyone else
                        }
--- a/js/input/mouse/MouseCreateLink.js
+++ b/js/input/mouse/MouseCreateLink.js
@@ -1,9 +1,10 @@
 import Configuration from "../../Configuration"
+import ElementFactory from "../../element/ElementFactory"
 import IMouseClickDrag from "./IMouseClickDrag"
-import LinkElement from "../../element/LinkElement"

 /**
 * @typedef {import("../../element/PinElement").default} PinElement
+ * @typedef {import("../../element/LinkElement").default} LinkElement
 * @typedef {import("../../template/KnotNodeTemplate").default} KnotNodeTemplate
 */

@@ -69,7 +70,9 @@ export default class MouseCreateLink extends IMouseClickDrag {
        if (this.target.nodeElement.getType() == Configuration.knotNodeTypeName) {
            this.#knotPin = this.target
        }
-        this.link = new LinkElement(this.target, null)
+        /** @type {LinkElement} */
+        // @ts-expect-error
+        this.link = new (ElementFactory.getConstructor("ueb-link"))(this.target, null)
        this.blueprint.linksContainerElement.prepend(this.link)
        this.link.setMessagePlaceNode()
        this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
@@ -99,8 +102,8 @@ export default class MouseCreateLink extends IMouseClickDrag {
                // Knot pin direction correction
                if (this.#knotPin.isInput() && otherPin.isInput() || this.#knotPin.isOutput() && otherPin.isOutput()) {
                    const oppositePin = this.#knotPin.isInput()
-                        ?/** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).outputPin
-                        :/** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).inputPin
+                        ? /** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).outputPin
+                        : /** @type {KnotNodeTemplate} */(this.#knotPin.nodeElement.template).inputPin
                    if (this.#knotPin === this.link.sourcePin) {
                        this.link.sourcePin = oppositePin
                    } else {
--- a/js/input/mouse/MouseDbClick.js
+++ b/js/input/mouse/MouseDbClick.js
@@ -0,0 +1,59 @@
+import IPointing from "./IPointing"
+
+/** @typedef {import("../../Blueprint").default} Blueprint */
+
+/**
+ * @template {HTMLElement} T
+ * @extends {IPointing<T>}
+ */
+export default class MouseDbClick extends IPointing {
+
+    static ignoreDbClick =
+        /** @param {Number[]} location */
+        location => { }
+
+    #mouseDbClickHandler =
+        /** @param {MouseEvent} e */
+        e => {
+            if (!this.options.strictTarget || e.target === e.currentTarget) {
+                if (this.options.consumeEvent) {
+                    e.stopImmediatePropagation() // Captured, don't call anyone else
+                }
+                this.clickedPosition = this.locationFromEvent(e)
+                this.blueprint.mousePosition[0] = this.clickedPosition[0]
+                this.blueprint.mousePosition[1] = this.clickedPosition[1]
+                this.dbclicked(this.clickedPosition)
+            }
+        }
+
+    #onDbClick
+    get onDbClick() {
+        return this.#onDbClick
+    }
+    set onDbClick(value) {
+        this.#onDbClick = value
+    }
+
+    clickedPosition = [0, 0]
+
+    constructor(target, blueprint, options = {}, onDbClick = MouseDbClick.ignoreDbClick) {
+        options.consumeEvent ??= true
+        options.strictTarget ??= false
+        super(target, blueprint, options)
+        this.#onDbClick = onDbClick
+        this.listenEvents()
+    }
+
+    listenEvents() {
+        this.target.addEventListener("dblclick", this.#mouseDbClickHandler)
+    }
+
+    unlistenEvents() {
+        this.target.removeEventListener("dblclick", this.#mouseDbClickHandler)
+    }
+
+    /* Subclasses will override the following method */
+    dbclicked(location) {
+        this.onDbClick(location)
+    }
+}
--- a/js/template/BlueprintTemplate.js
+++ b/js/template/BlueprintTemplate.js
@@ -9,7 +9,6 @@ import MouseScrollGraph from "../input/mouse/MouseScrollGraph"
 import MouseTracking from "../input/mouse/MouseTracking"
 import Paste from "../input/common/Paste"
 import Select from "../input/mouse/Select"
-import SelectorElement from "../element/SelectorElement"
 import Unfocus from "../input/mouse/Unfocus"
 import Utility from "../Utility"
 import Zoom from "../input/mouse/Zoom"
@@ -17,6 +16,7 @@ import Zoom from "../input/mouse/Zoom"
 /**
 * @typedef {import("../Blueprint").default} Blueprint
 * @typedef {import("../element/PinElement").default} PinElement
+ * @typedef {import("../element/SelectorElement").default} SelectorElement
 * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
 */

@@ -78,6 +78,7 @@ export default class BlueprintTemplate extends ITemplate {
                    <div class="ueb-grid-content">
                        <div data-links></div>
                        <div data-nodes></div>
+                        <ueb-selector></ueb-selector>
                    </div>
                </div>
            </div>
@@ -90,8 +91,7 @@ export default class BlueprintTemplate extends ITemplate {
        this.element.headerElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-header'))
        this.element.overlayElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-overlay'))
        this.element.viewportElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-body'))
-        this.element.selectorElement = new SelectorElement()
-        this.element.querySelector(".ueb-grid-content")?.append(this.element.selectorElement)
+        this.element.selectorElement = /** @type {SelectorElement} */(this.element.querySelector('ueb-selector'))
        this.element.gridElement = /** @type {HTMLElement} */(this.element.viewportElement.querySelector(".ueb-grid"))
        this.element.linksContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-links]"))
        this.element.linksContainerElement.append(...this.element.getLinks())
--- a/js/template/KnotNodeTemplate.js
+++ b/js/template/KnotNodeTemplate.js
@@ -1,9 +1,12 @@
 import { html } from "lit"
+import ElementFactory from "../element/ElementFactory"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
 import KnotPinTemplate from "./KnotPinTemplate"
-import PinElement from "../element/PinElement"

-/** @typedef {import("../element/NodeElement").default} NodeElement */
+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */

 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
@@ -46,9 +49,18 @@ export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
        const entities = this.element.getPinEntities().filter(v => !v.isHidden())
        const inputEntity = entities[entities[0].isInput() ? 0 : 1]
        const outputEntity = entities[entities[0].isOutput() ? 0 : 1]
+        const pinElementConstructor = ElementFactory.getConstructor("ueb-pin")
        return [
-            this.#inputPin = new PinElement(inputEntity, new KnotPinTemplate(), this.element),
-            this.#outputPin = new PinElement(outputEntity, new KnotPinTemplate(), this.element),
+            this.#inputPin = /** @type {PinElement} */(new pinElementConstructor(
+                inputEntity,
+                new KnotPinTemplate(),
+                this.element
+            )),
+            this.#outputPin = /** @type {PinElement} */(new pinElementConstructor(
+                outputEntity,
+                new KnotPinTemplate(),
+                this.element
+            )),
        ]
    }
 }
--- a/js/template/LinearColorPinTemplate.js
+++ b/js/template/LinearColorPinTemplate.js
@@ -1,11 +1,12 @@
 import { html } from "lit"
 import ColorPickerWindowTemplate from "./ColorPickerWindowTemplate"
 import Configuration from "../Configuration"
+import ElementFactory from "../element/ElementFactory"
 import PinTemplate from "./PinTemplate"
-import WindowElement from "../element/WindowElement"

 /**
 * @typedef {import("../element/PinElement").default} PinElement
+ * @typedef {import("../element/WindowElement").default} WindowElement
 * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
 */

@@ -22,15 +23,17 @@ export default class LinearColorPinTemplate extends PinTemplate {
        /** @param {MouseEvent} e */
        e => {
            //e.preventDefault()
-            this.#window = new WindowElement({
-                type: ColorPickerWindowTemplate,
-                windowOptions: {
-                    // The created window will use the following functions to get and set the color
-                    getPinColor: () => this.element.defaultValue,
-                    /** @param {LinearColorEntity} color */
-                    setPinColor: color => this.element.setDefaultValue(color),
-                },
-            })
+            this.#window = /** @type {WindowElement} */ (
+                new (ElementFactory.getConstructor("ueb-window"))({
+                    type: ColorPickerWindowTemplate,
+                    windowOptions: {
+                        // The created window will use the following functions to get and set the color
+                        getPinColor: () => this.element.defaultValue,
+                        /** @param {LinearColorEntity} color */
+                        setPinColor: color => this.element.setDefaultValue(color),
+                    },
+                })
+            )
            this.element.blueprint.append(this.#window)
            const windowApplyHandler = () => {
                this.element.setDefaultValue(
--- a/js/template/LinkTemplate.js
+++ b/js/template/LinkTemplate.js
@@ -1,10 +1,14 @@
 import { html, nothing } from "lit"
 import Configuration from "../Configuration"
-import Utility from "../Utility"
+import ElementFactory from "../element/ElementFactory"
 import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
+import KnotEntity from "../entity/objects/KnotEntity"
+import MouseDbClick from "../input/mouse/MouseDbClick"
+import Utility from "../Utility"

 /**
 * @typedef {import("../element/LinkElement").default} LinkElement
+ * @typedef {import("../element/NodeElement").default} NodeElement
 * @typedef {import("../template/KnotNodeTemplate").default} KnotNodeTemplate
 */

@@ -13,7 +17,7 @@ import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
 export default class LinkTemplate extends IFromToPositionedTemplate {

    /**
-     * Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using
+     * Returns a function providing the inverse multiplication y = a / x + q. The value of a and q are calculated using
     * the derivative of that function y' = -a / x^2 at the point p (x = p[0] and y = p[1]). This means
     * y'(p[0]) = m => -a / p[0]^2 = m => a = -m * p[0]^2. Now, in order to determine q we can use the starting
     * function: p[1] = a / p[0] + q => q = p[1] - a / p[0]
@@ -28,11 +32,9 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
    }

    /**
-     * Returns a function performing a clamped line passing through two points. It is clamped after and before the
-     * points. It is easier explained with an example.
-     *            b ______
-     *             /
-     *            /
+     * Returns a function providing a clamped line passing through two points. It is clamped after and before the
+     * points. It is easier explained with the following ascii draw.
+     *          b ______
     *           /
     *          /
     *         /
@@ -59,6 +61,31 @@ export default class LinkTemplate extends IFromToPositionedTemplate {

    static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30])

+    #createKnot =
+        /** @param {Number[]} location */
+        location => {
+            const knot = /** @type {NodeElement} */(new (ElementFactory.getConstructor("ueb-node"))(new KnotEntity()))
+            knot.setLocation(this.element.blueprint.snapToGrid(location))
+            const link = new (ElementFactory.getConstructor("ueb-link"))(
+                /** @type {KnotNodeTemplate} */(knot.template).outputPin,
+                this.element.destinationPin
+            )
+            this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
+            this.element.blueprint.addGraphElement(knot, link)
+        }
+
+    createInputObjects() {
+        return [
+            ...super.createInputObjects(),
+            new MouseDbClick(
+                this.element.querySelector(".ueb-link-area"),
+                this.element.blueprint,
+                undefined,
+                (location) => this.#createKnot(location)
+            )
+        ]
+    }
+
    /**
     * @param {Map} changedProperties
     */
@@ -112,9 +139,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
        this.element.svgPathD = Configuration.linkRightSVGPath(this.element.startPercentage, c1, c2)
    }

-    /**
-     * @param {Map} changedProperties
-     */
+    /** @param {Map} changedProperties */
    update(changedProperties) {
        super.update(changedProperties)
        if (changedProperties.has("originatesFromInput")) {
@@ -130,19 +155,19 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
    }

    render() {
-        const uniqueId = "ueb-id-" + Math.floor(Math.random() * 1E12)
+        const uniqueId = `ueb-id-${Math.floor(Math.random() * 1E12)}`
        return html`
            <svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                <g>
+                <g class="ueb-link-area">
                    <path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" d="${this.element.svgPathD}" />
-                    <use href="#${uniqueId}" pointer-events="stroke" stroke-width="15" />
+                    <use href="#${uniqueId}" pointer-events="stroke" stroke-width="20" />
                </g>
            </svg>
            ${this.element.linkMessageIcon != "" || this.element.linkMessageText != "" ? html`
-            <div class="ueb-link-message">
-                <span class="${this.element.linkMessageIcon}"></span>
-                <span class="ueb-link-message-text">${this.element.linkMessageText}</span>
-            </div>
+                <div class="ueb-link-message">
+                    <span class="${this.element.linkMessageIcon}"></span>
+                    <span class="ueb-link-message-text">${this.element.linkMessageText}</span>
+                </div>
            ` : nothing}
        `
    }
--- a/js/template/NodeTemplate.js
+++ b/js/template/NodeTemplate.js
@@ -1,8 +1,11 @@
 import { html, nothing } from "lit"
+import ElementFactory from "../element/ElementFactory"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
-import PinElement from "../element/PinElement"

-/** @typedef {import("../element/NodeElement").default} NodeElement */
+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */

 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class NodeTemplate extends ISelectableDraggableTemplate {
@@ -80,6 +83,8 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
    createPinElements() {
        return this.element.getPinEntities()
            .filter(v => !v.isHidden())
-            .map(v => new PinElement(v, undefined, this.element))
+            .map(v => /** @type {PinElement} */(
+                new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
+            ))
    }
 }
--- a/js/template/PinTemplate.js
+++ b/js/template/PinTemplate.js
@@ -25,7 +25,7 @@ export default class PinTemplate extends ITemplate {
    /** @param {PinElement<T>} element */
    constructed(element) {
        super.constructed(element)
-        this.element.dataset.id = this.element.GetPinIdValue()
+        this.element.dataset.id = this.element.getPinId().toString()
    }

    connectedCallback() {