@elicdavis/node-flow 0.1.12 → 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.12",
+  "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);
     }
@@ -447,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,6 +1,9 @@
 export * from './graph';
 export * from './node';
 
+import { ContextMenuConfig, ContextMenuItemConfig, ContextMenuItemState } from './contextMenu';
+export { ContextMenuConfig, ContextMenuItemConfig, ContextMenuItemState };
+
 import { Theme } from './theme';
 export { Theme };
 

package/src/input.ts

@@ -1,20 +1,29 @@
-import { CopyVector2, SubVector2, Vector2, Zero } from "./types/vector2";
+import { CopyVector2, Distance, SubVector2, Vector2, Zero } from "./types/vector2";
+
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP = 12;
+const PINCH_SENSITIVITY = 50;
+const SUPPRESS_MOUSE_MS = 600;
 
 export class MouseObserver {
 
     #clicked: boolean;
-
     #lastTouch: Vector2;
-
-    #ele: HTMLElement
-
+    #ele: HTMLElement;
     #lastMousePosition: Vector2;
 
-    #dragCallback: (delta: Vector2) => void
-    #moveCallback: (position: Vector2) => void
-    #clickStart: (position: Vector2, shiftOrCtrl: boolean) => void
-    #clickStop: () => void
-    #contextMenu: (position: Vector2) => void
+    #dragCallback: (delta: Vector2) => void;
+    #moveCallback: (position: Vector2) => void;
+    #clickStart: (position: Vector2, shiftOrCtrl: boolean) => void;
+    #clickStop: () => void;
+    #contextMenu: (position: Vector2) => void;
+    #zoomCallback: (amount: number, anchor: Vector2) => void;
+
+    #longPressTimer: ReturnType<typeof setTimeout> | null = null;
+    #longPressOrigin: Vector2 = Zero();
+    #longPressFired: boolean = false;
+    #pinchDist: number = 0;
+    #lastTouchAt: number = 0;
 
     constructor(
         ele: HTMLElement,
@@ -23,7 +32,8 @@ export class MouseObserver {
         clickStart: (position: Vector2, shiftOrCtrl: boolean) => void,
         clickStop: () => void,
         contextMenu: (position: Vector2) => void,
-        fileDrop: (file: File) => void
+        fileDrop: (file: File) => void,
+        zoomCallback: (amount: number, anchor: Vector2) => void,
     ) {
         this.#ele = ele;
         this.#dragCallback = dragCallback;
@@ -31,123 +41,222 @@ export class MouseObserver {
         this.#clickStart = clickStart;
         this.#clickStop = clickStop;
         this.#contextMenu = contextMenu;
+        this.#zoomCallback = zoomCallback;
 
         this.#clicked = false;
         this.#lastTouch = Zero();
         this.#lastMousePosition = Zero();
 
-        // Down
-        ele.addEventListener('mousedown', this.#down.bind(this), false);
-        ele.addEventListener('touchstart', this.#touchDown.bind(this), false);
+        ele.style.touchAction = "none";
 
-        // Up
-        document.addEventListener('mouseup', this.#up.bind(this), false);
-        document.addEventListener('touchend', this.#up.bind(this), false);
+        ele.addEventListener("mousedown", this.#down.bind(this), false);
+        ele.addEventListener("touchstart", this.#touchStart.bind(this), { passive: false });
 
-        // Move
-        ele.addEventListener('mousemove', this.#move.bind(this), false);
-        ele.addEventListener('touchmove', this.#moveTouch.bind(this), false);
+        document.addEventListener("mouseup", this.#up.bind(this), false);
+        document.addEventListener("touchend", this.#touchEnd.bind(this), false);
+        document.addEventListener("touchcancel", this.#touchEnd.bind(this), false);
 
-        ele.addEventListener('drop', (ev) => {
-            ev.preventDefault();
-            console.log(ev)
+        ele.addEventListener("mousemove", this.#move.bind(this), false);
+        ele.addEventListener("touchmove", this.#touchMove.bind(this), { passive: false });
+
+        ele.addEventListener("wheel", this.#wheel.bind(this), { passive: false });
 
+        ele.addEventListener("drop", (ev) => {
+            ev.preventDefault();
             if (ev.dataTransfer?.items) {
-                // Use DataTransferItemList interface to access the file(s)
                 [...ev.dataTransfer.items].forEach((item, i) => {
-                    // If dropped items aren't files, reject them
                     if (item.kind === "file") {
                         const file = item.getAsFile();
                         if (file) {
                             fileDrop(file);
-                            console.log(file)
-                            console.log(`… file[${i}].name = ${file.name}`);
                         }
                     }
                 });
-            } else if (ev.dataTransfer) {
-                // Use DataTransfer interface to access the file(s)
-                [...ev.dataTransfer.files].forEach((file, i) => {
-                    console.log(`… file[${i}].name = ${file.name}`);
-                });
             }
         });
 
-        ele.addEventListener('dragover', (ev) => {
+        ele.addEventListener("dragover", (ev) => {
             ev.preventDefault();
-            this.#moveCallback(this.#mousePosition(ev));
-            // console.log(ev)
+            this.#moveCallback(this.#mousePos(ev));
         });
 
-        // Context
-        ele.addEventListener('contextmenu', (evt) => {
-            contextMenu(this.#mousePosition(evt));
-            evt.preventDefault()
+        ele.addEventListener("contextmenu", (evt) => {
+            evt.preventDefault();
+            // Touch uses long-press; ignore synthetic browser contextmenu after touch.
+            if (Date.now() - this.#lastTouchAt < SUPPRESS_MOUSE_MS) {
+                return;
+            }
+            this.#contextMenu(this.#mousePos(evt));
         }, false);
     }
 
-    #mousePosition(event: MouseEvent | DragEvent): Vector2 {
-        var rect = this.#ele.getBoundingClientRect();
+    #mousePos(event: MouseEvent | DragEvent | WheelEvent): Vector2 {
+        const rect = this.#ele.getBoundingClientRect();
         return {
             x: event.clientX - rect.left,
-            y: event.clientY - rect.top
+            y: event.clientY - rect.top,
+        };
+    }
+
+    #touchPos(touch: Touch): Vector2 {
+        const rect = this.#ele.getBoundingClientRect();
+        return {
+            x: touch.clientX - rect.left,
+            y: touch.clientY - rect.top,
+        };
+    }
+
+    #fromTouch(): boolean {
+        return Date.now() - this.#lastTouchAt < SUPPRESS_MOUSE_MS;
+    }
+
+    #clearLongPress(): void {
+        if (this.#longPressTimer !== null) {
+            clearTimeout(this.#longPressTimer);
+            this.#longPressTimer = null;
         }
     }
 
-    #move(event: MouseEvent): void {
-        const pos = this.#mousePosition(event);
+    #wheel(event: WheelEvent): void {
+        event.preventDefault();
+        let dy = event.deltaY;
+        if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            dy *= 16;
+        } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+            dy *= this.#ele.clientHeight;
+        }
+        // Scroll up zooms in (matches Figma / Maps).
+        const amount = -dy / 100;
+        if (amount === 0) {
+            return;
+        }
+        const anchor = this.#mousePos(event);
+        this.#moveCallback(anchor);
+        this.#zoomCallback(amount, anchor);
+    }
 
+    #move(event: MouseEvent): void {
+        if (this.#fromTouch()) {
+            return;
+        }
+        const pos = this.#mousePos(event);
         if (this.#clicked) {
             const delta = Zero();
             SubVector2(delta, pos, this.#lastMousePosition);
-            this.#dragCallback(delta)
+            this.#dragCallback(delta);
         }
-
         this.#moveCallback(pos);
         CopyVector2(this.#lastMousePosition, pos);
     }
 
-    #moveTouch(event: TouchEvent): void {
-        const rect = this.#ele.getBoundingClientRect();
-        const pos = {
-            x: event.touches[0].clientX - rect.left,
-            y: event.touches[0].clientY - rect.top
+    #down(event: MouseEvent): void {
+        if (event.button !== 0 || this.#fromTouch()) {
+            return;
+        }
+        this.#clicked = true;
+        this.#clickStart(this.#mousePos(event), event.ctrlKey || event.shiftKey);
+    }
+
+    #up(event: MouseEvent): void {
+        if (event.button !== 0 || this.#fromTouch()) {
+            return;
+        }
+        this.#clicked = false;
+        this.#clickStop();
+    }
+
+    #touchStart(event: TouchEvent): void {
+        this.#lastTouchAt = Date.now();
+        event.preventDefault();
+
+        if (event.touches.length >= 2) {
+            this.#clearLongPress();
+            this.#clicked = false;
+            this.#pinchDist = Distance(
+                this.#touchPos(event.touches[0]),
+                this.#touchPos(event.touches[1]),
+            );
+            return;
         }
+
+        if (event.touches.length !== 1) {
+            return;
+        }
+
+        const pos = this.#touchPos(event.touches[0]);
+        CopyVector2(this.#longPressOrigin, pos);
+        CopyVector2(this.#lastTouch, pos);
+        this.#longPressFired = false;
+        this.#pinchDist = 0;
+
+        this.#clearLongPress();
+        const x = pos.x;
+        const y = pos.y;
+        this.#longPressTimer = setTimeout(() => {
+            this.#longPressTimer = null;
+            this.#longPressFired = true;
+            this.#clicked = false;
+            this.#clickStop();
+            this.#contextMenu({ x, y });
+        }, LONG_PRESS_MS);
+
+        this.#clicked = true;
         this.#moveCallback(pos);
+        this.#clickStart(pos, false);
+    }
 
-        if (this.#clicked) {
+    #touchMove(event: TouchEvent): void {
+        this.#lastTouchAt = Date.now();
+        event.preventDefault();
+
+        if (event.touches.length >= 2) {
+            this.#clearLongPress();
+            this.#clicked = false;
+            const a = this.#touchPos(event.touches[0]);
+            const b = this.#touchPos(event.touches[1]);
+            const dist = Distance(a, b);
+            const anchor = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+            if (this.#pinchDist > 0) {
+                this.#moveCallback(anchor);
+                this.#zoomCallback((dist - this.#pinchDist) / PINCH_SENSITIVITY, anchor);
+            }
+            this.#pinchDist = dist;
+            return;
+        }
+
+        if (event.touches.length !== 1) {
+            return;
+        }
+
+        const pos = this.#touchPos(event.touches[0]);
+        if (this.#longPressTimer !== null && Distance(pos, this.#longPressOrigin) > LONG_PRESS_SLOP) {
+            this.#clearLongPress();
+        }
+
+        this.#moveCallback(pos);
+        if (this.#clicked && !this.#longPressFired) {
             this.#dragCallback({
                 x: pos.x - this.#lastTouch.x,
                 y: pos.y - this.#lastTouch.y,
             });
         }
-
         CopyVector2(this.#lastTouch, pos);
     }
 
-    #down(event: MouseEvent): void {
-        // Only register left clicks
-        if (event.button !== 0) {
+    #touchEnd(event: TouchEvent): void {
+        this.#lastTouchAt = Date.now();
+        this.#clearLongPress();
+
+        if (event.touches.length >= 1) {
+            this.#pinchDist = 0;
             return;
         }
-        this.#clicked = true;
-        this.#clickStart(this.#mousePosition(event), event.ctrlKey || event.shiftKey);
-    }
-
-    #touchDown(event: TouchEvent) {
-        this.#clicked = true;
-        const rect = this.#ele.getBoundingClientRect();
-        this.#lastTouch.x = event.touches[0].clientX - rect.left;
-        this.#lastTouch.y = event.touches[0].clientY - rect.top;
-        this.#clickStart(this.#lastTouch, false);
-    }
 
-    #up(event: MouseEvent): void {
-        // Only register left clicks
-        if (event.button !== 0) {
-            return;
+        this.#pinchDist = 0;
+        this.#clicked = false;
+        if (!this.#longPressFired) {
+            this.#clickStop();
         }
-        this.#clicked = false
-        this.#clickStop();
+        this.#longPressFired = false;
     }
-}
+}