insomni-plot 0.1.0-alpha.0

package/src/grammar/interactions/brush.test.ts

@@ -0,0 +1,483 @@
+import type {
+  DragPointerInfo,
+  InteractionManager,
+  InteractionNode,
+  InteractionNodeSpec,
+  PointerInfo,
+} from "insomni";
+import { describe, expect, test, vi } from "vite-plus/test";
+
+// Mock isCoarsePointer so we can control its return value per test.
+// All other exports from "insomni" are preserved via importActual.
+vi.mock("insomni", async (importActual) => {
+  const actual = await importActual<typeof import("insomni")>();
+  return {
+    ...actual,
+    isCoarsePointer: vi.fn(() => false),
+  };
+});
+
+import type { CompiledHitTest, HoveredHit } from "../geoms/types.ts";
+import { themeDefault } from "../theme.ts";
+import { createGrammarBrush } from "./brush.ts";
+
+interface CapturedNode {
+  spec: InteractionNodeSpec;
+  destroyed: boolean;
+}
+
+function fakeManager(): {
+  manager: InteractionManager;
+  nodes: CapturedNode[];
+  fireBackgroundTap: () => void;
+} {
+  const nodes: CapturedNode[] = [];
+  let bgHandler: (() => void) | null = null;
+  const manager = {
+    element: {} as HTMLElement,
+    add(spec: InteractionNodeSpec): InteractionNode {
+      const captured: CapturedNode = { spec, destroyed: false };
+      nodes.push(captured);
+      const id = Symbol("node");
+      return {
+        id,
+        update(patch) {
+          captured.spec = { ...captured.spec, ...patch };
+        },
+        destroy() {
+          captured.destroyed = true;
+        },
+      };
+    },
+    addPointCloud() {
+      throw new Error("not used");
+    },
+    onBackgroundTap(handler: () => void) {
+      bgHandler = handler;
+      return () => {
+        if (bgHandler === handler) bgHandler = null;
+      };
+    },
+    onChange() {
+      return () => {};
+    },
+    destroy() {},
+  } as unknown as InteractionManager;
+  return {
+    manager,
+    nodes,
+    fireBackgroundTap: () => bgHandler?.(),
+  };
+}
+
+const noMods = { shift: false, ctrl: false, meta: false, alt: false };
+function pointer(x: number, y: number): PointerInfo {
+  return {
+    pointerId: 1,
+    type: "mouse",
+    x,
+    y,
+    localX: x,
+    localY: y,
+    buttons: 1,
+    mods: noMods,
+    stopPropagation: () => {},
+  };
+}
+function dragInfo(x: number, y: number, dx = 0, dy = 0): DragPointerInfo {
+  return { ...pointer(x, y), dx, dy };
+}
+
+interface Row {
+  x: number;
+  y: number;
+}
+function hitFor(
+  positions: number[],
+  indices: number[],
+  data: readonly Row[],
+): CompiledHitTest<Row> {
+  return {
+    geomKind: "point",
+    positions: Float32Array.from(positions),
+    dataIndex: Int32Array.from(indices),
+    pickRadius: 5,
+    channels: {},
+    data,
+  };
+}
+
+const fullBounds = () => ({ x: 0, y: 0, width: 100, height: 200 });
+
+function setup(opts: { axis?: "x" | "y" | "xy" } = {}) {
+  const { manager, nodes, fireBackgroundTap } = fakeManager();
+  const events: HoveredHit[][] = [];
+  const layerCalls: { rects: number } = { rects: 0 };
+  const hudLayer = {
+    pushRect: () => {
+      layerCalls.rects++;
+      return hudLayer;
+    },
+  };
+  const inv = { invalidate: () => {}, dirty: false } as never;
+  const brush = createGrammarBrush(
+    {
+      manager,
+      bounds: fullBounds,
+      hudLayer: () => hudLayer as never,
+      theme: () => themeDefault,
+      invalidator: inv,
+    },
+    {
+      axis: opts.axis,
+      onChange: (s) => events.push(s),
+    },
+  );
+  return { brush, nodes, events, fireBackgroundTap, layerCalls };
+}
+
+describe("grammar brush", () => {
+  test("registers a drag-capable node bounded to the plot frame, a translate node, plus 8 resize handles", () => {
+    const { nodes } = setup();
+    // 1 create-drag node + 1 translate node + 8 handle nodes for axis "xy".
+    expect(nodes).toHaveLength(10);
+    const node0 = nodes[0]!.spec;
+    expect(typeof node0.onDragStart).toBe("function");
+    expect(typeof node0.onDragMove).toBe("function");
+    expect(typeof node0.onDragEnd).toBe("function");
+    // oxlint-disable-next-line unbound-method -- checking that onPress is absent (undefined); not invoking the method
+    expect(node0.onPress).toBeUndefined();
+    expect(node0.bounds!()).toEqual(fullBounds());
+    // Translate + handle nodes all claim press to block background-tap clears
+    // on click-without-drag inside the rect.
+    for (let i = 1; i < nodes.length; i++) {
+      const nodeI = nodes[i]!.spec;
+      expect(typeof nodeI.onPress).toBe("function");
+      expect(typeof nodeI.onDragStart).toBe("function");
+    }
+  });
+
+  test("axis='x' only emits east/west handles", () => {
+    const { nodes } = setup({ axis: "x" });
+    // 1 create node + 1 translate node + 2 handles ("e", "w").
+    expect(nodes).toHaveLength(4);
+  });
+
+  test("handle bounds collapse to zero while there is no rect", () => {
+    const { nodes } = setup();
+    // Order: [create, translate, n, s, e, w, ne, nw, se, sw]; east = index 4.
+    const eHandle = nodes[4]!;
+    const b = eHandle.spec.bounds!();
+    expect(b.width).toBe(0);
+    expect(b.height).toBe(0);
+  });
+
+  test("dragging a corner handle resizes the committed rect", () => {
+    const { brush, nodes } = setup();
+    const data: Row[] = [{ x: 60, y: 70 }];
+    brush.sync([hitFor([60, 70], [0], data)]);
+    // Commit an initial rect.
+    nodes[0]!.spec.onDragStart!(pointer(10, 20));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 50));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 50));
+    expect(brush.rect()).toEqual({ x: 10, y: 20, width: 30, height: 30 });
+
+    // Order: [create, translate, n, s, e, w, ne, nw, se, sw]; SE corner = index 8.
+    const seHandle = nodes[8]!;
+    seHandle.spec.onDragStart!(pointer(40, 50));
+    seHandle.spec.onDragMove!(dragInfo(80, 100));
+    seHandle.spec.onDragEnd!(pointer(80, 100));
+    expect(brush.rect()).toEqual({ x: 10, y: 20, width: 70, height: 80 });
+    // Row at (60,70) is now inside.
+    expect(brush.current().map((h) => h.dataIndex)).toEqual([0]);
+  });
+
+  test("opts.handles=false skips handle node registration", () => {
+    const { manager, nodes } = fakeManager();
+    const hudLayer = { pushRect: () => hudLayer };
+    const inv = { invalidate: () => {}, dirty: false } as never;
+    createGrammarBrush(
+      {
+        manager,
+        bounds: fullBounds,
+        hudLayer: () => hudLayer as never,
+        theme: () => themeDefault,
+        invalidator: inv,
+      },
+      { handles: false, translate: false },
+    );
+    expect(nodes).toHaveLength(1);
+  });
+
+  test("dragging the rect interior translates without resizing", () => {
+    const { brush, nodes } = setup();
+    // Commit an initial rect at (10,20) 30x30.
+    nodes[0]!.spec.onDragStart!(pointer(10, 20));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 50));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 50));
+    expect(brush.rect()).toEqual({ x: 10, y: 20, width: 30, height: 30 });
+
+    // Translate node is at index 1. Drag from inside the rect by (+15, +5).
+    const tNode = nodes[1]!;
+    tNode.spec.onDragStart!(pointer(25, 35));
+    tNode.spec.onDragMove!(dragInfo(40, 40));
+    tNode.spec.onDragEnd!(pointer(40, 40));
+    expect(brush.rect()).toEqual({ x: 25, y: 25, width: 30, height: 30 });
+  });
+
+  test("snap=true snaps rect x edges to nearest hit-test x for axis='x'", () => {
+    const { manager, nodes } = fakeManager();
+    const hudLayer = { pushRect: () => hudLayer };
+    const inv = { invalidate: () => {}, dirty: false } as never;
+    const brush = createGrammarBrush(
+      {
+        manager,
+        bounds: fullBounds,
+        hudLayer: () => hudLayer as never,
+        theme: () => themeDefault,
+        invalidator: inv,
+      },
+      { axis: "x", snap: true },
+    );
+    const data: Row[] = [
+      { x: 10, y: 100 },
+      { x: 30, y: 100 },
+      { x: 50, y: 100 },
+      { x: 70, y: 100 },
+      { x: 90, y: 100 },
+    ];
+    brush.sync([hitFor([10, 100, 30, 100, 50, 100, 70, 100, 90, 100], [0, 1, 2, 3, 4], data)]);
+
+    nodes[0]!.spec.onDragStart!(pointer(12, 0));
+    nodes[0]!.spec.onDragMove!(dragInfo(48, 0));
+    nodes[0]!.spec.onDragEnd!(pointer(48, 0));
+    // x edges snap to nearest ticks: 12 → 10, 48 → 50.
+    expect(brush.rect()).toEqual({ x: 10, y: 0, width: 40, height: 200 });
+  });
+
+  test("snap=false leaves the rect alone", () => {
+    const { manager, nodes } = fakeManager();
+    const hudLayer = { pushRect: () => hudLayer };
+    const inv = { invalidate: () => {}, dirty: false } as never;
+    const brush = createGrammarBrush(
+      {
+        manager,
+        bounds: fullBounds,
+        hudLayer: () => hudLayer as never,
+        theme: () => themeDefault,
+        invalidator: inv,
+      },
+      { axis: "x" },
+    );
+    const data: Row[] = [{ x: 10, y: 100 }];
+    brush.sync([hitFor([10, 100], [0], data)]);
+
+    nodes[0]!.spec.onDragStart!(pointer(12, 0));
+    nodes[0]!.spec.onDragMove!(dragInfo(48, 0));
+    nodes[0]!.spec.onDragEnd!(pointer(48, 0));
+    expect(brush.rect()).toEqual({ x: 12, y: 0, width: 36, height: 200 });
+  });
+
+  test("translate clamps to bounds without changing size", () => {
+    const { brush, nodes } = setup();
+    // Initial rect (10,20) 30x30 — bounds are 0..100 × 0..200.
+    nodes[0]!.spec.onDragStart!(pointer(10, 20));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 50));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 50));
+
+    // Try to drag far past the right edge — should clamp at x = 70 (100 - 30).
+    const tNode = nodes[1]!;
+    tNode.spec.onDragStart!(pointer(25, 35));
+    tNode.spec.onDragMove!(dragInfo(500, 35));
+    tNode.spec.onDragEnd!(pointer(500, 35));
+    expect(brush.rect()).toEqual({ x: 70, y: 20, width: 30, height: 30 });
+  });
+
+  test("drag selects rows whose hit position falls inside the rect", () => {
+    const { brush, nodes, events } = setup();
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 50, y: 60 },
+      { x: 80, y: 90 },
+    ];
+    brush.sync([hitFor([10, 20, 50, 60, 80, 90], [0, 1, 2], data)]);
+
+    nodes[0]!.spec.onDragStart!(pointer(5, 15));
+    nodes[0]!.spec.onDragMove!(dragInfo(60, 70));
+    expect(brush.current().map((h) => h.dataIndex)).toEqual([0, 1]);
+    nodes[0]!.spec.onDragEnd!(pointer(60, 70));
+    expect(brush.current().map((h) => h.dataIndex)).toEqual([0, 1]);
+    expect(events.at(-1)!.map((h) => h.dataIndex)).toEqual([0, 1]);
+  });
+
+  test("backwards drag normalizes — same hits regardless of direction", () => {
+    const { brush, nodes } = setup();
+    const data: Row[] = [
+      { x: 25, y: 30 },
+      { x: 70, y: 80 },
+    ];
+    brush.sync([hitFor([25, 30, 70, 80], [0, 1], data)]);
+
+    nodes[0]!.spec.onDragStart!(pointer(80, 90));
+    nodes[0]!.spec.onDragMove!(dragInfo(20, 25));
+    nodes[0]!.spec.onDragEnd!(pointer(20, 25));
+    expect(
+      brush
+        .current()
+        .map((h) => h.dataIndex)
+        .sort((a, b) => a - b),
+    ).toEqual([0, 1]);
+  });
+
+  test("axis=x ignores y position when matching rows", () => {
+    const { brush, nodes } = setup({ axis: "x" });
+    const data: Row[] = [
+      { x: 10, y: 5 },
+      { x: 30, y: 195 },
+      { x: 80, y: 100 },
+    ];
+    brush.sync([hitFor([10, 5, 30, 195, 80, 100], [0, 1, 2], data)]);
+
+    // Drag horizontally over x=10..40; y range shouldn't filter anything in
+    // that x band.
+    nodes[0]!.spec.onDragStart!(pointer(5, 100));
+    nodes[0]!.spec.onDragMove!(dragInfo(45, 110));
+    expect(
+      brush
+        .current()
+        .map((h) => h.dataIndex)
+        .sort((a, b) => a - b),
+    ).toEqual([0, 1]);
+  });
+
+  test("background tap clears the brush", () => {
+    const { brush, nodes, events, fireBackgroundTap } = setup();
+    const data: Row[] = [{ x: 10, y: 20 }];
+    brush.sync([hitFor([10, 20], [0], data)]);
+
+    nodes[0]!.spec.onDragStart!(pointer(5, 15));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 60));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 60));
+    expect(brush.current()).toHaveLength(1);
+    expect(brush.rect()).not.toBeNull();
+
+    fireBackgroundTap();
+    expect(brush.current()).toHaveLength(0);
+    expect(brush.rect()).toBeNull();
+    expect(events.at(-1)!).toEqual([]);
+  });
+
+  test("clear() empties brush state and fires onChange when needed", () => {
+    const { brush, nodes, events } = setup();
+    const data: Row[] = [{ x: 10, y: 20 }];
+    brush.sync([hitFor([10, 20], [0], data)]);
+    nodes[0]!.spec.onDragStart!(pointer(5, 15));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 60));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 60));
+    const before = events.length;
+    brush.clear();
+    expect(brush.rect()).toBeNull();
+    expect(brush.current()).toHaveLength(0);
+    expect(events.length).toBeGreaterThan(before);
+  });
+
+  test("sync() refreshes membership when positions change beneath a static rect", () => {
+    const { brush, nodes, events } = setup();
+    const data: Row[] = [
+      { x: 10, y: 20 },
+      { x: 50, y: 60 },
+    ];
+    brush.sync([hitFor([10, 20, 50, 60], [0, 1], data)]);
+    nodes[0]!.spec.onDragStart!(pointer(0, 0));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 40));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 40));
+    expect(brush.current().map((h) => h.dataIndex)).toEqual([0]);
+
+    // Row 1 moves into the rect; row 0 stays.
+    const before = events.length;
+    brush.sync([hitFor([10, 20, 25, 30], [0, 1], data)]);
+    expect(
+      brush
+        .current()
+        .map((h) => h.dataIndex)
+        .sort((a, b) => a - b),
+    ).toEqual([0, 1]);
+    expect(events.length).toBeGreaterThan(before);
+  });
+
+  test("dispose tears down the main node + handles and stops bg-tap from clearing", () => {
+    const { brush, nodes, fireBackgroundTap } = setup();
+    brush.dispose();
+    for (const n of nodes) expect(n.destroyed).toBe(true);
+    fireBackgroundTap(); // should be a no-op now
+    expect(brush.current()).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Handle size: coarse-pointer auto-scaling
+// ---------------------------------------------------------------------------
+
+import { isCoarsePointer } from "insomni";
+
+/** Commit an initial rect and return the SE corner handle width == handleSize. */
+function handleSizeFromSetup(): number {
+  const { manager, nodes } = fakeManager();
+  const hudLayer = { pushRect: () => hudLayer };
+  const inv = { invalidate: () => {}, dirty: false } as never;
+  const brush = createGrammarBrush(
+    {
+      manager,
+      bounds: fullBounds,
+      hudLayer: () => hudLayer as never,
+      theme: () => themeDefault,
+      invalidator: inv,
+    },
+    {},
+  );
+  // Commit a rect so handle bounds are non-zero.
+  nodes[0]!.spec.onDragStart!(pointer(10, 20));
+  nodes[0]!.spec.onDragMove!(dragInfo(40, 50));
+  nodes[0]!.spec.onDragEnd!(pointer(40, 50));
+  // SE corner is at index 8; its width == handleSize (h × h square).
+  // Read bounds BEFORE dispose, which collapses the rect to null.
+  const width = nodes[8]!.spec.bounds!().width;
+  brush.dispose();
+  return width;
+}
+
+describe("grammar brush handle size", () => {
+  test("defaults to 8px on fine pointer (mouse)", () => {
+    vi.mocked(isCoarsePointer).mockReturnValue(false);
+    expect(handleSizeFromSetup()).toBe(8);
+  });
+
+  test("defaults to 24px on coarse pointer (touch)", () => {
+    vi.mocked(isCoarsePointer).mockReturnValue(true);
+    expect(handleSizeFromSetup()).toBe(24);
+  });
+
+  test("explicit opts.handleSize always wins over auto-scaling", () => {
+    vi.mocked(isCoarsePointer).mockReturnValue(true);
+    const { manager, nodes } = fakeManager();
+    const hudLayer = { pushRect: () => hudLayer };
+    const inv = { invalidate: () => {}, dirty: false } as never;
+    const brush = createGrammarBrush(
+      {
+        manager,
+        bounds: fullBounds,
+        hudLayer: () => hudLayer as never,
+        theme: () => themeDefault,
+        invalidator: inv,
+      },
+      { handleSize: 12 },
+    );
+    nodes[0]!.spec.onDragStart!(pointer(10, 20));
+    nodes[0]!.spec.onDragMove!(dragInfo(40, 50));
+    nodes[0]!.spec.onDragEnd!(pointer(40, 50));
+    // SE corner bounds.width == handleSize = 12 (not 24). Read before dispose.
+    const width = nodes[8]!.spec.bounds!().width;
+    brush.dispose();
+    expect(width).toBe(12);
+  });
+});