@elicdavis/node-flow 0.1.16 → 0.1.17

package/src/node.ts

@@ -1,4 +1,5 @@
 import { Port, PortConfig, PortType } from "./port";
+import { requestRender } from "./render_scheduler";
 import { FontWeight, TextStyle, TextStyleConfig, TextStyleFallback } from "./styles/text";
 import { Box, InBox } from "./types/box";
 import { CopyVector2, Distance, ScaleVector, Vector2, Zero } from "./types/vector2";
@@ -402,6 +403,7 @@ export class FlowNode {
             return;
         }
         this.#selected = true;
+        requestRender();
         for (let i = 0; i < this.#onSelect.length; i++) {
             this.#onSelect[i]();
         }
@@ -457,6 +459,7 @@ export class FlowNode {
         }
 
         this.#data[name] = value;
+        requestRender();
 
         for (let i = 0; i < this.#registeredAnyPropertyChangeCallbacks.length; i++) {
             this.#registeredAnyPropertyChangeCallbacks[i](name, oldValue, value);
@@ -735,6 +738,7 @@ export class FlowNode {
             return;
         }
         this.#selected = false;
+        requestRender();
         for (let i = 0; i < this.#onUnselect.length; i++) {
             this.#onUnselect[i]();
         }
@@ -772,6 +776,7 @@ export class FlowNode {
 
     public setPosition(position: Vector2): void {
         CopyVector2(this.#position, position);
+        requestRender();
     }
 
     public getPosition(): Vector2 {
@@ -854,11 +859,13 @@ export class FlowNode {
 
     addWidget(widget: Widget): void {
         this.#widgets.push(widget);
+        requestRender();
     }
 
     insertWidget(index: number, widget: Widget): void {
         const at = Math.max(0, Math.min(index, this.#widgets.length));
         this.#widgets.splice(at, 0, widget);
+        requestRender();
     }
 
     removeWidget(widget: Widget): void {
@@ -867,13 +874,16 @@ export class FlowNode {
             throw new Error("node does not contain widget");
         }
         this.#widgets.splice(index, 1);
+        requestRender();
     }
 
     removeWidgetAt(index: number): Widget | undefined {
         if (index < 0 || index >= this.#widgets.length) {
             return undefined;
         }
-        return this.#widgets.splice(index, 1)[0];
+        const removed = this.#widgets.splice(index, 1)[0];
+        requestRender();
+        return removed;
     }
 
     moveWidget(from: number, to: number): void {
@@ -885,10 +895,12 @@ export class FlowNode {
         }
         const [widget] = this.#widgets.splice(from, 1);
         this.#widgets.splice(to, 0, widget);
+        requestRender();
     }
 
     clearWidgets(): void {
         this.#widgets.length = 0;
+        requestRender();
     }
 
     getWidget(index: number): Widget {
@@ -978,6 +990,7 @@ export class FlowNode {
         }
 
         this.#title.set(cleaned);
+        requestRender();
 
         for (let i = 0; i < this.#titleChangeCallback.length; i++) {
             const callback = this.#titleChangeCallback[i];
@@ -1001,6 +1014,7 @@ export class FlowNode {
 
         const old = this.#infoText;
         this.#infoText = cleaned;
+        requestRender();
 
         for (let i = 0; i < this.#infoChangeCallback.length; i++) {
             const callback = this.#infoChangeCallback[i];
@@ -1053,7 +1067,15 @@ export class FlowNode {
         this.#messages = [];
     }
 
+    public hasBeenLaidOut(): boolean {
+        return this.#laidOut;
+    }
+
+    #laidOut: boolean = false;
+
     render(ctx: CanvasRenderingContext2D, camera: Camera, state: NodeState, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): void {
+        this.#laidOut = true;
+
         VectorPool.run(() => {
             const tempMeasurement = VectorPool.get();
 
@@ -1255,6 +1277,63 @@ export class FlowNode {
                 const message = this.#messages[i];
                 messageStart.y += message.render(ctx, camera.zoom, messageStart, !(state === NodeState.Idle)) + (10 * camera.zoom);
             }
+
+            this.#rememberPortOffsets(nodeBounds, camera.zoom);
         })
     }
+
+    #portOffsets: { input: Array<Box>, output: Array<Box> } = { input: [], output: [] };
+
+    #rememberPortOffsets(bounds: Box, zoom: number): void {
+        if (zoom <= 0) {
+            return;
+        }
+
+        const record = (positions: List<Box>, into: Array<Box>) => {
+            into.length = 0;
+            for (let i = 0; i < positions.Count(); i++) {
+                const box = positions.At(i);
+                into.push({
+                    Position: {
+                        x: (box.Position.x - bounds.Position.x) / zoom,
+                        y: (box.Position.y - bounds.Position.y) / zoom,
+                    },
+                    Size: {
+                        x: box.Size.x / zoom,
+                        y: box.Size.y / zoom,
+                    },
+                });
+            }
+        };
+
+        record(this.#inputPortPositions, this.#portOffsets.input);
+        record(this.#outputPortPositions, this.#portOffsets.output);
+    }
+
+    public layoutPortsWithoutDrawing(bounds: Box, zoom: number): boolean {
+        if (this.#portOffsets.input.length === 0 && this.#portOffsets.output.length === 0) {
+            return false;
+        }
+
+        const project = (offsets: Array<Box>, into: List<Box>) => {
+            into.Clear();
+            for (let i = 0; i < offsets.length; i++) {
+                const offset = offsets[i];
+                into.Push({
+                    Position: {
+                        x: bounds.Position.x + (offset.Position.x * zoom),
+                        y: bounds.Position.y + (offset.Position.y * zoom),
+                    },
+                    Size: {
+                        x: offset.Size.x * zoom,
+                        y: offset.Size.y * zoom,
+                    },
+                });
+            }
+        };
+
+        project(this.#portOffsets.input, this.#inputPortPositions);
+        project(this.#portOffsets.output, this.#outputPortPositions);
+        return true;
+    }
 }

package/src/nodes/factory.ts

@@ -1,5 +1,5 @@
 import { FlowNode } from "../node";
-import { Publisher, PublisherConfig } from "./publisher";
+import { NodeMenuFilter, Publisher, PublisherConfig } from "./publisher";
 import { ContextMenuConfig } from "../contextMenu";
 import { Vector2 } from "../types/vector2";
 import { nodeFlowGroup as nodeFlowContextMenuGroup, NodeSubsystem } from "./subsystem";
@@ -69,19 +69,23 @@ export class NodeFactory {
         return node;
     }
 
-    public newNodeSubmenus(graph: NodeSubsystem, position: Vector2): Array<ContextMenuConfig> {
+    public newNodeSubmenus(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): Array<ContextMenuConfig> {
         const menus: Array<ContextMenuConfig> = [];
         for (let [_, publisher] of this.#registeredPublishers) {
-            menus.push(publisher.contextMenu(graph, position))
+            const built = publisher.contextMenu(graph, position, filter);
+            if (filter !== undefined && built.items?.length === 0 && built.subMenus?.length === 0) {
+                continue;
+            }
+            menus.push(built);
         }
         return menus;
     }
 
-    public openMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig {
+    public openMenu(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig {
         return {
             name: "New Node",
             group: nodeFlowContextMenuGroup,
-            subMenus: this.newNodeSubmenus(graph, position),
+            subMenus: this.newNodeSubmenus(graph, position, filter),
         };
     }
 } 

package/src/nodes/publisher.ts

@@ -1,8 +1,34 @@
 import { ContextMenuConfig, ContextMenuItemConfig } from "../contextMenu";
 import { FlowNode, FlowNodeConfig } from '../node';
+import { PortConfig, PortType, portConfigTypes, typeSetsCompatible } from "../port";
 import { Vector2 } from "../types/vector2";
 import { NodeSubsystem } from "./subsystem";
 
+/**
+ * Narrows a "new node" menu to the nodes that could actually be wired to a
+ * particular port.
+ */
+export interface NodeMenuFilter {
+    /** Which side the new node has to offer. */
+    needs: PortType;
+
+    /** Types that side has to accept. An empty list takes anything. */
+    types: Array<string>;
+
+    onCreated?: (node: FlowNode) => void;
+}
+
+function offersMatchingPort(config: FlowNodeConfig, filter: NodeMenuFilter): boolean {
+    const ports: Array<PortConfig> | undefined =
+        filter.needs === PortType.Input ? config.inputs : config.outputs;
+
+    if (ports === undefined) {
+        return false;
+    }
+
+    return ports.some((port) => typeSetsCompatible(portConfigTypes(port), filter.types));
+}
+
 interface PublisherNodes {
     [name: string]: FlowNodeConfig
 }
@@ -50,7 +76,7 @@ export class Publisher {
         return this.#registeredNodes.delete(nodeType);
     }
 
-    #recurseBuildMenu(graph: NodeSubsystem, name: string, subMenu: Map<string, FlowNodeConfig>, position: Vector2): ContextMenuConfig {
+    #recurseBuildMenu(graph: NodeSubsystem, name: string, subMenu: Map<string, FlowNodeConfig>, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig {
         const items: Array<ContextMenuItemConfig> = [];
         const subMenus = new Map<string, Map<string, FlowNodeConfig>>();
 
@@ -59,12 +85,17 @@ export class Publisher {
             const bracketIndex = key.indexOf("[")
 
             if (slashIndex === -1 || (bracketIndex !== -1 && bracketIndex < slashIndex)) {
+                if (filter !== undefined && !offersMatchingPort(nodeConfig, filter)) {
+                    continue;
+                }
+
                 items.push({
                     name: key,
                     callback: () => {
                         const node = new FlowNode(nodeConfig);
                         node.setPosition(position);
                         graph.addNode(node);
+                        filter?.onCreated?.(node);
                     },
                 });
             } else {
@@ -81,7 +112,11 @@ export class Publisher {
 
         const menus: Array<ContextMenuConfig> = [];
         for (let [key, nodes] of subMenus) {
-            menus.push(this.#recurseBuildMenu(graph, key, nodes, position))
+            const built = this.#recurseBuildMenu(graph, key, nodes, position, filter);
+            if (filter !== undefined && built.items?.length === 0 && built.subMenus?.length === 0) {
+                continue;
+            }
+            menus.push(built);
         }
 
         return {
@@ -91,8 +126,8 @@ export class Publisher {
         }
     }
 
-    contextMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig {
-        return this.#recurseBuildMenu(graph, this.#name, this.#registeredNodes, position);
+    contextMenu(graph: NodeSubsystem, position: Vector2, filter?: NodeMenuFilter): ContextMenuConfig {
+        return this.#recurseBuildMenu(graph, this.#name, this.#registeredNodes, position, filter);
     }
 
     create(nodeType: string): FlowNode {

package/src/nodes/subsystem.ts

@@ -7,6 +7,7 @@ import { Organize } from "../organize";
 import { PassSubsystem } from "../pass/subsystem";
 import { TimeExecution } from "../performance";
 import { Port, PortType, portsCompatible } from "../port";
+import { requestRender } from "../render_scheduler";
 import { BoxStyle } from "../styles/box";
 import { CursorStyle } from "../styles/cursor";
 import { Theme } from "../theme";
@@ -23,6 +24,33 @@ export type NodeRemovedCallback = (node: FlowNode) => void;
 
 export const nodeFlowGroup = "node-flow-graph-node-menu";
 
+/**
+ * A connection between two nodes of a copied set, by their position in that
+ * set rather than by node, so it can be rebuilt against the copies.
+ */
+export interface InternalConnection {
+    fromNode: number;
+    fromPort: number;
+    toNode: number;
+    toPort: number;
+}
+
+/**
+ * A connection that was dragged out and dropped on empty canvas. Describes
+ * what a node would have to offer to finish it, and joins the two up once
+ * one has been made.
+ */
+export interface DanglingConnection {
+    /** The side the new node has to offer. */
+    needs: PortType;
+
+    /** The types that side has to accept. Empty takes anything. */
+    types: Array<string>;
+
+    /** Wires the new node to the port the drag started from. */
+    connectTo: (node: FlowNode) => void;
+}
+
 export interface ConnectionRendererConfiguration {
     size?: number;
     color?: string;
@@ -216,6 +244,10 @@ export class NodeSubsystem {
                 this.#boxSelect = true;
             }
 
+            if (!hoveringSomething && !ctrlKey) {
+                this.unselectAllNodes();
+            }
+
             return hoveringSomething || ctrlKey;
         }
 
@@ -285,6 +317,119 @@ export class NodeSubsystem {
         }
     }
 
+    public connectionsWithin(nodes: Array<FlowNode>): Array<InternalConnection> {
+        const within: Array<InternalConnection> = [];
+
+        for (const connection of this.#connections) {
+            const outNode = connection.outNode();
+            const inNode = connection.inNode();
+            if (outNode === null || inNode === null) {
+                continue;
+            }
+
+            const from = nodes.indexOf(outNode);
+            const to = nodes.indexOf(inNode);
+            if (from === -1 || to === -1) {
+                continue;
+            }
+
+            const outPort = connection.outPort();
+            const inPort = connection.inPort();
+            if (outPort === null || inPort === null) {
+                continue;
+            }
+
+            within.push({
+                fromNode: from,
+                fromPort: this.#outputPortIndex(outNode, outPort),
+                toNode: to,
+                toPort: this.#inputPortIndex(inNode, inPort),
+            });
+        }
+
+        return within;
+    }
+
+    #onConnectionReleased: ((dangling: DanglingConnection) => void) | null = null;
+
+    public setConnectionReleasedHandler(handler: (dangling: DanglingConnection) => void): void {
+        this.#onConnectionReleased = handler;
+    }
+
+    #describeDanglingConnection(conn: Connection): DanglingConnection | null {
+        const outNode = conn.outNode();
+        const inNode = conn.inNode();
+
+        // Dragged from an output, so the new node supplies the input.
+        if (outNode !== null && inNode === null) {
+            const from = conn.outPort();
+            if (from === null) {
+                return null;
+            }
+            const fromIndex = this.#outputPortIndex(outNode, from);
+            return {
+                needs: PortType.Input,
+                types: from.acceptedTypes(),
+                connectTo: (node) => {
+                    const to = this.#firstCompatiblePort(node, PortType.Input, from);
+                    if (to !== -1 && fromIndex !== -1) {
+                        this.connectNodes(outNode, fromIndex, node, to);
+                    }
+                },
+            };
+        }
+
+        // Dragged from an input, so the new node supplies the output.
+        if (inNode !== null && outNode === null) {
+            const to = conn.inPort();
+            if (to === null) {
+                return null;
+            }
+            const toIndex = this.#inputPortIndex(inNode, to);
+            return {
+                needs: PortType.Output,
+                types: to.acceptedTypes(),
+                connectTo: (node) => {
+                    const from = this.#firstCompatiblePort(node, PortType.Output, to);
+                    if (from !== -1 && toIndex !== -1) {
+                        this.connectNodes(node, from, inNode, toIndex);
+                    }
+                },
+            };
+        }
+
+        return null;
+    }
+
+    #outputPortIndex(node: FlowNode, port: Port): number {
+        for (let i = 0; i < node.outputs(); i++) {
+            if (node.outputPort(i) === port) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    #inputPortIndex(node: FlowNode, port: Port): number {
+        for (let i = 0; i < node.inputs(); i++) {
+            if (node.inputPort(i) === port) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    #firstCompatiblePort(node: FlowNode, side: PortType, against: Port): number {
+        const count = side === PortType.Input ? node.inputs() : node.outputs();
+        for (let i = 0; i < count; i++) {
+            const port = side === PortType.Input ? node.inputPort(i) : node.outputPort(i);
+            if (portsCompatible(port, against)) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
     clickEnd(): void {
 
         for (let i = 0; i < this.#nodesGrabbed.Count(); i++) {
@@ -312,7 +457,11 @@ export class NodeSubsystem {
         }
 
         if (this.#portHovering === null) {
+            const dangling = this.#describeDanglingConnection(this.#connectionSelected);
             this.#clearCurrentlySelectedConnection();
+            if (dangling !== null) {
+                this.#onConnectionReleased?.(dangling);
+            }
             return;
         }
 
@@ -408,6 +557,7 @@ export class NodeSubsystem {
             this.#idleConnectionRenderer,
         );
         this.#connections.push(connection);
+        requestRender();
         return connection;
     }
 
@@ -478,6 +628,7 @@ export class NodeSubsystem {
 
     addNode(node: FlowNode): void {
         this.#nodes.push(node);
+        requestRender();
         for (let i = 0; i < this.#registeredNodeAddedCallbacks.length; i++) {
             const callback = this.#registeredNodeAddedCallbacks[i];
             if (!callback) {
@@ -531,6 +682,7 @@ export class NodeSubsystem {
         this.#removeNodeConnections(nodeIndex);
         const node = this.#nodes[nodeIndex];
         this.#nodes.splice(nodeIndex, 1);
+        requestRender();
         for (let i = 0; i < this.#nodeRemovedCallbacks.length; i++) {
             this.#nodeRemovedCallbacks[i](node);
         }
@@ -541,6 +693,7 @@ export class NodeSubsystem {
             this.#connections[index].clearPorts();
         }
         this.#connections.splice(index, 1);
+        requestRender();
     }
 
     #removeConnection(connection: Connection, clearPorts: boolean): void {
@@ -594,7 +747,8 @@ export class NodeSubsystem {
             ]
         }
 
-        if (this.#nodesSelected().length > 0) {
+        const selectedCount = this.#nodesSelected().length;
+        if (selectedCount > 0) {
             organizeNodesSubMenu.items?.push({
                 name: "Selected Nodes",
                 group: nodeFlowGroup,
@@ -602,6 +756,14 @@ export class NodeSubsystem {
                     this.#organizeSelected(ctx)
                 }
             })
+
+            config.items?.push({
+                name: selectedCount === 1 ? "Delete Selected Node" : `Delete ${selectedCount} Selected Nodes`,
+                group: nodeFlowGroup,
+                callback: () => {
+                    this.removeSelectedNodes();
+                }
+            })
         }
 
         if (this.#nodeHovering > -1) {
@@ -684,6 +846,32 @@ export class NodeSubsystem {
         }
     }
 
+    /** Drops the selection entirely. */
+    public unselectAllNodes(): void {
+        let changed = false;
+        for (let i = 0; i < this.#nodes.length; i++) {
+            if (this.#nodes[i].selected()) {
+                this.#nodes[i].unselect();
+                changed = true;
+            }
+        }
+
+        if (changed) {
+            requestRender();
+        }
+    }
+
+    /**
+     * Removes every selected node, and the connections that touched them.
+     */
+    public removeSelectedNodes(): Array<FlowNode> {
+        const removed = this.getSelectedNodes();
+        for (const node of removed) {
+            this.removeNode(node);
+        }
+        return removed;
+    }
+
     #selectNodeByIndex(nodeIndex: number, unselectOthers: boolean): void {
         this.#selectNode(this.#nodes[nodeIndex], unselectOthers);
     }
@@ -729,9 +917,22 @@ export class NodeSubsystem {
 
         const selectedBox_Screenspace = this.#boxSelectionScreenspaceBox(camera);
 
+        // Nodes outside the canvas are not drawn, but their ports are still
+        // placed, because wires to them stay on screen. 
+        const canvas: Box = {
+            Position: { x: 0, y: 0 },
+            Size: { x: ctx.canvas.width, y: ctx.canvas.height },
+        };
+
         for (let i = 0; i < this.#nodes.length; i++) {
             let state = NodeState.Idle;
 
+            const nodeBounds = this.#nodes[i].calculateBounds(ctx, camera);
+            if (!BoxIntersection(nodeBounds, canvas)
+                && this.#nodes[i].layoutPortsWithoutDrawing(nodeBounds, camera.zoom)) {
+                continue;
+            }
+
             if (mousePosition !== undefined && !this.#boxSelect) {
                 const intersection = this.#nodes[i].inBounds(ctx, camera, mousePosition);
 
@@ -791,6 +992,11 @@ export class NodeSubsystem {
     render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined {
         this.#lastCtx = ctx;
         this.#cursor = CursorStyle.Default;
+
+        // Connections draw first but need port positions, which only exist
+        // once a node has been drawn so a new node costs one extra frame.
+        const awaitingLayout = this.#nodes.some((node) => !node.hasBeenLaidOut());
+
         TimeExecution("Render_Connections", () => {
             this.#renderConnections(ctx, camera, mousePosition);
         })
@@ -798,6 +1004,10 @@ export class NodeSubsystem {
             this.#renderNodes(ctx, camera, mousePosition);
         })
 
+        if (awaitingLayout) {
+            requestRender();
+        }
+
         if (this.#boxSelect) {
             const box = this.#boxSelectionScreenspaceBox(camera);
             ctx.setLineDash([Theme.BoxSelect.LineDashLength]);

package/src/notes/subsystem.ts

@@ -1,5 +1,6 @@
 import { Camera } from "../camera";
 import { ContextMenuConfig } from "../contextMenu";
+import { requestRender } from "../render_scheduler";
 import { RenderResults } from "../graphSubsystem";
 import { InBox } from "../types/box";
 import { Vector2 } from "../types/vector2";
@@ -81,6 +82,7 @@ export class NoteSubsystem {
         }
 
         this.#notes.push(note);
+        requestRender();
         for (let i = 0; i < this.#onNoteAddedCallbacks.length; i++) {
             this.#onNoteAddedCallbacks[i](note);
         }
@@ -222,6 +224,7 @@ export class NoteSubsystem {
         if (index > -1) {
             const noteRemoved = this.#notes[index];
             this.#notes.splice(index, 1);
+            requestRender();
 
             for (let i = 0; i < this.#onNoteRemovedCallbacks.length; i++) {
                 this.#onNoteRemovedCallbacks[i](noteRemoved)

package/src/port.ts

@@ -1,5 +1,6 @@
 import { Camera } from "./camera";
 import { Connection } from './connection';
+import { requestRender } from "./render_scheduler";
 import { RenderElementBase } from "./elements/base";
 import { ContainerRenderElement, AlignItems } from './elements/container';
 import { TextAlign, TextElement } from "./elements/text";
@@ -67,13 +68,24 @@ export function portsCompatible(a: Port | undefined | null, b: Port | undefined
         return false;
     }
 
-    const left = a.acceptedTypes();
-    const right = b.acceptedTypes();
-    if (left.length === 0 || right.length === 0) {
+    return typeSetsCompatible(a.acceptedTypes(), b.acceptedTypes());
+}
+
+export function typeSetsCompatible(a: Array<string>, b: Array<string>): boolean {
+    if (a.length === 0 || b.length === 0) {
         return true;
     }
+    return a.some((type) => b.includes(type));
+}
 
-    return left.some((type) => right.includes(type));
+export function portConfigTypes(config: PortConfig): Array<string> {
+    if (config.anyType === true) {
+        return [];
+    }
+    if (config.acceptedTypes !== undefined && config.acceptedTypes.length > 0) {
+        return config.acceptedTypes;
+    }
+    return [config.type === undefined ? "" : config.type];
 }
 
 // Calculate a color hash for an arbirary type
@@ -220,6 +232,7 @@ export class Port {
             this.#filledStyle.fillColor = fallbackColor(this.#dataType, 1);
         }
         this.#dataTypePopupElement = this.#buildTooltip();
+        requestRender();
     }
 
     setDataType(type: string): void {