Moving node and pins information to Configuration

js/template/BlueprintTemplate.js

@@ -69,6 +69,8 @@ export default class BlueprintTemplate extends ITemplate {
         const bounding = this.viewportElement.getBoundingClientRect()
         this.viewportSize[0] = bounding.width
         this.viewportSize[1] = bounding.height
+        this.blueprint.requestUpdate()
+        this.blueprint.updateComplete.then(() => this.centerContentInViewport())
     }
 
     cleanup() {
@@ -207,4 +209,27 @@ export default class BlueprintTemplate extends ITemplate {
     gridLeftVisibilityBoundary() {
         return this.blueprint.scrollX - this.blueprint.translateX
     }
+
+    centerViewport(x = 0, y = 0, smooth = true) {
+        const centerX = this.gridLeftVisibilityBoundary() + this.viewportSize[0] / 2
+        const centerY = this.gridTopVisibilityBoundary() + this.viewportSize[1] / 2
+        this.blueprint.scrollDelta(
+            x - centerX,
+            y - centerY,
+            smooth
+        )
+    }
+
+    centerContentInViewport(smooth = true) {
+        let avgX = 0
+        let avgY = 0
+        const nodes = this.blueprint.getNodes()
+        for (const node of nodes) {
+            avgX += node.leftBoundary() + node.rightBoundary()
+            avgY += node.topBoundary() + node.bottomBoundary()
+        }
+        avgX = nodes.length > 0 ? Math.round(avgX / (2 * nodes.length)) : 0
+        avgY = nodes.length > 0 ? Math.round(avgY / (2 * nodes.length)) : 0
+        this.centerViewport(avgX, avgY, smooth)
+    }
 }

js/template/node/NodeTemplate.js

@@ -15,25 +15,12 @@ import Utility from "../../Utility"
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class NodeTemplate extends ISelectableDraggableTemplate {
 
-    static #nodeIcon = {
-        [Configuration.nodeType.doN]: SVGIcon.doN,
-        [Configuration.nodeType.dynamicCast]: SVGIcon.cast,
-        [Configuration.nodeType.executionSequence]: SVGIcon.sequence,
-        [Configuration.nodeType.forEachElementInEnum]: SVGIcon.loop,
-        [Configuration.nodeType.forEachLoop]: SVGIcon.forEachLoop,
-        [Configuration.nodeType.forEachLoopWithBreak]: SVGIcon.forEachLoop,
-        [Configuration.nodeType.forLoop]: SVGIcon.loop,
-        [Configuration.nodeType.forLoopWithBreak]: SVGIcon.loop,
-        [Configuration.nodeType.ifThenElse]: SVGIcon.branchNode,
-        [Configuration.nodeType.makeArray]: SVGIcon.makeArray,
-        [Configuration.nodeType.makeMap]: SVGIcon.makeMap,
-        [Configuration.nodeType.select]: SVGIcon.select,
-        [Configuration.nodeType.whileLoop]: SVGIcon.loop,
-        default: SVGIcon.functionSymbol
-    }
+    /** @typedef {typeof NodeTemplate} NodeTemplateConstructor */
 
     #hasTargetInputNode = false
 
+    static nodeStyleClasses = ["ueb-node-style-default"]
+
     toggleAdvancedDisplayHandler = () => {
         this.element.toggleShowAdvancedPinDisplay()
         this.element.addNextUpdatedCallbacks(() => this.element.acknowledgeReflow(), true)
@@ -42,29 +29,12 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     /** @param {NodeElement} element */
     initialize(element) {
         super.initialize(element)
+        this.element.classList.add(.../** @type {NodeTemplateConstructor} */(this.constructor).nodeStyleClasses)
         this.element.style.setProperty("--ueb-node-color", this.getColor().cssText)
     }
 
     getColor() {
-        const functionColor = css`84, 122, 156`
-        const pureFunctionColor = css`95, 129, 90`
-        switch (this.element.entity.getClass()) {
-            case Configuration.nodeType.callFunction:
-                return this.element.entity.bIsPureFunc
-                    ? pureFunctionColor
-                    : functionColor
-            case Configuration.nodeType.makeArray:
-            case Configuration.nodeType.makeMap:
-            case Configuration.nodeType.select:
-                return pureFunctionColor
-            case Configuration.nodeType.macro:
-            case Configuration.nodeType.executionSequence:
-                return css`150,150,150`
-            case Configuration.nodeType.dynamicCast:
-                return css`46, 104, 106`
-
-        }
-        return functionColor
+        return Configuration.nodeColor(this.element)
     }
 
     render() {
@@ -110,17 +80,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     }
 
     renderNodeIcon() {
-        let icon = NodeTemplate.#nodeIcon[this.element.getType()]
-        if (icon) {
-            return icon
-        }
-        if (this.element.getNodeDisplayName().startsWith("Break")) {
-            return SVGIcon.breakStruct
-        }
-        if (this.element.entity.getClass() === Configuration.nodeType.macro) {
-            return SVGIcon.macro
-        }
-        return NodeTemplate.#nodeIcon.default
+        return Configuration.nodeIcon(this.element)
     }
 
     renderNodeName() {

js/template/node/VariableConversionNodeTemplate.js

@@ -4,10 +4,5 @@ import VariableManagementNodeTemplate from "./VariableMangementNodeTemplate"
 
 export default class VariableConversionNodeTemplate extends VariableManagementNodeTemplate {
 
-
-    /** @param {NodeElement} element */
-    initialize(element) {
-        super.initialize(element)
-        this.element.classList.add("ueb-node-style-conversion")
-    }
+    static nodeStyleClasses = [...super.nodeStyleClasses, "ueb-node-style-conversion"]
 }

js/template/node/VariableMangementNodeTemplate.js

@@ -13,10 +13,11 @@ export default class VariableManagementNodeTemplate extends NodeTemplate {
     #hasOutput = false
     #displayName = ""
 
+    static nodeStyleClasses = ["ueb-node-style-glass"]
+
     /** @param {NodeElement} element */
     initialize(element) {
         super.initialize(element)
-        this.element.classList.add("ueb-node-style-glass")
         this.#displayName = this.element.getNodeDisplayName()
     }
 

js/template/node/VariableOperationNodeTemplate.js

@@ -4,10 +4,5 @@ import VariableManagementNodeTemplate from "./VariableMangementNodeTemplate"
 
 export default class VariableOperationNodeTemplate extends VariableManagementNodeTemplate {
 
-
-    /** @param {NodeElement} element */
-    initialize(element) {
-        super.initialize(element)
-        this.element.classList.add("ueb-node-style-operation")
-    }
+    static nodeStyleClasses = [...super.nodeStyleClasses, "ueb-node-style-operation"]
 }

js/template/pin/PinTemplate.js

@@ -68,6 +68,12 @@ export default class PinTemplate extends ITemplate {
     }
 
     renderIcon() {
+        if (this.element.entity.PinType.ContainerType.toString() == "Array") {
+            return SVGIcon.array
+        }
+        if (this.element.entity.PinType.ContainerType.toString() == "Set") {
+            return SVGIcon.set
+        }
         return SVGIcon.genericPin
     }
 
@@ -101,10 +107,8 @@ export default class PinTemplate extends ITemplate {
 
     getLinkLocation() {
         const rect = this.iconElement.getBoundingClientRect()
-        const location = Utility.convertLocation(
-            [(rect.left + 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])
     }