@elicdavis/node-flow 0.2.3 → 0.2.4

package/test/markdown_code_block.test.ts

@@ -1,7 +1,7 @@
 import { strict as assert } from 'assert';
 import { BuildMarkdown } from '../src/markdown/markdown';
 import { CodeBlockEntry } from '../src/markdown/entry';
-import { Theme } from '../src/theme';
+import { Theme, setTheme } from '../src/theme';
 
 interface Drawn {
     box: { y: number; height: number } | null;
@@ -49,6 +49,26 @@ describe('a markdown code block', () => {
         assert.deepEqual(drawn.lines.map((l) => l.text), ['const a = 1;', 'const b = 2;']);
     });
 
+    it('draws in the theme code font, apart from the note text', () => {
+        setTheme({ FontFamily: 'Tahoma', Note: { CodeFontFamily: 'VT323' } });
+        try {
+            const entry = BuildMarkdown('```\none\n```')[0] as CodeBlockEntry;
+            assert.equal(entry.text().style().getFont(), 'VT323');
+        } finally {
+            setTheme();
+        }
+    });
+
+    it('draws in the theme font when no code font is set', () => {
+        setTheme({ FontFamily: 'Tahoma' });
+        try {
+            const entry = BuildMarkdown('```\none\n```')[0] as CodeBlockEntry;
+            assert.equal(entry.text().style().getFont(), 'Tahoma');
+        } finally {
+            setTheme();
+        }
+    });
+
     it('reports the height it drew', () => {
         const entry = BuildMarkdown('```\none\n```')[0] as CodeBlockEntry;
         const drawn: Drawn = { box: null, lines: [] };

package/test/mouse_leave.test.ts

@@ -0,0 +1,70 @@
+import { strict as assert } from 'assert';
+import { MouseObserver } from '../src/input';
+
+function observe(run: (fire: (name: string, event?: any) => void, fireDocument: (name: string, event?: any) => void, left: () => number) => void) {
+    const listeners = new Map<string, Array<(e: any) => void>>();
+    const documentListeners = new Map<string, Array<(e: any) => void>>();
+    const ele: any = {
+        style: {},
+        addEventListener: (name: string, fn: (e: any) => void) => {
+            listeners.set(name, [...(listeners.get(name) ?? []), fn]);
+        },
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+    };
+    const dispatch = (from: Map<string, Array<(e: any) => void>>) => (name: string, event: any = {}) => {
+        event.preventDefault = () => { };
+        event.button ??= 0;
+        event.clientX ??= 10;
+        event.clientY ??= 10;
+        (from.get(name) ?? []).forEach((fn) => fn(event));
+    };
+
+    let leaves = 0;
+    const g = globalThis as any;
+    const previous = g.document;
+    g.document = {
+        addEventListener: (name: string, fn: (e: any) => void) => {
+            documentListeners.set(name, [...(documentListeners.get(name) ?? []), fn]);
+        },
+    };
+    try {
+        new MouseObserver(ele, () => { }, () => { }, () => { }, () => { }, () => { }, () => { }, () => { },
+            () => { leaves++; });
+        run(dispatch(listeners), dispatch(documentListeners), () => leaves);
+    } finally {
+        g.document = previous;
+    }
+}
+
+describe('the mouse leaving the canvas', () => {
+    it('is reported when nothing is held', () => {
+        observe((fire, _, left) => {
+            fire('mousemove');
+            fire('mouseleave');
+            assert.equal(left(), 1);
+        });
+    });
+
+    it('is reported once a drag that left the canvas is let go', () => {
+        observe((fire, fireDocument, left) => {
+            fire('mousemove');
+            fire('mousedown');
+            fire('mouseleave');
+            assert.equal(left(), 0, 'still dragging');
+
+            fireDocument('mouseup');
+            assert.equal(left(), 1);
+        });
+    });
+
+    it('is not reported when a drag comes back before it is let go', () => {
+        observe((fire, fireDocument, left) => {
+            fire('mousemove');
+            fire('mousedown');
+            fire('mouseleave');
+            fire('mousemove');
+            fireDocument('mouseup');
+            assert.equal(left(), 0);
+        });
+    });
+});

package/test/node_hover.test.ts

@@ -0,0 +1,69 @@
+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 { Theme } from '../src/theme';
+import { center, stubCtx } from './support';
+
+describe('the node hover listener', () => {
+    it('reports the node under the mouse once, then null when the mouse leaves', () => {
+        const graph = new NodeSubsystem(new PassSubsystem());
+        const node = new FlowNode({ title: 'hovered', position: { x: 100, y: 100 } });
+        graph.addNode(node);
+        const ctx = stubCtx();
+        const camera = new Camera();
+        const seen: Array<FlowNode | null> = [];
+        graph.addNodeHoverListener((n) => seen.push(n));
+
+        graph.render(ctx, camera, undefined);
+        const over = center(node.calculateBounds(ctx, camera));
+        graph.render(ctx, camera, over);
+        graph.render(ctx, camera, over);
+        graph.render(ctx, camera, undefined);
+
+        assert.deepEqual(seen, [node, null]);
+    });
+});
+
+describe('a highlighted node', () => {
+    it('keeps a screen-width outline in the highlight colour when zoomed far out', () => {
+        const node = new FlowNode({ title: 'lit', position: { x: 100, y: 100 } });
+        const graph = new NodeSubsystem(new PassSubsystem());
+        graph.addNode(node);
+        const strokes: Array<{ style: string; width: number }> = [];
+        const ctx = stubCtx();
+        (ctx as any).stroke = function () { strokes.push({ style: this.strokeStyle, width: this.lineWidth }); };
+        const camera = new Camera();
+        camera.zoom = 0.1;
+
+        node.setHighlighted(true);
+        graph.render(ctx, camera, undefined);
+
+        assert.ok(strokes.some((s) => s.style === Theme.Node.Border.Highlighted && s.width === 2));
+    });
+
+    it('draws its ports with the same line width as when it is not highlighted', () => {
+        const widths = (highlighted: boolean) => {
+            const node = new FlowNode({ title: 'lit', position: { x: 100, y: 100 }, inputs: [{ name: 'In', type: 'float64' }] });
+            const graph = new NodeSubsystem(new PassSubsystem());
+            graph.addNode(node);
+            const strokes: Array<{ style: string; width: number }> = [];
+            const ctx = stubCtx();
+            let width = 1;
+            Object.defineProperty(ctx, 'lineWidth', { get: () => width, set: (w: number) => { width = w; } });
+            const saved: Array<number> = [];
+            (ctx as any).save = () => saved.push(width);
+            (ctx as any).restore = () => { width = saved.pop() ?? width; };
+            (ctx as any).stroke = function () { strokes.push({ style: this.strokeStyle, width }); };
+            const camera = new Camera();
+            camera.zoom = 0.1;
+
+            node.setHighlighted(highlighted);
+            graph.render(ctx, camera, undefined);
+            return strokes.filter((s) => s.style !== Theme.Node.Border.Highlighted).map((s) => s.width);
+        };
+
+        assert.deepEqual(widths(true), widths(false));
+    });
+});

package/test/node_menu_filter.test.ts

@@ -117,3 +117,27 @@ describe('filtering the new node menu to what could finish a wire', () => {
         assert.ok(!groups.includes('Math'), `Math should be gone, got ${groups}`);
     });
 });
+
+describe('filtering the new node menu through casts', () => {
+    const graph = {} as any;
+    const at = { x: 0, y: 0 };
+    const casts = [{ from: 'int', to: 'float64' }];
+
+    it('dragging an int output offers nodes taking a float64', () => {
+        const names = itemNames(publisher().contextMenu(graph, at, {
+            needs: PortType.Input,
+            types: ['int'],
+            casts,
+        }));
+        assert.deepStrictEqual(names, ['Add', 'Negate', 'Select']);
+    });
+
+    it('dragging an int input does not offer float64 producers', () => {
+        const names = itemNames(publisher().contextMenu(graph, at, {
+            needs: PortType.Output,
+            types: ['int'],
+            casts,
+        }));
+        assert.deepStrictEqual(names, ['Select']);
+    });
+});

package/test/port.test.ts

@@ -1,6 +1,10 @@
 import * as assert from 'assert';
-import { Port, PortConfig, PortType, portsCompatible } from '../src/port';
+import { Port, PortConfig, PortType, portsCompatible, portsConnect } from '../src/port';
 import { FlowNode } from '../src/node';
+import { DanglingConnection, NodeSubsystem } from '../src/nodes/subsystem';
+import { PassSubsystem } from '../src/pass/subsystem';
+import { Camera } from '../src/camera';
+import { center, stubCtx } from './support';
 
 function port(config: PortConfig): Port {
     // A port only reaches back to its node when it is drawn or connected,
@@ -123,3 +127,47 @@ describe('settling a port on a type', () => {
         assert.ok(portsCompatible(settled, port({ type: 'float64' })));
     });
 });
+
+describe('casts', () => {
+    const casts = [{ from: 'int', to: 'float64' }];
+
+    it('lets an output feed an input it casts to', () => {
+        assert.ok(portsConnect(port({ type: 'int' }), port({ type: 'float64' }), casts));
+    });
+
+    it('only goes the way it was registered', () => {
+        assert.ok(!portsConnect(port({ type: 'float64' }), port({ type: 'int' }), casts));
+    });
+
+    it('reaches any of the types an input takes', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        assert.ok(portsConnect(port({ type: 'int' }), lifted, casts));
+    });
+
+    it('refuses mismatched types without one', () => {
+        assert.ok(!portsConnect(port({ type: 'int' }), port({ type: 'float64' })));
+    });
+
+    it('wires a node made from a released wire through a cast', () => {
+        const graph = new NodeSubsystem(new PassSubsystem(), { casts });
+        const source = new FlowNode({ title: 'source', position: { x: 0, y: 0 }, outputs: [{ name: 'Out', type: 'int' }] });
+        graph.addNode(source);
+        const camera = new Camera();
+        const ctx = stubCtx();
+        graph.render(ctx, camera, undefined);
+
+        let dangling: DanglingConnection | null = null;
+        graph.setConnectionReleasedHandler((d) => dangling = d);
+        const out = center(source.outputPortPosition(0));
+        graph.render(ctx, camera, out);
+        graph.clickStart(out, camera, false);
+        graph.render(ctx, camera, { x: 600, y: 500 });
+        graph.clickEnd();
+
+        const made = new FlowNode({ title: 'made', position: { x: 300, y: 0 }, inputs: [{ name: 'In', type: 'float64' }] });
+        graph.addNode(made);
+        dangling!.connectTo(made);
+
+        assert.equal(made.inputPort(0).connections().length, 1);
+    });
+});