@elicdavis/node-flow 0.1.15 → 0.1.17

package/index.html

@@ -312,40 +312,10 @@ node.addOutput({ name: "sum", type: "float32" })
             ],
         });
 
-        const manyPortsNode = new FlowNode({
-            position: {
-                x: 1200,
-                y: 450
-            },
-            title: "Many Ports",
-            subTitle: "Zoom stress test",
-            info: "Node with lots of ports — zoom in/out to check height stability",
-            inputs: [
-                { name: "in 0", type: "float32" },
-                { name: "in 1", type: "float32" },
-                { name: "in 2", type: "float32" },
-                { name: "in 3", type: "float32" },
-                { name: "in 4", type: "float32" },
-                { name: "in 5", type: "float32" },
-                { name: "in 6", type: "float32" },
-                { name: "in 7", type: "float32" },
-                { name: "in 8", type: "float32" },
-                { name: "in 9", type: "float32" },
-            ],
-            outputs: [
-                { name: "out 0", type: "float32" },
-                { name: "out 1", type: "float32" },
-                { name: "out 2", type: "float32" },
-                { name: "out 3", type: "float32" },
-                { name: "out 4", type: "float32" },
-            ],
-        });
-
         graph.addNode(sumNode)
         graph.addNode(aNode)
         graph.addNode(bNode)
         graph.addNode(arrNode)
-        graph.addNode(manyPortsNode)
 
         graph.connectNodes(aNode, 0, sumNode, 0)
         graph.connectNodes(bNode, 0, sumNode, 1)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@elicdavis/node-flow",
   "description": "build node graphs",
   "author": "Eli C Davis",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "license": "MIT",
   "keywords": [
     "nodes",
@@ -15,7 +15,9 @@
   "scripts": {
     "build": "ts-node ./esbuild.ts",
     "watch": "npm run build -- --watch",
-    "package": "tsup"
+    "package": "tsup",
+    "test": "mocha",
+    "typecheck": "tsc --noEmit"
   },
   "homepage": "https://github.com/EliCDavis/node-flow",
   "repository": {

package/src/graph.ts

@@ -10,7 +10,7 @@ import { Clamp01 } from "./utils/math";
 import { GraphSubsystem, RenderResults } from './graphSubsystem';
 import { FlowNote } from "./notes/note";
 import { NoteAddedCallback, NoteDragStartCallback, NoteDragStopCallback, NoteRemovedCallback, NoteSubsystem, NoteSubsystemConfig } from "./notes/subsystem";
-import { ConnectionRendererConfiguration, NodeAddedCallback, NodeRemovedCallback, NodeSubsystem } from "./nodes/subsystem";
+import { ConnectionRendererConfiguration, DanglingConnection, InternalConnection, NodeAddedCallback, NodeRemovedCallback, NodeSubsystem } from "./nodes/subsystem";
 import { Connection } from './connection';
 import { Publisher } from './nodes/publisher';
 import { VectorPool } from './types/pool';
@@ -18,6 +18,8 @@ import { Camera, CameraOrientation } from './camera';
 export { CameraOrientation };
 import { PassSubsystem } from './pass/subsystem';
 import { QuickMenu } from './quickMenu';
+import { onRenderRequested, renderContinuously, requestRender } from './render_scheduler';
+import { Minimap, MinimapConfig } from './minimap';
 
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
 
@@ -49,6 +51,10 @@ function BuildBackgroundRenderer(backgroundColor: string): GraphRenderer {
 
 const contextMenuGroup = "graph-context-menu";
 
+export type CopyCallback = (nodes: Array<FlowNode>, connections: Array<InternalConnection>) => void;
+
+export type PasteCallback = (position: Vector2) => void;
+
 export interface FlowNodeGraphConfiguration {
     backgroundRenderer?: GraphRenderer;
     backgroundColor?: string;
@@ -56,6 +62,7 @@ export interface FlowNodeGraphConfiguration {
     contextMenu?: ContextMenuConfig
     nodes?: NodeFactoryConfig
     board?: NoteSubsystemConfig
+    minimap?: MinimapConfig
 }
 
 interface OpenContextMenu {
@@ -221,7 +228,15 @@ export class NodeFlowGraph {
             this.#backgroundRenderer = BuildBackgroundRenderer(backgroundColor);
         }
 
-        window.requestAnimationFrame(this.#render.bind(this));
+        this.#minimap = new Minimap(config?.minimap);
+
+        this.#mainNodeSubsystem.setConnectionReleasedHandler((dangling) => {
+            this.#openScopedMenu(dangling);
+        });
+
+        this.#watchCanvasSize();
+        this.#stopRendering = onRenderRequested(this.#render.bind(this));
+        requestRender();
 
         new MouseObserver(this.#canvas,
             this.#mouseDragEvent.bind(this),
@@ -240,45 +255,115 @@ export class NodeFlowGraph {
         document.addEventListener(
             "keydown",
             (e) => {
-                if (document.activeElement) {
-                    if (["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) return;
-                }
+                this.#keyDown(e);
+                requestRender();
+            }
+        );
+    }
 
-                if (this.#openQuickMenu) {
-                    if (e.code === "Escape") {
-                        this.#openQuickMenu = null;
-                        return;
-                    }
+    #copyCallbacks: Array<CopyCallback> = [];
 
-                    if (e.code === "Enter") {
-                        this.#openQuickMenu.Menu.execute();
-                        this.#openQuickMenu = null;
-                        return;
-                    }
+    #pasteCallbacks: Array<PasteCallback> = [];
 
-                    this.#openQuickMenu.Menu.keyboardEvent(e);
-                    return
-                }
+    public addCopyListener(callback: CopyCallback): void {
+        this.#copyCallbacks.push(callback);
+    }
+
+    public addPasteListener(callback: PasteCallback): void {
+        this.#pasteCallbacks.push(callback);
+    }
+
+    #raiseCopy(): void {
+        const nodes = this.#mainNodeSubsystem.getSelectedNodes();
+        if (nodes.length === 0) {
+            return;
+        }
+
+        const connections = this.#mainNodeSubsystem.connectionsWithin(nodes);
+        this.#copyCallbacks.forEach((callback) => callback(nodes, connections));
+    }
+
+    #raisePaste(): void {
+        const position = this.#mousePosition === undefined
+            ? { x: 0, y: 0 }
+            : this.#sceenPositionToGraphPosition(this.#mousePosition);
+
+        this.#pasteCallbacks.forEach((callback) => callback(position));
+    }
+
+    #deleteKey(e: KeyboardEvent): boolean {
+        return e.code === "Delete" || e.code === "Backspace" || e.key === "Delete" || e.key === "Backspace";
+    }
+
+    #keyDown(e: KeyboardEvent): void {
+        if (document.activeElement) {
+            if (["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) return;
+        }
+
+        if (this.#deleteKey(e)) {
+            if (this.#mainNodeSubsystem.getSelectedNodes().length > 0) {
+                e.preventDefault();
+                this.#mainNodeSubsystem.removeSelectedNodes();
+                return;
+            }
+        }
+
+        if (e.ctrlKey || e.metaKey) {
+            const letter = e.code.startsWith("Key")
+                ? e.code.substring(3).toLowerCase()
+                : (e.key ?? "").toLowerCase();
 
-                const spacePressed = e.key == " " || e.code == "Space";
-                if (!spacePressed) {
+            switch (letter) {
+                case "c":
+                    this.#raiseCopy();
                     return;
-                }
 
-                if (!this.#mousePosition) {
+                case "v":
+                    this.#raisePaste();
+                    return;
+
+                // duplicate
+                case "d":
+                    e.preventDefault();
+                    this.#raiseCopy();
+                    this.#raisePaste();
                     return;
-                }
-                const contextMenuPosition = this.#sceenPositionToGraphPosition(this.#mousePosition);
-
-                let items = this.#mainNodeSubsystem.nodeFactory().newNodeSubmenus(this.#mainNodeSubsystem, contextMenuPosition);
-                this.#openQuickMenu = {
-                    Menu: new QuickMenu({
-                        subMenus: items,
-                    }),
-                    Position: contextMenuPosition
-                }
             }
-        );
+        }
+
+        if (this.#openQuickMenu) {
+            if (e.code === "Escape") {
+                this.#openQuickMenu = null;
+                return;
+            }
+
+            if (e.code === "Enter") {
+                this.#openQuickMenu.Menu.execute();
+                this.#openQuickMenu = null;
+                return;
+            }
+
+            this.#openQuickMenu.Menu.keyboardEvent(e);
+            return
+        }
+
+        const spacePressed = e.key == " " || e.code == "Space";
+        if (!spacePressed) {
+            return;
+        }
+
+        if (!this.#mousePosition) {
+            return;
+        }
+        const contextMenuPosition = this.#sceenPositionToGraphPosition(this.#mousePosition);
+
+        let items = this.#mainNodeSubsystem.nodeFactory().newNodeSubmenus(this.#mainNodeSubsystem, contextMenuPosition);
+        this.#openQuickMenu = {
+            Menu: new QuickMenu({
+                subMenus: items,
+            }),
+            Position: contextMenuPosition
+        }
     }
 
     #fileDrop(file: File): void {
@@ -362,9 +447,33 @@ export class NodeFlowGraph {
         this.#contextMenuEntryHovering = null;
 
         this.#mousePosition = mousePosition;
+
+        if (this.#minimap.contains(mousePosition)) {
+            this.#lookAtFromMinimap(mousePosition);
+            this.#draggingMinimap = true;
+            return;
+        }
+
         this.currentView().clickStart(mousePosition, this.#camera, ctrlKey);
     }
 
+    #draggingMinimap: boolean = false;
+
+    #lookAtFromMinimap(mousePosition: Vector2): void {
+        const target: Vector2 = { x: 0, y: 0 };
+        this.#minimap.graphPositionOf(mousePosition, target);
+
+        // Centre the viewport on it rather than putting it in the corner.
+        this.#camera.position.x = -(target.x * this.#camera.zoom) + (this.#canvas.width / 2);
+        this.#camera.position.y = -(target.y * this.#camera.zoom) + (this.#canvas.height / 2);
+        requestRender();
+    }
+
+    /** The minimap, so it can be turned on and sized by the host. */
+    public minimap(): Minimap {
+        return this.#minimap;
+    }
+
     currentView(): GraphView {
         return this.#views[this.#currentView];
     }
@@ -389,6 +498,14 @@ export class NodeFlowGraph {
         return this.#mainNodeSubsystem.getSelectedNodes();
     }
 
+    public unselectAllNodes(): void {
+        this.#mainNodeSubsystem.unselectAllNodes();
+    }
+
+    public removeSelectedNodes(): Array<FlowNode> {
+        return this.#mainNodeSubsystem.removeSelectedNodes();
+    }
+
     /**
      * Returns a copy of the current camera orientation (screen-space pan + zoom).
      */
@@ -533,11 +650,42 @@ export class NodeFlowGraph {
         };
     }
 
+    #openScopedMenu(dangling: DanglingConnection): void {
+        if (this.#mousePosition === undefined) {
+            return;
+        }
+
+        const position = this.#sceenPositionToGraphPosition(this.#mousePosition);
+        const menu = this.#mainNodeSubsystem.nodeFactory().openMenu(
+            this.#mainNodeSubsystem,
+            position,
+            {
+                needs: dangling.needs,
+                types: dangling.types,
+                onCreated: dangling.connectTo,
+            },
+        );
+
+        this.#openedContextMenu = {
+            Menu: new ContextMenu(menu),
+            Position: position,
+        };
+        requestRender();
+    }
+
     #clickEnd(): void {
+        this.#draggingMinimap = false;
         this.currentView().clickEnd();
     }
 
     #mouseDragEvent(delta: Vector2): void {
+        if (this.#draggingMinimap) {
+            if (this.#mousePosition !== undefined) {
+                this.#lookAtFromMinimap(this.#mousePosition);
+            }
+            return;
+        }
+
         let draggingSomething = this.currentView().mouseDragEvent(delta, this.#camera.zoom);
         if (!draggingSomething) {
             this.#camera.position.x += delta.x;
@@ -549,14 +697,57 @@ export class NodeFlowGraph {
 
     #cursor: CursorStyle;
 
-    #render(): void {
-        if (this.#canvas.parentNode !== null) {
-            // Stupid as any because typescript doesn't think it exists
-            var rect = (this.#canvas.parentNode as any).getBoundingClientRect();
-            this.#canvas.width = rect.width;
-            this.#canvas.height = rect.height;
+    #minimap: Minimap;
+
+    #stopRendering: () => void;
+
+    #sizeObserver: ResizeObserver | undefined;
+
+    #matchCanvasToParent(): void {
+        const parent = this.#canvas.parentNode as HTMLElement | null;
+        if (parent === null) {
+            return;
+        }
+
+        const rect = parent.getBoundingClientRect();
+        if (this.#canvas.width === rect.width && this.#canvas.height === rect.height) {
+            return;
         }
 
+        this.#canvas.width = rect.width;
+        this.#canvas.height = rect.height;
+    }
+
+    #watchCanvasSize(): void {
+        this.#matchCanvasToParent();
+
+        const parent = this.#canvas.parentNode as HTMLElement | null;
+        if (parent === null || typeof ResizeObserver === "undefined") {
+            return;
+        }
+
+        this.#sizeObserver = new ResizeObserver(() => {
+            this.#matchCanvasToParent();
+            requestRender();
+        });
+        this.#sizeObserver.observe(parent);
+    }
+
+    public requestRender(): void {
+        requestRender();
+    }
+
+    public renderContinuously(): () => void {
+        return renderContinuously();
+    }
+
+    public dispose(): void {
+        this.#stopRendering();
+        this.#sizeObserver?.disconnect();
+    }
+
+    #render(): void {
+        this.#matchCanvasToParent();
 
         this.#cursor = CursorStyle.Default;
 
@@ -569,6 +760,10 @@ export class NodeFlowGraph {
             }
         });
 
+        TimeExecution("Render_Minimap", () => {
+            this.#minimap.render(this.#ctx, this.#canvas, this.#camera, this.#mainNodeSubsystem.getNodes());
+        });
+
         TimeExecution("Render_Context", this.#renderContextMenu.bind(this));
 
         TimeExecution("Render_QuickMenu", this.#renderQuickMenu.bind(this))
@@ -579,8 +774,6 @@ export class NodeFlowGraph {
             this.#canvas.style.cursor = this.#cursor;
         }
         this.#lastFrameCursor = this.#cursor;
-
-        window.requestAnimationFrame(this.#render.bind(this));
     }
 
     #renderBackground(): void {

package/src/index.ts

@@ -1,40 +1,82 @@
-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, 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';
-import { ColorWidget } from './widgets/color';
-import { StringWidget } from './widgets/string';
-import { TextWidget } from './widgets/text';
-import { ButtonWidget } from './widgets/button';
-import { ToggleWidget } from './widgets/toggle';
-import { SliderWidget } from './widgets/slider';
-import { ImageWidget } from './widgets/image';
-export {
-    NumberWidget, ColorWidget, StringWidget, TextWidget,
-    ButtonWidget, ToggleWidget, SliderWidget, ImageWidget
-};
-
-import { GlobalWidgetFactory } from './widgets/factory';
-export { GlobalWidgetFactory };
+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, 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
+};
+
+// Ports
+import { Port, PortConfig, PortStyle, PortType, portsCompatible } from './port';
+export { Port, PortConfig, PortStyle, PortType, portsCompatible };
+
+// Rendering
+import { renderContinuously, requestRender } from './render_scheduler';
+export { renderContinuously, requestRender };
+
+import { Minimap, MinimapConfig } from './minimap';
+export { Minimap, MinimapConfig };
+
+import { DanglingConnection, InternalConnection } from './nodes/subsystem';
+export { DanglingConnection, InternalConnection };
+
+import { NodeMenuFilter } from './nodes/publisher';
+export { NodeMenuFilter };
+
+import { portConfigTypes, typeSetsCompatible } from './port';
+export { portConfigTypes, typeSetsCompatible };
+
+// Connections
+import {
+    Connection, ConnectionRenderer, ConnectionRendererParams, DefaultConnectionRenderer
+} from './connection';
+export { Connection, ConnectionRenderer, ConnectionRendererParams, DefaultConnectionRenderer };
+
+// Node factory
+import { NodeCreatedCallback, NodeFactory, NodeFactoryConfig } from './nodes/factory';
+export { NodeCreatedCallback, NodeFactory, NodeFactoryConfig };
+
+// Widgets
+import { Widget } from './widgets/widget';
+import { NumberWidget, NumberWidgetConfig } from './widgets/number';
+import { ColorWidget, ColorWidgetConfig } from './widgets/color';
+import { StringWidget, StringWidgetConfig } from './widgets/string';
+import { TextWidget, TextWidgetConfig } from './widgets/text';
+import { ButtonWidget, ButtonWidgetConfig } from './widgets/button';
+import { ToggleWidget, ToggleWidgetConfig, ToggleStyleConfig } from './widgets/toggle';
+import { SliderWidget, SliderWidgetConfig } from './widgets/slider';
+import { ImageWidget, ImageWidgetConfig } from './widgets/image';
+export {
+    Widget,
+    NumberWidget, ColorWidget, StringWidget, TextWidget,
+    ButtonWidget, ToggleWidget, SliderWidget, ImageWidget
+};
+export type {
+    NumberWidgetConfig, ColorWidgetConfig, StringWidgetConfig, TextWidgetConfig,
+    ButtonWidgetConfig, ToggleWidgetConfig, ToggleStyleConfig, SliderWidgetConfig,
+    ImageWidgetConfig
+};
+
+import { GlobalWidgetFactory, WidgetBuilder, WidgetFactory } from './widgets/factory';
+export { GlobalWidgetFactory, WidgetFactory };
+export type { WidgetBuilder };
+
+import { Box } from './types/box';
+import { Vector2 } from './types/vector2';
+export type { Box, Vector2 };

package/src/input.ts

@@ -1,3 +1,4 @@
+import { requestRender } from "./render_scheduler";
 import { CopyVector2, Distance, SubVector2, Vector2, Zero } from "./types/vector2";
 
 const LONG_PRESS_MS = 500;
@@ -49,19 +50,25 @@ export class MouseObserver {
 
         ele.style.touchAction = "none";
 
-        ele.addEventListener("mousedown", this.#down.bind(this), false);
-        ele.addEventListener("touchstart", this.#touchStart.bind(this), { passive: false });
+        const redraws = <T extends Event>(handler: (event: T) => void) =>
+            (event: T): void => {
+                handler(event);
+                requestRender();
+            };
 
-        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("mousedown", redraws(this.#down.bind(this)), false);
+        ele.addEventListener("touchstart", redraws(this.#touchStart.bind(this)), { passive: false });
 
-        ele.addEventListener("mousemove", this.#move.bind(this), false);
-        ele.addEventListener("touchmove", this.#touchMove.bind(this), { passive: false });
+        document.addEventListener("mouseup", redraws(this.#up.bind(this)), false);
+        document.addEventListener("touchend", redraws(this.#touchEnd.bind(this)), false);
+        document.addEventListener("touchcancel", redraws(this.#touchEnd.bind(this)), false);
 
-        ele.addEventListener("wheel", this.#wheel.bind(this), { passive: false });
+        ele.addEventListener("mousemove", redraws(this.#move.bind(this)), false);
+        ele.addEventListener("touchmove", redraws(this.#touchMove.bind(this)), { passive: false });
 
-        ele.addEventListener("drop", (ev) => {
+        ele.addEventListener("wheel", redraws(this.#wheel.bind(this)), { passive: false });
+
+        ele.addEventListener("drop", redraws((ev: DragEvent) => {
             ev.preventDefault();
             if (ev.dataTransfer?.items) {
                 [...ev.dataTransfer.items].forEach((item, i) => {
@@ -73,21 +80,21 @@ export class MouseObserver {
                     }
                 });
             }
-        });
+        }));
 
-        ele.addEventListener("dragover", (ev) => {
+        ele.addEventListener("dragover", redraws((ev: DragEvent) => {
             ev.preventDefault();
             this.#moveCallback(this.#mousePos(ev));
-        });
+        }));
 
-        ele.addEventListener("contextmenu", (evt) => {
+        ele.addEventListener("contextmenu", redraws((evt: MouseEvent) => {
             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);
+        }), false);
     }
 
     #mousePos(event: MouseEvent | DragEvent | WheelEvent): Vector2 {
@@ -198,6 +205,7 @@ export class MouseObserver {
             this.#clicked = false;
             this.#clickStop();
             this.#contextMenu({ x, y });
+            requestRender();
         }, LONG_PRESS_MS);
 
         this.#clicked = true;