@elicdavis/node-flow 0.2.1 → 0.2.3

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

package/test/hidden_port.test.ts

@@ -50,13 +50,14 @@ function scene(hidden: boolean) {
 
 describe('a hidden port', () => {
     it('takes no room on its node', () => {
-        const shown = scene(false);
-        const hidden = scene(true);
+        const one = scene(true);
+        const two = scene(true);
+        two.node.addInput({ name: 'Iridescence', type: 'iridescence', hidden: true });
 
-        const shownHeight = shown.node.calculateBounds(shown.ctx, shown.camera).Size.y;
-        const hiddenHeight = hidden.node.calculateBounds(hidden.ctx, hidden.camera).Size.y;
+        const oneHeight = one.node.calculateBounds(one.ctx, one.camera).Size.y;
+        const twoHeight = two.node.calculateBounds(two.ctx, two.camera).Size.y;
 
-        assert.ok(hiddenHeight < shownHeight);
+        assert.equal(twoHeight, oneHeight);
     });
 
     it('cannot be hovered where it would have been drawn', () => {

package/test/hidden_ports_toggle.test.ts

@@ -0,0 +1,102 @@
+import { strict as assert } from 'assert';
+import { NodeSubsystem } from '../src/nodes/subsystem';
+import { PassSubsystem } from '../src/pass/subsystem';
+import { FlowNode, NodeIntersection } from '../src/node';
+import { Camera } from '../src/camera';
+import { stubCtx } from './support';
+
+function scene(inputs: Array<{ name: string, type: string, hidden?: boolean }>) {
+    const graph = new NodeSubsystem(new PassSubsystem());
+    const node = new FlowNode({
+        title: 'material',
+        position: { x: 100, y: 100 },
+        inputs,
+        outputs: [{ name: 'Out', type: 'material' }],
+    });
+    graph.addNode(node);
+    return { graph, node, camera: new Camera(), ctx: stubCtx() };
+}
+
+const material = [
+    { name: 'Color', type: 'color' },
+    { name: 'Sheen', type: 'sheen', hidden: true },
+    { name: 'Clearcoat', type: 'clearcoat', hidden: true },
+];
+
+function findWidget(s: ReturnType<typeof scene>): NodeIntersection | undefined {
+    s.graph.render(s.ctx, s.camera, undefined);
+    const bounds = s.node.calculateBounds(s.ctx, s.camera);
+    for (let y = bounds.Position.y; y < bounds.Position.y + bounds.Size.y; y++) {
+        const hit = s.node.inBounds(s.ctx, s.camera, { x: bounds.Position.x + bounds.Size.x / 2, y });
+        if (hit.Widget !== undefined) {
+            return hit;
+        }
+    }
+    return undefined;
+}
+
+function click(hit: NodeIntersection) {
+    const pointer = { position: { x: 0, y: 0 }, inside: true } as any;
+    hit.Widget!.PointerDown!(pointer);
+    hit.Widget!.PointerUp!(pointer);
+}
+
+describe('a node with hidden ports', () => {
+    it('draws a row that shows them', () => {
+        const s = scene(material);
+        const toggle = findWidget(s);
+        assert.ok(toggle, 'no toggle row to click');
+
+        click(toggle);
+
+        assert.equal(s.node.inputPort(1).hidden(), false);
+        assert.equal(s.node.inputPort(2).hidden(), false);
+    });
+
+    it('hides them again on a second click', () => {
+        const s = scene(material);
+        click(findWidget(s)!);
+        click(findWidget(s)!);
+
+        assert.equal(s.node.inputPort(1).hidden(), true);
+        assert.equal(s.node.inputPort(2).hidden(), true);
+    });
+
+    it('grows when they are shown', () => {
+        const s = scene(material);
+        const collapsed = s.node.calculateBounds(s.ctx, s.camera).Size.y;
+
+        s.node.setHiddenPortsShown(true);
+
+        assert.ok(s.node.calculateBounds(s.ctx, s.camera).Size.y > collapsed);
+    });
+
+    it('asks for a fresh layout when they are shown', () => {
+        const s = scene(material);
+        s.graph.render(s.ctx, s.camera, undefined);
+
+        s.node.setHiddenPortsShown(true);
+
+        assert.ok(!s.node.hasBeenLaidOut());
+    });
+
+    it('does not take the place of its own widgets', () => {
+        const s = scene(material);
+        assert.equal(s.node.widgetCount(), 0);
+        assert.equal(findWidget(s)!.WidgetIndex, undefined);
+    });
+
+    it('has no row when nothing is hidden', () => {
+        assert.equal(findWidget(scene([{ name: 'Color', type: 'color' }])), undefined);
+    });
+
+    it('has no row once every hidden port is wired', () => {
+        const s = scene([{ name: 'Color', type: 'color' }, { name: 'Sheen', type: 'sheen', hidden: true }]);
+        const source = new FlowNode({ title: 'sheen', outputs: [{ name: 'Out', type: 'sheen' }] });
+        s.graph.addNode(source);
+
+        s.graph.connectNodes(source, 0, s.node, 1);
+
+        assert.equal(findWidget(s), undefined);
+    });
+});

package/test/pinch_zoom.test.ts

@@ -0,0 +1,78 @@
+import { strict as assert } from 'assert';
+import { MouseObserver } from '../src/input';
+
+function observe(run: (fire: (name: string, event: any) => void, zoom: () => number) => void) {
+    const listeners = new Map<string, Array<(e: any) => void>>();
+    const ele: any = {
+        style: {},
+        clientHeight: 600,
+        addEventListener: (name: string, fn: (e: any) => void) => {
+            listeners.set(name, [...(listeners.get(name) ?? []), fn]);
+        },
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+    };
+    const fire = (name: string, event: any) => {
+        event.preventDefault = () => { };
+        (listeners.get(name) ?? []).forEach((fn) => fn(event));
+    };
+
+    let zoom = 1;
+    const g = globalThis as any;
+    const previous = { document: g.document, WheelEvent: g.WheelEvent };
+    g.document = { addEventListener: () => { } };
+    g.WheelEvent = { DOM_DELTA_PIXEL: 0, DOM_DELTA_LINE: 1, DOM_DELTA_PAGE: 2 };
+    try {
+        new MouseObserver(ele, () => { }, () => { }, () => { }, () => { }, () => { }, () => { },
+            (factor) => { zoom *= factor; });
+        run(fire, () => zoom);
+    } finally {
+        g.document = previous.document;
+        g.WheelEvent = previous.WheelEvent;
+    }
+}
+
+function fingers(apart: number) {
+    return { touches: [{ clientX: 300 - apart / 2, clientY: 300 }, { clientX: 300 + apart / 2, clientY: 300 }] };
+}
+
+describe('pinch to zoom', () => {
+    it('doubles the zoom when the fingers spread to twice as far apart', () => {
+        observe((fire, zoom) => {
+            fire('touchstart', fingers(100));
+            fire('touchmove', fingers(125));
+            fire('touchmove', fingers(150));
+            fire('touchmove', fingers(200));
+
+            assert.ok(Math.abs(zoom() - 2) < 1e-9, `zoom was ${zoom()}`);
+        });
+    });
+
+    it('halves the zoom when the fingers close to half as far apart', () => {
+        observe((fire, zoom) => {
+            fire('touchstart', fingers(300));
+            fire('touchmove', fingers(200));
+            fire('touchmove', fingers(150));
+
+            assert.ok(Math.abs(zoom() - 0.5) < 1e-9, `zoom was ${zoom()}`);
+        });
+    });
+});
+
+describe('the scroll wheel', () => {
+    it('zooms in scrolling up and out scrolling down', () => {
+        observe((fire, zoom) => {
+            fire('wheel', { deltaY: -100, deltaMode: 0, clientX: 0, clientY: 0 });
+            assert.ok(zoom() > 1);
+
+            fire('wheel', { deltaY: 200, deltaMode: 0, clientX: 0, clientY: 0 });
+            assert.ok(zoom() < 1);
+        });
+    });
+
+    it('never flips the zoom however far a page scroll goes', () => {
+        observe((fire, zoom) => {
+            fire('wheel', { deltaY: 10, deltaMode: 2, clientX: 0, clientY: 0 });
+            assert.ok(zoom() > 0);
+        });
+    });
+});