@elicdavis/node-flow 0.1.20 → 0.2.0

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

package/test/widget_click.test.ts

@@ -1,126 +1,140 @@
 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 { Box } from '../src/types/box';
 import { Vector2 } from '../src/types/vector2';
-
-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 }),
-        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;
+import { WidgetBase, WidgetPointer } from '../src/widgets/widget';
+import { center, widgetScene } from './support';
+
+class Recording extends WidgetBase {
+    clicks = 0;
+    downs: Array<WidgetPointer> = [];
+    moves: Array<WidgetPointer> = [];
+    ups: Array<WidgetPointer> = [];
+    drawnIn: Box | null = null;
+
+    Size(): Vector2 {
+        return { x: 100, y: 20 };
+    }
+
+    protected render(_ctx: CanvasRenderingContext2D, box: Box): void {
+        this.drawnIn = box;
+    }
+
+    protected onPointerDown(p: WidgetPointer): void { this.downs.push(p); }
+    protected onPointerMove(p: WidgetPointer): void { this.moves.push(p); }
+    protected onPointerUp(p: WidgetPointer): void { this.ups.push(p); }
+    protected onClick(): void { this.clicks++; }
 }
 
-function recordingWidget() {
-    let clicks = 0;
-    let drawnAt: Box | null = null;
-    const widget = {
-        Size: (): Vector2 => ({ x: 100, y: 20 }),
-        Draw: (_ctx: CanvasRenderingContext2D, position: Vector2, scale: number): Box => {
-            drawnAt = { Position: { x: position.x, y: position.y }, Size: { x: 100 * scale, y: 20 * scale } };
-            return drawnAt;
-        },
-        ClickStart: (): void => { },
-        ClickEnd: (): void => { clicks++; },
-    };
-    return {
-        widget,
-        clicks: () => clicks,
-        center: (): Vector2 => {
-            assert.ok(drawnAt !== null, 'widget was never drawn');
-            const b = drawnAt as Box;
-            return { x: b.Position.x + b.Size.x / 2, y: b.Position.y + b.Size.y / 2 };
-        },
-    };
-}
+describe('clicking a widget', () => {
+    it('clicks it when the press and release are both on it', () => {
+        const { widget, widgetBox, click } = widgetScene(() => new Recording());
+        click(center(widgetBox()));
+        assert.equal((widget as Recording).clicks, 1);
+    });
 
-function scene() {
-    const graph = new NodeSubsystem(new PassSubsystem());
-    const node = new FlowNode({ title: 'test', position: { x: 100, y: 100 } });
-    const rec = recordingWidget();
-    node.addWidget(rec.widget as any);
-    graph.addNode(node);
+    it('does not click it when the gesture drags away before releasing', () => {
+        const { widget, widgetBox, press } = widgetScene(() => new Recording());
+        const on = center(widgetBox());
 
-    const camera = new Camera();
-    const ctx = stubCtx();
-    return { graph, camera, ctx, rec };
-}
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 400, y: on.y + 300 });
+        gesture.release();
 
-describe('clicking a widget', () => {
-    it('opens it when the press and release are both on it', () => {
-        const { graph, camera, ctx, rec } = scene();
-        graph.render(ctx, camera, undefined);
-        const on = rec.center();
+        const recording = widget as Recording;
+        assert.equal(recording.clicks, 0);
+        assert.equal(recording.ups.length, 1, 'it still hears the release');
+        assert.equal(recording.ups[0].inside, false);
+    });
 
-        graph.render(ctx, camera, on);
-        graph.clickStart(on, camera, false);
-        graph.render(ctx, camera, on);
-        graph.clickEnd();
+    it('keeps reporting the drag to the widget once the pointer has left it', () => {
+        const { widget, widgetBox, press } = widgetScene(() => new Recording());
+        const on = center(widgetBox());
+
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 300, y: on.y });
+        gesture.release();
 
-        assert.equal(rec.clicks(), 1);
+        const recording = widget as Recording;
+        assert.deepEqual(recording.moves.map((m) => m.position), [{ x: on.x + 300, y: on.y }]);
+        assert.equal(recording.moves[0].inside, false);
     });
 
-    it('leaves it alone when the gesture drags away before releasing', () => {
-        const { graph, camera, ctx, rec } = scene();
-        graph.render(ctx, camera, undefined);
-        const on = rec.center();
+    it('ignores a disabled widget', () => {
+        const { widget, widgetBox, click } = widgetScene(() => {
+            const w = new Recording();
+            w.setDisabled(true);
+            return w;
+        });
+        click(center(widgetBox()));
+        const recording = widget as Recording;
+        assert.equal(recording.downs.length, 0);
+        assert.equal(recording.clicks, 0);
+    });
+});
 
-        graph.render(ctx, camera, on);
-        graph.clickStart(on, camera, false);
-        graph.render(ctx, camera, { x: on.x + 400, y: on.y + 300 });
-        graph.clickEnd();
+describe('laying out widgets', () => {
+    it('stretches a widget across a node made wide by its ports', () => {
+        const { node, widget } = widgetScene(
+            () => new Recording(),
+            { inputs: [{ name: 'A port name long enough to widen the whole node', type: 'float64' }] },
+        );
+        const drawnIn = (widget as Recording).drawnIn as Box;
+        assert.ok(drawnIn.Size.x > 100 * 2);
+        assert.ok(node.widgets().length === 1);
+    });
+
+    it('leaves a hidden widget out of the node and out of reach', () => {
+        const shown = widgetScene(() => new Recording());
+        const hidden = widgetScene(() => {
+            const w = new Recording();
+            w.setHidden(true);
+            return w;
+        });
+
+        const shownHeight = shown.node.calculateBounds(shown.ctx, shown.camera).Size.y;
+        const hiddenHeight = hidden.node.calculateBounds(hidden.ctx, hidden.camera).Size.y;
+        assert.ok(hiddenHeight < shownHeight);
 
-        assert.equal(rec.clicks(), 0);
+        hidden.click(center(shown.widgetBox()));
+        assert.equal((hidden.widget as Recording).clicks, 0);
     });
 });
 
 describe('a node panned off screen', () => {
     it('stops hit-testing as a widget where it used to be drawn', () => {
-        const graph = new NodeSubsystem(new PassSubsystem());
-        const node = new FlowNode({
-            title: 'test',
-            position: { x: 100, y: 100 },
-            inputs: [{ name: 'In', type: 'float64' }],
-        });
-        const rec = recordingWidget();
-        node.addWidget(rec.widget as any);
-        graph.addNode(node);
-
-        const camera = new Camera();
-        const ctx = stubCtx();
-
-        graph.render(ctx, camera, undefined);
-        const on = rec.center();
+        const { node, widget, camera, ctx, graph, widgetBox } = widgetScene(
+            () => new Recording(),
+            { inputs: [{ name: 'In', type: 'float64' }] },
+        );
+        const on = center(widgetBox());
 
         camera.position.x = -50000;
         graph.render(ctx, camera, undefined);
 
-        assert.equal(
-            node.inBounds(ctx, camera, on).Widget,
-            undefined,
-            'a node that was not drawn has no widget under any screen point',
-        );
-
+        assert.equal(node.inBounds(ctx, camera, on).Widget, undefined);
         graph.clickStart(on, camera, false);
         graph.clickEnd();
+        assert.equal((widget as Recording).clicks, 0);
+    });
+});
 
-        assert.equal(rec.clicks(), 0);
+describe('a node built from config', () => {
+    it('builds a row of labelled numbers bound to properties', () => {
+        const node = new FlowNode({
+            title: 'vector',
+            widgets: [{
+                type: 'row',
+                config: {
+                    widgets: [
+                        { type: 'number', config: { property: 'x', label: 'X', width: 60 } },
+                        { type: 'number', config: { property: 'y', label: 'Y', width: 60 } },
+                    ],
+                },
+            }],
+        });
+        node.setProperty('y', 4);
+        assert.equal(node.widgets().length, 1);
+        assert.equal(node.getProperty('x'), 0);
     });
 });

package/test/widget_construction.test.ts

@@ -35,14 +35,15 @@ describe('widget construction', () => {
 
     it('does not fire a slider callback for its initial value', () => {
         let fired = 0;
-        new SliderWidget(stubNode(), { value: 7, min: 0, max: 10, change: () => { fired++; } });
+        new SliderWidget(stubNode(), { value: 7, min: 0, max: 10, callback: () => { fired++; }, onInput: () => { fired++; } });
         assert.equal(fired, 0);
     });
 
-    it('still fires the number callback on a real change', () => {
+    it('does not fire the number callback for a value set from code', () => {
         const values: Array<number> = [];
         const widget = new NumberWidget(stubNode(), { value: 42, callback: (v) => { values.push(v); } });
-        widget.Set(43);
-        assert.deepEqual(values, [43]);
+        widget.setValue(43);
+        assert.equal(widget.value(), 43);
+        assert.deepEqual(values, []);
     });
 });