SVGIcon class, Macro reference entity

2026-05-13 15:27:30 +08:00 · 2022-11-16 17:47:11 +01:00
parent 900245d69e
commit 704049c869
29 changed files with 571 additions and 190 deletions
--- a/js/template/ExecPinTemplate.js
+++ b/js/template/ExecPinTemplate.js
@@ -1,20 +1,23 @@
 import { html } from "lit"
 import PinTemplate from "./PinTemplate"
+import SVGIcon from "../SVGIcon"
+import Utility from "../Utility"

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

 export default class ExecPinTemplate extends PinTemplate {

    renderIcon() {
-        return html`
-            <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>
-        `
+        return SVGIcon.execPin
    }

    renderName() {
-        return html``
+        let pinName = this.element.entity.PinName
+        if (this.element.entity.PinFriendlyName) {
+            pinName = this.element.entity.PinFriendlyName.toString()
+        } else if (pinName === "execute" || pinName === "then") {
+            return html``
+        }
+        return html`${Utility.formatStringName(pinName)}`
    }
 }
--- a/js/template/KnotNodeTemplate.js
+++ b/js/template/KnotNodeTemplate.js
@@ -1,4 +1,5 @@
 import { html } from "lit"
+import Configuration from "../Configuration"
 import ElementFactory from "../element/ElementFactory"
 import KnotPinTemplate from "./KnotPinTemplate"
 import NodeTemplate from "./NodeTemplate"
@@ -10,6 +11,11 @@ import NodeTemplate from "./NodeTemplate"

 export default class KnotNodeTemplate extends NodeTemplate {

+    static #traversedPin = new Set()
+
+    /** @type {Boolean?} */
+    #chainDirection = null // The node is part of a chain connected to an input or output pin
+
    /** @type {PinElement} */
    #inputPin
    get inputPin() {
@@ -22,6 +28,24 @@ export default class KnotNodeTemplate extends NodeTemplate {
        return this.#outputPin
    }

+    /** @param {PinElement} startingPin */
+    findDirectionaPin(startingPin) {
+        if (
+            startingPin.nodeElement.getType() !== Configuration.nodeType.knot
+            || KnotNodeTemplate.#traversedPin.has(startingPin)
+        ) {
+            KnotNodeTemplate.#traversedPin.clear()
+            return true
+        }
+        KnotNodeTemplate.#traversedPin.add(startingPin)
+        for (let pin of startingPin.getLinks().map(l => this.element.blueprint.getPin(l))) {
+            if (this.findDirectionaPin(pin)) {
+                return true
+            }
+        }
+        return false
+    }
+
    render() {
        return html`
            <div class="ueb-node-border"></div>
@@ -60,4 +84,8 @@ export default class KnotNodeTemplate extends NodeTemplate {
            )),
        ]
    }
+
+    linksChanged() {
+
+    }
 }
--- a/js/template/LinkTemplate.js
+++ b/js/template/LinkTemplate.js
@@ -64,17 +64,16 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
    #createKnot =
        /** @param {Number[]} location */
        location => {
-            const knotEntity = new KnotEntity({
-
-            })
+            const knotEntity = new KnotEntity({}, this.element.sourcePin.entity)
            const knot = /** @type {NodeElement} */(new (ElementFactory.getConstructor("ueb-node"))(knotEntity))
            knot.setLocation(this.element.blueprint.snapToGrid(location))
+            this.element.blueprint.addGraphElement(knot) // Important: keep it before changing existing links
            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)
+            this.element.blueprint.addGraphElement(link)
        }

    createInputObjects() {
@@ -97,8 +96,8 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
        const sourcePin = this.element.sourcePin
        const destinationPin = this.element.destinationPin
        if (changedProperties.has("fromX") || changedProperties.has("toX")) {
-            const isSourceAKnot = sourcePin?.nodeElement.getType() == Configuration.knotNodeTypeName
-            const isDestinationAKnot = destinationPin?.nodeElement.getType() == Configuration.knotNodeTypeName
+            const isSourceAKnot = sourcePin?.nodeElement.getType() == Configuration.nodeType.knot
+            const isDestinationAKnot = destinationPin?.nodeElement.getType() == Configuration.nodeType.knot
            if (isSourceAKnot && (!destinationPin || isDestinationAKnot)) {
                if (sourcePin?.isInput() && this.element.toX > this.element.fromX + Configuration.distanceThreshold) {
                    this.element.sourcePin = /** @type {KnotNodeTemplate} */(sourcePin.nodeElement.template).outputPin
@@ -115,6 +114,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
            }
        }
        const dx = Math.max(Math.abs(this.element.fromX - this.element.toX), 1)
+        const dy = Math.max(Math.abs(this.element.fromY - this.element.toY), 1)
        const width = Math.max(dx, Configuration.linkMinWidth)
        // const height = Math.max(Math.abs(link.fromY - link.toY), 1)
        const fillRatio = dx / width
@@ -164,7 +164,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
            </svg>
            ${this.element.linkMessageIcon != "" || this.element.linkMessageText != "" ? html`
                <div class="ueb-link-message">
-                    <span class="${this.element.linkMessageIcon}"></span>
+                    <span class="ueb-link-message-icon">${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,6 +1,7 @@
 import { html, nothing } from "lit"
 import ElementFactory from "../element/ElementFactory"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
+import SVGIcon from "../SVGIcon"

 /**
 * @typedef {import("../element/NodeElement").default} NodeElement
@@ -10,15 +11,14 @@ import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class NodeTemplate extends ISelectableDraggableTemplate {

+    toggleAdvancedDisplayHandler = () => {
+        this.element.toggleShowAdvancedPinDisplay()
+        this.element.addNextUpdatedCallbacks(() => this.element.dispatchReflowEvent(), true)
+    }
+
    /** @param {NodeElement} element */
    constructed(element) {
        super.constructed(element)
-        if (this.element.advancedPinDisplay) {
-            this.toggleAdvancedDisplayHandler = () => {
-                this.element.toggleShowAdvancedPinDisplay()
-                this.element.addNextUpdatedCallbacks(() => this.element.dispatchReflowEvent(), true)
-            }
-        }
    }

    render() {
@@ -27,16 +27,9 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                <div class="ueb-node-wrapper">
                    <div class="ueb-node-top">
                        <div class="ueb-node-name">
-                            <span class="ueb-node-name-symbol">
-                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M9.72002 6.0699C9.88111 4.96527 10.299 3.9138 10.94 2.99991C10.94 2.99991 10.94 3.05991 10.94 3.08991C10.94 3.36573 11.0496 3.63026 11.2446 3.8253C11.4397 4.02033 11.7042 4.12991 11.98 4.12991C12.2558 4.12991 12.5204 4.02033 12.7154 3.8253C12.9105 3.63026 13.02 3.36573 13.02 3.08991C13.0204 2.90249 12.9681 2.71873 12.8691 2.5596C12.7701 2.40047 12.6283 2.27237 12.46 2.18991H12.37C11.8725 2.00961 11.3275 2.00961 10.83 2.18991C9.21002 2.63991 8.58002 4.99991 8.58002 4.99991L8.40002 5.1199H5.40002L5.15002 6.1199H8.27002L7.27002 11.4199C7.11348 12.0161 6.79062 12.5555 6.33911 12.9751C5.8876 13.3948 5.32607 13.6773 4.72002 13.7899C4.78153 13.655 4.81227 13.5081 4.81002 13.3599C4.81002 13.0735 4.69624 12.7988 4.4937 12.5962C4.29116 12.3937 4.01646 12.2799 3.73002 12.2799C3.44359 12.2799 3.16889 12.3937 2.96635 12.5962C2.76381 12.7988 2.65002 13.0735 2.65002 13.3599C2.66114 13.605 2.75692 13.8386 2.92104 14.021C3.08517 14.2033 3.30746 14.3231 3.55002 14.3599C7.91002 15.1999 8.55002 11.4499 8.55002 11.4499L9.55002 7.05991H12.55L12.8 6.05991H9.64002L9.72002 6.0699Z"
-                                        fill="currentColor"
-                                    />
-                                </svg>
-                            </span>
+                            <span class="ueb-node-name-symbol">${SVGIcon.functionSymbol}</span>
                            <span class="ueb-node-name-text ueb-ellipsis-nowrap-text">
-                                ${this.element.nodeDisplayName}
+                                ${this.renderNodeName()}
                            </span>
                        </div>
                    </div>
@@ -51,10 +44,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                    ` : nothing}
                    ${this.element.advancedPinDisplay ? html`
                        <div class="ueb-node-expansion" @click="${this.toggleAdvancedDisplayHandler}">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                                class="ueb-node-expansion-icon" viewBox="4 4 24 24">
-                                <path d="M 16.003 18.626 l 7.081 -7.081 L 25 13.46 l -8.997 8.998 -9.003 -9 1.917 -1.916 z" />
-                            </svg>
+                            ${SVGIcon.expandIcon}
                        </div>
                    ` : nothing}
                </div>
@@ -62,6 +52,10 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
        `
    }

+    renderNodeName() {
+        return this.element.getNodeDisplayName()
+    }
+
    /** @param {Map} changedProperties */
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties)
@@ -97,4 +91,6 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
            ))
    }
+
+    linksChanged() { }
 }
--- a/js/template/PinTemplate.js
+++ b/js/template/PinTemplate.js
@@ -2,6 +2,7 @@ import { html } from "lit"
 import Configuration from "../Configuration"
 import ITemplate from "./ITemplate"
 import MouseCreateLink from "../input/mouse/MouseCreateLink"
+import SVGIcon from "../SVGIcon"
 import Utility from "../Utility"

 /** @typedef {import("../input/IInput").default} IInput */
@@ -52,12 +53,7 @@ export default class PinTemplate extends ITemplate {
    }

    renderIcon() {
-        return html`
-            <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>
-        `
+        return SVGIcon.genericPin
    }

    renderName() {
--- a/js/template/ReferencePinTemplate.js
+++ b/js/template/ReferencePinTemplate.js
@@ -1,13 +1,9 @@
-import { html } from "lit"
 import PinTemplate from "./PinTemplate"
+import SVGIcon from "../SVGIcon"

 export default class ReferencePinTemplate extends PinTemplate {

    renderIcon() {
-        return html`
-            <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>
-        `
+        return SVGIcon.referencePin
    }
 }
--- a/js/template/WindowTemplate.js
+++ b/js/template/WindowTemplate.js
@@ -2,6 +2,7 @@ import { html } from "lit"
 import Configuration from "../Configuration"
 import IDraggablePositionedTemplate from "./IDraggablePositionedTemplate"
 import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+import SVGIcon from "../SVGIcon"

 /** @typedef {import("../element/WindowElement").default} WindowElement */

@@ -29,10 +30,7 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
                <div class="ueb-window-top">
                    <div class="ueb-window-name ueb-ellipsis-nowrap-text">${this.renderWindowName()}</div>
                    <div class="ueb-window-close" @click="${() => this.element.remove()}">
-                        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-                            <line x1="2" y1="2" x2="30" y2="30" stroke="currentColor" stroke-width="4" />
-                            <line x1="30" y1="2" x2="2" y2="30" stroke="currentColor" stroke-width="4" />
-                        </svg>
+                        ${SVGIcon.close}
                    </div>
                </div>
                <div class="ueb-window-content">