insomni-plot 0.1.0-alpha.0

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

@@ -0,0 +1,373 @@
+import { createInteractionManager, type InteractionManager } from "insomni";
+import { beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+import type { CompiledHitTest } from "../geoms/types.ts";
+import { createGrammarHitLayer, type GrammarHitLayer } from "./hit-layer.ts";
+import { createGrammarContextMenu } from "./menu.ts";
+
+// ---------------------------------------------------------------------------
+// Fake DOM canvas — mirrors the InteractionManager unit-test scaffolding.
+// ---------------------------------------------------------------------------
+
+type Listener = (event: unknown) => void;
+
+class FakeEventTarget {
+  private readonly listeners = new Map<string, Set<Listener>>();
+  addEventListener(type: string, listener: Listener): void {
+    let set = this.listeners.get(type);
+    if (!set) {
+      set = new Set();
+      this.listeners.set(type, set);
+    }
+    set.add(listener);
+  }
+  removeEventListener(type: string, listener: Listener): void {
+    this.listeners.get(type)?.delete(listener);
+  }
+  dispatch(type: string, event: unknown): void {
+    for (const l of Array.from(this.listeners.get(type) ?? [])) l(event);
+  }
+}
+
+function makeCanvas(width = 400, height = 300) {
+  const t = new FakeEventTarget() as FakeEventTarget & Record<string, unknown>;
+  t.style = { cursor: "" };
+  t.clientWidth = width;
+  t.clientHeight = height;
+  t.getBoundingClientRect = () => ({ left: 0, top: 0, width, height });
+  t.setPointerCapture = () => {};
+  t.releasePointerCapture = () => {};
+  t.hasPointerCapture = () => false;
+  return t as unknown as HTMLElement & FakeEventTarget;
+}
+
+function contextMenuEvent(clientX: number, clientY: number) {
+  return {
+    type: "contextmenu",
+    clientX,
+    clientY,
+    shiftKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    altKey: false,
+    preventDefault: vi.fn(),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Compiled hit-test factories
+// ---------------------------------------------------------------------------
+
+interface Row {
+  id: string;
+  v: number;
+}
+
+function pointHit(
+  geomKind: "point" | "line",
+  positions: number[],
+  indices: number[],
+  data: readonly Row[],
+  pickRadius = 5,
+): CompiledHitTest<Row> {
+  return {
+    geomKind,
+    positions: Float32Array.from(positions),
+    dataIndex: Int32Array.from(indices),
+    pickRadius,
+    channels: {},
+    data,
+  };
+}
+
+function regionHit(
+  positions: number[],
+  rects: number[],
+  indices: number[],
+  data: readonly Row[],
+): CompiledHitTest<Row> {
+  return {
+    geomKind: "bar",
+    positions: Float32Array.from(positions),
+    rects: Float32Array.from(rects),
+    dataIndex: Int32Array.from(indices),
+    pickRadius: 5,
+    channels: {},
+    data,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// pickAt — exhaustive
+// ---------------------------------------------------------------------------
+
+describe("GrammarHitLayer.pickAt", () => {
+  let canvas: HTMLElement;
+  let manager: InteractionManager;
+  let hitLayer: GrammarHitLayer;
+
+  beforeEach(() => {
+    vi.stubGlobal("window", new FakeEventTarget());
+    canvas = makeCanvas();
+    manager = createInteractionManager(canvas);
+    hitLayer = createGrammarHitLayer({ manager, element: canvas });
+  });
+
+  test("empty slots → null", () => {
+    expect(hitLayer.pickAt(10, 10)).toBeNull();
+  });
+
+  test("nearest point within pickRadius wins", () => {
+    const data: Row[] = [
+      { id: "a", v: 1 },
+      { id: "b", v: 2 },
+      { id: "c", v: 3 },
+    ];
+    hitLayer.sync([pointHit("point", [10, 10, 30, 30, 100, 100], [0, 1, 2], data, 6)]);
+    const r = hitLayer.pickAt(31, 32);
+    expect(r).not.toBeNull();
+    expect(r!.hit.dataIndex).toBe(1);
+    expect(r!.hit.x).toBe(30);
+    expect(r!.hit.y).toBe(30);
+  });
+
+  test("outside all pickRadii → null", () => {
+    const data: Row[] = [{ id: "a", v: 1 }];
+    hitLayer.sync([pointHit("point", [10, 10], [0], data, 4)]);
+    expect(hitLayer.pickAt(100, 100)).toBeNull();
+  });
+
+  test("topmost slot wins ties (later registration = higher zIndex)", () => {
+    const a: Row[] = [{ id: "lower", v: 1 }];
+    const b: Row[] = [{ id: "upper", v: 2 }];
+    hitLayer.sync([
+      pointHit("point", [50, 50], [0], a, 10),
+      pointHit("line", [50, 50], [0], b, 10),
+    ]);
+    const r = hitLayer.pickAt(50, 50);
+    expect(r).not.toBeNull();
+    expect(r!.hit.geomKind).toBe("line");
+    expect(r!.hit.data).toBe(b);
+  });
+
+  test("region rect containment", () => {
+    const data: Row[] = [
+      { id: "bar0", v: 1 },
+      { id: "bar1", v: 2 },
+    ];
+    hitLayer.sync([regionHit([20, 50, 60, 50], [10, 30, 20, 40, 50, 30, 20, 40], [0, 1], data)]);
+    const inFirst = hitLayer.pickAt(15, 50);
+    expect(inFirst).not.toBeNull();
+    expect(inFirst!.hit.dataIndex).toBe(0);
+    const inSecond = hitLayer.pickAt(55, 50);
+    expect(inSecond!.hit.dataIndex).toBe(1);
+    const outside = hitLayer.pickAt(0, 0);
+    expect(outside).toBeNull();
+  });
+
+  test("mode: 'point' skips region slots", () => {
+    const data: Row[] = [{ id: "bar", v: 1 }];
+    hitLayer.sync([regionHit([50, 50], [40, 40, 20, 20], [0], data)]);
+    expect(hitLayer.pickAt(50, 50, { mode: "point" })).toBeNull();
+    expect(hitLayer.pickAt(50, 50, { mode: "any" })).not.toBeNull();
+  });
+
+  test("mode: 'region' skips point slots", () => {
+    const data: Row[] = [{ id: "p", v: 1 }];
+    hitLayer.sync([pointHit("point", [50, 50], [0], data, 8)]);
+    expect(hitLayer.pickAt(50, 50, { mode: "region" })).toBeNull();
+    expect(hitLayer.pickAt(50, 50, { mode: "point" })).not.toBeNull();
+  });
+
+  test("pickAxis: 'x' ignores y distance", () => {
+    const data: Row[] = [{ id: "p", v: 1 }];
+    const hit: CompiledHitTest<Row> = {
+      ...pointHit("line", [50, 50], [0], data, 5),
+      pickAxis: "x",
+    };
+    hitLayer.sync([hit]);
+    // Even though y is way off, x is exactly on the point.
+    expect(hitLayer.pickAt(50, 200)).not.toBeNull();
+    expect(hitLayer.pickAt(60, 50)).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createGrammarContextMenu wiring
+// ---------------------------------------------------------------------------
+
+describe("createGrammarContextMenu", () => {
+  let canvas: HTMLElement;
+  let manager: InteractionManager;
+  let hitLayer: GrammarHitLayer;
+
+  beforeEach(() => {
+    vi.stubGlobal("window", new FakeEventTarget());
+    canvas = makeCanvas();
+    manager = createInteractionManager(canvas);
+    hitLayer = createGrammarHitLayer({ manager, element: canvas });
+  });
+
+  function fire(x: number, y: number) {
+    (canvas as unknown as FakeEventTarget).dispatch("contextmenu", contextMenuEvent(x, y));
+  }
+
+  test("trigger on point resolves datum + mark", () => {
+    const data: Row[] = [{ id: "a", v: 7 }];
+    hitLayer.sync([pointHit("point", [100, 100], [0], data, 5)]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu({ manager, hitLayer }, { onTrigger });
+    fire(102, 101);
+    expect(onTrigger).toHaveBeenCalledOnce();
+    const info = onTrigger.mock.calls[0][0];
+    expect(info.hit).not.toBeNull();
+    expect(info.mark).toBe("point");
+    expect(info.datum).toEqual({ id: "a", v: 7 });
+    expect(info.screenX).toBe(102);
+    expect(info.screenY).toBe(101);
+    expect(info.source).toBe("mouse");
+    menu.dispose();
+  });
+
+  test("nearest-point on empty background suppresses the trigger entirely", () => {
+    // Matches hover behavior — no popup unless a mark is hit.
+    hitLayer.sync([pointHit("point", [10, 10], [0], [{ id: "x", v: 1 }], 4)]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu({ manager, hitLayer }, { onTrigger });
+    fire(200, 200);
+    expect(onTrigger).not.toHaveBeenCalled();
+    menu.dispose();
+  });
+
+  test("background hitMode fires on empty space with null hit", () => {
+    hitLayer.sync([pointHit("point", [10, 10], [0], [{ id: "x", v: 1 }], 4)]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu(
+      { manager, hitLayer },
+      { hitMode: "background", onTrigger },
+    );
+    fire(200, 200);
+    expect(onTrigger).toHaveBeenCalledOnce();
+    const info = onTrigger.mock.calls[0][0];
+    expect(info.hit).toBeNull();
+    expect(info.datum).toBeNull();
+    expect(info.mark).toBeNull();
+    menu.dispose();
+  });
+
+  test("multi-mark overlap honors z-order (topmost slot wins)", () => {
+    const a = [{ id: "lower", v: 1 }];
+    const b = [{ id: "upper", v: 2 }];
+    hitLayer.sync([
+      pointHit("point", [50, 50], [0], a, 10),
+      pointHit("line", [50, 50], [0], b, 10),
+    ]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu({ manager, hitLayer }, { onTrigger });
+    fire(50, 50);
+    expect(onTrigger.mock.calls[0][0].mark).toBe("line");
+    expect(onTrigger.mock.calls[0][0].datum).toEqual(b[0]);
+    menu.dispose();
+  });
+
+  test("hitMode 'background' never resolves marks", () => {
+    hitLayer.sync([pointHit("point", [50, 50], [0], [{ id: "x", v: 1 }], 10)]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu(
+      { manager, hitLayer },
+      { hitMode: "background", onTrigger },
+    );
+    fire(50, 50);
+    expect(onTrigger).toHaveBeenCalledOnce();
+    const info = onTrigger.mock.calls[0][0];
+    expect(info.hit).toBeNull();
+    expect(info.datum).toBeNull();
+    menu.dispose();
+  });
+
+  test("hitMode 'nearest-point' skips region geoms (and suppresses trigger when no point hit)", () => {
+    hitLayer.sync([regionHit([50, 50], [40, 40, 20, 20], [0], [{ id: "bar", v: 1 }])]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu(
+      { manager, hitLayer },
+      { hitMode: "nearest-point", onTrigger },
+    );
+    fire(50, 50);
+    expect(onTrigger).not.toHaveBeenCalled();
+    menu.dispose();
+  });
+
+  test("hitMode 'any-mark' includes region geoms", () => {
+    hitLayer.sync([regionHit([50, 50], [40, 40, 20, 20], [0], [{ id: "bar", v: 1 }])]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu(
+      { manager, hitLayer },
+      { hitMode: "any-mark", onTrigger },
+    );
+    fire(50, 50);
+    expect(onTrigger.mock.calls[0][0].mark).toBe("bar");
+    menu.dispose();
+  });
+
+  test("isSuppressed gates trigger (mid-pan)", () => {
+    hitLayer.sync([pointHit("point", [50, 50], [0], [{ id: "x", v: 1 }], 10)]);
+    let suppressed = false;
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu(
+      { manager, hitLayer },
+      { onTrigger, isSuppressed: () => suppressed },
+    );
+    suppressed = true;
+    fire(50, 50);
+    expect(onTrigger).not.toHaveBeenCalled();
+    suppressed = false;
+    fire(50, 50);
+    expect(onTrigger).toHaveBeenCalledOnce();
+    menu.dispose();
+  });
+
+  test("dispose unsubscribes", () => {
+    hitLayer.sync([pointHit("point", [50, 50], [0], [{ id: "x", v: 1 }], 10)]);
+    const onTrigger = vi.fn();
+    const menu = createGrammarContextMenu({ manager, hitLayer }, { onTrigger });
+    menu.dispose();
+    fire(50, 50);
+    expect(onTrigger).not.toHaveBeenCalled();
+  });
+
+  test("items resolver receives the trigger info", () => {
+    hitLayer.sync([pointHit("point", [50, 50], [0], [{ id: "x", v: 7 }], 10)]);
+    const resolver = vi.fn(() => [
+      { id: "details", label: "Show details" },
+      { id: "delete", label: "Delete", danger: true },
+    ]);
+    const fakeLayer = {} as unknown as import("insomni").Layer;
+    const menu = createGrammarContextMenu(
+      {
+        manager,
+        hitLayer,
+        hudLayer: () => fakeLayer,
+        bounds: () => ({ x: 0, y: 0, width: 400, height: 300 }),
+      },
+      {
+        items: resolver,
+        onAction: () => {},
+      },
+    );
+    fire(50, 50);
+    expect(resolver).toHaveBeenCalledOnce();
+    const info = (resolver.mock.calls[0] as unknown[])[0] as { hit: unknown; datum: unknown };
+    expect(info.hit).not.toBeNull();
+    expect(info.datum).toEqual({ id: "x", v: 7 });
+    menu.dispose();
+  });
+
+  test("items throws if hudLayer/bounds deps missing", () => {
+    expect(() =>
+      createGrammarContextMenu(
+        { manager, hitLayer },
+        { items: [{ id: "x", label: "x" }], onAction: () => {} },
+      ),
+    ).toThrow(/hudLayer.*bounds/);
+  });
+});