Bugfixes, added pin types, colors

js/template/node/EventNodeTemplate.js

@@ -0,0 +1,60 @@
+import { html, nothing } from "lit"
+import ElementFactory from "../../element/ElementFactory"
+import MinimalPinTemplate from "../pin/MinimalPinTemplate"
+import NodeTemplate from "./NodeTemplate"
+
+/**
+ * @typedef {import("../../element/PinElement").PinElementConstructor} PinElementConstructor
+ * @typedef {import("lit").PropertyValues} PropertyValues
+ */
+
+export default class EventNodeTemplate extends NodeTemplate {
+
+    static nodeStyleClasses = [...super.nodeStyleClasses, "ueb-node-style-event"]
+
+    /** @param {PropertyValues} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        this.element.querySelector(".ueb-node-top").appendChild(this.createDelegatePinElement())
+    }
+
+    renderTop() {
+        const icon = this.renderNodeIcon()
+        const name = this.renderNodeName()
+        return html`
+            <div class="ueb-node-name">
+                ${icon ? html`
+                    <div class="ueb-node-name-symbol">${icon}</div>
+                ` : nothing}
+                ${name ? html`
+                    <div class="ueb-node-name-text ueb-ellipsis-nowrap-text">
+                        ${name}
+                        ${this.hasSubtitle && this.element.entity.FunctionReference.MemberParent ? html`
+                            <div class="ueb-node-subtitle-text ueb-ellipsis-nowrap-text">
+                                Custom Event
+                            </div>
+                        `: nothing}
+                    </div>
+                ` : nothing}
+            </div>
+        `
+    }
+
+    createDelegatePinElement() {
+        const pin = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin")).newObject(
+            this.element.getPinEntities().find(v => !v.isHidden() && v.PinType.PinCategory === "delegate"),
+            new MinimalPinTemplate(),
+            this.element
+        )
+        pin.template.isNameRendered = false
+        return pin
+    }
+
+    createPinElements() {
+        return this.element.getPinEntities()
+            .filter(v => !v.isHidden() && v.PinType.PinCategory !== "delegate")
+            .map(pinEntity => /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
+                .newObject(pinEntity, undefined, this.element)
+            )
+    }
+}

js/template/node/NodeTemplate.js

@@ -1,4 +1,4 @@
-import { css, html, nothing } from "lit"
+import { html, nothing } from "lit"
 import Configuration from "../../Configuration"
 import ElementFactory from "../../element/ElementFactory"
 import ISelectableDraggableTemplate from "../ISelectableDraggableTemplate"
@@ -17,7 +17,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
 
     /** @typedef {typeof NodeTemplate} NodeTemplateConstructor */
 
-    #hasTargetInputNode = false
+    hasSubtitle = false
 
     static nodeStyleClasses = ["ueb-node-style-default"]
 
@@ -38,28 +38,10 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     }
 
     render() {
-        const icon = this.renderNodeIcon()
-        const name = this.renderNodeName()
         return html`
             <div class="ueb-node-border">
                 <div class="ueb-node-wrapper">
-                    <div class="ueb-node-top">
-                        <div class="ueb-node-name">
-                            ${icon ? html`
-                                <div class="ueb-node-name-symbol">${icon}</div>
-                            ` : nothing}
-                            ${name ? html`
-                                <div class="ueb-node-name-text ueb-ellipsis-nowrap-text">
-                                    ${name}
-                                    ${this.#hasTargetInputNode && this.element.entity.FunctionReference.MemberParent ? html`
-                                        <div class="ueb-node-subtitle-text ueb-ellipsis-nowrap-text">
-                                            Target is ${Utility.formatStringName(this.element.entity.FunctionReference.MemberParent.getName())}
-                                        </div>
-                                    `: nothing}
-                                </div>
-                            ` : nothing}
-                        </div>
-                    </div>
+                    <div class="ueb-node-top">${this.renderTop()}</div>
                     <div class="ueb-node-content">
                         <div class="ueb-node-inputs"></div>
                         <div class="ueb-node-outputs"></div>
@@ -87,6 +69,28 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         return this.element.getNodeDisplayName()
     }
 
+    renderTop() {
+        const icon = this.renderNodeIcon()
+        const name = this.renderNodeName()
+        return html`
+            <div class="ueb-node-name">
+                ${icon ? html`
+                    <div class="ueb-node-name-symbol">${icon}</div>
+                ` : nothing}
+                ${name ? html`
+                    <div class="ueb-node-name-text ueb-ellipsis-nowrap-text">
+                        ${name}
+                        ${this.hasSubtitle && this.element.entity.FunctionReference.MemberParent ? html`
+                            <div class="ueb-node-subtitle-text ueb-ellipsis-nowrap-text">
+                                Target is ${Utility.formatStringName(this.element.entity.FunctionReference.MemberParent.getName())}
+                            </div>
+                        `: nothing}
+                    </div>
+                ` : nothing}
+            </div>
+        `
+    }
+
     /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
@@ -111,9 +115,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         return this.element.getPinEntities()
             .filter(v => !v.isHidden())
             .map(pinEntity => {
-                if (!this.#hasTargetInputNode && pinEntity.getDisplayName() == "Target") {
-                    this.#hasTargetInputNode = true
-                }
+                this.hasSubtitle = this.hasSubtitle || pinEntity.getDisplayName() === "Target"
                 let pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
                     .newObject(pinEntity, undefined, this.element)
                 return pinElement

js/template/pin/IInputPinTemplate.js

@@ -49,16 +49,16 @@ export default class IInputPinTemplate extends PinTemplate {
 
     setup() {
         super.setup()
-        this.#inputContentElements.forEach(element => {
+        this.#inputContentElements.forEach(element =>
             element.addEventListener("focusout", this.#onFocusOutHandler)
-        })
+        )
     }
 
     cleanup() {
         super.cleanup()
-        this.#inputContentElements.forEach(element => {
+        this.#inputContentElements.forEach(element =>
             element.removeEventListener("focusout", this.#onFocusOutHandler)
-        })
+        )
     }
 
     createInputObjects() {

js/template/pin/KnotPinTemplate.js

@@ -1,13 +1,13 @@
 import { html } from "lit"
-import PinTemplate from "./PinTemplate"
+import MinimalPinTemplate from "./MinimalPinTemplate"
 import Utility from "../../Utility"
 
 /** @typedef {import("../node/KnotNodeTemplate").default} KnotNodeTemplate */
 
-export default class KnotPinTemplate extends PinTemplate {
+export default class KnotPinTemplate extends MinimalPinTemplate {
 
     render() {
-        return this.element.isOutput() ? html`<div class="ueb-pin-icon">${this.renderIcon()}</div>` : html``
+        return this.element.isOutput() ? super.render() : html``
     }
 
     getLinkLocation() {
@@ -17,13 +17,8 @@ export default class KnotPinTemplate extends PinTemplate {
                 : this
         )
             .iconElement.getBoundingClientRect()
-        const location = Utility.convertLocation(
-            [
-                this.element.isInput() ? rect.left + 1 : rect.right + 2,
-                (rect.top + rect.bottom) / 2,
-            ],
-            this.blueprint.template.gridElement
-        )
+        const boundingLocation = [this.element.isInput() ? rect.left : rect.right, (rect.top + rect.bottom) / 2]
+        const location = Utility.convertLocation(boundingLocation, this.blueprint.template.gridElement)
         return this.blueprint.compensateTranslation(location[0], location[1])
     }
 }

js/template/pin/MinimalPinTemplate.js

@@ -0,0 +1,9 @@
+import { html } from "lit"
+import PinTemplate from "./PinTemplate"
+
+export default class MinimalPinTemplate extends PinTemplate {
+
+    render() {
+        return html`<div class="ueb-pin-icon">${this.renderIcon()}</div>`
+    }
+}

js/template/pin/PinTemplate.js

@@ -68,11 +68,13 @@ export default class PinTemplate extends ITemplate {
     }
 
     renderIcon() {
-        if (this.element.entity.PinType.ContainerType.toString() == "Array") {
-            return SVGIcon.array
+        switch (this.element.entity.PinType.ContainerType.toString()) {
+            case "Array": return SVGIcon.array
+            case "Set": return SVGIcon.set
+            case "Map": return SVGIcon.map
         }
-        if (this.element.entity.PinType.ContainerType.toString() == "Set") {
-            return SVGIcon.set
+        if (this.element.entity.PinType.PinCategory === "delegate") {
+            return SVGIcon.delegate
         }
         return SVGIcon.genericPin
     }
@@ -101,7 +103,7 @@ export default class PinTemplate extends ITemplate {
     /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
-        this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.getPinColor(this.element).cssText)
+        this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.pinColor(this.element).cssText)
         this.#iconElement = this.element.querySelector(".ueb-pin-icon svg") ?? this.element
     }