@elicdavis/node-flow 0.1.11 → 0.1.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@elicdavis/node-flow",
   "description": "build node graphs",
   "author": "Eli C Davis",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "license": "MIT",
   "keywords": [
     "nodes",

package/src/connection.ts

@@ -2,6 +2,7 @@ import { FlowNode } from "./node";
 import { Port } from "./port";
 import { BoxCenter, InBox } from "./types/box";
 import { Vector2, Zero } from "./types/vector2";
+import { Clamp01 } from "./utils/math";
 
 export interface ConnectionRendererParams {
     ctx: CanvasRenderingContext2D;
@@ -18,6 +19,16 @@ export interface ConnectionRendererParams {
 
 export type ConnectionRenderer = (params: ConnectionRendererParams) => void
 
+/** Horizontal stub (screen px) at full strength on each port when output is right of input. */
+const BACKWARD_PORT_STUB = 30;
+/** Screen px of output-over-input overlap over which stubs ramp from 0 to full. */
+const BACKWARD_STUB_RAMP = 80;
+
+function smoothstep(t: number): number {
+    const x = Clamp01(t);
+    return x * x * (3 - 2 * x);
+}
+
 export function DefaultConnectionRenderer(connectionSize: number, connectionColor: string | undefined, mouseOverSize: number, mouseOverColor: string | undefined): ConnectionRenderer {
     return (params: ConnectionRendererParams) => {
 
@@ -47,11 +58,29 @@ export function DefaultConnectionRenderer(connectionSize: number, connectionColo
         params.ctx.strokeStyle = color;
         params.ctx.lineWidth = lineSize;
 
-        // Draw
+        // start = input port, end = output port
+        const inX = params.start.x;
+        const inY = params.start.y;
+        const outX = params.end.x;
+        const outY = params.end.y;
+
+        const overlap = outX - inX;
+        const fullStub = BACKWARD_PORT_STUB * params.graphScale;
+        const ramp = BACKWARD_STUB_RAMP * params.graphScale;
+        const stub = overlap <= 0 ? 0 : fullStub * smoothstep(overlap / ramp);
+        const curveStartX = inX - stub;
+        const curveEndX = outX + stub;
+
         params.ctx.beginPath();
-        params.ctx.moveTo(params.start.x, params.start.y);
-        const midX = (params.start.x + params.end.x) / 2;
-        params.ctx.bezierCurveTo(midX, params.start.y, midX, params.end.y, params.end.x, params.end.y);
+        params.ctx.moveTo(inX, inY);
+        if (stub > 0) {
+            params.ctx.lineTo(curveStartX, inY);
+        }
+        const midX = (curveStartX + curveEndX) / 2;
+        params.ctx.bezierCurveTo(midX, inY, midX, outY, curveEndX, outY);
+        if (stub > 0) {
+            params.ctx.lineTo(outX, outY);
+        }
         params.ctx.stroke();
         params.ctx.shadowBlur = 0;
     }

package/src/contextMenu.ts

@@ -8,11 +8,24 @@ import { CopyVector2, Vector2, Zero } from './types/vector2';
 const contextEntryHeight = 30;
 const contextEntryWidth = 250;
 
+export enum ContextMenuItemState {
+    Enabled = 0,
+    Disabled = 1,
+    Hidden = 2,
+}
+
 export interface ContextMenuItemConfig {
     name?: string;
     textStyle?: TextStyleConfig;
     group?: string;
 
+    /**
+     * Evaluated when the menu is opened. Defaults to Enabled when omitted.
+     * Hidden items are omitted from the menu; Disabled items are shown muted
+     * and are not clickable.
+     */
+    enabled?: () => ContextMenuItemState;
+
     callback?: () => void;
 }
 
@@ -33,6 +46,8 @@ export class ContextMenuItem {
 
     #textStyle: TextStyle;
 
+    #state: ContextMenuItemState;
+
     public group?: string;
 
     constructor(config?: ContextMenuItemConfig) {
@@ -40,14 +55,21 @@ export class ContextMenuItem {
         this.#callback = config?.callback;
         this.#textStyle = new TextStyle(config?.textStyle);
         this.group = config?.group;
+        this.#state = config?.enabled === undefined
+            ? ContextMenuItemState.Enabled
+            : config.enabled();
     }
 
     getName(): string {
         return this.#name;
     }
 
+    state(): ContextMenuItemState {
+        return this.#state;
+    }
+
     execute(): void {
-        if (this.#callback === undefined) {
+        if (this.#state !== ContextMenuItemState.Enabled || this.#callback === undefined) {
             return;
         }
         this.#callback();
@@ -136,7 +158,11 @@ export class ContextMenu {
 
         if (config?.items !== undefined) {
             for (let i = 0; i < config?.items.length; i++) {
-                this.#items.push(new ContextMenuItem(config?.items[i]));
+                const item = new ContextMenuItem(config?.items[i]);
+                if (item.state() === ContextMenuItemState.Hidden) {
+                    continue;
+                }
+                this.#items.push(item);
             }
         }
 
@@ -312,7 +338,10 @@ export class ContextMenu {
                     }
                 }
 
-                if (entryMousedOver || (this.#openSubMenu !== undefined && entry.subMenu === this.#openSubMenu)) {
+                const itemDisabled = entry.item !== undefined
+                    && entry.item.state() === ContextMenuItemState.Disabled;
+
+                if (!itemDisabled && (entryMousedOver || (this.#openSubMenu !== undefined && entry.subMenu === this.#openSubMenu))) {
                     ctx.fillStyle = Theme.ContextMenu.HighlightColor;
                     ctx.beginPath();
                     ctx.roundRect(
@@ -326,6 +355,9 @@ export class ContextMenu {
                 }
 
                 this.#textStyle.setupStyle(ctx, menuScale);
+                if (itemDisabled) {
+                    ctx.fillStyle = Theme.ContextMenu.DisabledFontColor;
+                }
                 ctx.fillText(entry.text, position.x + (scaledEntryHeight / 5), this.#tempBox.Position.y + (scaledEntryHeight / 2))
 
                 // Render arrows

package/src/graph.ts

@@ -195,9 +195,9 @@ export class NodeFlowGraph {
         this.#contextMenuConfig = CombineContextMenus({
             items: [
                 {
-                    name: "Reset View",
+                    name: "Center on Graph",
                     group: contextMenuGroup,
-                    callback: this.#camera.reset.bind(this.#camera)
+                    callback: this.centerOnGraph.bind(this)
                 },
             ],
         }, config?.contextMenu);
@@ -222,23 +222,18 @@ export class NodeFlowGraph {
 
         window.requestAnimationFrame(this.#render.bind(this));
 
-        this.#canvas.addEventListener('wheel', (event) => {
-            event.preventDefault();
-            this.zoom(Math.sign(event.deltaY));
-        }, false);
-
         new MouseObserver(this.#canvas,
             this.#mouseDragEvent.bind(this),
-
-            // Mouse move event
             (mousePosition) => {
                 this.#mousePosition = mousePosition;
             },
-
             this.#clickStart.bind(this),
             this.#clickEnd.bind(this),
             this.#openContextMenu.bind(this),
-            this.#fileDrop.bind(this)
+            this.#fileDrop.bind(this),
+            (amount, anchor) => {
+                this.zoom(amount, anchor);
+            }
         );
 
         document.addEventListener(
@@ -331,20 +326,25 @@ export class NodeFlowGraph {
     }
 
 
-    zoom(amount: number): void {
+    zoom(amount: number, anchor?: Vector2): void {
+        const anchorPos = anchor ?? this.#mousePosition;
 
         let oldPos: Vector2 | undefined = undefined;
-        if (this.#mousePosition) {
-            oldPos = this.#sceenPositionToGraphPosition(this.#mousePosition);;
+        if (anchorPos !== undefined) {
+            oldPos = this.#sceenPositionToGraphPosition(anchorPos);
         }
 
         this.#camera.zoom += amount * this.#camera.zoom * 0.05;
 
-        if (!oldPos || !this.#mousePosition) {
+        if (!oldPos || anchorPos === undefined) {
             return;
         }
-        // Attempt zoom around where the current mouse is.
-        const newPos = this.#sceenPositionToGraphPosition(this.#mousePosition);
+
+        if (anchor !== undefined) {
+            this.#mousePosition = anchor;
+        }
+
+        const newPos = this.#sceenPositionToGraphPosition(anchorPos);
         this.#camera.position.x += (newPos.x - oldPos.x) * this.#camera.zoom;
         this.#camera.position.y += (newPos.y - oldPos.y) * this.#camera.zoom;
     }
@@ -380,6 +380,70 @@ export class NodeFlowGraph {
         return this.#mainNodeSubsystem.getNodes();
     }
 
+    /**
+     * Returns currently selected nodes in stable graph order (same selection
+     * state used by Ctrl+click and box-select styling via FlowNode.selected()).
+     */
+    getSelectedNodes(): Array<FlowNode> {
+        return this.#mainNodeSubsystem.getSelectedNodes();
+    }
+
+    /**
+     * Adjusts camera position and zoom so all nodes fit in view (~10% padding).
+     * Falls back to camera.reset() when there are no nodes.
+     */
+    centerOnGraph(): void {
+        const nodes = this.getNodes();
+        if (nodes.length === 0) {
+            this.#camera.reset();
+            return;
+        }
+
+        // Identity camera so calculateBounds returns graph-space sizes.
+        const measureCamera = new Camera();
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+
+        for (let i = 0; i < nodes.length; i++) {
+            const bounds = nodes[i].calculateBounds(this.#ctx, measureCamera);
+            minX = Math.min(minX, bounds.Position.x);
+            minY = Math.min(minY, bounds.Position.y);
+            maxX = Math.max(maxX, bounds.Position.x + bounds.Size.x);
+            maxY = Math.max(maxY, bounds.Position.y + bounds.Size.y);
+        }
+
+        let width = maxX - minX;
+        let height = maxY - minY;
+        if (width <= 0 || height <= 0) {
+            this.#camera.reset();
+            return;
+        }
+
+        const padX = width * 0.05;
+        const padY = height * 0.05;
+        minX -= padX;
+        minY -= padY;
+        width += padX * 2;
+        height += padY * 2;
+
+        const canvasWidth = this.#canvas.clientWidth;
+        const canvasHeight = this.#canvas.clientHeight;
+        if (canvasWidth <= 0 || canvasHeight <= 0) {
+            this.#camera.reset();
+            return;
+        }
+
+        const zoom = Math.min(canvasWidth / width, canvasHeight / height);
+        const centerX = minX + width / 2;
+        const centerY = minY + height / 2;
+
+        this.#camera.zoom = zoom;
+        this.#camera.position.x = canvasWidth / 2 - centerX * zoom;
+        this.#camera.position.y = canvasHeight / 2 - centerY * zoom;
+    }
+
     connectedInputsNodeReferences(nodeIndex: number): Array<FlowNode> {
         return this.#mainNodeSubsystem.connectedInputsNodeReferencesByIndex(nodeIndex);
     }
@@ -404,6 +468,18 @@ export class NodeFlowGraph {
         this.#mainNoteSubsystem.addNote(note);
     }
 
+    removeNote(note: FlowNote): void {
+        this.#mainNoteSubsystem.removeNote(note);
+    }
+
+    removeAllNotes(): void {
+        this.#mainNoteSubsystem.removeAllNotes();
+    }
+
+    getNotes(): Array<FlowNote> {
+        return this.#mainNoteSubsystem.getNotes();
+    }
+
     public addOnNodeCreatedListener(callback: NodeCreatedCallback): void {
         this.#mainNodeSubsystem.addOnNodeCreatedListener(callback);
     }
@@ -435,26 +511,6 @@ export class NodeFlowGraph {
         };
     }
 
-
-    // Somethings wrong here. Needs more testing
-    // #fitView(): void {
-    //     if (this.#nodes.length === 0) {
-    //         return;
-    //     }
-
-    //     const curBox: Box = {
-    //         Position: { x: 0, y: 0 },
-    //         Size: { x: 0, y: 0 }
-    //     };
-    //     CopyBox(curBox, this.#nodes[0].calculateBounds(this.#ctx, this.#graphState.position, this.#graphState.scale));
-
-    //     for (let i = 1; i < this.#nodes.length; i++) {
-    //         ExpandBox(curBox, this.#nodes[i].calculateBounds(this.#ctx, this.#graphState.position, this.#graphState.scale));
-    //     }
-
-    //     CopyVector2(this.#graphState.position, curBox.Position);
-    // }
-
     #clickEnd(): void {
         this.currentView().clickEnd();
     }

package/src/index.ts

@@ -1,14 +1,26 @@
 export * from './graph';
 export * from './node';
 
+import { ContextMenuConfig, ContextMenuItemConfig, ContextMenuItemState } from './contextMenu';
+export { ContextMenuConfig, ContextMenuItemConfig, ContextMenuItemState };
+
 import { Theme } from './theme';
 export { Theme };
 
 import { Publisher, PublisherConfig } from './nodes/publisher';
 export { Publisher, PublisherConfig };
 
-import { FlowNote } from './notes/note';
-export { FlowNote };
+import { FlowNote, FlowNoteConfig, NoteContentChangeCallback, NoteWidthChangeCallback } from './notes/note';
+export { FlowNote, FlowNoteConfig, NoteContentChangeCallback, NoteWidthChangeCallback };
+
+import {
+    NoteAddedCallback, NoteDragStartCallback, NoteDragStopCallback,
+    NoteRemovedCallback, NoteSubsystemConfig
+} from './notes/subsystem';
+export {
+    NoteAddedCallback, NoteDragStartCallback, NoteDragStopCallback,
+    NoteRemovedCallback, NoteSubsystemConfig
+};
 
 // Widgets
 import { NumberWidget } from './widgets/number';