Minor refactoring and fixes

2026-02-04 08:17:41 +08:00 · 2022-12-26 14:10:25 +01:00
parent 3df33bfe05
commit a1ae7799a1
30 changed files with 651 additions and 536 deletions
--- a/cypress/e2e/color_picker.cy.js
+++ b/cypress/e2e/color_picker.cy.js
@@ -1,10 +1,29 @@
+/// <reference types="cypress" />
+
+import Utility from "../../js/Utility"
+
 describe('empty spec', () => {
-  it('passes', () => {
-    cy.visit('http://127.0.0.1:8080/')
-    /* ==== Generated with Cypress Studio ==== */
-    cy.get('.ueb-grid').click();
-    cy.get('.ueb-grid').click();
-    cy.get('[data-nodes=""]').click();
-    /* ==== End Cypress Studio ==== */
-  })
+    it('passes', () => {
+        cy.visit('http://127.0.0.1:8080/empty.html')
+        cy.get("ueb-blueprint")
+            .click(100, 300)
+            .then(blueprint => Utility.paste(blueprint[0], String.raw`
+                Begin Object Class=/Script/BlueprintGraph.K2Node_CallFunction Name="K2Node_CallFunction_7"
+                    FunctionReference=(MemberParent=/Script/CoreUObject.Class'"/Script/UMG.WidgetBlueprintLibrary"',MemberName="DrawLine")
+                    NodePosX=-400
+                    NodePosY=-496
+                    AdvancedPinDisplay=Hidden
+                    NodeGuid=1E381F16F1004F99B8FA2B31A302B728
+                    CustomProperties Pin (PinId=9450390250EA422BAF09BEC8929A9294,PinName="execute",PinToolTip="\nExec",PinType.PinCategory="exec",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=C83869E5A13240F6B14F812FDB0AB4C2,PinName="then",PinToolTip="\nExec",Direction="EGPD_Output",PinType.PinCategory="exec",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=29F8D8746CF548D28EB5C459761706DE,PinName="self",PinFriendlyName=NSLOCTEXT("K2Node", "Target", "Target"),PinToolTip="Target\nWidget Blueprint Library Object Reference",PinType.PinCategory="object",PinType.PinSubCategory="",PinType.PinSubCategoryObject=/Script/CoreUObject.Class'"/Script/UMG.WidgetBlueprintLibrary"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,DefaultObject="/Script/UMG.Default__WidgetBlueprintLibrary",PersistentGuid=00000000000000000000000000000000,bHidden=True,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=D776BF6820F34C91BE75B9952CC791BE,PinName="Context",PinToolTip="Context\nPaint Context Structure (by ref)",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=/Script/CoreUObject.ScriptStruct'"/Script/UMG.PaintContext"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=True,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=4CABFB9E228940589C5A6DE7D4F4D084,PinName="PositionA",PinToolTip="Position A\nVector 2D Structure\n\nStarting position of the line in local space.",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=/Script/CoreUObject.ScriptStruct'"/Script/CoreUObject.Vector2D"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=F688B2830ED74443B306F450C430B45C,PinName="PositionB",PinToolTip="Position B\nVector 2D Structure\n\nEnding position of the line in local space.",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=/Script/CoreUObject.ScriptStruct'"/Script/CoreUObject.Vector2D"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=6A10CA2DBB4C4F23A9B61417A4039F6F,PinName="Tint",PinToolTip="Tint\nLinear Color Structure\n\nColor to render the line.",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=/Script/CoreUObject.ScriptStruct'"/Script/CoreUObject.LinearColor"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,DefaultValue="(R=1.000000,G=1.000000,B=1.000000,A=1.000000)",AutogeneratedDefaultValue="(R=1.000000,G=1.000000,B=1.000000,A=1.000000)",PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=7A6AC1B873304455A159B2434E733265,PinName="bAntiAlias",PinToolTip="Anti Alias\nBoolean\n\nWhether the line should be antialiased.",PinType.PinCategory="bool",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,DefaultValue="true",AutogeneratedDefaultValue="true",PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=True,bOrphanedPin=False,)
+                    CustomProperties Pin (PinId=9F002C20FBB94382B2AB8CC59B28BDA4,PinName="Thickness",PinToolTip="Thickness\nFloat (single-precision)\n\nHow many pixels thick this line should be.",PinType.PinCategory="real",PinType.PinSubCategory="float",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PinType.bSerializeAsSinglePrecisionFloat=False,DefaultValue="1.000000",AutogeneratedDefaultValue="1.000000",PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=True,bOrphanedPin=False,)
+                End Object
+            `))
+    })
 })
--- a/dist/ueblueprint.js
+++ b/dist/ueblueprint.js
--- a/dist/ueblueprint.min.js
+++ b/dist/ueblueprint.min.js
--- a/empty.html
+++ b/empty.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <meta charset="utf-8" />
+   <title>Unreal Engine Blueprint</title>
+   <link rel="stylesheet" href="dist/css/ueblueprint-node-value-type-color.css">
+   <link rel="stylesheet" href="dist/css/ueb-style.css">
+   <style>
+      body {
+         margin: 0;
+         padding: 0;
+         --ueb-height: 100vh;
+      }
+
+   </style>
+</head>
+
+<body>
+   <script type="module">
+      import { Blueprint } from "./dist/ueblueprint.js"
+   </script>
+   <ueb-blueprint></ueb-blueprint>
+</body>
+
+</html>
--- a/js/Blueprint.js
+++ b/js/Blueprint.js
@@ -3,7 +3,6 @@ import Configuration from "./Configuration"
 import IElement from "./element/IElement"
 import LinkElement from "./element/LinkElement"
 import NodeElement from "./element/NodeElement"
-import SelectorElement from "./element/SelectorElement"
 import Utility from "./Utility"

 /**
@@ -80,20 +79,6 @@ export default class Blueprint extends IElement {
    links = []
    /** @type {Number[]} */
    mousePosition = [0, 0]
-    /** @type {HTMLElement} */
-    gridElement
-    /** @type {HTMLElement} */
-    viewportElement
-    /** @type {HTMLElement} */
-    overlayElement
-    /** @type {SelectorElement} */
-    selectorElement
-    /** @type {HTMLElement} */
-    linksContainerElement
-    /** @type {HTMLElement} */
-    nodesContainerElement
-    /** @type {HTMLElement} */
-    headerElement
    waitingExpandUpdate = false
    /** @param {NodeElement} node */
    nodeBoundariesSupplier = node => {
@@ -128,7 +113,7 @@ export default class Blueprint extends IElement {
    }

    getGridDOMElement() {
-        return this.gridElement
+        return this.template.gridElement
    }

    getScroll() {
@@ -187,19 +172,15 @@ export default class Blueprint extends IElement {

    getViewportSize() {
        return [
-            this.viewportElement.clientWidth,
-            this.viewportElement.clientHeight
+            this.template.viewportElement.clientWidth,
+            this.template.viewportElement.clientHeight
        ]
    }

-    /**
-     * Get the scroll limits
-     * @return {Array} The horizonal and vertical maximum scroll limits
-     */
    getScrollMax() {
        return [
-            this.viewportElement.scrollWidth - this.viewportElement.clientWidth,
-            this.viewportElement.scrollHeight - this.viewportElement.clientHeight
+            this.template.viewportElement.scrollWidth - this.template.viewportElement.clientWidth,
+            this.template.viewportElement.scrollHeight - this.template.viewportElement.clientHeight
        ]
    }

@@ -262,7 +243,7 @@ export default class Blueprint extends IElement {
    }

    getScale() {
-        return parseFloat(getComputedStyle(this.gridElement).getPropertyValue("--ueb-scale"))
+        return parseFloat(getComputedStyle(this.template.gridElement).getPropertyValue("--ueb-scale"))
    }

    /** @param {Number[]} param0 */
@@ -294,7 +275,7 @@ export default class Blueprint extends IElement {
    }

    getCommentNodes(justSelected = false) {
-        let result = /** @type {NodeElement[]} */ ([...this.template.getCommentNodes(justSelected)])
+        let result = /** @type {NodeElement[]} */([...this.template.getCommentNodes(justSelected)])
        if (result.length === 0) {
            result = this.nodes.filter(n =>
                n.getType() === Configuration.nodeType.comment && (!justSelected || n.selected)
@@ -375,11 +356,11 @@ export default class Blueprint extends IElement {
                }
                this.nodes.push(element)
                nodeElements.push(element)
-                this.nodesContainerElement?.appendChild(element)
+                this.template.nodesContainerElement?.appendChild(element)
            } else if (element instanceof LinkElement && !this.links.includes(element)) {
                this.links.push(element)
-                if (this.linksContainerElement && !this.linksContainerElement.contains(element)) {
-                    this.linksContainerElement.appendChild(element)
+                if (this.template.linksContainerElement && !this.template.linksContainerElement.contains(element)) {
+                    this.template.linksContainerElement.appendChild(element)
                }
            }
        }
--- a/js/Utility.js
+++ b/js/Utility.js
@@ -304,7 +304,24 @@ export default class Utility {
        ]
    }

+    /**
+     * @param {Number} begin
+     * @param {Number} end
+     */
    static range(begin, end, step = 1) {
        return Array.from({ length: Math.ceil((end - begin) / step) }, (_, i) => begin + (i * step))
    }
+
+    /**
+     * @param {HTMLElement} element
+     * @param {String} value
+     */
+    static paste(element, value) {
+        const event = new ClipboardEvent("paste", {
+            bubbles: true,
+            cancelable: true,
+        })
+        event.clipboardData.setData("text", value)
+        element.dispatchEvent(event)
+    }
 }
--- a/js/element/IElement.js
+++ b/js/element/IElement.js
@@ -93,7 +93,6 @@ export default class IElement extends LitElement {

    setup() {
        this.template.setup()
-        this.template.inputSetup()
        this.isSetup = true
    }

@@ -122,6 +121,7 @@ export default class IElement extends LitElement {
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties)
        this.template.firstUpdated(changedProperties)
+        this.template.inputSetup()
    }

    /** @param {PropertyValues} changedProperties */
--- a/js/element/WindowElement.js
+++ b/js/element/WindowElement.js
@@ -43,6 +43,12 @@ export default class WindowElement extends IDraggableElement {
        super.initialize(entity, template)
    }

+    setup() {
+        super.setup()
+        this.locationX = this.blueprint.mousePosition[0]
+        this.locationY = this.blueprint.mousePosition[1]
+    }
+
    cleanup() {
        super.cleanup()
        this.acknowledgeClose()
--- a/js/input/IInput.js
+++ b/js/input/IInput.js
@@ -20,6 +20,10 @@ export default class IInput {
    /** @type {Object} */
    options

+
+    listenHandler = () => this.listenEvents()
+    unlistenHandler = () => this.unlistenEvents()
+
    /**
     * @param {T} target
     * @param {Blueprint} blueprint
@@ -32,9 +36,9 @@ export default class IInput {
        this.#target = target
        this.#blueprint = blueprint
        this.options = options
-        let self = this
-        this.listenHandler = _ => self.listenEvents()
-        this.unlistenHandler = _ => self.unlistenEvents()
+    }
+
+    setup() {
        if (this.options.listenOnFocus) {
            this.blueprint.addEventListener(Configuration.focusEventName.begin, this.listenHandler)
            this.blueprint.addEventListener(Configuration.focusEventName.end, this.unlistenHandler)
@@ -43,9 +47,12 @@ export default class IInput {
            this.blueprint.addEventListener(Configuration.editTextEventName.begin, this.unlistenHandler)
            this.blueprint.addEventListener(Configuration.editTextEventName.end, this.listenHandler)
        }
+        if (this.blueprint.focused) {
+            this.listenEvents()
+        }
    }

-    unlistenDOMElement() {
+    cleanup() {
        this.unlistenEvents()
        this.blueprint.removeEventListener(Configuration.focusEventName.begin, this.listenHandler)
        this.blueprint.removeEventListener(Configuration.focusEventName.end, this.unlistenHandler)
--- a/js/input/common/Copy.js
+++ b/js/input/common/Copy.js
@@ -24,11 +24,15 @@ export default class Copy extends IInput {
        window.removeEventListener("copy", this.#copyHandler)
    }

-    copied() {
-        const value = this.blueprint
+    getSerializedText() {
+        return this.blueprint
            .getNodes(true)
            .map(node => Copy.#serializer.serialize(node.entity, false))
            .join("")
+    }
+
+    copied() {
+        const value = this.getSerializedText()
        navigator.clipboard.writeText(value)
    }
 }
--- a/js/input/mouse/IPointing.js
+++ b/js/input/mouse/IPointing.js
@@ -1,8 +1,6 @@
 import IInput from "../IInput"
 import Utility from "../../Utility"

-/** @typedef {import("../../Blueprint").default} Blueprint */
-
 /**
 * @template {HTMLElement} T
 * @extends {IInput<T>}
@@ -13,6 +11,7 @@ export default class IPointing extends IInput {
        options.ignoreTranslateCompensate ??= false
        options.movementSpace ??= blueprint.getGridDOMElement() ?? document.documentElement
        super(target, blueprint, options)
+        /** @type {HTMLElement} */
        this.movementSpace = options.movementSpace
    }

--- a/js/input/mouse/MouseCreateLink.js
+++ b/js/input/mouse/MouseCreateLink.js
@@ -23,7 +23,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
        e => {
            if (!this.enteredPin) {
                this.linkValid = false
-                this.enteredPin = /** @type {PinElement} */ (e.target)
+                this.enteredPin = /** @type {PinElement} */(e.target)
                const a = this.link.sourcePin ?? this.target // Remember target might have change
                const b = this.enteredPin
                if (
@@ -74,7 +74,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
        /** @type {LinkElement} */
        this.link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
            .newObject(this.target, null)
-        this.blueprint.linksContainerElement.prepend(this.link)
+        this.blueprint.template.linksContainerElement.prepend(this.link)
        this.link.setMessagePlaceNode()
        this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
        this.#listenedPins.forEach(pin => {
--- a/js/input/mouse/Select.js
+++ b/js/input/mouse/Select.js
@@ -4,7 +4,7 @@ export default class Select extends IMouseClickDrag {

    constructor(target, blueprint, options) {
        super(target, blueprint, options)
-        this.selectorElement = this.blueprint.selectorElement
+        this.selectorElement = this.blueprint.template.selectorElement
    }

    startDrag() {
--- a/js/template/BlueprintTemplate.js
+++ b/js/template/BlueprintTemplate.js
@@ -37,6 +37,14 @@ export default class BlueprintTemplate extends ITemplate {
        "--ueb-node-radius": `${Configuration.nodeRadius}px`,
    }

+    /** @type {HTMLElement} */ headerElement
+    /** @type {HTMLElement} */ overlayElement
+    /** @type {HTMLElement} */ viewportElement
+    /** @type {SelectorElement} */ selectorElement
+    /** @type {HTMLElement} */ gridElement
+    /** @type {HTMLElement} */ linksContainerElement
+    /** @type {HTMLElement} */ nodesContainerElement
+
    /** @param {Blueprint} element */
    initialize(element) {
        super.initialize(element)
@@ -91,26 +99,26 @@ export default class BlueprintTemplate extends ITemplate {
    /** @param {PropertyValues} changedProperties */
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties)
-        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 = /** @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())
-        this.element.nodesContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-nodes]"))
-        this.element.nodesContainerElement.append(...this.element.getNodes())
-        this.element.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize)
+        this.headerElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-header'))
+        this.overlayElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-overlay'))
+        this.viewportElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-body'))
+        this.selectorElement = /** @type {SelectorElement} */(this.element.querySelector('ueb-selector'))
+        this.gridElement = /** @type {HTMLElement} */(this.viewportElement.querySelector(".ueb-grid"))
+        this.linksContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-links]"))
+        this.linksContainerElement.append(...this.element.getLinks())
+        this.nodesContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-nodes]"))
+        this.nodesContainerElement.append(...this.element.getNodes())
+        this.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize)
    }

    /** @param {PropertyValues} changedProperties */
    willUpdate(changedProperties) {
        super.willUpdate(changedProperties)
-        if (this.element.headerElement && changedProperties.has("zoom")) {
-            this.element.headerElement.classList.add("ueb-zoom-changed")
-            this.element.headerElement.addEventListener(
+        if (this.headerElement && changedProperties.has("zoom")) {
+            this.headerElement.classList.add("ueb-zoom-changed")
+            this.headerElement.addEventListener(
                "animationend",
-                () => this.element.headerElement.classList.remove("ueb-zoom-changed")
+                () => this.headerElement.classList.remove("ueb-zoom-changed")
            )
        }
    }
@@ -119,7 +127,7 @@ export default class BlueprintTemplate extends ITemplate {
    updated(changedProperties) {
        super.updated(changedProperties)
        if (changedProperties.has("scrollX") || changedProperties.has("scrollY")) {
-            this.element.viewportElement.scroll(this.element.scrollX, this.element.scrollY)
+            this.viewportElement.scroll(this.element.scrollX, this.element.scrollY)
        }
        if (changedProperties.has("zoom")) {
            const previousZoom = changedProperties.get("zoom")
@@ -149,4 +157,12 @@ export default class BlueprintTemplate extends ITemplate {
            `ueb-node[data-name="${pinReference.objectName}"] ueb-pin[data-id="${pinReference.pinGuid}"]`
        ))
    }
+
+    /**
+     * @param {Number} x
+     * @param {Number} y
+     */
+    isPointVisible(x, y) {
+        return false
+    }
 }
--- a/js/template/IDraggableControlTemplate.js
+++ b/js/template/IDraggableControlTemplate.js
@@ -31,7 +31,7 @@ export default class IDraggableControlTemplate extends IDraggableTemplate {
    }

    createDraggableObject() {
-        return new MouseMoveDraggable(this.element, this.element.blueprint, {
+        return new MouseMoveDraggable(this.element, this.blueprint, {
            draggableElement: this.movementSpace,
            ignoreTranslateCompensate: true,
            moveEverywhere: true,
--- a/js/template/IDraggableTemplate.js
+++ b/js/template/IDraggableTemplate.js
@@ -17,7 +17,7 @@ export default class IDraggableTemplate extends ITemplate {
    }

    createDraggableObject() {
-        return new MouseMoveDraggable(this.element, this.element.blueprint, {
+        return new MouseMoveDraggable(this.element, this.blueprint, {
            draggableElement: this.getDraggableElement(),
        })
    }
--- a/js/template/IResizeableTemplate.js
+++ b/js/template/IResizeableTemplate.js
@@ -60,7 +60,7 @@ export default class IResizeableTemplate extends NodeTemplate {
    createInputObjects() {
        return [
            ...super.createInputObjects(),
-            new MouseClickDrag(this.#THandler, this.element.blueprint, {
+            new MouseClickDrag(this.#THandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[1] = location[1] - this.element.topBoundary()
                    if (this.setSizeY(this.element.sizeY - movement[1])) {
@@ -69,21 +69,21 @@ export default class IResizeableTemplate extends NodeTemplate {
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#RHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#RHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[0] = location[0] - this.element.rightBoundary()
                    this.setSizeX(this.element.sizeX + movement[0])
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#BHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#BHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[1] = location[1] - this.element.bottomBoundary()
                    this.setSizeY(this.element.sizeY + movement[1])
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#LHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#LHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[0] = location[0] - this.element.leftBoundary()
                    if (this.setSizeX(this.element.sizeX - movement[0])) {
@@ -92,7 +92,7 @@ export default class IResizeableTemplate extends NodeTemplate {
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#TRHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#TRHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[0] = location[0] - this.element.rightBoundary()
                    movement[1] = location[1] - this.element.topBoundary()
@@ -103,7 +103,7 @@ export default class IResizeableTemplate extends NodeTemplate {
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#BRHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#BRHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[0] = location[0] - this.element.rightBoundary()
                    movement[1] = location[1] - this.element.bottomBoundary()
@@ -112,7 +112,7 @@ export default class IResizeableTemplate extends NodeTemplate {
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#BLHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#BLHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[0] = location[0] - this.element.leftBoundary()
                    movement[1] = location[1] - this.element.bottomBoundary()
@@ -123,7 +123,7 @@ export default class IResizeableTemplate extends NodeTemplate {
                },
                onEndDrag: () => this.endResize(),
            }),
-            new MouseClickDrag(this.#TLHandler, this.element.blueprint, {
+            new MouseClickDrag(this.#TLHandler, this.blueprint, {
                onDrag: (location, movement) => {
                    movement[0] = location[0] - this.element.leftBoundary()
                    movement[1] = location[1] - this.element.topBoundary()
--- a/js/template/ISelectableDraggableTemplate.js
+++ b/js/template/ISelectableDraggableTemplate.js
@@ -14,11 +14,11 @@ import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 export default class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {

    getDraggableElement() {
-        return /** @type {Element} */ (this.element)
+        return /** @type {Element} */(this.element)
    }

    createDraggableObject() {
-        return /** @type {MouseMoveDraggable} */ (new MouseMoveNodes(this.element, this.element.blueprint, {
+        return /** @type {MouseMoveDraggable} */(new MouseMoveNodes(this.element, this.blueprint, {
            draggableElement: this.getDraggableElement(),
        }))
    }
--- a/js/template/ITemplate.js
+++ b/js/template/ITemplate.js
@@ -12,6 +12,10 @@ export default class ITemplate {
    /** @type {T} */
    element

+    get blueprint() {
+        return this.element.blueprint
+    }
+
    /** @type {IInput[]} */
    #inputObjects = []
    get inputObjects() {
@@ -28,10 +32,11 @@ export default class ITemplate {
    }

    setup() {
+        this.#inputObjects.forEach(v => v.setup())
    }

    cleanup() {
-        this.#inputObjects.forEach(v => v.unlistenDOMElement())
+        this.#inputObjects.forEach(v => v.cleanup())
    }

    /** @param {PropertyValues} changedProperties */
--- a/js/template/LinkTemplate.js
+++ b/js/template/LinkTemplate.js
@@ -25,11 +25,11 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
     * function: p[1] = a / p[0] + q => q = p[1] - a / p[0]
     * @param {Number} m slope
     * @param {Number[]} p reference point
-     * @returns Maximum value
     */
    static decreasingValue(m, p) {
        const a = -m * p[0] ** 2
        const q = p[1] - a / p[0]
+        /** @param {Number} x */
        return x => a / x + q
    }

@@ -63,29 +63,28 @@ export default class LinkTemplate extends IFromToPositionedTemplate {

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

-    #createKnot =
-        /** @param {Number[]} location */
-        location => {
-            const knotEntity = new KnotEntity({}, this.element.sourcePin.entity)
-            const knot = /** @type {NodeElementConstructor} */(ElementFactory.getConstructor("ueb-node"))
-                .newObject(knotEntity)
-            knot.setLocation(this.element.blueprint.snapToGrid(location))
-            this.element.blueprint.addGraphElement(knot) // Important: keep it before changing existing links
-            const link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
-                .newObject(
+    /** @type {(location: Number[]) => void} */
+    #createKnot = location => {
+        const knotEntity = new KnotEntity({}, this.element.sourcePin.entity)
+        const knot = /** @type {NodeElementConstructor} */(ElementFactory.getConstructor("ueb-node"))
+            .newObject(knotEntity)
+        knot.setLocation(this.blueprint.snapToGrid(location))
+        this.blueprint.addGraphElement(knot) // Important: keep it before changing existing links
+        const link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
+            .newObject(
                /** @type {KnotNodeTemplate} */(knot.template).outputPin,
-                    this.element.destinationPin
-                )
-            this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
-            this.element.blueprint.addGraphElement(link)
-        }
+                this.element.destinationPin
+            )
+        this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
+        this.blueprint.addGraphElement(link)
+    }

    createInputObjects() {
        return [
            ...super.createInputObjects(),
            new MouseDbClick(
                this.element.querySelector(".ueb-link-area"),
-                this.element.blueprint,
+                this.blueprint,
                undefined,
                (location) => this.#createKnot(location)
            )
--- a/js/template/WindowTemplate.js
+++ b/js/template/WindowTemplate.js
@@ -16,10 +16,10 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
    }

    createDraggableObject() {
-        return new MouseMoveDraggable(this.element, this.element.blueprint, {
+        return new MouseMoveDraggable(this.element, this.blueprint, {
            draggableElement: this.getDraggableElement(),
            ignoreTranslateCompensate: true,
-            movementSpace: this.element.blueprint,
+            movementSpace: this.blueprint,
            stepSize: 1,
        })
    }
--- a/js/template/node/CommentNodeTemplate.js
+++ b/js/template/node/CommentNodeTemplate.js
@@ -58,7 +58,7 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
    }

    manageNodesBind() {
-        let nodes = this.element.blueprint.getNodes()
+        let nodes = this.blueprint.getNodes()
        for (let node of nodes) {
            if (
                node.topBoundary() >= this.element.topBoundary()
--- a/js/template/node/KnotNodeTemplate.js
+++ b/js/template/node/KnotNodeTemplate.js
@@ -45,7 +45,7 @@ export default class KnotNodeTemplate extends NodeTemplate {
            return true
        }
        KnotNodeTemplate.#traversedPin.add(startingPin)
-        for (let pin of startingPin.getLinks().map(l => this.element.blueprint.getPin(l))) {
+        for (let pin of startingPin.getLinks().map(l => this.blueprint.getPin(l))) {
            if (this.findDirectionaPin(pin)) {
                return true
            }
--- a/js/template/pin/BoolPinTemplate.js
+++ b/js/template/pin/BoolPinTemplate.js
@@ -31,7 +31,7 @@ export default class BoolInputPinTemplate extends PinTemplate {
    createInputObjects() {
        return [
            ...super.createInputObjects(),
-            new MouseIgnore(this.#input, this.element.blueprint),
+            new MouseIgnore(this.#input, this.blueprint),
        ]
    }

--- a/js/template/pin/IInputPinTemplate.js
+++ b/js/template/pin/IInputPinTemplate.js
@@ -64,7 +64,7 @@ export default class IInputPinTemplate extends PinTemplate {
    createInputObjects() {
        return [
            ...super.createInputObjects(),
-            ...this.#inputContentElements.map(elem => new MouseIgnore(elem, this.element.blueprint)),
+            ...this.#inputContentElements.map(elem => new MouseIgnore(elem, this.blueprint)),
        ]
    }

--- a/js/template/pin/InputTemplate.js
+++ b/js/template/pin/InputTemplate.js
@@ -6,13 +6,13 @@ import ITemplate from "../ITemplate"
 export default class InputTemplate extends ITemplate {

    #focusHandler = () => {
-        this.element.blueprint.acknowledgeEditText(true)
+        this.blueprint.acknowledgeEditText(true)
        if (this.element.selectOnFocus) {
            getSelection().selectAllChildren(this.element)
        }
    }
    #focusoutHandler = () => {
-        this.element.blueprint.acknowledgeEditText(false)
+        this.blueprint.acknowledgeEditText(false)
        document.getSelection()?.removeAllRanges() // Deselect eventually selected text inside the input
    }
    #inputSingleLineHandler =
--- a/js/template/pin/KnotPinTemplate.js
+++ b/js/template/pin/KnotPinTemplate.js
@@ -13,7 +13,7 @@ export default class KnotPinTemplate extends PinTemplate {
    getLinkLocation() {
        const rect = (
            this.element.isInput()
-                ? /** @type {KnotNodeTemplate} */ (this.element.nodeElement.template).outputPin.template
+                ? /** @type {KnotNodeTemplate} */(this.element.nodeElement.template).outputPin.template
                : this
        )
            .iconElement.getBoundingClientRect()
@@ -22,8 +22,8 @@ export default class KnotPinTemplate extends PinTemplate {
                this.element.isInput() ? rect.left + 1 : rect.right + 2,
                (rect.top + rect.bottom) / 2,
            ],
-            this.element.blueprint.gridElement
+            this.blueprint.template.gridElement
        )
-        return this.element.blueprint.compensateTranslation(location)
+        return this.blueprint.compensateTranslation(location)
    }
 }
--- a/js/template/pin/LinearColorPinTemplate.js
+++ b/js/template/pin/LinearColorPinTemplate.js
@@ -19,7 +19,7 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
    /** @param {MouseEvent} e */
    #launchColorPickerWindow = e => {
        e.preventDefault()
-        this.element.blueprint.setFocused(true)
+        this.blueprint.setFocused(true)
        /** @type {WindowElement} */
        this.#window = /** @type {WindowElementConstructor} */(ElementFactory.getConstructor("ueb-window"))
            .newObject({
@@ -31,7 +31,7 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
                    setPinColor: color => this.element.setDefaultValue(color),
                },
            })
-        this.element.blueprint.append(this.#window)
+        this.blueprint.append(this.#window)
        const windowApplyHandler = () => {
            this.element.setDefaultValue(
                /** @type {ColorPickerWindowTemplate} */(this.#window.template).color
--- a/js/template/pin/PinTemplate.js
+++ b/js/template/pin/PinTemplate.js
@@ -34,7 +34,7 @@ export default class PinTemplate extends ITemplate {
    /** @returns {IInput[]} */
    createInputObjects() {
        return [
-            new MouseCreateLink(this.getClickableElement(), this.element.blueprint, {
+            new MouseCreateLink(this.getClickableElement(), this.blueprint, {
                moveEverywhere: true,
            })
        ]
@@ -91,9 +91,9 @@ export default class PinTemplate extends ITemplate {
        const rect = this.iconElement.getBoundingClientRect()
        const location = Utility.convertLocation(
            [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2],
-            this.element.blueprint.gridElement
+            this.blueprint.template.gridElement
        )
-        return this.element.blueprint.compensateTranslation(location)
+        return this.blueprint.compensateTranslation(location)
    }

    getClickableElement() {
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -6,5 +6,5 @@
    },
    "include": [
        "js/**/*.js",
-    ]
-}
+    ],
+}