@elicdavis/node-flow 0.1.14 → 0.1.16

package/src/styles/text.ts

@@ -65,6 +65,14 @@ export class TextStyle {
         return this.#font;
     }
 
+    getWeight(): FontWeight {
+        return this.#weight;
+    }
+
+    getStyle(): FontStyle {
+        return this.#fontStyle;
+    }
+
     measure(ctx: CanvasRenderingContext2D, scale: number, text: string, out: Vector2): void {
         this.setupStyle(ctx, scale);
         const measurements = ctx.measureText(text)

package/src/types/text.ts

@@ -32,10 +32,12 @@ export class Text {
         this.#lineSpacing = config?.LineSpacing ? config?.LineSpacing : 5;
         this.#textToRender = [value];
 
-        if (!document.fonts.check(`16px "${this.#style.getFont()}"`)) {
-            document.fonts.addEventListener("loadingdone", (event) => {
-                this.#measured = false;
-            });
+        if (typeof document !== "undefined" && document.fonts !== undefined) {
+            if (!document.fonts.check(`16px "${this.#style.getFont()}"`)) {
+                document.fonts.addEventListener("loadingdone", () => {
+                    this.#measured = false;
+                });
+            }
         }
     }
 

package/src/utils/string.ts

@@ -1,4 +1,10 @@
-const binarySearch = ({ max, getValue, match }) => {
+interface BinarySearch {
+    max: number;
+    getValue: (guess: number) => number;
+    match: number;
+}
+
+const binarySearch = ({ max, getValue, match }: BinarySearch): number => {
     let min = 0;
 
     while (min <= max) {

package/src/widgets/color.ts

@@ -2,7 +2,7 @@ import { HexToColor } from "../utils/color";
 import { TextStyleConfig } from "../styles/text";
 import { Box } from "../types/box";
 import { CopyVector2, Vector2 } from "../types/vector2";
-import { height, width } from "./widget";
+import { height, startingWidgetValue, width } from "./widget";
 import { Popup } from "../popup";
 import { TextBoxStyle } from '../styles/textBox';
 import { Theme } from "../theme";
@@ -46,12 +46,12 @@ export class ColorWidget {
     #callback?: (newColor: string) => void;
 
     constructor(node: FlowNode, config?: ColorWidgetConfig) {
-        this.#value = "#000000"
-        this.#contrast = contrastColor(this.#value);
-        this.Set(config?.value === undefined ? "#000000" : config?.value);
-        
         this.#node = node;
         this.#nodeProperty = config?.property;
+        this.#callback = config?.callback;
+
+        this.#value = startingWidgetValue(node, this.#nodeProperty, config?.value, "#000000");
+        this.#contrast = contrastColor(this.#value);
         this.#textBoxStyle = new TextBoxStyle({
             box: {
                 color: this.#value,
@@ -62,7 +62,6 @@ export class ColorWidget {
             },
             text: config?.textStyle
         });
-        this.#callback = config?.callback;
 
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {

package/src/widgets/factory.ts

@@ -11,7 +11,7 @@ import { TextWidget, TextWidgetConfig } from "./text";
 
 export type WidgetBuilder = (node: FlowNode, confg?: any) => Widget;
 
-class WidgetFactory {
+export class WidgetFactory {
 
     #registeredWidgets: Map<string, WidgetBuilder>
 

package/src/widgets/number.ts

@@ -3,7 +3,7 @@ import { Popup } from "../popup";
 import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
 import { Box, InBox } from '../types/box';
 import { CopyVector2, Vector2 } from "../types/vector2";
-import { height, width } from "./widget";
+import { height, startingWidgetValue, width } from "./widget";
 import { FlowNode } from "../node";
 
 export interface NumberWidgetConfig {
@@ -62,8 +62,8 @@ export class NumberWidget {
             },
             text: { color: Theme.Widget.FontColor },
         }));
-        this.Set(config?.value === undefined ? 0 : config?.value);
         this.#callback = config?.callback;
+        this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
 
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {

package/src/widgets/slider.ts

@@ -4,7 +4,7 @@ import { TextStyle, TextStyleConfig, TextStyleFallback } from "../styles/text";
 import { Box } from '../types/box';
 import { CopyVector2, Vector2, Zero } from "../types/vector2";
 import { Clamp, Clamp01 } from "../utils/math";
-import { height, width } from "./widget";
+import { height, startingWidgetValue, width } from "./widget";
 import { TextBaseline } from "../styles/canvasTextBaseline";
 import { FlowNode } from "../node";
 
@@ -104,7 +104,7 @@ export class SliderWidget {
             });
         }
 
-        this.SetValue(config?.value === undefined ? 0 : config?.value);
+        this.SetValue(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
 
         // Setup change callback after we set the initial value to prevent the callback from being 
         this.#change = config?.change;

package/src/widgets/string.ts

@@ -3,7 +3,7 @@ import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../s
 import { Box, InBox } from "../types/box";
 import { CopyVector2, Vector2 } from "../types/vector2";
 import { fitString } from "../utils/string";
-import { height, width } from "./widget";
+import { height, startingWidgetValue, width } from "./widget";
 import { FlowNode } from '../node';
 import { SetStringPopup } from "../popups/string";
 
@@ -60,8 +60,8 @@ export class StringWidget {
             text: { color: Theme.Widget.FontColor },
         }));
 
-        this.Set(config?.value === undefined ? "" : config?.value);
         this.#callback = config?.callback;
+        this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, ""));
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
                 this.Set(newVal);

package/src/widgets/toggle.ts

@@ -1,7 +1,7 @@
 import { Theme } from "../theme";
 import { Box, InBox } from "../types/box";
 import { CopyVector2, Vector2 } from "../types/vector2";
-import { height, width } from "./widget";
+import { height, startingWidgetValue, width } from "./widget";
 import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
 import { FlowNode } from "../node";
 
@@ -159,8 +159,8 @@ export class ToggleWidget {
             lightColor: config?.disabledStyle?.lightColor === undefined ? "#004400" : config?.enabledStyle?.lightColor,
         });
 
-        this.Set(config?.value === undefined ? false : config?.value);
         this.#callback = config?.callback;
+        this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, false));
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
                 this.Set(newVal);

package/src/widgets/widget.ts

@@ -9,4 +9,26 @@ export interface Widget {
     Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box
     ClickStart(): void
     ClickEnd(): void
+}
+
+interface PropertyReader {
+    getProperty(name: string): any;
+}
+
+export function startingWidgetValue<T>(
+    node: PropertyReader,
+    property: string | undefined,
+    configured: T | undefined,
+    fallback: T,
+): T {
+    if (configured !== undefined) {
+        return configured;
+    }
+    if (property !== undefined && property !== null) {
+        const existing = node.getProperty(property);
+        if (existing !== undefined && existing !== null) {
+            return existing as T;
+        }
+    }
+    return fallback;
 }

package/test/markdown.test.ts

@@ -0,0 +1,165 @@
+import * as assert from 'assert';
+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';
+
+/** The runs of text in an entry, as [content, weight, style] triples. */
+function runs(entry: any): Array<[string, FontWeight, FontStyle]> {
+    let lines: ReadonlyArray<Text>;
+    if (entry.entries) {
+        lines = entry.entries().flatMap((item: any) => item.lines());
+    } else if (entry.lines) {
+        lines = entry.lines();
+    } else {
+        lines = [entry.text()];
+    }
+    return lines.map(line => [
+        line.get(),
+        line.style().getWeight(),
+        line.style().getStyle(),
+    ] as [string, FontWeight, FontStyle]);
+}
+
+function contentOf(entry: any): string {
+    return runs(entry).map(r => r[0]).join('');
+}
+
+describe('markdown: paragraphs and headers', () => {
+    it('reads a plain line', () => {
+        const entries = BuildMarkdown('hello world');
+        assert.strictEqual(entries.length, 1);
+        assert.strictEqual(contentOf(entries[0]), 'hello world');
+    });
+
+    it('reads each header level', () => {
+        const entries = BuildMarkdown('# one\n## two\n### three');
+        assert.strictEqual(entries.length, 3);
+        assert.strictEqual(contentOf(entries[0]), 'one');
+        assert.strictEqual(contentOf(entries[1]), 'two');
+        assert.strictEqual(contentOf(entries[2]), 'three');
+    });
+
+    it('keeps a # that is not at the start of a line as text', () => {
+        const entries = BuildMarkdown('issue #42 filed');
+        assert.strictEqual(contentOf(entries[0]), 'issue #42 filed');
+    });
+});
+
+describe('markdown: emphasis', () => {
+    it('italicises a single-starred run', () => {
+        const entries = BuildMarkdown('*hello*');
+        assert.deepStrictEqual(runs(entries[0]), [['hello', FontWeight.Normal, FontStyle.Italic]]);
+    });
+
+    it('bolds a double-starred run', () => {
+        const entries = BuildMarkdown('**hello**');
+        assert.deepStrictEqual(runs(entries[0]), [['hello', FontWeight.Bold, FontStyle.Normal]]);
+    });
+
+    it('emphasises a run in the middle of a line', () => {
+        const entries = BuildMarkdown('a *b* c');
+        assert.deepStrictEqual(runs(entries[0]), [
+            ['a ', FontWeight.Normal, FontStyle.Normal],
+            ['b', FontWeight.Normal, FontStyle.Italic],
+            [' c', FontWeight.Normal, FontStyle.Normal],
+        ]);
+    });
+
+    it('leaves a star surrounded by spaces alone', () => {
+        const entries = BuildMarkdown('2 * 3 * 4');
+        assert.strictEqual(contentOf(entries[0]), '2 * 3 * 4');
+    });
+
+    it('keeps stars that never matched as text', () => {
+        assert.strictEqual(contentOf(BuildMarkdown('*unclosed')[0]), '*unclosed');
+        assert.strictEqual(contentOf(BuildMarkdown('a * b')[0]), 'a * b');
+    });
+
+    it('keeps the stars left over when the runs are uneven', () => {
+        // Two opened, one closed: the extra opener is just a character.
+        assert.deepStrictEqual(runs(BuildMarkdown('**a*')[0]), [
+            ['*', FontWeight.Normal, FontStyle.Normal],
+            ['a', FontWeight.Normal, FontStyle.Italic],
+        ]);
+        assert.deepStrictEqual(runs(BuildMarkdown('*a**')[0]), [
+            ['a', FontWeight.Normal, FontStyle.Italic],
+            ['*', FontWeight.Normal, FontStyle.Normal],
+        ]);
+    });
+
+    it('does not emphasise across a space held against the stars', () => {
+        assert.strictEqual(contentOf(BuildMarkdown('** a **')[0]), '** a **');
+        assert.strictEqual(contentOf(BuildMarkdown('**a **')[0]), '**a **');
+    });
+
+    it('emphasises a run holding a space in the middle', () => {
+        assert.deepStrictEqual(runs(BuildMarkdown('**a f**')[0]), [
+            ['a f', FontWeight.Bold, FontStyle.Normal],
+        ]);
+    });
+
+    it('never produces an empty run', () => {
+        for (const source of ['*a*', '**a**', '*a**', '**a*', '* a *', 'a `b` c']) {
+            for (const [content] of runs(BuildMarkdown(source)[0])) {
+                assert.notStrictEqual(content, '', `${source} produced an empty run`);
+            }
+        }
+    });
+
+    it('emphasises more than one run on a line', () => {
+        const entries = BuildMarkdown('*a* and *b*');
+        assert.deepStrictEqual(runs(entries[0]), [
+            ['a', FontWeight.Normal, FontStyle.Italic],
+            [' and ', FontWeight.Normal, FontStyle.Normal],
+            ['b', FontWeight.Normal, FontStyle.Italic],
+        ]);
+    });
+});
+
+describe('markdown: lists', () => {
+    it('collects consecutive star lines into one list', () => {
+        const entries = BuildMarkdown('* one\n* two\n* three');
+        assert.strictEqual(entries.length, 1);
+        assert.ok(entries[0] instanceof UnorderedListMarkdownEntry);
+        assert.strictEqual((entries[0] as any).entries().length, 3);
+    });
+
+    it('ends the list at the first line that is not one', () => {
+        const entries = BuildMarkdown('* one\n* two\nafter');
+        assert.strictEqual(entries.length, 2);
+        assert.ok(entries[0] instanceof UnorderedListMarkdownEntry);
+        assert.strictEqual(contentOf(entries[1]), 'after');
+    });
+});
+
+describe('markdown: code', () => {
+    it('sets inline code apart without keeping the backticks', () => {
+        const entry = BuildMarkdown('a `b` c')[0] as any;
+        assert.deepStrictEqual(runs(entry).map(r => r[0]), ['a ', 'b', ' c']);
+        assert.strictEqual(entry.lines()[1].style().getFont(), 'monospace');
+        assert.notStrictEqual(entry.lines()[0].style().getFont(), 'monospace');
+    });
+
+    it('keeps a lone backtick as text', () => {
+        assert.strictEqual(contentOf(BuildMarkdown('a ` b')[0]), 'a ` b');
+    });
+
+    it('keeps a fenced block verbatim', () => {
+        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');
+    });
+
+    it('keeps more than one line of a fenced block', () => {
+        const entries = BuildMarkdown('```\none\ntwo\n```');
+        assert.strictEqual(contentOf(entries[0]), 'one\ntwo\n');
+    });
+
+    it('carries on after a fenced block', () => {
+        const entries = BuildMarkdown('```\ncode\n```\nafter');
+        assert.strictEqual(entries.length, 2);
+        assert.strictEqual(contentOf(entries[1]), 'after');
+    });
+});

package/test/organize.test.ts

@@ -0,0 +1,156 @@
+import * as assert from 'assert';
+import { assignLayers, orderWithinLayers, topologicalOrder } from '../src/organize';
+
+/** Builds the upstream/downstream maps Organize works from. */
+function graph(edges: Array<[number, number]>, nodes: Array<number>) {
+    const upstream = new Map<number, Array<number>>();
+    const downstream = new Map<number, Array<number>>();
+    for (const node of nodes) {
+        upstream.set(node, []);
+        downstream.set(node, []);
+    }
+    for (const [from, to] of edges) {
+        (upstream.get(to) as Array<number>).push(from);
+        (downstream.get(from) as Array<number>).push(to);
+    }
+    return { upstream, downstream, nodes };
+}
+
+describe('assignLayers', () => {
+    it('puts a chain in one node per layer, in order', () => {
+        const { upstream } = graph([[0, 1], [1, 2], [2, 3]], [0, 1, 2, 3]);
+        const layout = assignLayers([0, 1, 2, 3], upstream);
+
+        assert.deepStrictEqual(layout.layers, [[0], [1], [2], [3]]);
+    });
+
+    it('puts a node to the right of the furthest thing feeding it, not the nearest', () => {
+        // 0 feeds both 1 and a longer path 2 -> 3, and 4 consumes 1 and 3.
+        // Taking the nearest feeder would put 4 beside 3 instead of after it.
+        const { upstream } = graph([[0, 1], [0, 2], [2, 3], [1, 4], [3, 4]], [0, 1, 2, 3, 4]);
+        const layout = assignLayers([0, 1, 2, 3, 4], upstream);
+
+        assert.strictEqual(layout.layerOf.get(0), 0);
+        assert.strictEqual(layout.layerOf.get(3), 2);
+        assert.strictEqual(layout.layerOf.get(4), 3, 'the join waits for the long branch');
+    });
+
+    it('never puts a node left of something it consumes', () => {
+        const edges: Array<[number, number]> = [[0, 2], [1, 2], [2, 3], [1, 3], [3, 4], [0, 4]];
+        const { upstream } = graph(edges, [0, 1, 2, 3, 4]);
+        const layout = assignLayers([0, 1, 2, 3, 4], upstream);
+
+        for (const [from, to] of edges) {
+            assert.ok(
+                (layout.layerOf.get(from) as number) < (layout.layerOf.get(to) as number),
+                `${from} -> ${to} points backwards`,
+            );
+        }
+    });
+
+    it('terminates on a cycle instead of hanging', () => {
+        const { upstream } = graph([[0, 1], [1, 2], [2, 0], [2, 3]], [0, 1, 2, 3]);
+        const layout = assignLayers([0, 1, 2, 3], upstream);
+
+        assert.strictEqual(layout.layerOf.size, 4);
+        // The cycle is spread across layers rather than collapsed into one.
+        assert.ok(layout.layers.length > 1);
+    });
+
+    it('starts every disconnected node at the first layer', () => {
+        const { upstream } = graph([], [0, 1, 2]);
+        const layout = assignLayers([0, 1, 2], upstream);
+
+        assert.deepStrictEqual(layout.layers.length, 1);
+        assert.deepStrictEqual(layout.layers[0].sort(), [0, 1, 2]);
+    });
+
+    it('handles a graph deep enough to overflow a recursive walk', () => {
+        const edges: Array<[number, number]> = [];
+        const nodes: Array<number> = [];
+        for (let i = 0; i < 20000; i++) {
+            nodes.push(i);
+            if (i > 0) {
+                edges.push([i - 1, i]);
+            }
+        }
+        const { upstream } = graph(edges, nodes);
+        const layout = assignLayers(nodes, upstream);
+
+        assert.strictEqual(layout.layers.length, 20000);
+    });
+});
+
+describe('orderWithinLayers', () => {
+    /** Counts pairs of edges between two layers that cross each other. */
+    function crossings(layout: ReturnType<typeof assignLayers>, edges: Array<[number, number]>): number {
+        const slot = new Map<number, number>();
+        for (const layer of layout.layers) {
+            layer.forEach((node, index) => slot.set(node, index));
+        }
+
+        let total = 0;
+        for (let i = 0; i < edges.length; i++) {
+            for (let j = i + 1; j < edges.length; j++) {
+                const [a1, a2] = edges[i];
+                const [b1, b2] = edges[j];
+                if (layout.layerOf.get(a1) !== layout.layerOf.get(b1)) {
+                    continue;
+                }
+                if (layout.layerOf.get(a2) !== layout.layerOf.get(b2)) {
+                    continue;
+                }
+                const left = (slot.get(a1) as number) - (slot.get(b1) as number);
+                const right = (slot.get(a2) as number) - (slot.get(b2) as number);
+                if (left * right < 0) {
+                    total++;
+                }
+            }
+        }
+        return total;
+    }
+
+    it('untangles edges that start out crossed', () => {
+        // Three sources feeding three sinks in reverse order: laid out in
+        // declaration order every edge crosses every other.
+        const edges: Array<[number, number]> = [[0, 5], [1, 4], [2, 3]];
+        const nodes = [0, 1, 2, 3, 4, 5];
+        const { upstream, downstream } = graph(edges, nodes);
+
+        const layout = assignLayers(nodes, upstream);
+        const before = crossings(layout, edges);
+        orderWithinLayers(layout, upstream, downstream);
+        const after = crossings(layout, edges);
+
+        assert.ok(before > 0, 'the fixture should start tangled');
+        assert.strictEqual(after, 0, `expected no crossings, got ${after}`);
+    });
+
+    it('keeps every node exactly once', () => {
+        const nodes = [0, 1, 2, 3, 4, 5];
+        const { upstream, downstream } = graph([[0, 3], [1, 3], [2, 4], [3, 5], [4, 5]], nodes);
+
+        const layout = assignLayers(nodes, upstream);
+        orderWithinLayers(layout, upstream, downstream);
+
+        const seen = layout.layers.flat().sort((a, b) => a - b);
+        assert.deepStrictEqual(seen, nodes);
+    });
+});
+
+describe('topologicalOrder', () => {
+    it('lists every node once', () => {
+        const { upstream } = graph([[0, 1], [1, 2], [0, 2]], [0, 1, 2]);
+        const order = topologicalOrder([0, 1, 2], upstream);
+
+        assert.deepStrictEqual(order.slice().sort(), [0, 1, 2]);
+    });
+
+    it('puts feeders before the nodes that consume them', () => {
+        const { upstream } = graph([[0, 1], [1, 2]], [0, 1, 2]);
+        const order = topologicalOrder([0, 1, 2], upstream);
+
+        assert.ok(order.indexOf(0) < order.indexOf(1));
+        assert.ok(order.indexOf(1) < order.indexOf(2));
+    });
+});

package/test/port.test.ts

@@ -0,0 +1,125 @@
+import * as assert from 'assert';
+import { Port, PortConfig, PortType, portsCompatible } from '../src/port';
+import { FlowNode } from '../src/node';
+
+function port(config: PortConfig): Port {
+    // A port only reaches back to its node when it is drawn or connected,
+    // neither of which the type rules touch.
+    return new Port(undefined as unknown as FlowNode, PortType.Output, config);
+}
+
+describe('portsCompatible', () => {
+    it('joins two ports declaring the same type', () => {
+        assert.ok(portsCompatible(port({ type: 'mesh' }), port({ type: 'mesh' })));
+    });
+
+    it('refuses two ports declaring different types', () => {
+        assert.ok(!portsCompatible(port({ type: 'mesh' }), port({ type: 'float64' })));
+    });
+
+    it('joins an any-type port to anything, from either side', () => {
+        const anything = port({ type: 'T', anyType: true });
+        assert.ok(portsCompatible(anything, port({ type: 'mesh' })));
+        assert.ok(portsCompatible(port({ type: 'mesh' }), anything));
+    });
+
+    it('joins two any-type ports', () => {
+        assert.ok(portsCompatible(
+            port({ type: 'T', anyType: true }),
+            port({ type: '[]T', anyType: true }),
+        ));
+    });
+
+    it('still refuses a port that is missing', () => {
+        assert.ok(!portsCompatible(port({ type: 'T', anyType: true }), undefined));
+        assert.ok(!portsCompatible(null, port({ type: 'mesh' })));
+    });
+
+    it('does not treat an untyped port as accepting anything', () => {
+        assert.ok(!portsCompatible(port({}), port({ type: 'mesh' })));
+    });
+
+    it('shows a type of its own before falling back to "any"', () => {
+        assert.strictEqual(port({ type: 'T', anyType: true }).getDataType(), 'T');
+        assert.ok(port({ type: 'T', anyType: true }).acceptsAnyType());
+        assert.ok(!port({ type: 'T' }).acceptsAnyType());
+    });
+});
+
+describe('a port that takes more than one type', () => {
+    it('joins a port declaring either of them', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+
+        assert.ok(portsCompatible(lifted, port({ type: 'float64' })));
+        assert.ok(portsCompatible(lifted, port({ type: '[]float64' })));
+    });
+
+    it('refuses a type outside its set', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+
+        assert.ok(!portsCompatible(lifted, port({ type: 'string' })),
+            'this is the whole point: the drag is refused rather than accepted then errored');
+    });
+
+    it('joins another multi-type port when the sets overlap', () => {
+        const a = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        const b = port({ type: 'int', acceptedTypes: ['int', '[]float64'] });
+        const c = port({ type: 'int', acceptedTypes: ['int', '[]int'] });
+
+        assert.ok(portsCompatible(a, b));
+        assert.ok(!portsCompatible(a, c));
+    });
+
+    it('still lets an any-type port through', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        assert.ok(portsCompatible(lifted, port({ type: 'T', anyType: true })));
+    });
+
+    it('narrows to one type once it settles', () => {
+        const lifted = port({ type: 'float64', acceptedTypes: ['float64', '[]float64'] });
+        lifted.settleOn('[]float64');
+
+        assert.strictEqual(lifted.getDataType(), '[]float64');
+        assert.deepStrictEqual(lifted.acceptedTypes(), ['[]float64']);
+        assert.ok(portsCompatible(lifted, port({ type: '[]float64' })));
+        assert.ok(!portsCompatible(lifted, port({ type: 'float64' })));
+    });
+});
+
+describe('settling a port on a type', () => {
+    it('enforces the new type once it stops accepting anything', () => {
+        const settled = port({ type: 'T', anyType: true });
+        settled.setDataType('mesh');
+        settled.setAnyType(false);
+
+        assert.strictEqual(settled.getDataType(), 'mesh');
+        assert.ok(portsCompatible(settled, port({ type: 'mesh' })));
+        assert.ok(!portsCompatible(settled, port({ type: 'float64' })),
+            'the whole point: a settled port refuses the drag the Go side would reject');
+    });
+
+    it('recolors a port whose fill came from its type', () => {
+        const settled = port({ type: 'T', anyType: true });
+        const before = settled.filledStyleColor();
+        settled.setDataType('mesh');
+
+        assert.notStrictEqual(settled.filledStyleColor(), before);
+        assert.strictEqual(settled.filledStyleColor(), port({ type: 'mesh' }).filledStyleColor(),
+            'and lands on the same color a port declaring that type gets');
+    });
+
+    it('leaves a fill the caller picked alone', () => {
+        const settled = port({ type: 'T', anyType: true, filledStyle: { fillColor: '#abcdef' } });
+        settled.setDataType('mesh');
+
+        assert.strictEqual(settled.filledStyleColor(), '#abcdef');
+    });
+
+    it('can be handed back to accepting anything', () => {
+        const settled = port({ type: 'T', anyType: true });
+        settled.setAnyType(false);
+        settled.setAnyType(true);
+
+        assert.ok(portsCompatible(settled, port({ type: 'float64' })));
+    });
+});

package/tsconfig.json

@@ -4,10 +4,14 @@
         "sourceMap": true, // Generate source maps (optional)
         "strict": true, // Enable strict type checking (optional)
         "outDir": "./dist/js",
-        "target": "ES2015",
+        // The source already uses #private class fields, which are ES2022,
+        // and the bundlers emit esnext. ES2015 only made tsc downlevel
+        // those fields to WeakMaps in an output nothing ships.
+        "target": "ES2022",
     },
     "include": [
-        "src/**/*.ts"
+        "src/**/*.ts",
+        "test/**/*.ts"
     ],
     "exclude": [
         "node_modules"