@elicdavis/node-flow 0.2.0 → 0.2.2

package/test/hidden_ports_toggle.test.ts

@@ -0,0 +1,102 @@
+import { strict as assert } from 'assert';
+import { NodeSubsystem } from '../src/nodes/subsystem';
+import { PassSubsystem } from '../src/pass/subsystem';
+import { FlowNode, NodeIntersection } from '../src/node';
+import { Camera } from '../src/camera';
+import { stubCtx } from './support';
+
+function scene(inputs: Array<{ name: string, type: string, hidden?: boolean }>) {
+    const graph = new NodeSubsystem(new PassSubsystem());
+    const node = new FlowNode({
+        title: 'material',
+        position: { x: 100, y: 100 },
+        inputs,
+        outputs: [{ name: 'Out', type: 'material' }],
+    });
+    graph.addNode(node);
+    return { graph, node, camera: new Camera(), ctx: stubCtx() };
+}
+
+const material = [
+    { name: 'Color', type: 'color' },
+    { name: 'Sheen', type: 'sheen', hidden: true },
+    { name: 'Clearcoat', type: 'clearcoat', hidden: true },
+];
+
+function findWidget(s: ReturnType<typeof scene>): NodeIntersection | undefined {
+    s.graph.render(s.ctx, s.camera, undefined);
+    const bounds = s.node.calculateBounds(s.ctx, s.camera);
+    for (let y = bounds.Position.y; y < bounds.Position.y + bounds.Size.y; y++) {
+        const hit = s.node.inBounds(s.ctx, s.camera, { x: bounds.Position.x + bounds.Size.x / 2, y });
+        if (hit.Widget !== undefined) {
+            return hit;
+        }
+    }
+    return undefined;
+}
+
+function click(hit: NodeIntersection) {
+    const pointer = { position: { x: 0, y: 0 }, inside: true } as any;
+    hit.Widget!.PointerDown!(pointer);
+    hit.Widget!.PointerUp!(pointer);
+}
+
+describe('a node with hidden ports', () => {
+    it('draws a row that shows them', () => {
+        const s = scene(material);
+        const toggle = findWidget(s);
+        assert.ok(toggle, 'no toggle row to click');
+
+        click(toggle);
+
+        assert.equal(s.node.inputPort(1).hidden(), false);
+        assert.equal(s.node.inputPort(2).hidden(), false);
+    });
+
+    it('hides them again on a second click', () => {
+        const s = scene(material);
+        click(findWidget(s)!);
+        click(findWidget(s)!);
+
+        assert.equal(s.node.inputPort(1).hidden(), true);
+        assert.equal(s.node.inputPort(2).hidden(), true);
+    });
+
+    it('grows when they are shown', () => {
+        const s = scene(material);
+        const collapsed = s.node.calculateBounds(s.ctx, s.camera).Size.y;
+
+        s.node.setHiddenPortsShown(true);
+
+        assert.ok(s.node.calculateBounds(s.ctx, s.camera).Size.y > collapsed);
+    });
+
+    it('asks for a fresh layout when they are shown', () => {
+        const s = scene(material);
+        s.graph.render(s.ctx, s.camera, undefined);
+
+        s.node.setHiddenPortsShown(true);
+
+        assert.ok(!s.node.hasBeenLaidOut());
+    });
+
+    it('does not take the place of its own widgets', () => {
+        const s = scene(material);
+        assert.equal(s.node.widgetCount(), 0);
+        assert.equal(findWidget(s)!.WidgetIndex, undefined);
+    });
+
+    it('has no row when nothing is hidden', () => {
+        assert.equal(findWidget(scene([{ name: 'Color', type: 'color' }])), undefined);
+    });
+
+    it('has no row once every hidden port is wired', () => {
+        const s = scene([{ name: 'Color', type: 'color' }, { name: 'Sheen', type: 'sheen', hidden: true }]);
+        const source = new FlowNode({ title: 'sheen', outputs: [{ name: 'Out', type: 'sheen' }] });
+        s.graph.addNode(source);
+
+        s.graph.connectNodes(source, 0, s.node, 1);
+
+        assert.equal(findWidget(s), undefined);
+    });
+});

package/test/pinch_zoom.test.ts

@@ -0,0 +1,78 @@
+import { strict as assert } from 'assert';
+import { MouseObserver } from '../src/input';
+
+function observe(run: (fire: (name: string, event: any) => void, zoom: () => number) => void) {
+    const listeners = new Map<string, Array<(e: any) => void>>();
+    const ele: any = {
+        style: {},
+        clientHeight: 600,
+        addEventListener: (name: string, fn: (e: any) => void) => {
+            listeners.set(name, [...(listeners.get(name) ?? []), fn]);
+        },
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+    };
+    const fire = (name: string, event: any) => {
+        event.preventDefault = () => { };
+        (listeners.get(name) ?? []).forEach((fn) => fn(event));
+    };
+
+    let zoom = 1;
+    const g = globalThis as any;
+    const previous = { document: g.document, WheelEvent: g.WheelEvent };
+    g.document = { addEventListener: () => { } };
+    g.WheelEvent = { DOM_DELTA_PIXEL: 0, DOM_DELTA_LINE: 1, DOM_DELTA_PAGE: 2 };
+    try {
+        new MouseObserver(ele, () => { }, () => { }, () => { }, () => { }, () => { }, () => { },
+            (factor) => { zoom *= factor; });
+        run(fire, () => zoom);
+    } finally {
+        g.document = previous.document;
+        g.WheelEvent = previous.WheelEvent;
+    }
+}
+
+function fingers(apart: number) {
+    return { touches: [{ clientX: 300 - apart / 2, clientY: 300 }, { clientX: 300 + apart / 2, clientY: 300 }] };
+}
+
+describe('pinch to zoom', () => {
+    it('doubles the zoom when the fingers spread to twice as far apart', () => {
+        observe((fire, zoom) => {
+            fire('touchstart', fingers(100));
+            fire('touchmove', fingers(125));
+            fire('touchmove', fingers(150));
+            fire('touchmove', fingers(200));
+
+            assert.ok(Math.abs(zoom() - 2) < 1e-9, `zoom was ${zoom()}`);
+        });
+    });
+
+    it('halves the zoom when the fingers close to half as far apart', () => {
+        observe((fire, zoom) => {
+            fire('touchstart', fingers(300));
+            fire('touchmove', fingers(200));
+            fire('touchmove', fingers(150));
+
+            assert.ok(Math.abs(zoom() - 0.5) < 1e-9, `zoom was ${zoom()}`);
+        });
+    });
+});
+
+describe('the scroll wheel', () => {
+    it('zooms in scrolling up and out scrolling down', () => {
+        observe((fire, zoom) => {
+            fire('wheel', { deltaY: -100, deltaMode: 0, clientX: 0, clientY: 0 });
+            assert.ok(zoom() > 1);
+
+            fire('wheel', { deltaY: 200, deltaMode: 0, clientX: 0, clientY: 0 });
+            assert.ok(zoom() < 1);
+        });
+    });
+
+    it('never flips the zoom however far a page scroll goes', () => {
+        observe((fire, zoom) => {
+            fire('wheel', { deltaY: 10, deltaMode: 2, clientX: 0, clientY: 0 });
+            assert.ok(zoom() > 0);
+        });
+    });
+});

package/test/support.ts

@@ -94,7 +94,7 @@ export interface StubElement {
     tagName: string;
     type: string;
     value: string;
-    style: { cssText: string };
+    style: { cssText: string, opacity?: string, pointerEvents?: string };
     children: Array<StubElement>;
     isConnected: boolean;
     clicked: number;
@@ -115,6 +115,19 @@ export interface StubElement {
     fire(name: string, event?: any): void;
 }
 
+function stubStyle(): StubElement['style'] {
+    const style: any = {};
+    let css = '';
+    Object.defineProperty(style, 'cssText', {
+        get: () => css,
+        set: (value: string) => {
+            css = value;
+            Object.keys(style).forEach((key) => delete style[key]);
+        },
+    });
+    return style;
+}
+
 export function withDocument(run: (body: StubElement, created: Array<StubElement>) => void): void {
     const created: Array<StubElement> = [];
     const element = (tagName: string): StubElement => {
@@ -123,7 +136,7 @@ export function withDocument(run: (body: StubElement, created: Array<StubElement
             tagName,
             type: '',
             value: '',
-            style: { cssText: '' },
+            style: stubStyle(),
             children: [],
             isConnected: false,
             clicked: 0,

package/test/widgets.test.ts

@@ -11,7 +11,19 @@ import { ImageWidget } from '../src/widgets/image';
 import { ColorWidget } from '../src/widgets/color';
 import { RowWidget } from '../src/widgets/row';
 import { WidgetBase } from '../src/widgets/widget';
-import { CanvasRecord, center, stubCtx, widgetScene, withDocument } from './support';
+import { placeEditsDuring } from '../src/widgets/inplace';
+import { CanvasRecord, center, StubElement, stubCtx, widgetScene, withDocument } from './support';
+
+function cssOf(el: StubElement): Record<string, string> {
+    const style: Record<string, string> = {};
+    el.style.cssText.split(';').forEach((rule) => {
+        const at = rule.indexOf(':');
+        if (at > 0) {
+            style[rule.slice(0, at).trim()] = rule.slice(at + 1).trim();
+        }
+    });
+    return style;
+}
 
 describe('a number widget', () => {
     it('follows a drag and reports one edit when let go', () => {
@@ -97,6 +109,47 @@ describe('a number widget', () => {
         });
     });
 
+    it('keeps its input over the widget as the camera moves and zooms', () => {
+        withDocument((body) => {
+            const { graph, camera, ctx, widgetBox, click } = widgetScene((n) => new NumberWidget(n, { value: 3 }));
+            click(center(widgetBox()));
+            const input = body.children[0];
+
+            camera.position.x += 137;
+            camera.position.y -= 41;
+            camera.zoom = 2;
+            graph.render(ctx, camera, undefined);
+
+            const box = widgetBox();
+            const style = cssOf(input);
+            assert.equal(style.left, `${10 + box.Position.x}px`);
+            assert.equal(style.top, `${20 + box.Position.y}px`);
+            assert.equal(style.width, `${box.Size.x}px`);
+            assert.equal(style.height, `${box.Size.y}px`);
+        });
+    });
+
+    it('hides its input while the node is off the canvas', () => {
+        withDocument((body) => {
+            const { graph, camera, ctx, widgetBox, click } = widgetScene(
+                (n) => new NumberWidget(n, { value: 3 }),
+                { inputs: [{ name: 'in', type: 'n' }] },
+            );
+            click(center(widgetBox()));
+            const input = body.children[0];
+            const frame =() => placeEditsDuring(ctx.canvas, () => graph.render(ctx, camera, undefined));
+
+            camera.position.x -= 5000;
+            frame();
+            assert.equal(input.style.opacity, '0');
+
+            camera.position.x += 5000;
+            frame();
+            assert.equal(input.style.opacity, undefined);
+            assert.ok(input.isConnected);
+        });
+    });
+
     it('does not open an input after a drag', () => {
         withDocument((body) => {
             const { widgetBox, press } = widgetScene((n) => new NumberWidget(n, { value: 0 }));