@elicdavis/node-flow 0.1.14 → 0.1.16

package/src/node.ts

@@ -1,7 +1,7 @@
 import { Port, PortConfig, PortType } from "./port";
 import { FontWeight, TextStyle, TextStyleConfig, TextStyleFallback } from "./styles/text";
 import { Box, InBox } from "./types/box";
-import { CopyVector2, Distance, Vector2, Zero } from "./types/vector2";
+import { CopyVector2, Distance, ScaleVector, Vector2, Zero } from "./types/vector2";
 import { Widget } from './widgets/widget';
 import { List } from './types/list';
 import { BoxStyle, BoxStyleConfig, BoxStyleWithFallback } from "./styles/box";
@@ -784,56 +784,55 @@ export class FlowNode {
 
     public calculateBounds(ctx: CanvasRenderingContext2D, camera: Camera): Box {
         const tempMeasurement = Zero();
-        const zoom = camera.zoom;
-        const scaledPadding = this.#padding * zoom;
-        const doubleScaledPadding = scaledPadding * 2;
-        const scaledElementSpacing = this.#elementSpacing * zoom;
+
+        const doublePadding = this.#padding * 2;
 
         const screenSpacePosition = Zero();
         camera.graphSpaceToScreenSpace(this.#position, screenSpacePosition);
 
         const size = Zero();
-        this.#title.size(ctx, zoom, size);
+        this.#title.size(ctx, 1, size);
 
         const subtitleSize = Zero();
-        this.#subTitle.size(ctx, zoom, subtitleSize);
+        this.#subTitle.size(ctx, 1, subtitleSize);
         size.x = Math.max(size.x, subtitleSize.x);
 
         if (this.#infoText !== "") {
             size.x += (size.y * 4);
         }
 
-        size.x += doubleScaledPadding;
-        size.y += doubleScaledPadding + (scaledElementSpacing * this.#input.length);
+        size.x += doublePadding;
+        size.y += doublePadding + (this.#elementSpacing * this.#input.length);
 
         for (let i = 0; i < this.#input.length; i++) {
             const port = this.#input[i];
-            this.#portTextStyle.measure(ctx, zoom, port.getDisplayName(), tempMeasurement);
+            this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
             size.y += tempMeasurement.y;
-            size.x = Math.max(size.x, tempMeasurement.x + doubleScaledPadding)
+            size.x = Math.max(size.x, tempMeasurement.x + doublePadding)
         }
 
-        size.y += (scaledElementSpacing * this.#output.length);
+        size.y += (this.#elementSpacing * this.#output.length);
 
         for (let i = 0; i < this.#output.length; i++) {
             const port = this.#output[i];
-            this.#portTextStyle.measure(ctx, zoom, port.getDisplayName(), tempMeasurement);
+            this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
             size.y += tempMeasurement.y;
-            size.x = Math.max(size.x, tempMeasurement.x + doubleScaledPadding)
+            size.x = Math.max(size.x, tempMeasurement.x + doublePadding)
         }
 
-        size.y += (scaledElementSpacing * this.#widgets.length);
+        size.y += (this.#elementSpacing * this.#widgets.length);
         for (let i = 0; i < this.#widgets.length; i++) {
             const element = this.#widgets[i];
             const eleSize = element.Size();
-            size.y += eleSize.y * zoom;
-            size.x = Math.max(size.x, (eleSize.x * zoom) + doubleScaledPadding)
+            size.y += eleSize.y
+            size.x = Math.max(size.x, (eleSize.x) + doublePadding)
         }
 
         // Add some padding at the end!
-        size.y += scaledElementSpacing
+        size.y += this.#elementSpacing
 
-        size.x = Math.max(size.x, MINIMUM_NODE_WIDTH * zoom)
+        size.x = Math.max(size.x, MINIMUM_NODE_WIDTH)
+        ScaleVector(size, camera.zoom);
 
         return {
             Position: screenSpacePosition,
@@ -857,6 +856,11 @@ export class FlowNode {
         this.#widgets.push(widget);
     }
 
+    insertWidget(index: number, widget: Widget): void {
+        const at = Math.max(0, Math.min(index, this.#widgets.length));
+        this.#widgets.splice(at, 0, widget);
+    }
+
     removeWidget(widget: Widget): void {
         const index = this.#widgets.indexOf(widget, 0);
         if (index === -1) {
@@ -865,10 +869,40 @@ export class FlowNode {
         this.#widgets.splice(index, 1);
     }
 
+    removeWidgetAt(index: number): Widget | undefined {
+        if (index < 0 || index >= this.#widgets.length) {
+            return undefined;
+        }
+        return this.#widgets.splice(index, 1)[0];
+    }
+
+    moveWidget(from: number, to: number): void {
+        if (from < 0 || from >= this.#widgets.length) {
+            return;
+        }
+        if (to < 0 || to >= this.#widgets.length || from === to) {
+            return;
+        }
+        const [widget] = this.#widgets.splice(from, 1);
+        this.#widgets.splice(to, 0, widget);
+    }
+
+    clearWidgets(): void {
+        this.#widgets.length = 0;
+    }
+
     getWidget(index: number): Widget {
         return this.#widgets[index];
     }
 
+    widgets(): ReadonlyArray<Widget> {
+        return this.#widgets;
+    }
+
+    indexOfWidget(widget: Widget): number {
+        return this.#widgets.indexOf(widget, 0);
+    }
+
     widgetCount(): number {
         return this.#widgets.length;
     }
@@ -1161,11 +1195,12 @@ export class FlowNode {
             for (let i = 0; i < this.#input.length; i++) {
                 ctx.textAlign = TextAlign.Left;
                 const port = this.#input[i];
-                this.#portTextStyle.measure(ctx, camera.zoom, port.getDisplayName(), tempMeasurement);
+                this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
+                const portHeight = tempMeasurement.y * camera.zoom;
                 const position = VectorPool.get();
 
                 position.x = nodeBounds.Position.x;
-                position.y = startY + (tempMeasurement.y / 2);
+                position.y = startY + (portHeight / 2);
 
                 // Text
                 this.#portTextStyle.setupStyle(ctx, camera.zoom);
@@ -1174,7 +1209,7 @@ export class FlowNode {
                 // Port
                 this.#inputPortPositions.Push(port.render(ctx, position, camera, mousePosition, postProcess));
 
-                startY += tempMeasurement.y + scaledElementSpacing;
+                startY += portHeight + scaledElementSpacing;
             }
 
             // Output Ports
@@ -1182,10 +1217,11 @@ export class FlowNode {
             ctx.textAlign = TextAlign.Right;
             for (let i = 0; i < this.#output.length; i++) {
                 const port = this.#output[i];
-                this.#portTextStyle.measure(ctx, camera.zoom, port.getDisplayName(), tempMeasurement);
+                this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
+                const portHeight = tempMeasurement.y * camera.zoom;
                 const position = VectorPool.get();
                 position.x = rightSide;
-                position.y = startY + (tempMeasurement.y / 2);
+                position.y = startY + (portHeight / 2);
 
                 // Text
                 this.#portTextStyle.setupStyle(ctx, camera.zoom);
@@ -1194,7 +1230,7 @@ export class FlowNode {
                 // Port
                 this.#outputPortPositions.Push(port.render(ctx, position, camera, mousePosition, postProcess));
 
-                startY += tempMeasurement.y + scaledElementSpacing;
+                startY += portHeight + scaledElementSpacing;
             }
 
             // Widgets

package/src/nodes/subsystem.ts

@@ -6,7 +6,7 @@ import { FlowNode, NodeState } from "../node";
 import { Organize } from "../organize";
 import { PassSubsystem } from "../pass/subsystem";
 import { TimeExecution } from "../performance";
-import { Port, PortType } from "../port";
+import { Port, PortType, portsCompatible } from "../port";
 import { BoxStyle } from "../styles/box";
 import { CursorStyle } from "../styles/cursor";
 import { Theme } from "../theme";
@@ -341,13 +341,13 @@ export class NodeSubsystem {
         }
 
         // Different types, can't connect
-        if (this.#portHovering.InputPort && this.#portHovering.Port.getDataType() !== conn.outPort()?.getDataType()) {
+        if (this.#portHovering.InputPort && !portsCompatible(this.#portHovering.Port, conn.outPort())) {
             this.#clearCurrentlySelectedConnection();
             return;
         }
 
         // Different types, can't connect
-        if (!this.#portHovering.InputPort && this.#portHovering.Port.getDataType() !== conn.inPort()?.getDataType()) {
+        if (!this.#portHovering.InputPort && !portsCompatible(this.#portHovering.Port, conn.inPort())) {
             this.#clearCurrentlySelectedConnection();
             return;
         }
@@ -377,10 +377,10 @@ export class NodeSubsystem {
     }
 
     connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined {
-        const outType = nodeOut.outputPort(outPort).getDataType();
-        const inType = nodeIn.inputPort(inPort).getDataType();
-        if (outType !== inType) {
-            console.error("can't connect nodes of different types", outType, inType);
+        const from = nodeOut.outputPort(outPort);
+        const to = nodeIn.inputPort(inPort);
+        if (!portsCompatible(from, to)) {
+            console.error("can't connect nodes of different types", from.getDataType(), to.getDataType());
             return;
         }