Large refactoring and new nodes

* Fix node reference when changing elements

* Fix ScriptVariables parsing

* Fix invariant text and niagara types

* Niagara convert nodes

* Move node tests to own files

* More Niagara tests

* Niagara float and smaller fixes

* More Decoding

* More decoding

* WIP

* Float is real

* WIP

* More types and colors

* Test case and small polish

* WIP

* WIP

* Fix niagara script variables merging

* Fix Niagara variables

* Fixing mirrored ExportPath

* Fix Export paths name adjustments

* Simplify arc calculation

* Simplify a bit arc calculation

* source / destionation => origin / target

* Minor refactoring

* Fix switched link position

* Rename some properties for uniformity

* Fix input escape

* Simplify test

* About window

* Dialog backdrop style

* About dialog touches

* Remove dependency and minot improvement

* Light mode

* Fix link location and css small improvement

* Link direction and minor fixes

* Some minor fixes and refactoring

* Refactoring WIP

* Shorting repetitive bits

* More tests

* Simplify linking tests

js/template/node/CommentNodeTemplate.js

@@ -13,7 +13,7 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
         element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
         element.sizeX = 25 * Configuration.gridSize
         element.sizeY = 6 * Configuration.gridSize
-        super.initialize(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
+        super.initialize(element) // Keep it at the end because it needs the color. this.#color must be initialized
     }
 
     /** @returns {HTMLElement} */

js/template/node/KnotNodeTemplate.js

@@ -1,15 +1,21 @@
 import { html } from "lit"
-import Configuration from "../../Configuration.js"
 import ElementFactory from "../../element/ElementFactory.js"
 import KnotPinTemplate from "../pin/KnotPinTemplate.js"
 import NodeTemplate from "./NodeTemplate.js"
 
 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
+    #switchDirectionsVisually = false
+    get switchDirectionsVisually() {
+        return this.#switchDirectionsVisually
+    }
+    set switchDirectionsVisually(value) {
+        if (this.#switchDirectionsVisually == value) {
+            return
+        }
+        this.#switchDirectionsVisually = value
+        this.element.acknowledgeUpdate()
+    }
 
     /** @type {PinElement} */
     #inputPin
@@ -29,24 +35,6 @@ export default class KnotNodeTemplate extends NodeTemplate {
         this.element.classList.add("ueb-node-style-minimal")
     }
 
-    /** @param {PinElement} startingPin */
-    findDirectionaPin(startingPin) {
-        if (
-            startingPin.nodeElement.getType() !== Configuration.paths.knot
-            || KnotNodeTemplate.#traversedPin.has(startingPin)
-        ) {
-            KnotNodeTemplate.#traversedPin.clear()
-            return true
-        }
-        KnotNodeTemplate.#traversedPin.add(startingPin)
-        for (let pin of startingPin.getLinks().map(l => this.blueprint.getPin(l))) {
-            if (this.findDirectionaPin(pin)) {
-                return true
-            }
-        }
-        return false
-    }
-
     render() {
         return html`
             <div class="ueb-node-border"></div>
@@ -71,7 +59,28 @@ export default class KnotNodeTemplate extends NodeTemplate {
         return result
     }
 
-    linksChanged() {
-
+    checkSwtichDirectionsVisually() {
+        let leftPinsDelta = 0
+        let leftPinsCount = 0
+        let rightPinsDelta = 0
+        let rightPinsCount = 0
+        const location = this.outputPin.getLinkLocation()[0]
+        const links = this.getAllConnectedLinks()
+        for (const link of links) {
+            const pin = link.getOtherPin(this.element)
+            const delta = pin.getLinkLocation()[0] - location
+            if (pin?.isInput()) {
+                rightPinsDelta += delta
+                ++rightPinsCount
+            } else if (pin?.isOutput()) {
+                leftPinsDelta += delta
+                ++leftPinsCount
+            }
+        }
+        leftPinsDelta /= leftPinsCount
+        rightPinsDelta /= rightPinsCount
+        if ((rightPinsDelta < leftPinsDelta) != this.switchDirectionsVisually) {
+            this.switchDirectionsVisually = rightPinsDelta < leftPinsDelta
+        }
     }
 }

js/template/node/NodeTemplate.js

@@ -31,14 +31,14 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
             } else {
                 (pin.isInput() ? this.inputContainer : this.outputContainer).appendChild(this.createPinElement(pin))
             }
-            this.element.acknowledgeReflow()
+            this.element.acknowledgeUpdate()
         }
     }
 
     toggleAdvancedDisplayHandler = () => {
         this.element.toggleShowAdvancedPinDisplay()
         this.element.requestUpdate()
-        this.element.updateComplete.then(() => this.element.acknowledgeReflow())
+        this.element.updateComplete.then(() => this.element.acknowledgeUpdate())
     }
 
     /** @param {PinEntity<IEntity>} pinEntity */
@@ -57,17 +57,13 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         super.initialize(element)
         this.#subtitle = nodeSubtitle(element.entity)
         this.element.classList.add(.../** @type {typeof NodeTemplate} */(this.constructor).nodeStyleClasses)
-        this.element.style.setProperty("--ueb-node-color", this.getColor().cssText)
+        this.element.style.setProperty("--ueb-node-color", this.element.entity.nodeColor().cssText)
         this.pinInserter = this.element.entity.additionalPinInserter()
         if (this.pinInserter) {
             this.element.classList.add("ueb-node-is-variadic")
         }
     }
 
-    getColor() {
-        return this.element.entity.nodeColor()
-    }
-
     render() {
         return html`
             <div class="ueb-node-border">
@@ -129,7 +125,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         this.inputContainer = this.element.querySelector(".ueb-node-inputs")
         this.outputContainer = this.element.querySelector(".ueb-node-outputs")
         this.setupPins()
-        this.element.updateComplete.then(() => this.element.acknowledgeReflow())
+        this.element.updateComplete.then(() => this.element.acknowledgeUpdate())
     }
 
     setupPins() {
@@ -169,5 +165,10 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
             .map(pinEntity => this.createPinElement(pinEntity))
     }
 
-    linksChanged() { }
+    /** All the link connected to this node */
+    getAllConnectedLinks() {
+        const nodeTitle = this.element.nodeTitle
+        const query = `ueb-link[data-origin-node="${nodeTitle}"],ueb-link[data-target-node="${nodeTitle}"]`
+        return /** @type {LinkElement[]} */([...this.blueprint.querySelectorAll(query)])
+    }
 }

js/template/node/VariableAccessNodeTemplate.js

@@ -21,6 +21,6 @@ export default class VariableAccessNodeTemplate extends VariableManagementNodeTe
     setupPins() {
         super.setupPins()
         let outputPin = this.element.getPinElements().find(p => !p.entity.isHidden() && !p.entity.isExecution())
-        this.element.style.setProperty("--ueb-node-color", outputPin.getColor().cssText)
+        this.element.style.setProperty("--ueb-node-color", outputPin.entity.pinColor().cssText)
     }
 }