@elicdavis/node-flow 0.2.0 → 0.2.2

package/package.json

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

package/src/graph.ts

@@ -19,6 +19,7 @@ export { CameraOrientation };
 import { PassSubsystem } from './pass/subsystem';
 import { QuickMenu } from './quickMenu';
 import { onRenderRequested, renderContinuously, requestRender } from './render_scheduler';
+import { placeEditsDuring } from './widgets/inplace';
 import { Minimap, MinimapConfig } from './minimap';
 
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
@@ -249,8 +250,8 @@ export class NodeFlowGraph {
             this.#clickEnd.bind(this),
             this.#openContextMenu.bind(this),
             this.#fileDrop.bind(this),
-            (amount, anchor) => {
-                this.zoom(amount, anchor);
+            (factor, anchor) => {
+                this.#zoomBy(factor, anchor);
             }
         );
 
@@ -416,6 +417,10 @@ export class NodeFlowGraph {
 
 
     zoom(amount: number, anchor?: Vector2): void {
+        this.#zoomBy(1 + amount * 0.05, anchor);
+    }
+
+    #zoomBy(factor: number, anchor?: Vector2): void {
         const anchorPos = anchor ?? this.#mousePosition;
 
         let oldPos: Vector2 | undefined = undefined;
@@ -423,7 +428,7 @@ export class NodeFlowGraph {
             oldPos = this.#sceenPositionToGraphPosition(anchorPos);
         }
 
-        this.#camera.zoom += amount * this.#camera.zoom * 0.05;
+        this.#camera.zoom *= factor;
 
         if (!oldPos || anchorPos === undefined) {
             return;
@@ -761,10 +766,12 @@ export class NodeFlowGraph {
         TimeExecution("Render_Background", this.#renderBackground.bind(this));
 
         TimeExecution("Render_View_" + this.#currentView, () => {
-            let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
-            if (results?.cursorStyle) {
-                this.#cursor = results?.cursorStyle;
-            }
+            placeEditsDuring(this.#canvas, () => {
+                let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
+                if (results?.cursorStyle) {
+                    this.#cursor = results?.cursorStyle;
+                }
+            });
         });
 
         TimeExecution("Render_Minimap", () => {

package/src/index.ts

@@ -66,7 +66,7 @@ import { SliderWidget, SliderWidgetConfig } from './widgets/slider';
 import { ImageWidget, ImageWidgetConfig } from './widgets/image';
 import { RowWidget, RowWidgetConfig } from './widgets/row';
 import { drawField, drawFieldBox, drawFieldText, FieldLook, widgetFont } from './widgets/field';
-import { editInPlace, InPlaceEditConfig } from './widgets/inplace';
+import { editInPlace, InPlaceEdit, InPlaceEditConfig } from './widgets/inplace';
 export {
     WidgetBase, ValueWidget,
     NumberWidget, ColorWidget, StringWidget, TextWidget,
@@ -74,7 +74,7 @@ export {
     drawField, drawFieldBox, drawFieldText, widgetFont, editInPlace, formatNumber,
 };
 export type {
-    Widget, WidgetPointer, ValueWidgetConfig, FieldLook, InPlaceEditConfig,
+    Widget, WidgetPointer, ValueWidgetConfig, FieldLook, InPlaceEdit, InPlaceEditConfig,
     NumberWidgetConfig, ColorWidgetConfig, StringWidgetConfig, TextWidgetConfig,
     ButtonWidgetConfig, ToggleWidgetConfig, SliderWidgetConfig,
     ImageWidgetConfig, RowWidgetConfig,

package/src/input.ts

@@ -3,7 +3,7 @@ import { CopyVector2, Distance, SubVector2, Vector2, Zero } from "./types/vector
 
 const LONG_PRESS_MS = 500;
 const LONG_PRESS_SLOP = 12;
-const PINCH_SENSITIVITY = 50;
+const WHEEL_ZOOM_PER_PIXEL = 0.0005;
 const SUPPRESS_MOUSE_MS = 600;
 
 export class MouseObserver {
@@ -18,7 +18,7 @@ export class MouseObserver {
     #clickStart: (position: Vector2, shiftOrCtrl: boolean) => void;
     #clickStop: () => void;
     #contextMenu: (position: Vector2) => void;
-    #zoomCallback: (amount: number, anchor: Vector2) => void;
+    #zoomCallback: (factor: number, anchor: Vector2) => void;
 
     #longPressTimer: ReturnType<typeof setTimeout> | null = null;
     #longPressOrigin: Vector2 = Zero();
@@ -34,7 +34,7 @@ export class MouseObserver {
         clickStop: () => void,
         contextMenu: (position: Vector2) => void,
         fileDrop: (file: File) => void,
-        zoomCallback: (amount: number, anchor: Vector2) => void,
+        zoomCallback: (factor: number, anchor: Vector2) => void,
     ) {
         this.#ele = ele;
         this.#dragCallback = dragCallback;
@@ -132,14 +132,12 @@ export class MouseObserver {
         } 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) {
+        if (dy === 0) {
             return;
         }
         const anchor = this.#mousePos(event);
         this.#moveCallback(anchor);
-        this.#zoomCallback(amount, anchor);
+        this.#zoomCallback(Math.exp(-dy * WHEEL_ZOOM_PER_PIXEL), anchor);
     }
 
     #move(event: MouseEvent): void {
@@ -226,7 +224,7 @@ export class MouseObserver {
             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.#zoomCallback(dist / this.#pinchDist, anchor);
             }
             this.#pinchDist = dist;
             return;

package/src/node.ts

@@ -4,6 +4,7 @@ import { FontWeight, TextStyle, TextStyleConfig, TextStyleFallback } from "./sty
 import { Box, InBox } from "./types/box";
 import { CopyVector2, Distance, ScaleVector, Vector2, Zero } from "./types/vector2";
 import { Widget } from './widgets/widget';
+import { HiddenPortsToggle } from './widgets/hidden_ports';
 import { List } from './types/list';
 import { BoxStyle, BoxStyleConfig, BoxStyleWithFallback } from "./styles/box";
 import { Text } from "./types/text";
@@ -804,7 +805,8 @@ export class FlowNode {
             size.x = Math.max(size.x, tempMeasurement.x + doublePadding)
         }
 
-        for (const widget of this.#widgets) {
+        const widgets = this.#hasHiddenPortsToggle() ? [this.#hiddenPortsToggle, ...this.#widgets] : this.#widgets;
+        for (const widget of widgets) {
             if (widget.Hidden?.()) {
                 continue;
             }
@@ -837,6 +839,38 @@ export class FlowNode {
         return port;
     }
 
+    #hiddenPortsShown = false;
+
+    #hiddenPortsToggle = new HiddenPortsToggle(this);
+
+    #hiddenPortsTogglePosition: Box | null = null;
+
+    hiddenPortsShown(): boolean {
+        return this.#hiddenPortsShown;
+    }
+
+    setHiddenPortsShown(shown: boolean): void {
+        if (shown === this.#hiddenPortsShown) {
+            return;
+        }
+        this.#hiddenPortsShown = shown;
+        this.invalidateLayout();
+    }
+
+    hiddenPortCount(): number {
+        let count = 0;
+        for (const port of [...this.#input, ...this.#output]) {
+            if (port.tucked()) {
+                count++;
+            }
+        }
+        return count;
+    }
+
+    #hasHiddenPortsToggle(): boolean {
+        return this.hiddenPortCount() > 0;
+    }
+
     addWidget(widget: Widget): void {
         this.#widgets.push(widget);
         requestRender();
@@ -930,6 +964,12 @@ export class FlowNode {
             }
         }
 
+        if (this.#hiddenPortsTogglePosition !== null && InBox(this.#hiddenPortsTogglePosition, position)) {
+            intersection.Node = this;
+            intersection.Widget = this.#hiddenPortsToggle;
+            intersection.WidgetBox = this.#hiddenPortsTogglePosition;
+        }
+
         for (let i = 0; i < this.#widgetPositions.Count(); i++) {
             const widget = this.#widgets[i];
             if (widget !== undefined && !widget.Hidden?.() && InBox(this.#widgetPositions.At(i), position)) {
@@ -1297,6 +1337,17 @@ export class FlowNode {
                 startY += portHeight + scaledElementSpacing;
             }
 
+            this.#hiddenPortsTogglePosition = null;
+            if (this.#hasHiddenPortsToggle()) {
+                const box: Box = {
+                    Position: { x: nodeBounds.Position.x + scaledPadding, y: startY },
+                    Size: { x: nodeBounds.Size.x - (scaledPadding * 2), y: this.#hiddenPortsToggle.Size().y * camera.zoom },
+                };
+                this.#hiddenPortsToggle.Draw(ctx, box, camera.zoom, mousePosition);
+                this.#hiddenPortsTogglePosition = box;
+                startY += box.Size.y + scaledElementSpacing;
+            }
+
             // Widgets
             for (let i = 0; i < this.#widgets.length; i++) {
                 const widget = this.#widgets[i];
@@ -1360,6 +1411,7 @@ export class FlowNode {
             return false;
         }
         this.#widgetPositions.Clear();
+        this.#hiddenPortsTogglePosition = null;
         return true;
     }
 

package/src/port.ts

@@ -345,9 +345,14 @@ export class Port {
     }
 
     /**
-     * A port asked to hide still shows while anything is connected to it.
+     * A port asked to hide still shows while anything is connected to it,
+     * and while its node is showing its hidden ports.
      */
     hidden(): boolean {
+        return this.tucked() && !(this.#node?.hiddenPortsShown() ?? false);
+    }
+
+    tucked(): boolean {
         return this.#hidden && this.#connections.length === 0;
     }
 

package/src/theme.ts

@@ -1,179 +1,179 @@
-import { requestRender } from "./render_scheduler";
-
-export interface BevelColors {
-    Light: string;
-    Dark: string;
-}
-
-const defaults = {
-    FontFamily: "Courier New",
-    Graph: {
-        BackgroundColor: "#07212a",
-        DotColor: "rgb(41, 54, 57)",
-    },
-    Node: {
-        FontColor: "#afb9bb",
-        BackgroundColor: "#0c2b35",
-        Title: {
-            Color: "#154050",
-            FontColor: "#afb9bb",
-            Padding: 5
-        },
-        BorderRadius: 15,
-        Border: {
-            Idle: "#1c1c1c",
-            MouseOver: "#8e8e8e",
-            Grabbed: "white",
-            Selected: "#6e6e6e"
-        },
-        Bevel: null as BevelColors | null,
-        Port: {
-            FontColor: "#afb9bb"
-        },
-        Message: {
-            InfoColor: "#afb9bb",
-            WarnColor: "#f1f663ff",
-            ErrorColor: "#FF0000"
-        }
-    },
-    BoxSelect: {
-        Color: "white",
-        Size: 1,
-        Radius: 2,
-        LineDashLength: 5,
-    },
-    Widget: {
-        FontColor: "#afb9bb",
-        LabelColor: "#7f9497",
-        FontSize: 14,
-        Padding: 6,
-        Gap: 4,
-        BackgroundColor: "#0f313c",
-        Border: {
-            Color: "#154050",
-            Size: 2,
-            Radius: 2
-        },
-        Bevel: null as BevelColors | null,
-        Hover: {
-            BackgroundColor: "#195366"
-        },
-        Input: {
-            BackgroundColor: "#0f313c",
-            HoverBackgroundColor: "#195366",
-            FontColor: "#afb9bb",
-        },
-        Slider: {
-            FillColor: "#07212A",
-        },
-        Button: {
-            Click: {
-                BackgroundColor: "#1f637a"
-            },
-        }
-    },
-    ContextMenu: {
-        BackgroundColor: "#07212A",
-        HighlightColor: "#205A6D",
-        HighlightFontColor: "#afb9bb",
-        FontColor: "#afb9bb",
-        DisabledFontColor: "#4a585c",
-        BorderRadius: 5,
-    },
-    Minimap: {
-        BackgroundColor: "rgba(10, 16, 18, 0.85)",
-        BorderColor: "#1c1c1c",
-        BorderRadius: 4,
-        Padding: 6,
-        NodeColor: "#6b7f85",
-        ViewportColor: "rgba(175, 185, 187, 0.25)",
-    },
-    Popup: {
-        BackgroundColor: "#000000",
-        FontColor: "#ffffff",
-        FontFamily: "Verdana",
-        BorderRadius: 8,
-        Backdrop: "#00000070",
-    },
-    Note: {
-        FontColor: "#afb9bb",
-        FontSize: 16,
-        EntrySpacing: 20,
-        LineSpacing: 5,
-        DotSize: 3,
-        HeaderLineWidth: 2,
-        H1: {
-            FontSize: 32,
-        },
-        H2: {
-            FontSize: 16,
-        },
-        H3: {
-            FontSize: 16,
-        },
-        CodeBlock: {
-            BackgroundColor: "#0c2b35",
-            FontColor: "#afb9bb",
-            Padding: 16,
-            BorderRadius: 4,
-        }
-    }
-};
-
-export type ThemeValues = typeof defaults;
-
-type DeepPartial<T> = {
-    [K in keyof T]?: T[K] extends object | null
-        ? (null extends T[K] ? T[K] : DeepPartial<T[K]>)
-        : T[K];
-};
-
-export type ThemeConfig = DeepPartial<ThemeValues>;
-
-function clone<T>(value: T): T {
-    return JSON.parse(JSON.stringify(value));
-}
-
-function merge(target: any, source: any): any {
-    if (source === undefined) {
-        return target;
-    }
-    if (source === null || typeof source !== "object" || target === null || typeof target !== "object") {
-        return source;
-    }
-    for (const key of Object.keys(source)) {
-        target[key] = merge(target[key], source[key]);
-    }
-    return target;
-}
-
-export const DefaultTheme: Readonly<ThemeValues> = Object.freeze(clone(defaults));
-
-export const Theme: ThemeValues = clone(defaults);
-
-let version = 0;
-
-const listeners = new Set<() => void>();
-
-/**
- * Replaces the theme: the defaults, with anything in config laid over them.
- * Everything already on screen picks the change up on its next draw.
- */
-export function setTheme(config?: ThemeConfig): void {
-    const next = merge(clone(defaults), config);
-    for (const key of Object.keys(next) as Array<keyof ThemeValues>) {
-        (Theme as any)[key] = next[key];
-    }
-    version++;
-    listeners.forEach((listener) => listener());
-    requestRender();
-}
-
-export function themeVersion(): number {
-    return version;
-}
-
-export function onThemeChange(listener: () => void): () => void {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-}
+import { requestRender } from "./render_scheduler";
+
+export interface BevelColors {
+    Light: string;
+    Dark: string;
+}
+
+const defaults = {
+    FontFamily: "Courier New",
+    Graph: {
+        BackgroundColor: "#07212a",
+        DotColor: "rgb(41, 54, 57)",
+    },
+    Node: {
+        FontColor: "#afb9bb",
+        BackgroundColor: "#0c2b35",
+        Title: {
+            Color: "#154050",
+            FontColor: "#afb9bb",
+            Padding: 5
+        },
+        BorderRadius: 15,
+        Border: {
+            Idle: "#1c1c1c",
+            MouseOver: "#8e8e8e",
+            Grabbed: "white",
+            Selected: "#6e6e6e"
+        },
+        Bevel: null as BevelColors | null,
+        Port: {
+            FontColor: "#afb9bb"
+        },
+        Message: {
+            InfoColor: "#afb9bb",
+            WarnColor: "#f1f663ff",
+            ErrorColor: "#FF0000"
+        }
+    },
+    BoxSelect: {
+        Color: "white",
+        Size: 1,
+        Radius: 2,
+        LineDashLength: 5,
+    },
+    Widget: {
+        FontColor: "#afb9bb",
+        LabelColor: "#7f9497",
+        FontSize: 14,
+        Padding: 6,
+        Gap: 4,
+        BackgroundColor: "#0f313c",
+        Border: {
+            Color: "#154050",
+            Size: 2,
+            Radius: 2
+        },
+        Bevel: null as BevelColors | null,
+        Hover: {
+            BackgroundColor: "#195366"
+        },
+        Input: {
+            BackgroundColor: "#0f313c",
+            HoverBackgroundColor: "#195366",
+            FontColor: "#afb9bb",
+        },
+        Slider: {
+            FillColor: "#07212A",
+        },
+        Button: {
+            Click: {
+                BackgroundColor: "#1f637a"
+            },
+        }
+    },
+    ContextMenu: {
+        BackgroundColor: "#07212A",
+        HighlightColor: "#205A6D",
+        HighlightFontColor: "#afb9bb",
+        FontColor: "#afb9bb",
+        DisabledFontColor: "#4a585c",
+        BorderRadius: 5,
+    },
+    Minimap: {
+        BackgroundColor: "rgba(10, 16, 18, 0.85)",
+        BorderColor: "#1c1c1c",
+        BorderRadius: 4,
+        Padding: 6,
+        NodeColor: "#6b7f85",
+        ViewportColor: "rgba(175, 185, 187, 0.25)",
+    },
+    Popup: {
+        BackgroundColor: "#000000",
+        FontColor: "#ffffff",
+        FontFamily: "Verdana",
+        BorderRadius: 8,
+        Backdrop: "#00000070",
+    },
+    Note: {
+        FontColor: "#afb9bb",
+        FontSize: 16,
+        EntrySpacing: 20,
+        LineSpacing: 5,
+        DotSize: 3,
+        HeaderLineWidth: 2,
+        H1: {
+            FontSize: 32,
+        },
+        H2: {
+            FontSize: 16,
+        },
+        H3: {
+            FontSize: 16,
+        },
+        CodeBlock: {
+            BackgroundColor: "#0c2b35",
+            FontColor: "#afb9bb",
+            Padding: 16,
+            BorderRadius: 4,
+        }
+    }
+};
+
+export type ThemeValues = typeof defaults;
+
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends BevelColors | null
+        ? T[K]
+        : T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+export type ThemeConfig = DeepPartial<ThemeValues>;
+
+function clone<T>(value: T): T {
+    return JSON.parse(JSON.stringify(value));
+}
+
+function merge(target: any, source: any): any {
+    if (source === undefined) {
+        return target;
+    }
+    if (source === null || typeof source !== "object" || target === null || typeof target !== "object") {
+        return source;
+    }
+    for (const key of Object.keys(source)) {
+        target[key] = merge(target[key], source[key]);
+    }
+    return target;
+}
+
+export const DefaultTheme: Readonly<ThemeValues> = Object.freeze(clone(defaults));
+
+export const Theme: ThemeValues = clone(defaults);
+
+let version = 0;
+
+const listeners = new Set<() => void>();
+
+/**
+ * Replaces the theme: the defaults, with anything in config laid over them.
+ * Everything already on screen picks the change up on its next draw.
+ */
+export function setTheme(config?: ThemeConfig): void {
+    const next = merge(clone(defaults), config);
+    for (const key of Object.keys(next) as Array<keyof ThemeValues>) {
+        (Theme as any)[key] = next[key];
+    }
+    version++;
+    listeners.forEach((listener) => listener());
+    requestRender();
+}
+
+export function themeVersion(): number {
+    return version;
+}
+
+export function onThemeChange(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}

package/src/widgets/hidden_ports.ts

@@ -0,0 +1,49 @@
+import { Theme } from "../theme";
+import { Box } from "../types/box";
+import { Vector2 } from "../types/vector2";
+import { WidgetBase } from "./widget";
+
+export interface HiddenPortsOwner {
+    hiddenPortCount(): number;
+    hiddenPortsShown(): boolean;
+    setHiddenPortsShown(shown: boolean): void;
+}
+
+export class HiddenPortsToggle extends WidgetBase {
+
+    constructor(private readonly owner: HiddenPortsOwner) {
+        super();
+    }
+
+    Size(): Vector2 {
+        return { x: 150, y: 16 };
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        const label = this.owner.hiddenPortsShown() ? "▴ less" : `▾ ${this.owner.hiddenPortCount()} more`;
+
+        const midY = box.Position.y + box.Size.y / 2;
+        const centerX = box.Position.x + box.Size.x / 2;
+
+        ctx.font = `${11 * scale}px ${Theme.FontFamily}`;
+        const half = ctx.measureText(label).width / 2 + 6 * scale;
+
+        ctx.globalAlpha = this.hovered() ? 1 : 0.5;
+        ctx.strokeStyle = Theme.Widget.FontColor;
+        ctx.fillStyle = Theme.Widget.FontColor;
+        ctx.lineWidth = Math.max(1, scale);
+        ctx.beginPath();
+        ctx.moveTo(box.Position.x, midY);
+        ctx.lineTo(centerX - half, midY);
+        ctx.moveTo(centerX + half, midY);
+        ctx.lineTo(box.Position.x + box.Size.x, midY);
+        ctx.stroke();
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(label, centerX, midY);
+    }
+
+    protected onClick(): void {
+        this.owner.setHiddenPortsShown(!this.owner.hiddenPortsShown());
+    }
+}