@elicdavis/node-flow 0.1.19 → 0.2.0

package/test/multi_input.test.ts

@@ -0,0 +1,124 @@
+import { strict as assert } from 'assert';
+import { NodeSubsystem } from '../src/nodes/subsystem';
+import { PassSubsystem } from '../src/pass/subsystem';
+import { FlowNode } from '../src/node';
+import { Camera } from '../src/camera';
+import { Connection } from '../src/connection';
+import { arraySlotCenter } from '../src/port';
+
+function stubCtx(): CanvasRenderingContext2D {
+    const ctx: any = {
+        canvas: { width: 800, height: 600 },
+        lineWidth: 1,
+        font: '',
+        textAlign: 'left',
+        textBaseline: 'top',
+        fillStyle: '',
+        strokeStyle: '',
+        globalAlpha: 1,
+        measureText: () => ({ width: 40, actualBoundingBoxAscent: 8, actualBoundingBoxDescent: 2 }),
+        save: () => { }, restore: () => { }, translate: () => { }, scale: () => { },
+        beginPath: () => { }, closePath: () => { }, roundRect: () => { }, rect: () => { },
+        moveTo: () => { }, lineTo: () => { }, arc: () => { }, ellipse: () => { },
+        bezierCurveTo: () => { }, quadraticCurveTo: () => { },
+        fill: () => { }, stroke: () => { }, fillText: () => { }, strokeText: () => { },
+        clip: () => { }, drawImage: () => { }, setLineDash: () => { },
+        createLinearGradient: () => ({ addColorStop: () => { } }),
+    };
+    return ctx as CanvasRenderingContext2D;
+}
+
+function scene(sources: number) {
+    const graph = new NodeSubsystem(new PassSubsystem());
+    const join = new FlowNode({
+        title: 'join',
+        position: { x: 300, y: 100 },
+        inputs: [{ name: 'Items', type: 'mesh', array: true }],
+    });
+    graph.addNode(join);
+
+    const wires = new Array<Connection>();
+    for (let i = 0; i < sources; i++) {
+        const source = new FlowNode({
+            title: 'source ' + i,
+            position: { x: 0, y: 100 + i * 120 },
+            outputs: [{ name: 'Out', type: 'mesh' }],
+        });
+        graph.addNode(source);
+        wires.push(graph.connectNodes(source, 0, join, 0) as Connection);
+    }
+
+    const camera = new Camera();
+    const ctx = stubCtx();
+    graph.render(ctx, camera, undefined);
+    graph.render(ctx, camera, undefined);
+
+    const slot = (index: number) => arraySlotCenter(join.inputPortPosition(0), sources, index);
+    return { graph, join, wires, camera, ctx, slot };
+}
+
+describe('an input taking more than one wire', () => {
+    it('grows to give each wire its own slot', () => {
+        const one = scene(1);
+        const three = scene(3);
+
+        assert.ok(three.join.inputPortPosition(0).Size.y > one.join.inputPortPosition(0).Size.y);
+        assert.ok(three.slot(0).y < three.slot(1).y && three.slot(1).y < three.slot(2).y);
+    });
+
+    it('picks up the wire whose slot was pressed', () => {
+        const { graph, join, wires, camera, slot } = scene(3);
+
+        graph.clickStart(slot(1), camera, false);
+
+        const remaining = join.inputPort(0).connections();
+        assert.equal(remaining.length, 2);
+        assert.ok(remaining.includes(wires[0]));
+        assert.ok(!remaining.includes(wires[1]));
+        assert.ok(remaining.includes(wires[2]));
+    });
+
+    it('puts a dropped wire in the gap under the cursor', () => {
+        const { graph, join, wires, camera, ctx } = scene(2);
+        const extra = new FlowNode({ title: 'extra', position: { x: 0, y: 500 }, outputs: [{ name: 'Out', type: 'mesh' }] });
+        graph.addNode(extra);
+        graph.render(ctx, camera, undefined);
+        graph.render(ctx, camera, undefined);
+
+        const out = extra.outputPortPosition(0);
+        graph.clickStart({ x: out.Position.x + out.Size.x / 2, y: out.Position.y + out.Size.y / 2 }, camera, false);
+        const box = join.inputPortPosition(0);
+        const between = { x: box.Position.x + box.Size.x / 2, y: box.Position.y + box.Size.y / 2 };
+        graph.render(ctx, camera, between);
+        graph.render(ctx, camera, between);
+        graph.clickEnd();
+
+        const order = join.inputPort(0).connections();
+        assert.equal(order.length, 3);
+        assert.equal(order[0], wires[0]);
+        assert.equal(order[1].outNode(), extra);
+        assert.equal(order[2], wires[1]);
+    });
+
+    it('moves a wire picked from one slot to the gap it is dropped in', () => {
+        const { graph, join, wires, camera, ctx, slot } = scene(3);
+
+        graph.clickStart(slot(2), camera, false);
+        graph.render(ctx, camera, slot(2));
+        const box = join.inputPortPosition(0);
+        const top = { x: box.Position.x + box.Size.x / 2, y: box.Position.y + 1 };
+        graph.render(ctx, camera, top);
+        graph.render(ctx, camera, top);
+        graph.clickEnd();
+
+        assert.deepEqual(join.inputPort(0).connections().map((wire) => wires.indexOf(wire)), [2, 0, 1]);
+    });
+
+    it('highlights only the wire whose slot is hovered', () => {
+        const { wires, slot } = scene(3);
+
+        assert.equal(wires[0].mouseOverPort(slot(1)), null);
+        assert.notEqual(wires[1].mouseOverPort(slot(1)), null);
+        assert.equal(wires[2].mouseOverPort(slot(1)), null);
+    });
+});

package/test/organize.test.ts

@@ -1,5 +1,6 @@
 import * as assert from 'assert';
-import { assignLayers, orderWithinLayers, topologicalOrder } from '../src/organize';
+import { assignLayers, findPieces, layoutGraph, orderWithinLayers, topologicalOrder } from '../src/organize';
+import { Vector2 } from '../src/types/vector2';
 
 /** Builds the upstream/downstream maps Organize works from. */
 function graph(edges: Array<[number, number]>, nodes: Array<number>) {
@@ -154,3 +155,118 @@ describe('topologicalOrder', () => {
         assert.ok(order.indexOf(1) < order.indexOf(2));
     });
 });
+
+describe('layoutGraph', () => {
+    type Rect = { x: number, y: number, w: number, h: number };
+
+    function lay(edges: Array<[number, number]>, nodes: Array<number>, heights: Record<number, number> = {}) {
+        const { upstream, downstream } = graph(edges, nodes);
+        const sizes = new Map<number, Vector2>();
+        for (const node of nodes) {
+            sizes.set(node, { x: 100, y: heights[node] ?? 40 });
+        }
+        const positions = layoutGraph(nodes, upstream, downstream, sizes);
+        const rect = (node: number): Rect => {
+            const p = positions.get(node) as Vector2;
+            const s = sizes.get(node) as Vector2;
+            return { x: p.x, y: p.y, w: s.x, h: s.y };
+        };
+        return { positions, rect, centreY: (node: number) => rect(node).y + rect(node).h / 2 };
+    }
+
+    function around(rects: Array<Rect>): Rect {
+        const x = Math.min(...rects.map((r) => r.x));
+        const y = Math.min(...rects.map((r) => r.y));
+        return {
+            x, y,
+            w: Math.max(...rects.map((r) => r.x + r.w)) - x,
+            h: Math.max(...rects.map((r) => r.y + r.h)) - y,
+        };
+    }
+
+    function overlaps(a: Rect, b: Rect): boolean {
+        return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+    }
+
+    it('lays every node out exactly once', () => {
+        const nodes = [0, 1, 2, 3, 4, 5, 6];
+        const { positions } = lay([[0, 1], [1, 2], [3, 4]], nodes);
+        assert.deepStrictEqual([...positions.keys()].sort(), nodes);
+    });
+
+    it('keeps separate pieces apart', () => {
+        const { rect } = lay([[0, 1], [1, 2], [3, 4], [4, 5]], [0, 1, 2, 3, 4, 5]);
+        const first = around([0, 1, 2].map(rect));
+        const second = around([3, 4, 5].map(rect));
+        assert.ok(!overlaps(first, second), 'the pieces share space');
+    });
+
+    it('gathers unconnected nodes away from the pieces', () => {
+        const { rect } = lay([[0, 1], [1, 2]], [0, 3, 1, 4, 2, 5]);
+        const piece = around([0, 1, 2].map(rect));
+        const loose = around([3, 4, 5].map(rect));
+        assert.ok(!overlaps(piece, loose), 'a loose node sits inside a piece');
+    });
+
+    it('gives every branch of a tree its own band', () => {
+        const { rect } = lay([[1, 0], [2, 0], [3, 1], [4, 1], [5, 2], [6, 2]], [0, 1, 2, 3, 4, 5, 6]);
+        const first = around([1, 3, 4].map(rect));
+        const second = around([2, 5, 6].map(rect));
+        assert.ok(first.y + first.h <= second.y || second.y + second.h <= first.y, 'the branches interleave');
+    });
+
+    it('lines a tree node up with the single input feeding it', () => {
+        const { centreY } = lay([[0, 1], [1, 2]], [0, 1, 2], { 0: 40, 1: 120, 2: 60 });
+        assert.strictEqual(centreY(0), centreY(1));
+        assert.strictEqual(centreY(1), centreY(2));
+    });
+
+    it('puts an input in the column right before what it feeds', () => {
+        const edges: Array<[number, number]> = [[0, 1], [1, 2], [2, 3], [0, 3], [4, 3]];
+        const { rect } = lay(edges, [0, 1, 2, 3, 4]);
+        assert.strictEqual(rect(4).x, rect(2).x);
+    });
+
+    it('lines a node up with the one thing it feeds', () => {
+        const edges: Array<[number, number]> = [[0, 1], [0, 2], [1, 3], [2, 3], [3, 4]];
+        const { centreY } = lay(edges, [0, 1, 2, 3, 4], { 3: 90 });
+        assert.strictEqual(centreY(3), centreY(4));
+    });
+
+    it('keeps the nodes a long wire passes clear of its path', () => {
+        const edges: Array<[number, number]> = [[0, 1], [1, 2], [2, 3], [0, 3]];
+        const { rect, centreY } = lay(edges, [0, 1, 2, 3]);
+        const wire = (centreY(0) + centreY(3)) / 2;
+        for (const node of [1, 2]) {
+            const r = rect(node);
+            assert.ok(wire < r.y || wire > r.y + r.h, `the wire runs through node ${node}`);
+        }
+    });
+
+    it('never overlaps two nodes', () => {
+        const edges: Array<[number, number]> = [
+            [0, 3], [1, 3], [2, 4], [3, 5], [4, 5], [0, 6], [6, 7], [5, 7], [1, 8], [8, 9], [2, 9], [7, 10], [9, 10], [0, 10],
+        ];
+        const nodes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+        const heights = { 0: 80, 3: 150, 5: 30, 7: 200, 9: 60, 11: 90 };
+        const { rect } = lay(edges, nodes, heights);
+        for (let a = 0; a < nodes.length; a++) {
+            for (let b = a + 1; b < nodes.length; b++) {
+                assert.ok(!overlaps(rect(nodes[a]), rect(nodes[b])), `${nodes[a]} overlaps ${nodes[b]}`);
+            }
+        }
+    });
+
+    it('lays out a cycle without hanging', () => {
+        const { positions } = lay([[0, 1], [1, 2], [2, 0], [2, 3]], [0, 1, 2, 3]);
+        assert.strictEqual(positions.size, 4);
+    });
+});
+
+describe('findPieces', () => {
+    it('splits nodes into the groups wires join', () => {
+        const { upstream, downstream } = graph([[0, 1], [2, 1], [3, 4]], [0, 1, 2, 3, 4, 5]);
+        const pieces = findPieces([0, 1, 2, 3, 4, 5], upstream, downstream);
+        assert.deepStrictEqual(pieces, [[0, 1, 2], [3, 4], [5]]);
+    });
+});

package/test/property_binding.test.ts

@@ -0,0 +1,49 @@
+import { strict as assert } from 'assert';
+import { FlowNode } from '../src/node';
+import { NumberWidget } from '../src/widgets/number';
+import { SliderWidget } from '../src/widgets/slider';
+
+describe('property binding', () => {
+    it('settles when a number widget is bound to a property set to NaN', () => {
+        const node = new FlowNode({ title: 'test', position: { x: 0, y: 0 } });
+        new NumberWidget(node, { property: 'x' });
+
+        node.setProperty('x', NaN);
+
+        assert.ok(Number.isNaN(node.getProperty('x')));
+    });
+
+    it('settles when a slider is bound to a property set to NaN', () => {
+        const node = new FlowNode({ title: 'test', position: { x: 0, y: 0 } });
+        new SliderWidget(node, { property: 'x', min: 0, max: 1 });
+
+        node.setProperty('x', NaN);
+    });
+
+    it('does not report a NaN property as changed when it stays NaN', () => {
+        const node = new FlowNode({ title: 'test', position: { x: 0, y: 0 } });
+        let changes = 0;
+        node.addPropertyChangeListener('x', () => { changes++; });
+
+        node.setProperty('x', NaN);
+        node.setProperty('x', NaN);
+
+        assert.equal(changes, 1);
+    });
+});
+
+describe('programmatic title and info', () => {
+    it('sets the title of a node the user cannot retitle', () => {
+        const node = new FlowNode({ title: 'before', position: { x: 0, y: 0 }, canEditTitle: false });
+        node.setTitle('after');
+        assert.equal(node.title(), 'after');
+    });
+
+    it('sets the info of a node the user cannot edit the info of', () => {
+        const node = new FlowNode({ title: 'test', position: { x: 0, y: 0 }, canEditInfo: false });
+        let changed = 0;
+        node.addInfoChangeListener(() => { changed++; });
+        node.setInfo('carrying a mesh');
+        assert.equal(changed, 1);
+    });
+});

package/test/support.ts

@@ -0,0 +1,175 @@
+import { NodeSubsystem } from '../src/nodes/subsystem';
+import { PassSubsystem } from '../src/pass/subsystem';
+import { FlowNode } from '../src/node';
+import { Camera } from '../src/camera';
+import { Box } from '../src/types/box';
+import { Vector2 } from '../src/types/vector2';
+import { Widget } from '../src/widgets/widget';
+
+export interface CanvasRecord {
+    fills: Array<string>;
+    texts: Array<{ text: string; fillStyle: string; x: number; y: number }>;
+}
+
+export function stubCtx(record?: CanvasRecord): CanvasRenderingContext2D {
+    const ctx: any = {
+        canvas: {
+            width: 800,
+            height: 600,
+            getBoundingClientRect: () => ({ left: 10, top: 20, width: 800, height: 600 }),
+        },
+        lineWidth: 1,
+        font: '',
+        textAlign: 'left',
+        textBaseline: 'top',
+        fillStyle: '',
+        strokeStyle: '',
+        globalAlpha: 1,
+        shadowBlur: 0,
+        shadowColor: '',
+        measureText: (text: string) => ({ width: text.length * 7, actualBoundingBoxAscent: 8, actualBoundingBoxDescent: 2 }),
+        save: () => { }, restore: () => { }, translate: () => { }, scale: () => { },
+        beginPath: () => { }, closePath: () => { }, roundRect: () => { }, rect: () => { },
+        moveTo: () => { }, lineTo: () => { }, arc: () => { }, ellipse: () => { },
+        bezierCurveTo: () => { }, quadraticCurveTo: () => { },
+        fill() { record?.fills.push(this.fillStyle); },
+        stroke: () => { },
+        fillText(text: string, x: number, y: number) { record?.texts.push({ text, fillStyle: this.fillStyle, x, y }); },
+        strokeText: () => { },
+        clip: () => { }, drawImage: () => { }, setLineDash: () => { },
+        createLinearGradient: () => ({ addColorStop: () => { } }),
+    };
+    return ctx as CanvasRenderingContext2D;
+}
+
+export function center(box: Box): Vector2 {
+    return { x: box.Position.x + box.Size.x / 2, y: box.Position.y + box.Size.y / 2 };
+}
+
+/**
+ * A node holding the widget, on a canvas that has been drawn once so the
+ * widget has a place.
+ */
+export function widgetScene(build: (node: FlowNode) => Widget, nodeConfig?: ConstructorParameters<typeof FlowNode>[0]) {
+    const graph = new NodeSubsystem(new PassSubsystem());
+    const node = new FlowNode({ title: 'test', position: { x: 100, y: 100 }, ...nodeConfig });
+    const widget = build(node);
+    node.addWidget(widget);
+    graph.addNode(node);
+    const camera = new Camera();
+    const ctx = stubCtx();
+    graph.render(ctx, camera, undefined);
+
+    const widgetBox = (): Box => {
+        const box = node.widgetPosition(node.widgets().indexOf(widget));
+        if (box === undefined) {
+            throw new Error('widget was never drawn');
+        }
+        return box;
+    };
+
+    const press = (at: Vector2) => {
+        graph.render(ctx, camera, at);
+        graph.clickStart(at, camera, false);
+        let current = { ...at };
+        return {
+            moveTo(to: Vector2) {
+                graph.mouseDragEvent({ x: to.x - current.x, y: to.y - current.y }, camera.zoom);
+                current = { ...to };
+                graph.render(ctx, camera, to);
+            },
+            release() {
+                graph.clickEnd();
+                graph.render(ctx, camera, current);
+            },
+        };
+    };
+
+    const click = (at: Vector2) => press(at).release();
+
+    return { graph, node, widget, camera, ctx, widgetBox, press, click };
+}
+
+export interface StubElement {
+    tagName: string;
+    type: string;
+    value: string;
+    style: { cssText: string };
+    children: Array<StubElement>;
+    isConnected: boolean;
+    clicked: number;
+    laidOutAt: string;
+    openedAt: Array<string>;
+    focused: boolean;
+    oninput: (() => void) | null;
+    onchange: (() => void) | null;
+    appendChild(child: StubElement): StubElement;
+    append(child: StubElement): void;
+    removeChild(child: StubElement): void;
+    remove(): void;
+    focus(): void;
+    select(): void;
+    click(): void;
+    getBoundingClientRect(): { left: number, top: number, width: number, height: number };
+    addEventListener(name: string, fn: (e: any) => void): void;
+    fire(name: string, event?: any): void;
+}
+
+export function withDocument(run: (body: StubElement, created: Array<StubElement>) => void): void {
+    const created: Array<StubElement> = [];
+    const element = (tagName: string): StubElement => {
+        const listeners = new Map<string, Array<(e: any) => void>>();
+        const el: StubElement = {
+            tagName,
+            type: '',
+            value: '',
+            style: { cssText: '' },
+            children: [],
+            isConnected: false,
+            clicked: 0,
+            laidOutAt: '',
+            openedAt: [],
+            focused: false,
+            oninput: null,
+            onchange: null,
+            appendChild(child) { this.children.push(child); child.isConnected = true; return child; },
+            append(child) { this.children.push(child); child.isConnected = true; },
+            removeChild(child) { this.children = this.children.filter((c) => c !== child); child.isConnected = false; },
+            remove() { body.removeChild(this); },
+            focus() { this.focused = true; },
+            select() { },
+            click() { this.clicked++; this.openedAt.push(this.laidOutAt); },
+            getBoundingClientRect() {
+                this.laidOutAt = this.style.cssText;
+                return { left: 0, top: 0, width: 0, height: 0 };
+            },
+            addEventListener(name, fn) {
+                listeners.set(name, [...(listeners.get(name) ?? []), fn]);
+            },
+            fire(name, event) {
+                const e = event ?? {};
+                e.preventDefault ??= () => { };
+                e.stopPropagation ??= () => { };
+                (listeners.get(name) ?? []).forEach((fn) => fn(e));
+            },
+        };
+        created.push(el);
+        return el;
+    };
+    const body = element('body');
+
+    const g = globalThis as any;
+    const previous = g.document;
+    g.document = {
+        body,
+        createElement: element,
+        addEventListener: () => { },
+        removeEventListener: () => { },
+    };
+    try {
+        run(body, created);
+    } finally {
+        g.document = previous;
+        created.forEach((el) => el.isConnected = false);
+    }
+}

package/test/theme.test.ts

@@ -0,0 +1,86 @@
+import { strict as assert } from 'assert';
+import { NodeSubsystem } from '../src/nodes/subsystem';
+import { PassSubsystem } from '../src/pass/subsystem';
+import { FlowNode } from '../src/node';
+import { FlowNote } from '../src/notes/note';
+import { Camera } from '../src/camera';
+import { NumberWidget } from '../src/widgets/number';
+import { DefaultTheme, Theme, onThemeChange, setTheme, themeVersion } from '../src/theme';
+import { CanvasRecord, stubCtx } from './support';
+
+function drawNode(node: FlowNode): CanvasRecord {
+    const record: CanvasRecord = { fills: [], texts: [] };
+    const graph = new NodeSubsystem(new PassSubsystem());
+    graph.addNode(node);
+    graph.render(stubCtx(record), new Camera(), undefined);
+    return record;
+}
+
+describe('the theme', () => {
+    afterEach(() => setTheme());
+
+    it('lays a partial theme over the defaults', () => {
+        setTheme({ Node: { BackgroundColor: '#c0c0c0' } });
+
+        assert.equal(Theme.Node.BackgroundColor, '#c0c0c0');
+        assert.equal(Theme.Node.Title.Color, DefaultTheme.Node.Title.Color);
+    });
+
+    it('goes back to the defaults when set to nothing', () => {
+        setTheme({ Graph: { BackgroundColor: '#008080' } });
+        setTheme();
+        assert.equal(Theme.Graph.BackgroundColor, DefaultTheme.Graph.BackgroundColor);
+    });
+
+    it('tells listeners and moves the version on', () => {
+        let heard = 0;
+        const stop = onThemeChange(() => heard++);
+        const before = themeVersion();
+
+        setTheme({ FontFamily: 'Tahoma' });
+        stop();
+        setTheme();
+
+        assert.equal(heard, 1);
+        assert.ok(themeVersion() > before);
+    });
+
+    it('recolours a node that was made before the change', () => {
+        const node = new FlowNode({ title: 'made earlier' });
+        assert.ok(drawNode(node).fills.includes(DefaultTheme.Node.BackgroundColor));
+
+        setTheme({ Node: { BackgroundColor: '#c0c0c0', Title: { Color: '#000080' } } });
+        const after = drawNode(node);
+
+        assert.ok(after.fills.includes('#c0c0c0'));
+        assert.ok(after.fills.includes('#000080'));
+        assert.ok(!after.fills.includes(DefaultTheme.Node.BackgroundColor));
+    });
+
+    it('keeps a colour a node was given over the theme', () => {
+        const node = new FlowNode({ title: 'styled', style: { idle: { color: '#123456' } } });
+        setTheme({ Node: { BackgroundColor: '#c0c0c0' } });
+        assert.ok(drawNode(node).fills.includes('#123456'));
+    });
+
+    it('redraws widgets in the new colours', () => {
+        const record: CanvasRecord = { fills: [], texts: [] };
+        const widget = new NumberWidget(new FlowNode({ title: 't' }), { value: 1 });
+        setTheme({ Widget: { Input: { BackgroundColor: '#ffffff', FontColor: '#000000' } } });
+
+        widget.Draw(stubCtx(record), { Position: { x: 0, y: 0 }, Size: { x: 100, y: 25 } }, 1, undefined);
+
+        assert.ok(record.fills.includes('#ffffff'));
+        assert.deepEqual(record.texts.map((t) => t.fillStyle), ['#000000']);
+    });
+
+    it('re-reads a note in the new colours', () => {
+        const record: CanvasRecord = { fills: [], texts: [] };
+        const note = new FlowNote({ text: 'hello', position: { x: 0, y: 0 } });
+        setTheme({ Note: { FontColor: '#ffffff' } });
+
+        note.render(stubCtx(record), new Camera(), undefined);
+
+        assert.ok(record.texts.some((t) => t.text === 'hello' && t.fillStyle === '#ffffff'));
+    });
+});