@elicdavis/node-flow 0.1.16 → 0.1.17

package/src/render_scheduler.ts

@@ -0,0 +1,49 @@
+type Redraw = () => void;
+
+const subscribers = new Set<Redraw>();
+let frameQueued = false;
+let continuous = 0;
+
+const canSchedule = (): boolean =>
+    typeof requestAnimationFrame === "function";
+
+export function onRenderRequested(redraw: Redraw): () => void {
+    subscribers.add(redraw);
+    return () => {
+        subscribers.delete(redraw);
+    };
+}
+
+
+export function requestRender(): void {
+    if (frameQueued || !canSchedule()) {
+        return;
+    }
+
+    frameQueued = true;
+    requestAnimationFrame(() => {
+        frameQueued = false;
+        subscribers.forEach((redraw) => redraw());
+
+        // Something asked to be redrawn every frame, so keep the loop
+        // alive by asking again on its behalf.
+        if (continuous > 0) {
+            requestRender();
+        }
+    });
+}
+
+
+export function renderContinuously(): () => void {
+    continuous++;
+    requestRender();
+
+    let released = false;
+    return () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        continuous--;
+    };
+}

package/src/theme.ts

@@ -59,6 +59,14 @@ export const Theme = {
         FontColor: "#afb9bb",
         DisabledFontColor: "#4a585c",
     },
+    Minimap: {
+        BackgroundColor: "rgba(7, 33, 42, 0.85)",
+        BorderColor: "#1c1c1c",
+        BorderRadius: 4,
+        Padding: 6,
+        NodeColor: "#6b7f85",
+        ViewportColor: "rgba(175, 185, 187, 0.25)",
+    },
     Note: {
         FontColor: "#afb9bb",
         FontSize: 16,

package/src/types/text.ts

@@ -1,3 +1,4 @@
+import { requestRender } from "../render_scheduler";
 import { FontWeight, TextStyle, TextStyleConfig } from "../styles/text";
 import { splitString, splitStringIntoLines } from "../utils/string";
 import { CopyVector2, ScaleVector, Vector2, Zero } from "./vector2";
@@ -36,6 +37,7 @@ export class Text {
             if (!document.fonts.check(`16px "${this.#style.getFont()}"`)) {
                 document.fonts.addEventListener("loadingdone", () => {
                     this.#measured = false;
+                    requestRender();
                 });
             }
         }

package/src/widgets/image.ts

@@ -1,3 +1,4 @@
+import { requestRender } from "../render_scheduler";
 import { Box } from "../types/box";
 import { CopyVector2, Vector2 } from "../types/vector2";
 
@@ -101,6 +102,7 @@ export class ImageWidget {
         img.src = url;
         img.onload = () => {
             this.#image = img;
+            requestRender();
         };
         img.onerror = (event) => {
             console.log("error loading image:", url, event);

package/test/minimap.test.ts

@@ -0,0 +1,103 @@
+import * as assert from 'assert';
+import { Camera } from '../src/camera';
+import { Minimap } from '../src/minimap';
+import { FlowNode } from '../src/node';
+import { Theme } from '../src/theme';
+
+/** Records the fill and stroke colors a render asked for, in order. */
+function recordingContext(): { ctx: any, fills: Array<string>, strokes: Array<string> } {
+    const fills: Array<string> = [];
+    const strokes: Array<string> = [];
+
+    const ctx: any = {
+        lineWidth: 1,
+        font: "",
+        textAlign: "left",
+        textBaseline: "top",
+        set fillStyle(value: string) { fills.push(value); },
+        get fillStyle() { return fills[fills.length - 1]; },
+        set strokeStyle(value: string) { strokes.push(value); },
+        get strokeStyle() { return strokes[strokes.length - 1]; },
+        measureText: () => ({ width: 40 }),
+        beginPath: () => { },
+        closePath: () => { },
+        roundRect: () => { },
+        rect: () => { },
+        moveTo: () => { },
+        lineTo: () => { },
+        arc: () => { },
+        bezierCurveTo: () => { },
+        quadraticCurveTo: () => { },
+        fill: () => { },
+        stroke: () => { },
+        fillRect: () => { },
+        strokeRect: () => { },
+        fillText: () => { },
+        save: () => { },
+        restore: () => { },
+        translate: () => { },
+        scale: () => { },
+        setLineDash: () => { },
+        clip: () => { },
+        createLinearGradient: () => ({ addColorStop: () => { } }),
+        drawImage: () => { },
+    };
+
+    return { ctx, fills, strokes };
+}
+
+function render(minimap: Minimap) {
+    const { ctx, fills, strokes } = recordingContext();
+    const canvas: any = { width: 800, height: 600 };
+    const node = new FlowNode({ title: "node", position: { x: 0, y: 0 } });
+    minimap.render(ctx, canvas, new Camera(), [node]);
+    return { fills, strokes };
+}
+
+describe('Minimap theming', () => {
+    const original = { ...Theme.Minimap };
+
+    afterEach(() => {
+        Object.assign(Theme.Minimap, original);
+    });
+
+    it('draws with the colors the theme carries', () => {
+        const minimap = new Minimap({ enabled: true });
+
+        const { fills, strokes } = render(minimap);
+
+        assert.ok(fills.includes(Theme.Minimap.BackgroundColor), "panel uses the theme background");
+        assert.ok(fills.includes(Theme.Minimap.NodeColor), "nodes use the theme node color");
+        assert.ok(fills.includes(Theme.Minimap.ViewportColor), "viewport uses the theme viewport color");
+        assert.ok(strokes.includes(Theme.Minimap.BorderColor), "border uses the theme border color");
+    });
+
+    // The whole point of moving these onto Theme: retheming the app restyles a
+    // minimap that is already on screen, without rebuilding it.
+    it('follows a theme change made after it was built', () => {
+        const minimap = new Minimap({ enabled: true });
+        render(minimap);
+
+        Theme.Minimap.BackgroundColor = "#ff0000";
+        Theme.Minimap.NodeColor = "#00ff00";
+        Theme.Minimap.ViewportColor = "#0000ff";
+        Theme.Minimap.BorderColor = "#ffff00";
+
+        const { fills, strokes } = render(minimap);
+
+        assert.ok(fills.includes("#ff0000"));
+        assert.ok(fills.includes("#00ff00"));
+        assert.ok(fills.includes("#0000ff"));
+        assert.ok(strokes.includes("#ffff00"));
+    });
+
+    it('lets one minimap override the theme without changing it for the rest', () => {
+        const minimap = new Minimap({ enabled: true, backgroundColor: "#123456" });
+
+        const { fills } = render(minimap);
+
+        assert.ok(fills.includes("#123456"), "the override wins");
+        assert.ok(!fills.includes(Theme.Minimap.BackgroundColor), "the theme value is not also drawn");
+        assert.ok(fills.includes(Theme.Minimap.NodeColor), "ports left unset still follow the theme");
+    });
+});

package/test/node_menu_filter.test.ts

@@ -0,0 +1,119 @@
+import * as assert from 'assert';
+import { PortType, portConfigTypes, typeSetsCompatible } from '../src/port';
+import { Publisher } from '../src/nodes/publisher';
+import { ContextMenuConfig, ContextMenuItemConfig } from '../src/contextMenu';
+
+function itemNames(menu: ContextMenuConfig): Array<string> {
+    const names: Array<string> = [];
+
+    const walk = (m: ContextMenuConfig) => {
+        (m.items ?? []).forEach((i: ContextMenuItemConfig) => names.push(i.name ?? ''));
+        (m.subMenus ?? []).forEach(walk);
+    };
+    walk(menu);
+
+    return names.sort();
+}
+
+const publisher = () => new Publisher({
+    name: 'test',
+    nodes: {
+        'Math/Add': {
+            inputs: [{ name: 'a', type: 'float64' }, { name: 'b', type: 'float64' }],
+            outputs: [{ name: 'sum', type: 'float64' }],
+        },
+        'Mesh/Cube': {
+            outputs: [{ name: 'out', type: 'mesh' }],
+        },
+        'Mesh/Translate': {
+            inputs: [{ name: 'mesh', type: 'mesh' }],
+            outputs: [{ name: 'out', type: 'mesh' }],
+        },
+        'Logic/Select': {
+            inputs: [{ name: 'a', type: 'T', anyType: true }],
+            outputs: [{ name: 'out', type: 'T', anyType: true }],
+        },
+        'Lifted/Negate': {
+            inputs: [{ name: 'in', type: 'float64', acceptedTypes: ['float64', '[]float64'] }],
+            outputs: [{ name: 'out', type: 'float64' }],
+        },
+    },
+});
+
+describe('type set matching', () => {
+    it('overlapping sets match', () => {
+        assert.ok(typeSetsCompatible(['mesh'], ['mesh']));
+        assert.ok(typeSetsCompatible(['float64', '[]float64'], ['[]float64']));
+    });
+
+    it('disjoint sets do not', () => {
+        assert.ok(!typeSetsCompatible(['mesh'], ['float64']));
+    });
+
+    it('an empty set takes anything, from either side', () => {
+        assert.ok(typeSetsCompatible([], ['mesh']));
+        assert.ok(typeSetsCompatible(['mesh'], []));
+    });
+
+    it('reads a port config the same way a built port reports itself', () => {
+        assert.deepStrictEqual(portConfigTypes({ type: 'mesh' }), ['mesh']);
+        assert.deepStrictEqual(portConfigTypes({ type: 'T', anyType: true }), []);
+        assert.deepStrictEqual(
+            portConfigTypes({ type: 'float64', acceptedTypes: ['float64', '[]float64'] }),
+            ['float64', '[]float64'],
+        );
+    });
+});
+
+describe('filtering the new node menu to what could finish a wire', () => {
+    const graph = {} as any;
+    const at = { x: 0, y: 0 };
+
+    it('offers everything when nothing is being dragged', () => {
+        const names = itemNames(publisher().contextMenu(graph, at));
+        assert.deepStrictEqual(names, ['Add', 'Cube', 'Negate', 'Select', 'Translate']);
+    });
+
+    it('dragging a mesh output offers only nodes taking a mesh', () => {
+        const names = itemNames(publisher().contextMenu(graph, at, {
+            needs: PortType.Input,
+            types: ['mesh'],
+        }));
+        // Select takes anything, so it fits too. Cube has no inputs at all.
+        assert.deepStrictEqual(names, ['Select', 'Translate']);
+    });
+
+    it('dragging a mesh input offers only nodes producing a mesh', () => {
+        const names = itemNames(publisher().contextMenu(graph, at, {
+            needs: PortType.Output,
+            types: ['mesh'],
+        }));
+        assert.deepStrictEqual(names, ['Cube', 'Select', 'Translate']);
+    });
+
+    it('matches a lifted port on either of the types it takes', () => {
+        const names = itemNames(publisher().contextMenu(graph, at, {
+            needs: PortType.Input,
+            types: ['[]float64'],
+        }));
+        assert.deepStrictEqual(names, ['Negate', 'Select'],
+            'Add only takes a single float64, so it is left out');
+    });
+
+    it('an any-type drag offers everything with a port on that side', () => {
+        const names = itemNames(publisher().contextMenu(graph, at, {
+            needs: PortType.Input,
+            types: [],
+        }));
+        assert.deepStrictEqual(names, ['Add', 'Negate', 'Select', 'Translate']);
+    });
+
+    it('drops submenus that matched nothing', () => {
+        const menu = publisher().contextMenu(graph, at, {
+            needs: PortType.Output,
+            types: ['mesh'],
+        });
+        const groups = (menu.subMenus ?? []).map((m) => m.name).sort();
+        assert.ok(!groups.includes('Math'), `Math should be gone, got ${groups}`);
+    });
+});

package/test/render_scheduler.test.ts

@@ -0,0 +1,119 @@
+import * as assert from 'assert';
+import { onRenderRequested, renderContinuously, requestRender } from '../src/render_scheduler';
+
+// The scheduler reaches for the global requestAnimationFrame, so the test
+// supplies one it can step by hand.
+let pending: Array<() => void> = [];
+
+function flush(): number {
+    const frame = pending;
+    pending = [];
+    frame.forEach((cb) => cb());
+    return frame.length;
+}
+
+describe('render scheduler', () => {
+    let unsubscribes: Array<() => void> = [];
+
+    beforeEach(() => {
+        pending = [];
+        (globalThis as any).requestAnimationFrame = (cb: () => void) => {
+            pending.push(cb);
+            return pending.length;
+        };
+    });
+
+    afterEach(() => {
+        unsubscribes.forEach((stop) => stop());
+        unsubscribes = [];
+        pending = [];
+        delete (globalThis as any).requestAnimationFrame;
+    });
+
+    function subscribe(redraw: () => void): void {
+        unsubscribes.push(onRenderRequested(redraw));
+    }
+
+    it('redraws once however many times it was asked', () => {
+        let draws = 0;
+        subscribe(() => { draws++; });
+
+        requestRender();
+        requestRender();
+        requestRender();
+
+        assert.strictEqual(pending.length, 1, 'only one frame is ever queued');
+        flush();
+        assert.strictEqual(draws, 1);
+    });
+
+    it('does not redraw when nothing asked', () => {
+        let draws = 0;
+        subscribe(() => { draws++; });
+
+        flush();
+        assert.strictEqual(draws, 0, 'this is the whole point: idle costs nothing');
+    });
+
+    it('can be asked again after a frame has gone out', () => {
+        let draws = 0;
+        subscribe(() => { draws++; });
+
+        requestRender();
+        flush();
+        requestRender();
+        flush();
+
+        assert.strictEqual(draws, 2);
+    });
+
+    it('redraws every canvas that is listening', () => {
+        let a = 0, b = 0;
+        subscribe(() => { a++; });
+        subscribe(() => { b++; });
+
+        requestRender();
+        flush();
+
+        assert.strictEqual(a, 1);
+        assert.strictEqual(b, 1);
+    });
+
+    it('stops redrawing one that unsubscribed', () => {
+        let draws = 0;
+        const stop = onRenderRequested(() => { draws++; });
+        stop();
+
+        requestRender();
+        flush();
+
+        assert.strictEqual(draws, 0);
+    });
+
+    it('keeps asking for frames while held continuous, and stops after', () => {
+        let draws = 0;
+        subscribe(() => { draws++; });
+
+        const release = renderContinuously();
+        flush();
+        flush();
+        flush();
+        assert.ok(draws >= 3, `expected a frame every flush, got ${draws}`);
+
+        release();
+
+        // The frame queued before releasing still lands, which is what
+        // draws the final state. Nothing is queued behind it.
+        const after = draws;
+        flush();
+        assert.strictEqual(draws, after + 1, 'the already queued frame still lands');
+        flush();
+        flush();
+        assert.strictEqual(draws, after + 1, 'and then it goes quiet again');
+    });
+
+    it('survives having no requestAnimationFrame at all', () => {
+        delete (globalThis as any).requestAnimationFrame;
+        assert.doesNotThrow(() => requestRender());
+    });
+});