@elicdavis/node-flow 0.1.12 → 0.1.14

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;
     }
-}
+}

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, ScaleVector, Vector2, Zero } from "./types/vector2";
+import { CopyVector2, Distance, Vector2, Zero } from "./types/vector2";
 import { Widget } from './widgets/widget';
 import { List } from './types/list';
 import { BoxStyle, BoxStyleConfig, BoxStyleWithFallback } from "./styles/box";
@@ -784,55 +784,56 @@ export class FlowNode {
 
     public calculateBounds(ctx: CanvasRenderingContext2D, camera: Camera): Box {
         const tempMeasurement = Zero();
-
-        const doublePadding = this.#padding * 2;
+        const zoom = camera.zoom;
+        const scaledPadding = this.#padding * zoom;
+        const doubleScaledPadding = scaledPadding * 2;
+        const scaledElementSpacing = this.#elementSpacing * zoom;
 
         const screenSpacePosition = Zero();
         camera.graphSpaceToScreenSpace(this.#position, screenSpacePosition);
 
         const size = Zero();
-        this.#title.size(ctx, 1, size);
+        this.#title.size(ctx, zoom, size);
 
         const subtitleSize = Zero();
-        this.#subTitle.size(ctx, 1, subtitleSize);
+        this.#subTitle.size(ctx, zoom, subtitleSize);
         size.x = Math.max(size.x, subtitleSize.x);
 
         if (this.#infoText !== "") {
             size.x += (size.y * 4);
         }
 
-        size.x += doublePadding;
-        size.y += doublePadding + (this.#elementSpacing * this.#input.length);
+        size.x += doubleScaledPadding;
+        size.y += doubleScaledPadding + (scaledElementSpacing * this.#input.length);
 
         for (let i = 0; i < this.#input.length; i++) {
             const port = this.#input[i];
-            this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
+            this.#portTextStyle.measure(ctx, zoom, port.getDisplayName(), tempMeasurement);
             size.y += tempMeasurement.y;
-            size.x = Math.max(size.x, tempMeasurement.x + doublePadding)
+            size.x = Math.max(size.x, tempMeasurement.x + doubleScaledPadding)
         }
 
-        size.y += (this.#elementSpacing * this.#output.length);
+        size.y += (scaledElementSpacing * this.#output.length);
 
         for (let i = 0; i < this.#output.length; i++) {
             const port = this.#output[i];
-            this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
+            this.#portTextStyle.measure(ctx, zoom, port.getDisplayName(), tempMeasurement);
             size.y += tempMeasurement.y;
-            size.x = Math.max(size.x, tempMeasurement.x + doublePadding)
+            size.x = Math.max(size.x, tempMeasurement.x + doubleScaledPadding)
         }
 
-        size.y += (this.#elementSpacing * this.#widgets.length);
+        size.y += (scaledElementSpacing * 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
-            size.x = Math.max(size.x, (eleSize.x) + doublePadding)
+            size.y += eleSize.y * zoom;
+            size.x = Math.max(size.x, (eleSize.x * zoom) + doubleScaledPadding)
         }
 
         // Add some padding at the end!
-        size.y += this.#elementSpacing
+        size.y += scaledElementSpacing
 
-        size.x = Math.max(size.x, MINIMUM_NODE_WIDTH)
-        ScaleVector(size, camera.zoom);
+        size.x = Math.max(size.x, MINIMUM_NODE_WIDTH * zoom)
 
         return {
             Position: screenSpacePosition,

package/src/nodes/subsystem.ts

@@ -94,6 +94,8 @@ export class NodeSubsystem {
 
     #boxSelectStyle: BoxStyle;
 
+    #lastCtx: CanvasRenderingContext2D | null;
+
     // LISTENERS ==============================================================
 
     #nodeRemovedCallbacks: Array<NodeRemovedCallback>;
@@ -122,6 +124,7 @@ export class NodeSubsystem {
         this.#boxSelectStart_graphSpace = Zero();
         this.#boxSelectEnd_graphSpace = Zero();
         this.#boxSelectionNodes = new List<number>();
+        this.#lastCtx = null;
         this.#boxSelectStyle = new BoxStyle({
             border: {
                 color: Theme.BoxSelect.Color,
@@ -160,6 +163,31 @@ export class NodeSubsystem {
 
     clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean {
         this.#boxSelect = false;
+        this.#nodesGrabbed.Clear();
+
+        // Touch has no continuous hover — hit-test at the click position.
+        if (this.#lastCtx !== null) {
+            this.#portHovering = null;
+            this.#widgetHovering = null;
+            this.#nodeHovering = -1;
+            for (let i = 0; i < this.#nodes.length; i++) {
+                const intersection = this.#nodes[i].inBounds(this.#lastCtx, camera, mousePosition);
+                if (intersection.Node !== undefined && intersection.PortIndex === undefined && intersection.Widget === undefined) {
+                    this.#nodeHovering = i;
+                }
+                if (intersection.Widget !== undefined) {
+                    this.#widgetHovering = intersection.Widget;
+                }
+                if (intersection.Port !== undefined && intersection.Node !== undefined && intersection.PortIndex !== undefined && intersection.PortIsInput !== undefined) {
+                    this.#portHovering = {
+                        Index: intersection.PortIndex,
+                        Node: intersection.Node,
+                        Port: intersection.Port,
+                        InputPort: intersection.PortIsInput
+                    };
+                }
+            }
+        }
 
         let hoveringSomething = false;
         if (this.#nodeHovering > -1) {
@@ -387,6 +415,20 @@ export class NodeSubsystem {
         return this.#nodes;
     }
 
+    /**
+     * 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> {
+        const selected = new Array<FlowNode>();
+        for (let i = 0; i < this.#nodes.length; i++) {
+            if (this.#nodes[i].selected()) {
+                selected.push(this.#nodes[i]);
+            }
+        }
+        return selected;
+    }
+
     /**
      * Returns all nodes who are connected to the inputs of the 
      * node in question
@@ -747,6 +789,7 @@ export class NodeSubsystem {
     }
 
     render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined {
+        this.#lastCtx = ctx;
         this.#cursor = CursorStyle.Default;
         TimeExecution("Render_Connections", () => {
             this.#renderConnections(ctx, camera, mousePosition);

package/src/theme.ts

@@ -57,6 +57,7 @@ export const Theme = {
         BackgroundColor: "#07212A",
         HighlightColor: "#205A6D",
         FontColor: "#afb9bb",
+        DisabledFontColor: "#4a585c",
     },
     Note: {
         FontColor: "#afb9bb",