@elicdavis/node-flow 0.1.16 → 0.1.17

package/package.json

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

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

@@ -26,6 +26,22 @@ export {
 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

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;

package/src/markdown/entry.ts

@@ -1,7 +1,8 @@
+import { requestRender } from "../render_scheduler";
 import { Theme } from "../theme";
 import { List } from "../types/list";
 import { Text } from "../types/text";
-import { CopyVector2, Vector2, Zero } from "../types/vector2";
+import { Vector2, Zero } from "../types/vector2";
 
 export interface MarkdownEntry {
     render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number
@@ -11,7 +12,10 @@ function onFontsLoaded(callback: () => void): void {
     if (typeof document === "undefined" || document.fonts === undefined) {
         return;
     }
-    document.fonts.addEventListener("loadingdone", () => callback());
+    document.fonts.addEventListener("loadingdone", () => {
+        callback();
+        requestRender();
+    });
 }
 
 export class CodeBlockEntry {

package/src/minimap.ts

@@ -0,0 +1,178 @@
+import { Camera } from "./camera";
+import { FlowNode } from "./node";
+import { Theme } from "./theme";
+import { Box, InBox } from "./types/box";
+import { Vector2 } from "./types/vector2";
+
+export interface MinimapConfig {
+    enabled?: boolean;
+    width?: number;
+    height?: number;
+    margin?: number;
+
+    /** Overrides Theme.Minimap.BackgroundColor for this minimap alone. */
+    backgroundColor?: string;
+
+    /** Overrides Theme.Minimap.BorderColor for this minimap alone. */
+    borderColor?: string;
+
+    /** Overrides Theme.Minimap.NodeColor for this minimap alone. */
+    nodeColor?: string;
+
+    /** Overrides Theme.Minimap.ViewportColor for this minimap alone. */
+    viewportColor?: string;
+}
+
+export class Minimap {
+
+    #enabled: boolean;
+
+    #width: number;
+
+    #height: number;
+
+    #margin: number;
+
+    #backgroundColor?: string;
+
+    #borderColor?: string;
+
+    #nodeColor?: string;
+
+    #viewportColor?: string;
+
+    #box: Box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+
+    #scale: number = 1;
+
+    #originX: number = 0;
+
+    #originY: number = 0;
+
+    // The padding the last frame was laid out with, so a click maps back
+    // through the same geometry it was drawn with.
+    #padding: number = Theme.Minimap.Padding;
+
+    #drawn: boolean = false;
+
+    constructor(config?: MinimapConfig) {
+        this.#enabled = config?.enabled === true;
+        this.#width = config?.width === undefined ? 200 : config.width;
+        this.#height = config?.height === undefined ? 150 : config.height;
+        this.#margin = config?.margin === undefined ? 16 : config.margin;
+        this.#backgroundColor = config?.backgroundColor;
+        this.#borderColor = config?.borderColor;
+        this.#nodeColor = config?.nodeColor;
+        this.#viewportColor = config?.viewportColor;
+    }
+
+    enabled(): boolean {
+        return this.#enabled;
+    }
+
+    setEnabled(enabled: boolean): void {
+        this.#enabled = enabled;
+        this.#drawn = false;
+    }
+
+    contains(position: Vector2): boolean {
+        return this.#enabled && this.#drawn && InBox(this.#box, position);
+    }
+
+    graphPositionOf(position: Vector2, out: Vector2): void {
+        out.x = (position.x - this.#box.Position.x - this.#padding) / this.#scale + this.#originX;
+        out.y = (position.y - this.#box.Position.y - this.#padding) / this.#scale + this.#originY;
+    }
+
+    render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, camera: Camera, nodes: Array<FlowNode>): void {
+        if (!this.#enabled) {
+            this.#drawn = false;
+            return;
+        }
+
+        // Bounds are taken with a fresh camera so they come back in graph
+        // space rather than wherever the real camera happens to be looking.
+        const flat = new Camera();
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        const boxes: Array<Box> = [];
+        for (let i = 0; i < nodes.length; i++) {
+            const bounds = nodes[i].calculateBounds(ctx, flat);
+            boxes.push(bounds);
+            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);
+        }
+
+        // What the camera can currently see, so the graph never scales out
+        // from under the viewport box.
+        const topLeft: Vector2 = { x: 0, y: 0 };
+        const bottomRight: Vector2 = { x: 0, y: 0 };
+        camera.screenSpaceToGraphSpace({ x: 0, y: 0 }, topLeft);
+        camera.screenSpaceToGraphSpace({ x: canvas.width, y: canvas.height }, bottomRight);
+
+        minX = Math.min(minX, topLeft.x);
+        minY = Math.min(minY, topLeft.y);
+        maxX = Math.max(maxX, bottomRight.x);
+        maxY = Math.max(maxY, bottomRight.y);
+
+        if (!isFinite(minX) || maxX <= minX || maxY <= minY) {
+            this.#drawn = false;
+            return;
+        }
+
+        this.#box.Size.x = this.#width;
+        this.#box.Size.y = this.#height;
+        this.#box.Position.x = canvas.width - this.#width - this.#margin;
+        this.#box.Position.y = canvas.height - this.#height - this.#margin;
+
+        this.#padding = Theme.Minimap.Padding;
+
+        const usableWidth = this.#width - (this.#padding * 2);
+        const usableHeight = this.#height - (this.#padding * 2);
+        this.#scale = Math.min(usableWidth / (maxX - minX), usableHeight / (maxY - minY));
+        this.#originX = minX;
+        this.#originY = minY;
+
+        const left = this.#box.Position.x + this.#padding;
+        const top = this.#box.Position.y + this.#padding;
+        const toMapX = (x: number) => left + ((x - minX) * this.#scale);
+        const toMapY = (y: number) => top + ((y - minY) * this.#scale);
+
+        ctx.fillStyle = this.#backgroundColor ?? Theme.Minimap.BackgroundColor;
+        ctx.strokeStyle = this.#borderColor ?? Theme.Minimap.BorderColor;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(
+            this.#box.Position.x,
+            this.#box.Position.y,
+            this.#width,
+            this.#height,
+            Theme.Minimap.BorderRadius,
+        );
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.fillStyle = this.#nodeColor ?? Theme.Minimap.NodeColor;
+        for (let i = 0; i < boxes.length; i++) {
+            const b = boxes[i];
+            ctx.fillRect(
+                toMapX(b.Position.x),
+                toMapY(b.Position.y),
+                Math.max(1, b.Size.x * this.#scale),
+                Math.max(1, b.Size.y * this.#scale),
+            );
+        }
+
+        ctx.fillStyle = this.#viewportColor ?? Theme.Minimap.ViewportColor;
+        ctx.fillRect(
+            toMapX(topLeft.x),
+            toMapY(topLeft.y),
+            Math.max(1, (bottomRight.x - topLeft.x) * this.#scale),
+            Math.max(1, (bottomRight.y - topLeft.y) * this.#scale),
+        );
+
+        this.#drawn = true;
+    }
+}