@elicdavis/node-flow 0.1.19 → 0.2.0

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, []);
     });
 });

package/test/widgets.test.ts

@@ -0,0 +1,333 @@
+import { strict as assert } from 'assert';
+import { FlowNode } from '../src/node';
+import { Box } from '../src/types/box';
+import { Vector2 } from '../src/types/vector2';
+import { NumberWidget } from '../src/widgets/number';
+import { StringWidget } from '../src/widgets/string';
+import { SliderWidget } from '../src/widgets/slider';
+import { TextWidget } from '../src/widgets/text';
+import { ToggleWidget } from '../src/widgets/toggle';
+import { ImageWidget } from '../src/widgets/image';
+import { ColorWidget } from '../src/widgets/color';
+import { RowWidget } from '../src/widgets/row';
+import { WidgetBase } from '../src/widgets/widget';
+import { CanvasRecord, center, stubCtx, widgetScene, withDocument } from './support';
+
+describe('a number widget', () => {
+    it('follows a drag and reports one edit when let go', () => {
+        const inputs: Array<number> = [];
+        const commits: Array<number> = [];
+        const edits: Array<number> = [];
+        const { node, widget, widgetBox, press } = widgetScene((n) => {
+            n.addPropertyEditListener('value', (v) => edits.push(v));
+            return new NumberWidget(n, {
+                property: 'value', value: 10, step: 0.5,
+                onInput: (v) => inputs.push(v),
+                callback: (v) => commits.push(v),
+            });
+        });
+        const on = center(widgetBox());
+
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 10, y: on.y });
+        gesture.moveTo({ x: on.x + 20, y: on.y });
+        gesture.release();
+
+        assert.deepEqual(inputs, [15, 20]);
+        assert.deepEqual(commits, [20]);
+        assert.deepEqual(edits, [20]);
+        assert.equal(node.getProperty('value'), 20);
+        assert.equal((widget as NumberWidget).value(), 20);
+    });
+
+    it('keeps on following a drag that leaves the node', () => {
+        const { widget, widgetBox, press } = widgetScene((n) => new NumberWidget(n, { value: 0, step: 1 }));
+        const on = center(widgetBox());
+
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 500, y: on.y + 200 });
+        gesture.release();
+
+        assert.equal((widget as NumberWidget).value(), 500);
+    });
+
+    it('rounds an integer while it is dragged', () => {
+        const { widget, widgetBox, press } = widgetScene((n) => new NumberWidget(n, { value: 1, integer: true, step: 0.3 }));
+        const on = center(widgetBox());
+
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 10, y: on.y });
+        gesture.release();
+
+        assert.equal((widget as NumberWidget).value(), 4);
+    });
+
+    it('opens an input over itself when clicked, and keeps what is typed', () => {
+        withDocument((body) => {
+            const commits: Array<number> = [];
+            const { widget, widgetBox, click } = widgetScene((n) => new NumberWidget(n, { value: 3, callback: (v) => commits.push(v) }));
+
+            click(center(widgetBox()));
+            const input = body.children[0];
+            assert.ok(input, 'an input was laid over the widget');
+            assert.equal(input.value, '3');
+            assert.ok(input.focused);
+
+            input.value = '7.5';
+            input.fire('keydown', { key: 'Enter' });
+
+            assert.deepEqual(commits, [7.5]);
+            assert.equal((widget as NumberWidget).value(), 7.5);
+            assert.equal(body.children.length, 0);
+        });
+    });
+
+    it('throws away what was typed on escape', () => {
+        withDocument((body) => {
+            const commits: Array<number> = [];
+            const { widget, widgetBox, click } = widgetScene((n) => new NumberWidget(n, { value: 3, callback: (v) => commits.push(v) }));
+
+            click(center(widgetBox()));
+            const input = body.children[0];
+            input.value = '99';
+            input.fire('keydown', { key: 'Escape' });
+
+            assert.deepEqual(commits, []);
+            assert.equal((widget as NumberWidget).value(), 3);
+        });
+    });
+
+    it('does not open an input after a drag', () => {
+        withDocument((body) => {
+            const { widgetBox, press } = widgetScene((n) => new NumberWidget(n, { value: 0 }));
+            const on = center(widgetBox());
+            const gesture = press(on);
+            gesture.moveTo({ x: on.x + 10, y: on.y });
+            gesture.release();
+            assert.equal(body.children.length, 0);
+        });
+    });
+
+    it('shows a value set from code without reporting it as an edit', () => {
+        const commits: Array<number> = [];
+        const edits: Array<number> = [];
+        const node = new FlowNode({ title: 't' });
+        node.addPropertyEditListener('value', (v) => edits.push(v));
+        const widget = new NumberWidget(node, { property: 'value', callback: (v) => commits.push(v) });
+
+        widget.setValue(5);
+        node.setProperty('value', 6);
+
+        assert.equal(widget.value(), 6);
+        assert.deepEqual(commits, []);
+        assert.deepEqual(edits, []);
+    });
+
+    it('draws its label on the left and its value on the right', () => {
+        const record: CanvasRecord = { fills: [], texts: [] };
+        const widget = new NumberWidget(new FlowNode({ title: 't' }), { label: 'X', value: 1.5 });
+        widget.Draw(stubCtx(record), { Position: { x: 0, y: 0 }, Size: { x: 100, y: 25 } }, 1, undefined);
+
+        const label = record.texts.find((t) => t.text === 'X');
+        const value = record.texts.find((t) => t.text === '1.5');
+        assert.ok(label && value);
+        assert.ok(label.x < value.x);
+    });
+});
+
+describe('a string widget', () => {
+    it('edits in place', () => {
+        withDocument((body) => {
+            const commits: Array<string> = [];
+            const { widgetBox, click } = widgetScene((n) => new StringWidget(n, { value: 'a', callback: (v) => commits.push(v) }));
+
+            click(center(widgetBox()));
+            body.children[0].value = 'b';
+            body.children[0].fire('blur');
+
+            assert.deepEqual(commits, ['b']);
+        });
+    });
+});
+
+describe('a slider', () => {
+    it('stops following the mouse once released away from it', () => {
+        const commits: Array<number> = [];
+        const { widget, widgetBox, press, graph, ctx, camera } = widgetScene((n) => new SliderWidget(n, {
+            value: 0.5,
+            callback: (v) => commits.push(v),
+        }));
+        const on = center(widgetBox());
+
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 400, y: on.y + 300 });
+        gesture.release();
+
+        assert.deepEqual(commits, [1], 'dragging past the end and letting go still finishes the drag');
+        graph.render(ctx, camera, { x: 5, y: 500 });
+        assert.equal((widget as SliderWidget).value(), 1);
+    });
+});
+
+describe('a toggle', () => {
+    it('flips when clicked and reports the new value', () => {
+        const seen: Array<boolean> = [];
+        const { widgetBox, click } = widgetScene((n) => new ToggleWidget(n, { callback: (v) => seen.push(v) }));
+        click(center(widgetBox()));
+        assert.deepEqual(seen, [true]);
+    });
+
+    it('stays put when the press is dragged off before release', () => {
+        const seen: Array<boolean> = [];
+        const { widgetBox, press } = widgetScene((n) => new ToggleWidget(n, { callback: (v) => seen.push(v) }));
+        const on = center(widgetBox());
+        const gesture = press(on);
+        gesture.moveTo({ x: on.x + 300, y: on.y });
+        gesture.release();
+        assert.deepEqual(seen, []);
+    });
+
+    it('lights with the colour configured for its off state', () => {
+        const record: CanvasRecord = { fills: [], texts: [] };
+        const toggle = new ToggleWidget(new FlowNode({ title: 't' }), { onColor: '#abcdef', offColor: '#123456' });
+        toggle.Draw(stubCtx(record), { Position: { x: 0, y: 0 }, Size: { x: 150, y: 25 } }, 1, undefined);
+        assert.ok(record.fills.includes('#123456'));
+        assert.ok(!record.fills.includes('#abcdef'));
+    });
+});
+
+describe('a colour widget', () => {
+    it('opens the browser picker on click and keeps its alpha', () => {
+        withDocument((body) => {
+            const inputs: Array<string> = [];
+            const commits: Array<string> = [];
+            const { widgetBox, click } = widgetScene((n) => new ColorWidget(n, {
+                value: '#ff000080',
+                onInput: (c) => inputs.push(c),
+                callback: (c) => commits.push(c),
+            }));
+
+            click(center(widgetBox()));
+            const picker = body.children[0];
+            assert.equal(picker.clicked, 1);
+            assert.equal(picker.value, '#ff0000');
+
+            picker.value = '#00ff00';
+            picker.oninput?.();
+            picker.onchange?.();
+
+            assert.deepEqual(inputs, ['#00ff0080']);
+            assert.deepEqual(commits, ['#00ff0080']);
+        });
+    });
+
+    it('opens the picker over the widget just clicked, not the one before', () => {
+        withDocument((body) => {
+            let first: ColorWidget | undefined;
+            const { node, widgetBox, click } = widgetScene((n) => {
+                first = new ColorWidget(n, { value: '#ff0000' });
+                n.addWidget(first);
+                return new ColorWidget(n, { value: '#00ff00' });
+            });
+            const firstBox = node.widgetPosition(node.widgets().indexOf(first as ColorWidget)) as Box;
+
+            click(center(firstBox));
+            const picker = body.children[0];
+            const overFirst = picker.style.cssText;
+            click(center(widgetBox()));
+            const overSecond = picker.style.cssText;
+
+            assert.notEqual(overFirst, overSecond);
+            assert.deepEqual(picker.openedAt, [overFirst, overSecond]);
+        });
+    });
+
+    it('writes white on a dark colour that has alpha', () => {
+        const record: CanvasRecord = { fills: [], texts: [] };
+        const widget = new ColorWidget(new FlowNode({ title: 't' }), { value: '#10101080' });
+        widget.Draw(stubCtx(record), { Position: { x: 0, y: 0 }, Size: { x: 150, y: 25 } }, 1, undefined);
+        assert.deepEqual(record.texts.map((t) => t.fillStyle), ['white']);
+    });
+});
+
+class Tap extends WidgetBase {
+    clicks = 0;
+    width: number;
+    constructor(width: number) { super(); this.width = width; }
+    Size(): Vector2 { return { x: this.width, y: 20 }; }
+    protected render(_ctx: CanvasRenderingContext2D, _box: Box): void { }
+    protected onClick(): void { this.clicks++; }
+}
+
+describe('a row', () => {
+    it('hands the press to the child under it', () => {
+        const left = new Tap(40);
+        const right = new Tap(40);
+        const { widgetBox, click } = widgetScene(() => new RowWidget([left, right]));
+        const box = widgetBox();
+
+        click({ x: box.Position.x + box.Size.x - 5, y: box.Position.y + 10 });
+
+        assert.equal(left.clicks, 0);
+        assert.equal(right.clicks, 1);
+    });
+
+    it('gives the spare room only to children that grow', () => {
+        const drawn: Array<Box> = [];
+        const spy = (w: number) => new (class extends Tap {
+            protected render(_ctx: CanvasRenderingContext2D, box: Box): void { drawn.push(box); }
+        })(w);
+        const row = new RowWidget([spy(40), spy(20)], { grow: [1, 0], gap: 0 });
+        row.Draw(stubCtx(), { Position: { x: 0, y: 0 }, Size: { x: 200, y: 20 } }, 1, undefined);
+
+        assert.equal(drawn[0].Size.x, 180);
+        assert.equal(drawn[1].Size.x, 20);
+        assert.equal(drawn[1].Position.x, 180);
+    });
+});
+
+describe('a text widget', () => {
+    it('follows the property it is bound to', () => {
+        const node = new FlowNode({ title: 't' });
+        const text = new TextWidget(node, { property: 'label' });
+        node.setProperty('label', 'hi');
+        assert.equal(text.text(), 'hi');
+    });
+});
+
+interface StubImage {
+    src: string;
+    width: number;
+    height: number;
+    onload?: () => void;
+}
+
+describe('an image widget', () => {
+    it('keeps the newest image when an older one finishes loading last', () => {
+        const g = globalThis as any;
+        const previous = g.document;
+        const images: Array<StubImage> = [];
+        g.document = {
+            createElement: () => {
+                const img: StubImage = { src: '', width: 0, height: 0 };
+                images.push(img);
+                return img;
+            },
+        };
+        try {
+            const widget = new ImageWidget();
+            widget.SetUrl('old');
+            widget.SetUrl('new');
+            const [older, newer] = images;
+            newer.width = 100; newer.height = 100;
+            older.width = 40; older.height = 40;
+
+            newer.onload?.();
+            older.onload?.();
+
+            assert.equal(widget.Size().x, 100);
+        } finally {
+            g.document = previous;
+        }
+    });
+});

package/test/wire_follows_camera.test.ts

@@ -0,0 +1,57 @@
+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 { Vector2 } from '../src/types/vector2';
+import { center, stubCtx } from './support';
+
+function scene() {
+    let drawnTo: Vector2 | null = null;
+    const graph = new NodeSubsystem(new PassSubsystem(), {
+        idleConnection: {
+            renderer: (params) => { drawnTo = { x: params.start.x, y: params.start.y }; },
+        },
+    });
+    const from = new FlowNode({ title: 'from', position: { x: 50, y: 50 }, outputs: [{ name: 'out', type: 'n' }] });
+    const to = new FlowNode({ title: 'to', position: { x: 300, y: 80 }, inputs: [{ name: 'in', type: 'n' }] });
+    graph.addNode(from);
+    graph.addNode(to);
+    graph.connectNodes(from, 0, to, 0);
+
+    const camera = new Camera();
+    const ctx = stubCtx();
+    graph.render(ctx, camera, undefined);
+    graph.render(ctx, camera, undefined);
+    return { graph, to, camera, ctx, drawnTo: () => drawnTo as Vector2 | null };
+}
+
+describe('a wire', () => {
+    it('meets its port in the first frame after the camera moves', () => {
+        const { graph, to, camera, ctx, drawnTo } = scene();
+
+        camera.position.x += 137;
+        camera.position.y -= 41;
+        graph.render(ctx, camera, undefined);
+
+        assert.deepEqual(drawnTo(), center(to.inputPortPosition(0)));
+    });
+
+    it('meets its port in the first frame after the camera zooms', () => {
+        const { graph, to, camera, ctx, drawnTo } = scene();
+
+        camera.zoom = 1.7;
+        graph.render(ctx, camera, undefined);
+
+        assert.deepEqual(drawnTo(), center(to.inputPortPosition(0)));
+    });
+
+    it('meets its port in the first frame after the node is dragged', () => {
+        const { graph, to, camera, ctx, drawnTo } = scene();
+
+        to.translate({ x: 60, y: 25 });
+        graph.render(ctx, camera, undefined);
+
+        assert.deepEqual(drawnTo(), center(to.inputPortPosition(0)));
+    });
+});