Small fix for knot creation

js/element/PinElement.js

@@ -2,6 +2,7 @@ import BoolPinTemplate from "../template/BoolPinTemplate"
 import Configuration from "../Configuration"
 import ElementFactory from "./ElementFactory"
 import ExecPinTemplate from "../template/ExecPinTemplate"
+import GuidEntity from "../entity/GuidEntity"
 import IElement from "./IElement"
 import IntPinTemplate from "../template/IntPinTemplate"
 import ISerializer from "../serialization/ISerializer"
@@ -17,7 +18,6 @@ import Utility from "../Utility"
 import VectorPinTemplate from "../template/VectorPinTemplate"
 
 /**
- * @typedef {import("../entity/GuidEntity").default} GuidEntity
  * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
  * @typedef {import("./NodeElement").default} NodeElement
  */
@@ -46,6 +46,18 @@ export default class PinElement extends IElement {
     }
 
     static properties = {
+        pinId: {
+            type: GuidEntity,
+            converter: {
+                fromAttribute: (value, type) => value
+                    // @ts-expect-error
+                    ? ISerializer.grammar.Guid.parse(value).value
+                    : null,
+                toAttribute: (value, type) => value?.toString(),
+            },
+            attribute: "data-id",
+            reflect: true,
+        },
         pinType: {
             type: String,
             attribute: "data-type",
@@ -59,13 +71,11 @@ export default class PinElement extends IElement {
         color: {
             type: LinearColorEntity,
             converter: {
-                fromAttribute: (value, type) => {
+                fromAttribute: (value, type) => value
                     // @ts-expect-error
-                    return value ? ISerializer.grammar.LinearColorFromAnyColor.parse(value).value : null
-                },
-                toAttribute: (value, type) => {
-                    return value ? Utility.printLinearColor(value) : null
-                },
+                    ? ISerializer.grammar.LinearColorFromAnyColor.parse(value).value
+                    : null,
+                toAttribute: (value, type) => value ? Utility.printLinearColor(value) : null,
             },
             attribute: "data-color",
             reflect: true,
@@ -112,6 +122,7 @@ export default class PinElement extends IElement {
      */
     constructor(entity, template = undefined, nodeElement = undefined) {
         super(entity, template ?? new (PinElement.getTypeTemplate(entity))())
+        this.pinId = this.entity.PinId
         this.pinType = this.entity.getType()
         this.advancedView = this.entity.bAdvancedView
         this.defaultValue = this.entity.getDefaultValue()

js/entity/GuidEntity.js

@@ -18,7 +18,10 @@ export default class GuidEntity extends IEntity {
         return new GuidEntity({ value: guid })
     }
 
-    constructor(options = {}) {
+    constructor(options) {
+        if (!options) {
+            options = GuidEntity.generateGuid().value
+        }
         super(options)
         /** @type {String} */ this.value
     }

js/entity/IEntity.js

@@ -31,6 +31,9 @@ export default class IEntity extends Observable {
                     defaultValue = defaultValue.calculate(this)
                     defaultType = Utility.getType(defaultValue)
                 }
+                if (defaultValue != null && defaultValue === defaultType) {
+                    defaultValue = new defaultType()
+                }
 
                 if (!(attribute in attributes)) {
                     console.warn(

js/entity/objects/KnotEntity.js

@@ -4,7 +4,7 @@ import PinEntity from "../PinEntity"
 
 export default class KnotEntity extends ObjectEntity {
 
-    constructor(options = {}) {
+    constructor(options = {}, pinType = undefined) {
         super(options)
         this.Class = new ObjectReferenceEntity("/Script/BlueprintGraph.K2Node_Knot")
         this.Name = "K2Node_Knot"

js/template/KnotNodeTemplate.js

@@ -1,15 +1,14 @@
 import { html } from "lit"
 import ElementFactory from "../element/ElementFactory"
-import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
 import KnotPinTemplate from "./KnotPinTemplate"
+import NodeTemplate from "./NodeTemplate"
 
 /**
  * @typedef {import("../element/NodeElement").default} NodeElement
  * @typedef {import("../element/PinElement").default} PinElement
  */
 
-/** @extends {ISelectableDraggableTemplate<NodeElement>} */
-export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
+export default class KnotNodeTemplate extends NodeTemplate {
 
     /** @type {PinElement} */
     #inputPin
@@ -29,12 +28,10 @@ export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
         `
     }
 
-    /** @param {Map} changedProperties */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties)
-        const content = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-border"))
-        Promise.all(this.element.getPinElements().map(n => n.updateComplete)).then(() => this.element.dispatchReflowEvent())
-        this.element.getPinElements().forEach(p => content.appendChild(p))
+    setupPins() {
+        this.element.getPinElements().forEach(
+            p => /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-border")).appendChild(p)
+        )
     }
 
     /**

js/template/KnotPinTemplate.js

@@ -13,7 +13,6 @@ export default class KnotPinTemplate extends PinTemplate {
     getLinkLocation() {
         const rect = (
             this.element.isInput()
-                // @ts-expect-error
                 ? /** @type {KnotNodeTemplate} */ (this.element.nodeElement.template).outputPin.template
                 : this
         )

js/template/LinkTemplate.js

@@ -64,7 +64,10 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
     #createKnot =
         /** @param {Number[]} location */
         location => {
-            const knot = /** @type {NodeElement} */(new (ElementFactory.getConstructor("ueb-node"))(new KnotEntity()))
+            const knotEntity = new KnotEntity({
+
+            })
+            const knot = /** @type {NodeElement} */(new (ElementFactory.getConstructor("ueb-node"))(knotEntity))
             knot.setLocation(this.element.blueprint.snapToGrid(location))
             const link = new (ElementFactory.getConstructor("ueb-link"))(
                 /** @type {KnotNodeTemplate} */(knot.template).outputPin,
@@ -98,19 +101,15 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
             const isDestinationAKnot = destinationPin?.nodeElement.getType() == Configuration.knotNodeTypeName
             if (isSourceAKnot && (!destinationPin || isDestinationAKnot)) {
                 if (sourcePin?.isInput() && this.element.toX > this.element.fromX + Configuration.distanceThreshold) {
-                    // @ts-expect-error
                     this.element.sourcePin = /** @type {KnotNodeTemplate} */(sourcePin.nodeElement.template).outputPin
                 } else if (sourcePin?.isOutput() && this.element.toX < this.element.fromX - Configuration.distanceThreshold) {
-                    // @ts-expect-error
                     this.element.sourcePin = /** @type {KnotNodeTemplate} */(sourcePin.nodeElement.template).inputPin
                 }
             }
-            if (isDestinationAKnot && (!isSourceAKnot || isSourceAKnot)) {
+            if (isDestinationAKnot && (!sourcePin || isSourceAKnot)) {
                 if (destinationPin?.isInput() && this.element.toX < this.element.fromX + Configuration.distanceThreshold) {
-                    // @ts-expect-error
                     this.element.destinationPin = /** @type {KnotNodeTemplate} */(destinationPin.nodeElement.template).outputPin
                 } else if (destinationPin?.isOutput() && this.element.toX > this.element.fromX - Configuration.distanceThreshold) {
-                    // @ts-expect-error
                     this.element.destinationPin = /** @type {KnotNodeTemplate} */(destinationPin.nodeElement.template).inputPin
                 }
             }

js/template/NodeTemplate.js

@@ -10,9 +10,15 @@ 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() {
@@ -59,9 +65,14 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
+        this.setupPins()
+        Promise.all(this.element.getPinElements().map(n => n.updateComplete)).then(() => this.element.dispatchReflowEvent())
+    }
+
+    setupPins() {
         const inputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-inputs"))
         const outputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-outputs"))
-        Promise.all(this.element.getPinElements().map(n => n.updateComplete)).then(() => this.element.dispatchReflowEvent())
+        this.element.nodeNameElement = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-name-text"))
         this.element.getPinElements().forEach(p => {
             if (p.isInput()) {
                 inputContainer.appendChild(p)
@@ -69,7 +80,6 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                 outputContainer.appendChild(p)
             }
         })
-        this.element.nodeNameElement = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-name-text"))
     }
 
     /**

js/template/PinTemplate.js

@@ -22,12 +22,6 @@ export default class PinTemplate extends ITemplate {
         return this.#iconElement
     }
 
-    /** @param {PinElement<T>} element */
-    constructed(element) {
-        super.constructed(element)
-        this.element.dataset.id = this.element.getPinId().toString()
-    }
-
     connectedCallback() {
         super.connectedCallback()
         this.element.nodeElement = this.element.closest("ueb-node")