@elicdavis/node-flow 0.2.1 → 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);
+        });
+    });
+});