@elicdavis/node-flow 0.1.20 → 0.2.1

package/src/widgets/widget.ts

@@ -1,14 +1,181 @@
-import { Box } from '../types/box';
+import { Box, InBox } from '../types/box';
 import { Vector2 } from '../types/vector2';
+import { CursorStyle } from '../styles/cursor';
+import { requestRender } from '../render_scheduler';
+import { editInPlace, InPlaceEdit } from './inplace';
 
 export const width = 150;
 export const height = 25;
 
+/**
+ * Where the pointer is, in canvas pixels, and whether it is over the widget.
+ * A press that starts on a widget keeps reporting to it until it is let go,
+ * wherever the pointer wanders.
+ */
+export interface WidgetPointer {
+    position: Vector2;
+    inside: boolean;
+}
+
 export interface Widget {
-    Size(): Vector2
-    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box
-    ClickStart(): void
-    ClickEnd(): void
+    /**
+     * The smallest room the widget needs, in graph units. The node may hand
+     * it a wider box.
+     */
+    Size(): Vector2;
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void;
+
+    PointerDown?(pointer: WidgetPointer): void;
+    PointerMove?(pointer: WidgetPointer): void;
+    PointerUp?(pointer: WidgetPointer): void;
+
+    Cursor?(): CursorStyle;
+    Hidden?(): boolean;
+    Disabled?(): boolean;
+}
+
+export abstract class WidgetBase implements Widget {
+
+    #hidden = false;
+
+    #disabled = false;
+
+    #hovered = false;
+
+    #pressed = false;
+
+    #box: Box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+
+    #canvas: HTMLCanvasElement | null = null;
+
+    #scale = 1;
+
+    #editing: InPlaceEdit | null = null;
+
+    abstract Size(): Vector2;
+
+    protected abstract render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void {
+        this.#box = { Position: { x: box.Position.x, y: box.Position.y }, Size: { x: box.Size.x, y: box.Size.y } };
+        this.#canvas = ctx.canvas ?? null;
+        this.#scale = scale;
+        this.#hovered = !this.#disabled && mousePosition !== undefined && InBox(box, mousePosition);
+
+        if (this.#editing !== null) {
+            if (this.#editing.input.isConnected) {
+                this.#editing.place(this.#box, scale);
+            } else {
+                this.#editing = null;
+            }
+        }
+
+        ctx.save();
+        if (this.#disabled) {
+            ctx.globalAlpha *= 0.4;
+        }
+        this.render(ctx, box, scale);
+        ctx.restore();
+    }
+
+    PointerDown(pointer: WidgetPointer): void {
+        if (this.#disabled) {
+            return;
+        }
+        this.#pressed = true;
+        this.onPointerDown(pointer);
+        requestRender();
+    }
+
+    PointerMove(pointer: WidgetPointer): void {
+        if (!this.#pressed) {
+            return;
+        }
+        this.onPointerMove(pointer);
+        requestRender();
+    }
+
+    PointerUp(pointer: WidgetPointer): void {
+        if (!this.#pressed) {
+            return;
+        }
+        this.#pressed = false;
+        this.onPointerUp(pointer);
+        if (pointer.inside) {
+            this.onClick(pointer);
+        }
+        requestRender();
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.Pointer;
+    }
+
+    Hidden(): boolean {
+        return this.#hidden;
+    }
+
+    setHidden(hidden: boolean): void {
+        this.#hidden = hidden;
+        requestRender();
+    }
+
+    Disabled(): boolean {
+        return this.#disabled;
+    }
+
+    setDisabled(disabled: boolean): void {
+        this.#disabled = disabled;
+        if (disabled) {
+            this.#pressed = false;
+        }
+        requestRender();
+    }
+
+    protected hovered(): boolean {
+        return this.#hovered;
+    }
+
+    protected pressed(): boolean {
+        return this.#pressed;
+    }
+
+    /**
+     * Where the widget was last drawn, in canvas pixels.
+     */
+    protected box(): Box {
+        return this.#box;
+    }
+
+    protected canvas(): HTMLCanvasElement | null {
+        return this.#canvas;
+    }
+
+    protected scale(): number {
+        return this.#scale;
+    }
+
+    protected editText(value: string, onCommit: (text: string) => void): void {
+        this.#editing = editInPlace({
+            canvas: this.#canvas,
+            box: this.#box,
+            scale: this.#scale,
+            value,
+            onCommit,
+        });
+    }
+
+    protected onPointerDown(pointer: WidgetPointer): void { }
+
+    protected onPointerMove(pointer: WidgetPointer): void { }
+
+    protected onPointerUp(pointer: WidgetPointer): void { }
+
+    /**
+     * A press and release that both landed on the widget.
+     */
+    protected onClick(pointer: WidgetPointer): void { }
 }
 
 interface PropertyReader {
@@ -31,4 +198,4 @@ export function startingWidgetValue<T>(
         }
     }
     return fallback;
-}
+}

package/test/context_menu.test.ts

@@ -0,0 +1,82 @@
+import { strict as assert } from 'assert';
+import { ContextMenu, ContextMenuConfig } from '../src/contextMenu';
+import { setTheme } from '../src/theme';
+
+interface Frame {
+    texts: Array<{ text: string; x: number; y: number; fillStyle: string }>;
+}
+
+function ctxFor(width: number, frame: Frame): CanvasRenderingContext2D {
+    const ctx: any = {
+        canvas: { clientWidth: width, clientHeight: 600 },
+        font: '', fillStyle: '', strokeStyle: '', lineWidth: 1,
+        textAlign: 'left', textBaseline: 'middle', shadowColor: '', shadowBlur: 0,
+        measureText: (text: string) => ({ width: text.length * 7, actualBoundingBoxAscent: 8, actualBoundingBoxDescent: 2 }),
+        beginPath() { }, roundRect() { }, fill() { }, stroke() { }, lineTo() { }, moveTo() { },
+        fillText(text: string, x: number, y: number) { frame.texts.push({ text, x, y, fillStyle: this.fillStyle }); },
+    };
+    return ctx as CanvasRenderingContext2D;
+}
+
+function render(menu: ContextMenu, width: number, at: { x: number; y: number }, mouse: { x: number; y: number }) {
+    const frame: Frame = { texts: [] };
+    const over = menu.render(ctxFor(width, frame), at, 1, mouse, true);
+    return { over, frame, find: (text: string) => frame.texts.find((t) => t.text === text) };
+}
+
+const ROW = 30 * 1.25;
+
+const config: ContextMenuConfig = {
+    subMenus: [
+        { name: 'More', items: [{ name: 'Alpha' }, { name: 'Beta' }] },
+        { name: 'Other', items: [{ name: 'Gamma' }] },
+    ],
+};
+
+describe('a context menu', () => {
+    it('opens a submenu on the far side of its parent when the right is out of room', () => {
+        const menu = new ContextMenu(config);
+        const at = { x: 250, y: 100 };
+        const onMore = { x: at.x + 10, y: at.y + ROW / 2 };
+
+        render(menu, 400, at, onMore);
+        const { find } = render(menu, 400, at, onMore);
+
+        const alpha = find('Alpha');
+        assert.ok(alpha, 'the submenu is open');
+        assert.ok(alpha.x < at.x, `the submenu sits left of its parent, not on top of it (at ${alpha.x})`);
+    });
+
+    it('lights only the row under the pointer in the frame it moves there', () => {
+        setTheme({ ContextMenu: { FontColor: '#000000', HighlightFontColor: '#ffffff' } });
+        const menu = new ContextMenu(config);
+        const at = { x: 10, y: 100 };
+
+        render(menu, 800, at, { x: at.x + 5, y: at.y + ROW / 2 });
+        const moved = render(menu, 800, at, { x: at.x + 5, y: at.y + ROW * 1.5 });
+        setTheme();
+
+        assert.equal(moved.find('More')?.fillStyle, '#000000');
+        assert.equal(moved.find('Other')?.fillStyle, '#ffffff');
+        assert.ok(moved.find('Gamma'), 'the newly hovered row opens its submenu in the same frame');
+        assert.ok(!moved.find('Alpha'), 'the old submenu is gone in the same frame');
+    });
+
+    it('keeps listening to an open submenu that has to overlap its parent', () => {
+        const menu = new ContextMenu(config);
+        const at = { x: 10, y: 100 };
+
+        render(menu, 120, at, { x: at.x + 5, y: at.y + ROW / 2 });
+        const opened = render(menu, 120, at, { x: at.x + 5, y: at.y + ROW / 2 });
+        const beta = opened.find('Beta');
+        assert.ok(beta, 'the submenu is open');
+
+        const onBeta = { x: beta.x + 5, y: beta.y };
+        render(menu, 120, at, onBeta);
+        const hovering = render(menu, 120, at, onBeta);
+
+        assert.equal(hovering.over?.text, 'Beta');
+        assert.ok(hovering.find('Alpha'), 'the submenu under the pointer stays open');
+        assert.ok(!hovering.find('Gamma'), 'the parent row underneath does not open its own submenu');
+    });
+});

package/test/cursor.test.ts

@@ -0,0 +1,17 @@
+import { strict as assert } from 'assert';
+import { GraphView } from '../src/graph';
+import { NoteSubsystem } from '../src/notes/subsystem';
+import { CursorStyle } from '../src/styles/cursor';
+import { SliderWidget } from '../src/widgets/slider';
+import { center, widgetScene } from './support';
+
+describe('the cursor', () => {
+    it('shows the hovered widget\'s cursor once drawn through the graph', () => {
+        const { graph, camera, ctx, widgetBox } = widgetScene((node) => new SliderWidget(node, { value: 0.5 }));
+        const view = new GraphView([new NoteSubsystem(), graph]);
+
+        const results = view.render(ctx, camera, center(widgetBox()));
+
+        assert.equal(results?.cursorStyle, CursorStyle.EWResize);
+    });
+});

package/test/hidden_port.test.ts

@@ -0,0 +1,125 @@
+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, 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 center(box: Box): Vector2 {
+    return { x: box.Position.x + box.Size.x / 2, y: box.Position.y + box.Size.y / 2 };
+}
+
+function scene(hidden: boolean) {
+    const graph = new NodeSubsystem(new PassSubsystem());
+    const node = new FlowNode({
+        title: 'material',
+        position: { x: 100, y: 100 },
+        inputs: [
+            { name: 'Color', type: 'color' },
+            { name: 'Sheen', type: 'sheen', hidden },
+            { name: 'Roughness', type: 'float64' },
+        ],
+        outputs: [{ name: 'Out', type: 'material' }],
+    });
+    graph.addNode(node);
+    return { graph, node, camera: new Camera(), ctx: stubCtx() };
+}
+
+describe('a hidden port', () => {
+    it('takes no room on its node', () => {
+        const shown = scene(false);
+        const hidden = scene(true);
+
+        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);
+    });
+
+    it('cannot be hovered where it would have been drawn', () => {
+        const { graph, node, camera, ctx } = scene(false);
+        graph.render(ctx, camera, undefined);
+        const where = center(node.inputPortPosition(1));
+
+        node.inputPort(1).setHidden(true);
+        graph.render(ctx, camera, undefined);
+
+        assert.notEqual(node.inBounds(ctx, camera, where).Port, node.inputPort(1));
+    });
+
+    it('keeps the ports after it lined up with their indices', () => {
+        const { graph, node, camera, ctx } = scene(true);
+        graph.render(ctx, camera, undefined);
+
+        const roughness = center(node.inputPortPosition(2));
+        assert.equal(node.inBounds(ctx, camera, roughness).Port, node.inputPort(2));
+    });
+
+    it('asks for a fresh layout when it is shown or hidden', () => {
+        const { graph, node, camera, ctx } = scene(true);
+        graph.render(ctx, camera, undefined);
+        assert.ok(node.hasBeenLaidOut());
+
+        node.inputPort(1).setHidden(false);
+
+        assert.ok(!node.hasBeenLaidOut());
+    });
+
+    it('asks for a fresh layout when a wire makes it show', () => {
+        const { graph, node, camera, ctx } = scene(true);
+        const source = new FlowNode({ title: 'sheen', outputs: [{ name: 'Out', type: 'sheen' }] });
+        graph.addNode(source);
+        graph.render(ctx, camera, undefined);
+
+        graph.connectNodes(source, 0, node, 1);
+
+        assert.ok(!node.hasBeenLaidOut());
+    });
+
+    it('moves the ports below it for a node drawn off screen', () => {
+        const { graph, node, camera, ctx } = scene(true);
+        const offset = () => node.inputPortPosition(2).Position.y - node.calculateBounds(ctx, camera).Position.y;
+        graph.render(ctx, camera, undefined);
+        const before = offset();
+
+        camera.position.x = -50000;
+        graph.render(ctx, camera, undefined);
+        node.inputPort(1).setHidden(false);
+        graph.render(ctx, camera, undefined);
+
+        assert.ok(offset() > before);
+    });
+
+    it('shows while something is connected to it', () => {
+        const { graph, node } = scene(true);
+        const source = new FlowNode({ title: 'sheen', outputs: [{ name: 'Out', type: 'sheen' }] });
+        graph.addNode(source);
+
+        graph.connectNodes(source, 0, node, 1);
+
+        assert.equal(node.inputPort(1).hidden(), false);
+    });
+});

package/test/markdown.test.ts

@@ -149,12 +149,12 @@ describe('markdown: code', () => {
         const entries = BuildMarkdown('```\nlet a = *b*;\n```');
         assert.strictEqual(entries.length, 1);
         assert.ok(entries[0] instanceof CodeBlockEntry, `got ${entries[0].constructor.name}`);
-        assert.strictEqual(contentOf(entries[0]), 'let a = *b*;\n');
+        assert.strictEqual(contentOf(entries[0]), 'let a = *b*;');
     });
 
     it('keeps more than one line of a fenced block', () => {
         const entries = BuildMarkdown('```\none\ntwo\n```');
-        assert.strictEqual(contentOf(entries[0]), 'one\ntwo\n');
+        assert.strictEqual(contentOf(entries[0]), 'one\ntwo');
     });
 
     it('carries on after a fenced block', () => {

package/test/markdown_code_block.test.ts

@@ -0,0 +1,58 @@
+import { strict as assert } from 'assert';
+import { BuildMarkdown } from '../src/markdown/markdown';
+import { CodeBlockEntry } from '../src/markdown/entry';
+import { Theme } from '../src/theme';
+
+interface Drawn {
+    box: { y: number; height: number } | null;
+    lines: Array<{ text: string; y: number; baseline: string }>;
+}
+
+function recordingCtx(drawn: Drawn): CanvasRenderingContext2D {
+    const ctx: any = {
+        font: '',
+        fillStyle: '',
+        textAlign: 'left',
+        textBaseline: 'alphabetic',
+        measureText: (text: string) => ({ width: text.length * 7, actualBoundingBoxAscent: 8, actualBoundingBoxDescent: 2 }),
+        save() { }, restore() { },
+        beginPath() { }, fill() { },
+        roundRect(_x: number, y: number, _w: number, height: number) { drawn.box = { y, height }; },
+        fillText(text: string, _x: number, y: number) { drawn.lines.push({ text, y, baseline: this.textBaseline }); },
+    };
+    return ctx as CanvasRenderingContext2D;
+}
+
+function draw(markdown: string): { drawn: Drawn; size: number } {
+    const entry = BuildMarkdown(markdown)[0] as CodeBlockEntry;
+    const drawn: Drawn = { box: null, lines: [] };
+    entry.render(recordingCtx(drawn), { x: 0, y: 100 }, 1, 400);
+    return { drawn, size: entry.text().style().getSize() };
+}
+
+describe('a markdown code block', () => {
+    it('leaves the same room above its first line as below its last', () => {
+        const { drawn, size } = draw('```\nconst a = 1;\nconst b = 2;\n```');
+        const box = drawn.box!;
+        const first = drawn.lines[0];
+        const last = drawn.lines[drawn.lines.length - 1];
+
+        assert.equal(first.baseline, 'top', 'lines are placed by the top of the text');
+        const above = first.y - box.y;
+        const below = (box.y + box.height) - (last.y + size);
+        assert.equal(above, Theme.Note.CodeBlock.Padding);
+        assert.equal(below, Theme.Note.CodeBlock.Padding);
+    });
+
+    it('does not keep the newline before the closing backticks as an empty last line', () => {
+        const { drawn } = draw('```\nconst a = 1;\nconst b = 2;\n```');
+        assert.deepEqual(drawn.lines.map((l) => l.text), ['const a = 1;', 'const b = 2;']);
+    });
+
+    it('reports the height it drew', () => {
+        const entry = BuildMarkdown('```\none\n```')[0] as CodeBlockEntry;
+        const drawn: Drawn = { box: null, lines: [] };
+        const height = entry.render(recordingCtx(drawn), { x: 0, y: 0 }, 1, 400);
+        assert.equal(height, drawn.box!.height);
+    });
+});

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