@elicdavis/node-flow 0.2.2 → 0.2.4

package/src/nodes/subsystem.ts

@@ -6,7 +6,7 @@ import { FlowNode, NodeState } from "../node";
 import { Organize } from "../organize";
 import { PassSubsystem } from "../pass/subsystem";
 import { TimeExecution } from "../performance";
-import { arrayInsertIndex, Port, PortType, portsCompatible } from "../port";
+import { arrayInsertIndex, Cast, Port, PortType, portsConnect } from "../port";
 import { requestRender } from "../render_scheduler";
 import { BoxStyle } from "../styles/box";
 import { CursorStyle } from "../styles/cursor";
@@ -21,6 +21,7 @@ import { Publisher } from "./publisher";
 
 export type NodeAddedCallback = (node: FlowNode) => void;
 export type NodeRemovedCallback = (node: FlowNode) => void;
+export type NodeHoverCallback = (node: FlowNode | null) => void;
 
 export const nodeFlowGroup = "node-flow-graph-node-menu";
 
@@ -84,6 +85,7 @@ interface PortIntersection {
 interface NodeSubsystemConfig {
     idleConnection?: ConnectionRendererConfiguration
     nodes?: NodeFactoryConfig
+    casts?: Array<Cast>
 }
 
 export class NodeSubsystem {
@@ -126,6 +128,7 @@ export class NodeSubsystem {
 
     #boxSelectionNodes: List<number>;
 
+    #casts: Array<Cast>;
 
     #lastCtx: CanvasRenderingContext2D | null;
 
@@ -137,6 +140,10 @@ export class NodeSubsystem {
 
     #registeredNodeAddedCallbacks: Array<NodeAddedCallback>;
 
+    #nodeHoverCallbacks = new Array<NodeHoverCallback>();
+
+    #hoveredNode: FlowNode | null = null;
+
     // ========================================================================
 
     constructor(postProcessPass: PassSubsystem, config?: NodeSubsystemConfig) {
@@ -160,6 +167,15 @@ export class NodeSubsystem {
         this.#boxSelectEnd_graphSpace = Zero();
         this.#boxSelectionNodes = new List<number>();
         this.#lastCtx = null;
+        this.#casts = config?.casts ?? [];
+    }
+
+    public setCasts(casts: Array<Cast>): void {
+        this.#casts = casts;
+    }
+
+    public casts(): Array<Cast> {
+        return this.#casts;
     }
 
     public addPublisher(identifier: string, publisher: Publisher): void {
@@ -188,6 +204,20 @@ export class NodeSubsystem {
         this.#nodeRemovedCallbacks.push(callback);
     }
 
+    public addNodeHoverListener(callback: NodeHoverCallback): void {
+        this.#nodeHoverCallbacks.push(callback);
+    }
+
+    #setHoveredNode(node: FlowNode | null): void {
+        if (this.#hoveredNode === node) {
+            return;
+        }
+        this.#hoveredNode = node;
+        for (let i = 0; i < this.#nodeHoverCallbacks.length; i++) {
+            this.#nodeHoverCallbacks[i](node);
+        }
+    }
+
     clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean {
         this.#boxSelect = false;
         this.#nodesGrabbed.Clear();
@@ -445,7 +475,10 @@ export class NodeSubsystem {
         let firstHidden = -1;
         for (let i = 0; i < count; i++) {
             const port = side === PortType.Input ? node.inputPort(i) : node.outputPort(i);
-            if (!portsCompatible(port, against)) {
+            const compatible = side === PortType.Input
+                ? portsConnect(against, port, this.#casts)
+                : portsConnect(port, against, this.#casts);
+            if (!compatible) {
                 continue;
             }
             if (!port.hidden()) {
@@ -521,13 +554,13 @@ export class NodeSubsystem {
         }
 
         // Different types, can't connect
-        if (this.#portHovering.InputPort && !portsCompatible(this.#portHovering.Port, conn.outPort())) {
+        if (this.#portHovering.InputPort && !portsConnect(conn.outPort(), this.#portHovering.Port, this.#casts)) {
             this.#clearCurrentlySelectedConnection();
             return;
         }
 
         // Different types, can't connect
-        if (!this.#portHovering.InputPort && !portsCompatible(this.#portHovering.Port, conn.inPort())) {
+        if (!this.#portHovering.InputPort && !portsConnect(this.#portHovering.Port, conn.inPort(), this.#casts)) {
             this.#clearCurrentlySelectedConnection();
             return;
         }
@@ -559,7 +592,7 @@ export class NodeSubsystem {
     connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined {
         const from = nodeOut.outputPort(outPort);
         const to = nodeIn.inputPort(inPort);
-        if (!portsCompatible(from, to)) {
+        if (!portsConnect(from, to, this.#casts)) {
             console.error("can't connect nodes of different types", from.getDataType(), to.getDataType());
             return;
         }
@@ -955,6 +988,7 @@ export class NodeSubsystem {
         this.#widgetHovering = null;
         this.#nodeHovering = -1;
         this.#boxSelectionNodes.Clear();
+        let hovered: FlowNode | null = null;
 
         const selectedBox_Screenspace = this.#boxSelectionScreenspaceBox(camera);
 
@@ -976,6 +1010,9 @@ export class NodeSubsystem {
 
             if (mousePosition !== undefined && !this.#boxSelect) {
                 const intersection = this.#nodes[i].inBounds(ctx, camera, mousePosition);
+                if (intersection.Node !== undefined) {
+                    hovered = intersection.Node;
+                }
 
                 if (intersection.Node !== undefined && intersection.PortIndex === undefined && intersection.Widget === undefined) {
                     state = NodeState.MouseOver;
@@ -1019,6 +1056,7 @@ export class NodeSubsystem {
 
             this.#nodes[i].render(ctx, camera, state, mousePosition, this.#postProcessPass);
         }
+        this.#setHoveredNode(hovered);
 
         if (this.#widgetCurrentlyClicking !== null) {
             this.#cursor = this.#widgetCurrentlyClicking.Cursor?.() ?? CursorStyle.Pointer;

package/src/port.ts

@@ -11,6 +11,8 @@ import { Box, InBox } from "./types/box";
 import { Text } from "./types/text";
 import { Vector2 } from "./types/vector2";
 import { Color, HSV, HSV2RGB, RgbToHex } from './utils/color';
+import type { Widget } from "./widgets/widget";
+import type { WidgetConfig } from "./widgets/factory";
 
 export enum PortType {
     Input = "INPUT",
@@ -56,6 +58,12 @@ export interface PortConfig {
      */
     hidden?: boolean;
 
+    /**
+     * A widget drawn on the port's own row while nothing is connected to
+     * it, for a value the port holds on its own. Input ports only.
+     */
+    widget?: WidgetConfig;
+
     emptyStyle?: PortStyle;
     filledStyle?: PortStyle;
     onConnectionAdded?: ConnectionChangeCallback;
@@ -83,6 +91,33 @@ export function typeSetsCompatible(a: Array<string>, b: Array<string>): boolean
     return a.some((type) => b.includes(type));
 }
 
+/**
+ * Lets an output of type `from` feed an input of type `to`
+ */
+export interface Cast {
+    from: string;
+    to: string;
+}
+
+/**
+ * Whether an output may feed an input: their types overlap, or a cast takes
+ * one of the output's types to one of the input's.
+ */
+export function portsConnect(output: Port | undefined | null, input: Port | undefined | null, casts?: Array<Cast>): boolean {
+    if (!output || !input) {
+        return false;
+    }
+
+    return typeSetsConnect(output.acceptedTypes(), input.acceptedTypes(), casts);
+}
+
+export function typeSetsConnect(output: Array<string>, input: Array<string>, casts?: Array<Cast>): boolean {
+    if (typeSetsCompatible(output, input)) {
+        return true;
+    }
+    return (casts ?? []).some((cast) => output.includes(cast.from) && input.includes(cast.to));
+}
+
 export function portConfigTypes(config: PortConfig): Array<string> {
     if (config.anyType === true) {
         return [];
@@ -131,6 +166,10 @@ function fallbackColor(type: string, s: number): string {
     return RgbToHex(color);
 }
 
+export function portTypeColor(type: string): string {
+    return fallbackColor(type, 1);
+}
+
 export class Port {
 
     #node: FlowNode;
@@ -167,6 +206,8 @@ export class Port {
 
     #onConnectionRemoved: Array<ConnectionChangeCallback>;
 
+    #widget: Widget | null = null;
+
     constructor(node: FlowNode, portType: PortType, config?: PortConfig) {
         this.#node = node;
         this.#connections = new Array<Connection>();
@@ -339,11 +380,31 @@ export class Port {
     }
 
     #visibilityMayHaveChanged(was: boolean): void {
-        if (was !== this.hidden() || this.#portType === PortType.InputArray) {
+        if (was !== this.hidden() || this.#portType === PortType.InputArray || this.#widget !== null) {
             this.#node?.invalidateLayout();
         }
     }
 
+    setWidget(widget: Widget | null): void {
+        this.#widget = widget;
+        this.#node?.invalidateLayout();
+    }
+
+    widget(): Widget | null {
+        return this.#widget;
+    }
+
+    /**
+     * The widget stands in for a wire, so it leaves once one is connected.
+     */
+    widgetShown(): boolean {
+        return this.#widget !== null
+            && this.#portType !== PortType.Output
+            && this.#connections.length === 0
+            && !this.hidden()
+            && !(this.#widget.Hidden?.() ?? false);
+    }
+
     /**
      * A port asked to hide still shows while anything is connected to it,
      * and while its node is showing its hidden ports.

package/src/quickMenu.ts

@@ -6,6 +6,7 @@ import { FontWeight } from "./styles/text";
 import { Theme } from "./theme";
 import { Text } from './types/text';
 import { ScaleVector, Vector2 } from './types/vector2';
+import { Box, InBox } from './types/box';
 import { Display } from './elements/base';
 
 class QuickMenuGroup {
@@ -325,6 +326,16 @@ export class QuickMenu {
         }
 
         this.#container.render(ctx, pos, 1, this.renderSize);
+        this.#bounds = {
+            Position: { x: pos.x, y: pos.y },
+            Size: { x: this.renderSize.x, y: this.renderSize.y },
+        };
         return null;
     }
+
+    #bounds: Box | null = null;
+
+    public contains(point: Vector2): boolean {
+        return this.#bounds !== null && InBox(this.#bounds, point);
+    }
 }

package/src/theme.ts

@@ -24,7 +24,8 @@ const defaults = {
             Idle: "#1c1c1c",
             MouseOver: "#8e8e8e",
             Grabbed: "white",
-            Selected: "#6e6e6e"
+            Selected: "#6e6e6e",
+            Highlighted: "#ffc95c"
         },
         Bevel: null as BevelColors | null,
         Port: {
@@ -111,6 +112,7 @@ const defaults = {
         H3: {
             FontSize: 16,
         },
+        CodeFontFamily: null as string | null,
         CodeBlock: {
             BackgroundColor: "#0c2b35",
             FontColor: "#afb9bb",

package/test/markdown.test.ts

@@ -3,6 +3,7 @@ import { BuildMarkdown } from '../src/markdown/markdown';
 import { BasicMarkdownEntry, CodeBlockEntry, UnorderedListMarkdownEntry } from '../src/markdown/entry';
 import { FontStyle, FontWeight } from '../src/styles/text';
 import { Text } from '../src/types/text';
+import { setTheme } from '../src/theme';
 
 /** The runs of text in an entry, as [content, weight, style] triples. */
 function runs(entry: any): Array<[string, FontWeight, FontStyle]> {
@@ -141,6 +142,16 @@ describe('markdown: code', () => {
         assert.notStrictEqual(entry.lines()[0].style().getFont(), 'monospace');
     });
 
+    it('sets inline code in the theme code font', () => {
+        setTheme({ Note: { CodeFontFamily: 'VT323' } });
+        try {
+            const entry = BuildMarkdown('a `b` c')[0] as any;
+            assert.strictEqual(entry.lines()[1].style().getFont(), 'VT323');
+        } finally {
+            setTheme();
+        }
+    });
+
     it('keeps a lone backtick as text', () => {
         assert.strictEqual(contentOf(BuildMarkdown('a ` b')[0]), 'a ` b');
     });

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