Knot node switch pin

js/element/NodeElement.js

@@ -75,11 +75,13 @@ export default class NodeElement extends ISelectableDraggableElement {
 
     #pins
 
-    /** @param {ObjectEntity} entity */
-    constructor(entity) {
-        super(entity, new (NodeElement.getTypeTemplate(entity))())
-        this.#pins = this.getPinEntities().filter(v => !v.isHidden()).map(v => new PinElement(v))
-        this.#pins.forEach(pin => pin.nodeElement = this)
+    /**
+     * @param {ObjectEntity} entity
+     * @param {NodeTemplate} template
+     */
+    constructor(entity, template = undefined) {
+        super(entity, template ?? new (NodeElement.getTypeTemplate(entity))())
+        this.#pins = this.template.createPinElements()
         this.nodeClass = this.entity.getClass()
         this.name = this.entity.getObjectName()
         this.advancedPinDisplay = this.entity.AdvancedPinDisplay?.toString()

js/element/PinElement.js

@@ -106,9 +106,12 @@ export default class PinElement extends IElement {
 
     connections = 0
 
-    /** @param {PinEntity<T>} entity */
-    constructor(entity) {
-        super(entity, new (PinElement.getTypeTemplate(entity))())
+    /**
+     * @param {PinEntity<T>} entity
+     * @param {PinTemplate} template
+     */
+    constructor(entity, template = undefined) {
+        super(entity, template ?? new (PinElement.getTypeTemplate(entity))())
         this.pinType = this.entity.getType()
         this.advancedView = this.entity.bAdvancedView
         this.defaultValue = this.entity.getDefaultValue()

js/template/ExecPinTemplate.js

@@ -7,10 +7,14 @@ export default class ExecPinTemplate extends PinTemplate {
 
     renderIcon() {
         return html`
-            <svg viewBox="-2 0 16 16">
+            <svg viewBox="-2 0 16 16" class="ueb-pin-icon ueb-pin-icon-exec">
                 <path class="ueb-pin-tofill" stroke-width="1.25" stroke="white" fill="none"
                     d="M 2 1 a 2 2 0 0 0 -2 2 v 10 a 2 2 0 0 0 2 2 h 4 a 2 2 0 0 0 1.519 -0.698 l 4.843 -5.651 a 1 1 0 0 0 0 -1.302 L 7.52 1.7 a 2 2 0 0 0 -1.519 -0.698 z" />
             </svg>
         `
     }
+
+    renderName() {
+        return html``
+    }
 }

js/template/ITemplate.js

@@ -1,9 +1,8 @@
-import { css, nothing } from "lit"
+import { css, html } from "lit"
 
 /**
  * @typedef {import("../element/IElement").default} IElement
  * @typedef {import("../input/IInput").default} IInput
- * @typedef {import("lit").TemplateResult<1>} TemplateResult
  */
 
 /** @template {IElement} T */
@@ -41,9 +40,8 @@ export default class ITemplate {
     update(changedProperties) {
     }
 
-    /** @returns {TemplateResult | symbol} */
     render() {
-        return nothing
+        return html``
     }
 
     /** @param {Map} changedProperties */

js/template/KnotNodeTemplate.js

@@ -1,5 +1,6 @@
 import { html } from "lit"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
+import KnotPinTemplate from "./KnotPinTemplate"
 import PinElement from "../element/PinElement"
 
 /** @typedef {import("../element/NodeElement").default} NodeElement */
@@ -7,6 +8,18 @@ import PinElement from "../element/PinElement"
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
 
+    /** @type {PinElement} */
+    #inputPin
+    get inputPin() {
+        return this.#inputPin
+    }
+
+    /** @type {PinElement} */
+    #outputPin
+    get outputPin() {
+        return this.#outputPin
+    }
+
     render() {
         return html`
             <div class="ueb-node-border"></div>
@@ -28,4 +41,14 @@ export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
     getPinElements(node) {
         return node.querySelectorAll("ueb-pin")
     }
+
+    createPinElements() {
+        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]
+        return [
+            this.#inputPin = new PinElement(inputEntity, new KnotPinTemplate()),
+            this.#outputPin = new PinElement(outputEntity, new KnotPinTemplate()),
+        ]
+    }
 }

js/template/KnotPinTemplate.js

@@ -0,0 +1,29 @@
+import { html } from "lit"
+import Utility from "../Utility"
+import PinTemplate from "./PinTemplate"
+
+/** @typedef {import("./KnotNodeTemplate").default} KnotNodeTemplate */
+
+export default class KnotPinTemplate extends PinTemplate {
+
+    render() {
+        return this.element.isOutput() ? this.renderIcon() : html``
+    }
+
+    getLinkLocation() {
+        const rect = (
+            this.element.isInput()
+                // @ts-expect-error
+                ? /** @type {KnotNodeTemplate} */ (this.element.nodeElement.template).outputPin.template.iconElement
+                : this.iconElement
+        ).getBoundingClientRect()
+        const location = Utility.convertLocation(
+            [
+                this.element.isInput() ? (rect.left + rect.right) / 2 : rect.right + 2,
+                (rect.top + rect.bottom) / 2,
+            ],
+            this.element.blueprint.gridElement
+        )
+        return this.element.blueprint.compensateTranslation(location)
+    }
+}

js/template/LinkTemplate.js

@@ -1,9 +1,12 @@
-import { css, html, nothing } from "lit"
+import { html, nothing } from "lit"
 import Configuration from "../Configuration"
 import Utility from "../Utility"
 import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
 
-/** @typedef {import("../element/LinkElement").default} LinkElement */
+/**
+ * @typedef {import("../element/LinkElement").default} LinkElement
+ * @typedef {import("../template/KnotNodeTemplate").default} KnotNodeTemplate
+ */
 
 
 /** @extends {IFromToPositionedTemplate<LinkElement>} */
@@ -61,6 +64,21 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
      */
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties)
+        const sourcePint = this.element.sourcePin
+        if (
+            changedProperties.has("toX")
+            && !this.element.destinationPin
+            && sourcePint?.nodeElement.getType() == "/Script/BlueprintGraph.K2Node_Knot"
+        ) {
+            if (sourcePint.isInput() && this.element.toX > this.element.fromX + 5) {
+                // @ts-expect-error
+                this.element.sourcePin = /** @type {KnotNodeTemplate} */(sourcePint.nodeElement.template).outputPin
+            }
+            if (sourcePint.isOutput() && this.element.toX < this.element.fromX - 5) {
+                // @ts-expect-error
+                this.element.sourcePin = /** @type {KnotNodeTemplate} */(sourcePint.nodeElement.template).inputPin
+            }
+        }
         const dx = Math.max(Math.abs(this.element.fromX - this.element.toX), 1)
         const width = Math.max(dx, Configuration.linkMinWidth)
         // const height = Math.max(Math.abs(link.fromY - link.toY), 1)

js/template/NodeTemplate.js

@@ -76,4 +76,14 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     getPinElements(node) {
         return node.querySelectorAll("ueb-pin")
     }
+
+    createPinElements() {
+        return this.element.getPinEntities()
+            .filter(v => !v.isHidden())
+            .map(v => {
+                const pin = new PinElement(v)
+                pin.nodeElement = this.element
+                return pin
+            })
+    }
 }

js/template/PinTemplate.js

@@ -1,13 +1,10 @@
-import { html, nothing } from "lit"
+import { html } from "lit"
 import Configuration from "../Configuration"
 import ITemplate from "./ITemplate"
 import MouseCreateLink from "../input/mouse/MouseCreateLink"
 import Utility from "../Utility"
 
-/**
- * @typedef {import("../input/IInput").default} IInput
- * @typedef {import("lit").TemplateResult} TemplateResult
- */
+/** @typedef {import("../input/IInput").default} IInput */
 /**
  * @template T
  * @typedef {import("../element/PinElement").default<T>} PinElement
@@ -19,10 +16,17 @@ import Utility from "../Utility"
  */
 export default class PinTemplate extends ITemplate {
 
+    /** @type {HTMLElement} */
+    #iconElement
+    get iconElement() {
+        return this.#iconElement
+    }
+
     /** @param {PinElement<T>} element */
     constructed(element) {
         super.constructed(element)
         this.element.dataset.id = this.element.GetPinIdValue()
+        this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.pinColor[this.element.pinType])
     }
 
     connectedCallback() {
@@ -40,14 +44,10 @@ export default class PinTemplate extends ITemplate {
     }
 
     render() {
-        const icon = html`
-            <div class="ueb-pin-icon">
-                ${this.renderIcon()}
-            </div>
-        `
+        const icon = this.renderIcon()
         const content = html`
             <div class="ueb-pin-content">
-                <span class="ueb-pin-name ">${this.element.getPinDisplayName()}</span>
+                ${this.renderName()}
                 ${this.element.isInput() && !this.element.entity.bDefaultValueIsIgnored ? this.renderInput() : html``}
             </div>
         `
@@ -58,17 +58,21 @@ export default class PinTemplate extends ITemplate {
         `
     }
 
-    /** @returns {TemplateResult | symbol} */
     renderIcon() {
         return html`
-            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="ueb-pin-icon">
                 <circle class="ueb-pin-tofill" cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="5" />
                 <path d="M 34 6 L 34 26 L 42 16 Z" fill="currentColor" />
             </svg>
         `
     }
 
-    /** @returns {TemplateResult | symbol} */
+    renderName() {
+        return html`
+            <span class="ueb-pin-name">${this.element.getPinDisplayName()}</span>
+        `
+    }
+
     renderInput() {
         return html``
     }
@@ -86,11 +90,12 @@ export default class PinTemplate extends ITemplate {
 
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
-        this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.pinColor[this.element.pinType])
+        super.firstUpdated(changedProperties)
+        this.#iconElement = this.element.querySelector(".ueb-pin-icon") ?? this.element
     }
 
     getLinkLocation() {
-        const rect = this.element.querySelector(".ueb-pin-icon").getBoundingClientRect()
+        const rect = this.iconElement.getBoundingClientRect()
         const location = Utility.convertLocation(
             [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2],
             this.element.blueprint.gridElement

js/template/RealPinTemplate.js

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit"
+import { html } from "lit"
 import IInputPinTemplate from "./IInputPinTemplate"
 import INumericPinTemplate from "./INumericPinTemplate"
 import Utility from "../Utility"

js/template/ReferencePinTemplate.js

@@ -5,9 +5,9 @@ export default class ReferencePinTemplate extends PinTemplate {
 
     renderIcon() {
         return html`
-            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="ueb-pin-icon">
                 <polygon class="ueb-pin-tofill" points="4 16 16 4 28 16 16 28" stroke="currentColor" stroke-width="5" />
             </svg>
         `
     }
-}
+}

js/template/WindowTemplate.js

@@ -1,12 +1,9 @@
-import { html, nothing } from "lit"
+import { html } from "lit"
 import Configuration from "../Configuration"
 import IDraggablePositionedTemplate from "./IDraggablePositionedTemplate"
 import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
 
-/**
- * @typedef {import("../element/WindowElement").default} WindowElement
- * @typedef {import("lit").TemplateResult<1>} TemplateResult
- */
+/** @typedef {import("../element/WindowElement").default} WindowElement */
 
 /** @extends {IDraggablePositionedTemplate<WindowElement>} */
 export default class WindowTemplate extends IDraggablePositionedTemplate {
@@ -49,9 +46,8 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
         return html`Window`
     }
 
-    /** @returns {TemplateResult | symbol} */
     renderContent() {
-        return nothing
+        return html``
     }
 
     apply() {