@elicdavis/node-flow 0.1.15 → 0.1.17

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/organize.test.ts

@@ -0,0 +1,156 @@
+import * as assert from 'assert';
+import { assignLayers, orderWithinLayers, topologicalOrder } from '../src/organize';
+
+/** Builds the upstream/downstream maps Organize works from. */
+function graph(edges: Array<[number, number]>, nodes: Array<number>) {
+    const upstream = new Map<number, Array<number>>();
+    const downstream = new Map<number, Array<number>>();
+    for (const node of nodes) {
+        upstream.set(node, []);
+        downstream.set(node, []);
+    }
+    for (const [from, to] of edges) {
+        (upstream.get(to) as Array<number>).push(from);
+        (downstream.get(from) as Array<number>).push(to);
+    }
+    return { upstream, downstream, nodes };
+}
+
+describe('assignLayers', () => {
+    it('puts a chain in one node per layer, in order', () => {
+        const { upstream } = graph([[0, 1], [1, 2], [2, 3]], [0, 1, 2, 3]);
+        const layout = assignLayers([0, 1, 2, 3], upstream);
+
+        assert.deepStrictEqual(layout.layers, [[0], [1], [2], [3]]);
+    });
+
+    it('puts a node to the right of the furthest thing feeding it, not the nearest', () => {
+        // 0 feeds both 1 and a longer path 2 -> 3, and 4 consumes 1 and 3.
+        // Taking the nearest feeder would put 4 beside 3 instead of after it.
+        const { upstream } = graph([[0, 1], [0, 2], [2, 3], [1, 4], [3, 4]], [0, 1, 2, 3, 4]);
+        const layout = assignLayers([0, 1, 2, 3, 4], upstream);
+
+        assert.strictEqual(layout.layerOf.get(0), 0);
+        assert.strictEqual(layout.layerOf.get(3), 2);
+        assert.strictEqual(layout.layerOf.get(4), 3, 'the join waits for the long branch');
+    });
+
+    it('never puts a node left of something it consumes', () => {
+        const edges: Array<[number, number]> = [[0, 2], [1, 2], [2, 3], [1, 3], [3, 4], [0, 4]];
+        const { upstream } = graph(edges, [0, 1, 2, 3, 4]);
+        const layout = assignLayers([0, 1, 2, 3, 4], upstream);
+
+        for (const [from, to] of edges) {
+            assert.ok(
+                (layout.layerOf.get(from) as number) < (layout.layerOf.get(to) as number),
+                `${from} -> ${to} points backwards`,
+            );
+        }
+    });
+
+    it('terminates on a cycle instead of hanging', () => {
+        const { upstream } = graph([[0, 1], [1, 2], [2, 0], [2, 3]], [0, 1, 2, 3]);
+        const layout = assignLayers([0, 1, 2, 3], upstream);
+
+        assert.strictEqual(layout.layerOf.size, 4);
+        // The cycle is spread across layers rather than collapsed into one.
+        assert.ok(layout.layers.length > 1);
+    });
+
+    it('starts every disconnected node at the first layer', () => {
+        const { upstream } = graph([], [0, 1, 2]);
+        const layout = assignLayers([0, 1, 2], upstream);
+
+        assert.deepStrictEqual(layout.layers.length, 1);
+        assert.deepStrictEqual(layout.layers[0].sort(), [0, 1, 2]);
+    });
+
+    it('handles a graph deep enough to overflow a recursive walk', () => {
+        const edges: Array<[number, number]> = [];
+        const nodes: Array<number> = [];
+        for (let i = 0; i < 20000; i++) {
+            nodes.push(i);
+            if (i > 0) {
+                edges.push([i - 1, i]);
+            }
+        }
+        const { upstream } = graph(edges, nodes);
+        const layout = assignLayers(nodes, upstream);
+
+        assert.strictEqual(layout.layers.length, 20000);
+    });
+});
+
+describe('orderWithinLayers', () => {
+    /** Counts pairs of edges between two layers that cross each other. */
+    function crossings(layout: ReturnType<typeof assignLayers>, edges: Array<[number, number]>): number {
+        const slot = new Map<number, number>();
+        for (const layer of layout.layers) {
+            layer.forEach((node, index) => slot.set(node, index));
+        }
+
+        let total = 0;
+        for (let i = 0; i < edges.length; i++) {
+            for (let j = i + 1; j < edges.length; j++) {
+                const [a1, a2] = edges[i];
+                const [b1, b2] = edges[j];
+                if (layout.layerOf.get(a1) !== layout.layerOf.get(b1)) {
+                    continue;
+                }
+                if (layout.layerOf.get(a2) !== layout.layerOf.get(b2)) {
+                    continue;
+                }
+                const left = (slot.get(a1) as number) - (slot.get(b1) as number);
+                const right = (slot.get(a2) as number) - (slot.get(b2) as number);
+                if (left * right < 0) {
+                    total++;
+                }
+            }
+        }
+        return total;
+    }
+
+    it('untangles edges that start out crossed', () => {
+        // Three sources feeding three sinks in reverse order: laid out in
+        // declaration order every edge crosses every other.
+        const edges: Array<[number, number]> = [[0, 5], [1, 4], [2, 3]];
+        const nodes = [0, 1, 2, 3, 4, 5];
+        const { upstream, downstream } = graph(edges, nodes);
+
+        const layout = assignLayers(nodes, upstream);
+        const before = crossings(layout, edges);
+        orderWithinLayers(layout, upstream, downstream);
+        const after = crossings(layout, edges);
+
+        assert.ok(before > 0, 'the fixture should start tangled');
+        assert.strictEqual(after, 0, `expected no crossings, got ${after}`);
+    });
+
+    it('keeps every node exactly once', () => {
+        const nodes = [0, 1, 2, 3, 4, 5];
+        const { upstream, downstream } = graph([[0, 3], [1, 3], [2, 4], [3, 5], [4, 5]], nodes);
+
+        const layout = assignLayers(nodes, upstream);
+        orderWithinLayers(layout, upstream, downstream);
+
+        const seen = layout.layers.flat().sort((a, b) => a - b);
+        assert.deepStrictEqual(seen, nodes);
+    });
+});
+
+describe('topologicalOrder', () => {
+    it('lists every node once', () => {
+        const { upstream } = graph([[0, 1], [1, 2], [0, 2]], [0, 1, 2]);
+        const order = topologicalOrder([0, 1, 2], upstream);
+
+        assert.deepStrictEqual(order.slice().sort(), [0, 1, 2]);
+    });
+
+    it('puts feeders before the nodes that consume them', () => {
+        const { upstream } = graph([[0, 1], [1, 2]], [0, 1, 2]);
+        const order = topologicalOrder([0, 1, 2], upstream);
+
+        assert.ok(order.indexOf(0) < order.indexOf(1));
+        assert.ok(order.indexOf(1) < order.indexOf(2));
+    });
+});

package/test/port.test.ts

@@ -0,0 +1,125 @@
+import * as assert from 'assert';
+import { Port, PortConfig, PortType, portsCompatible } from '../src/port';
+import { FlowNode } from '../src/node';
+
+function port(config: PortConfig): Port {
+    // A port only reaches back to its node when it is drawn or connected,
+    // neither of which the type rules touch.
+    return new Port(undefined as unknown as FlowNode, PortType.Output, config);
+}
+
+describe('portsCompatible', () => {
+    it('joins two ports declaring the same type', () => {
+        assert.ok(portsCompatible(port({ type: 'mesh' }), port({ type: 'mesh' })));
+    });
+
+    it('refuses two ports declaring different types', () => {
+        assert.ok(!portsCompatible(port({ type: 'mesh' }), port({ type: 'float64' })));
+    });
+
+    it('joins an any-type port to anything, from either side', () => {
+        const anything = port({ type: 'T', anyType: true });
+        assert.ok(portsCompatible(anything, port({ type: 'mesh' })));
+        assert.ok(portsCompatible(port({ type: 'mesh' }), anything));
+    });
+
+    it('joins two any-type ports', () => {
+        assert.ok(portsCompatible(
+            port({ type: 'T', anyType: true }),
+            port({ type: '[]T', anyType: true }),
+        ));
+    });
+
+    it('still refuses a port that is missing', () => {
+        assert.ok(!portsCompatible(port({ type: 'T', anyType: true }), undefined));
+        assert.ok(!portsCompatible(null, port({ type: 'mesh' })));
+    });
+
+    it('does not treat an untyped port as accepting anything', () => {
+        assert.ok(!portsCompatible(port({}), port({ type: 'mesh' })));
+    });
+
+    it('shows a type of its own before falling back to "any"', () => {
+        assert.strictEqual(port({ type: 'T', anyType: true }).getDataType(), 'T');
+        assert.ok(port({ type: 'T', anyType: true }).acceptsAnyType());
+        assert.ok(!port({ type: 'T' }).acceptsAnyType());
+    });
+});
+
+describe('a port that takes more than one type', () => {
+    it('joins a port declaring either of them', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+
+        assert.ok(portsCompatible(lifted, port({ type: 'float64' })));
+        assert.ok(portsCompatible(lifted, port({ type: '[]float64' })));
+    });
+
+    it('refuses a type outside its set', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+
+        assert.ok(!portsCompatible(lifted, port({ type: 'string' })),
+            'this is the whole point: the drag is refused rather than accepted then errored');
+    });
+
+    it('joins another multi-type port when the sets overlap', () => {
+        const a = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        const b = port({ type: 'int', acceptedTypes: ['int', '[]float64'] });
+        const c = port({ type: 'int', acceptedTypes: ['int', '[]int'] });
+
+        assert.ok(portsCompatible(a, b));
+        assert.ok(!portsCompatible(a, c));
+    });
+
+    it('still lets an any-type port through', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        assert.ok(portsCompatible(lifted, port({ type: 'T', anyType: true })));
+    });
+
+    it('narrows to one type once it settles', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        lifted.settleOn('[]float64');
+
+        assert.strictEqual(lifted.getDataType(), '[]float64');
+        assert.deepStrictEqual(lifted.acceptedTypes(), ['[]float64']);
+        assert.ok(portsCompatible(lifted, port({ type: '[]float64' })));
+        assert.ok(!portsCompatible(lifted, port({ type: 'float64' })));
+    });
+});
+
+describe('settling a port on a type', () => {
+    it('enforces the new type once it stops accepting anything', () => {
+        const settled = port({ type: 'T', anyType: true });
+        settled.setDataType('mesh');
+        settled.setAnyType(false);
+
+        assert.strictEqual(settled.getDataType(), 'mesh');
+        assert.ok(portsCompatible(settled, port({ type: 'mesh' })));
+        assert.ok(!portsCompatible(settled, port({ type: 'float64' })),
+            'the whole point: a settled port refuses the drag the Go side would reject');
+    });
+
+    it('recolors a port whose fill came from its type', () => {
+        const settled = port({ type: 'T', anyType: true });
+        const before = settled.filledStyleColor();
+        settled.setDataType('mesh');
+
+        assert.notStrictEqual(settled.filledStyleColor(), before);
+        assert.strictEqual(settled.filledStyleColor(), port({ type: 'mesh' }).filledStyleColor(),
+            'and lands on the same color a port declaring that type gets');
+    });
+
+    it('leaves a fill the caller picked alone', () => {
+        const settled = port({ type: 'T', anyType: true, filledStyle: { fillColor: '#abcdef' } });
+        settled.setDataType('mesh');
+
+        assert.strictEqual(settled.filledStyleColor(), '#abcdef');
+    });
+
+    it('can be handed back to accepting anything', () => {
+        const settled = port({ type: 'T', anyType: true });
+        settled.setAnyType(false);
+        settled.setAnyType(true);
+
+        assert.ok(portsCompatible(settled, port({ type: 'float64' })));
+    });
+});

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

package/tsconfig.json

@@ -4,10 +4,14 @@
         "sourceMap": true, // Generate source maps (optional)
         "strict": true, // Enable strict type checking (optional)
         "outDir": "./dist/js",
-        "target": "ES2015",
+        // The source already uses #private class fields, which are ES2022,
+        // and the bundlers emit esnext. ES2015 only made tsc downlevel
+        // those fields to WeakMaps in an output nothing ships.
+        "target": "ES2022",
     },
     "include": [
-        "src/**/*.ts"
+        "src/**/*.ts",
+        "test/**/*.ts"
     ],
     "exclude": [
         "node_modules"