@elicdavis/node-flow 0.1.17 → 0.1.18

package/package.json

@@ -2,7 +2,7 @@
   "name": "@elicdavis/node-flow",
   "description": "build node graphs",
   "author": "Eli C Davis",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "license": "MIT",
   "keywords": [
     "nodes",

package/src/node.ts

@@ -1334,6 +1334,9 @@ export class FlowNode {
 
         project(this.#portOffsets.input, this.#inputPortPositions);
         project(this.#portOffsets.output, this.#outputPortPositions);
+
+        this.#widgetPositions.Clear();
+
         return true;
     }
 }

package/src/nodes/subsystem.ts

@@ -448,7 +448,9 @@ export class NodeSubsystem {
         }
 
         if (this.#widgetCurrentlyClicking !== null) {
-            this.#widgetCurrentlyClicking.ClickEnd();
+            if (this.#widgetHovering === this.#widgetCurrentlyClicking) {
+                this.#widgetCurrentlyClicking.ClickEnd();
+            }
             this.#widgetCurrentlyClicking = null;
         }
 

package/src/popup.ts

@@ -25,6 +25,8 @@ export class Popup {
 
     #popup: HTMLDivElement | null;
 
+    #keyHandler: ((e: KeyboardEvent) => void) | null;
+
     constructor(config: PopupConfig) {
         this.#title = config.title;
         this.#options = config.options;
@@ -32,16 +34,28 @@ export class Popup {
         this.#onClose = config.onClose;
         this.#buttonCSS = config.buttonCSS === undefined ? "flex-grow: 1; margin-right: 8px;" : config.buttonCSS;
         this.#popup = null;
+        this.#keyHandler = null;
     }
 
     Hide(): void {
         if (this.#popup === null) {
             return;
         }
+        if (this.#keyHandler !== null) {
+            document.removeEventListener("keydown", this.#keyHandler, true);
+            this.#keyHandler = null;
+        }
         document.body.removeChild(this.#popup);
         this.#popup = null;
     }
 
+    #close(option: string | null): void {
+        this.Hide();
+        if (this.#onClose !== undefined) {
+            this.#onClose(option);
+        }
+    }
+
     Show(): void {
         this.#popup = document.createElement('div');
         this.#popup.style.cssText = 'position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:#00000070;';
@@ -68,14 +82,21 @@ export class Popup {
             const button = document.createElement("button");
             button.style.cssText = this.#buttonCSS;
             button.textContent = this.#options[i];
-            button.onclick = () => {
-                this.Hide();
-                if (this.#onClose !== undefined) {
-                    this.#onClose(this.#options[i]);
-                }
-            };
+            button.onclick = () => this.#close(this.#options[i]);
             buttonContainer.appendChild(button);
         }
+
+        this.#keyHandler = (e: KeyboardEvent): void => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                this.#close(this.#options.length > 0 ? this.#options[0] : null);
+            } else if (e.key === "Escape") {
+                e.preventDefault();
+                this.#close(null);
+            }
+            e.stopPropagation();
+        };
+        document.addEventListener("keydown", this.#keyHandler, true);
     }
 
 } 

package/src/theme.ts

@@ -60,7 +60,7 @@ export const Theme = {
         DisabledFontColor: "#4a585c",
     },
     Minimap: {
-        BackgroundColor: "rgba(7, 33, 42, 0.85)",
+        BackgroundColor: "rgba(10, 16, 18, 0.85)",
         BorderColor: "#1c1c1c",
         BorderRadius: 4,
         Padding: 6,

package/src/widgets/number.ts

@@ -62,9 +62,10 @@ export class NumberWidget {
             },
             text: { color: Theme.Widget.FontColor },
         }));
-        this.#callback = config?.callback;
         this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
 
+        this.#callback = config?.callback;
+
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
                 this.Set(newVal);

package/src/widgets/string.ts

@@ -60,8 +60,10 @@ export class StringWidget {
             text: { color: Theme.Widget.FontColor },
         }));
 
-        this.#callback = config?.callback;
         this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, ""));
+
+        this.#callback = config?.callback;
+
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
                 this.Set(newVal);

package/src/widgets/toggle.ts

@@ -159,8 +159,10 @@ export class ToggleWidget {
             lightColor: config?.disabledStyle?.lightColor === undefined ? "#004400" : config?.enabledStyle?.lightColor,
         });
 
-        this.#callback = config?.callback;
         this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, false));
+
+        this.#callback = config?.callback;
+
         if (this.#nodeProperty !== undefined) {
             this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
                 this.Set(newVal);

package/test/popup.test.ts

@@ -0,0 +1,104 @@
+import { strict as assert } from 'assert';
+import { Popup } from '../src/popup';
+
+interface StubElement {
+    tagName: string;
+    style: { cssText: string };
+    textContent: string;
+    children: Array<StubElement>;
+    onclick?: () => void;
+    appendChild(child: StubElement): StubElement;
+    append(child: StubElement): void;
+    removeChild(child: StubElement): void;
+}
+
+function element(tagName: string): StubElement {
+    return {
+        tagName,
+        style: { cssText: '' },
+        textContent: '',
+        children: [],
+        appendChild(child) { this.children.push(child); return child; },
+        append(child) { this.children.push(child); },
+        removeChild(child) { this.children = this.children.filter((c) => c !== child); },
+    };
+}
+
+function withDocument(run: (fire: (key: string) => void, body: StubElement) => void): void {
+    const listeners: Array<(e: unknown) => void> = [];
+    const body = element('body');
+
+    const g = globalThis as any;
+    const previous = g.document;
+    g.document = {
+        body,
+        createElement: element,
+        addEventListener: (_: string, fn: (e: unknown) => void) => listeners.push(fn),
+        removeEventListener: (_: string, fn: (e: unknown) => void) => {
+            const at = listeners.indexOf(fn);
+            if (at >= 0) listeners.splice(at, 1);
+        },
+    };
+
+    const fire = (key: string) => {
+        const event = { key, preventDefault() {}, stopPropagation() {} };
+        [...listeners].forEach((fn) => fn(event));
+    };
+
+    try {
+        run(fire, body);
+    } finally {
+        g.document = previous;
+    }
+}
+
+describe('popup', () => {
+    it('confirms with the first option when enter is pressed', () => {
+        withDocument((fire) => {
+            let closedWith: string | null | undefined;
+            new Popup({
+                title: 'Set Number',
+                options: ['Set', 'Cancel'],
+                onClose: (button) => { closedWith = button; },
+            }).Show();
+
+            fire('Enter');
+
+            assert.equal(closedWith, 'Set', 'enter has to commit, not discard what was typed');
+        });
+    });
+
+    it('cancels when escape is pressed', () => {
+        withDocument((fire) => {
+            let called = false;
+            let closedWith: string | null | undefined;
+            new Popup({
+                title: 'Set Number',
+                options: ['Set', 'Cancel'],
+                onClose: (button) => { called = true; closedWith = button; },
+            }).Show();
+
+            fire('Escape');
+
+            assert.equal(called, true);
+            assert.equal(closedWith, null);
+        });
+    });
+
+    it('stops listening once it has closed', () => {
+        withDocument((fire, body) => {
+            let closes = 0;
+            new Popup({
+                title: 'Set Number',
+                options: ['Set'],
+                onClose: () => { closes++; },
+            }).Show();
+
+            fire('Enter');
+            fire('Enter');
+
+            assert.equal(closes, 1);
+            assert.equal(body.children.length, 0, 'and takes itself off the page');
+        });
+    });
+});

package/test/widget_click.test.ts

@@ -0,0 +1,126 @@
+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;
+}
+
+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 };
+        },
+    };
+}
+
+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);
+
+    const camera = new Camera();
+    const ctx = stubCtx();
+    return { graph, camera, ctx, rec };
+}
+
+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();
+
+        graph.render(ctx, camera, on);
+        graph.clickStart(on, camera, false);
+        graph.render(ctx, camera, on);
+        graph.clickEnd();
+
+        assert.equal(rec.clicks(), 1);
+    });
+
+    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();
+
+        graph.render(ctx, camera, on);
+        graph.clickStart(on, camera, false);
+        graph.render(ctx, camera, { x: on.x + 400, y: on.y + 300 });
+        graph.clickEnd();
+
+        assert.equal(rec.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();
+
+        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',
+        );
+
+        graph.clickStart(on, camera, false);
+        graph.clickEnd();
+
+        assert.equal(rec.clicks(), 0);
+    });
+});

package/test/widget_construction.test.ts

@@ -0,0 +1,48 @@
+import { strict as assert } from 'assert';
+import { NumberWidget } from '../src/widgets/number';
+import { StringWidget } from '../src/widgets/string';
+import { ToggleWidget } from '../src/widgets/toggle';
+import { SliderWidget } from '../src/widgets/slider';
+import { FlowNode } from '../src/node';
+
+function stubNode(): FlowNode {
+    const properties = new Map<string, unknown>();
+    return {
+        getProperty: (name: string) => properties.get(name),
+        setProperty: (name: string, value: unknown) => { properties.set(name, value); },
+        addPropertyChangeListener: () => { },
+    } as unknown as FlowNode;
+}
+
+describe('widget construction', () => {
+    it('does not fire a number callback for its initial value', () => {
+        let fired = 0;
+        new NumberWidget(stubNode(), { value: 42, callback: () => { fired++; } });
+        assert.equal(fired, 0);
+    });
+
+    it('does not fire a string callback for its initial value', () => {
+        let fired = 0;
+        new StringWidget(stubNode(), { value: 'hello', callback: () => { fired++; } });
+        assert.equal(fired, 0);
+    });
+
+    it('does not fire a toggle callback for its initial value', () => {
+        let fired = 0;
+        new ToggleWidget(stubNode(), { value: true, callback: () => { fired++; } });
+        assert.equal(fired, 0);
+    });
+
+    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++; } });
+        assert.equal(fired, 0);
+    });
+
+    it('still fires the number callback on a real change', () => {
+        const values: Array<number> = [];
+        const widget = new NumberWidget(stubNode(), { value: 42, callback: (v) => { values.push(v); } });
+        widget.Set(43);
+        assert.deepEqual(values, [43]);
+    });
+});