insomni-plot 0.1.0-alpha.0

package/src/viewport.test.ts

@@ -0,0 +1,363 @@
+import { describe, expect, test } from "vite-plus/test";
+
+import { viewportFrame } from "insomni";
+import { createDataViewport, linkViewports } from "./viewport.ts";
+import type { ContinuousScale, TimeScale } from "./scales.ts";
+
+const asLinear = (s: unknown) => s as ContinuousScale;
+const asTime = (s: unknown) => s as TimeScale;
+const asBand = (s: unknown) => s as (v: string) => number;
+
+describe("data viewport", () => {
+  test("exposes scales matching the frame range", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+
+    expect(asLinear(vp.x)(0)).toBeCloseTo(0, 6);
+    expect(asLinear(vp.x)(100)).toBeCloseTo(400, 6);
+    // Y is inverted so high values render higher on screen (smaller pixel y).
+    expect(asLinear(vp.y)(0)).toBeCloseTo(300, 6);
+    expect(asLinear(vp.y)(100)).toBeCloseTo(0, 6);
+  });
+
+  test("panBy shifts visible domain so data stays under pointer", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    expect(asLinear(vp.x).invert(200)).toBeCloseTo(50, 6);
+    vp.panBy(40, 0);
+    expect(asLinear(vp.x).invert(240)).toBeCloseTo(50, 6);
+  });
+
+  test("zoomAt keeps the anchor data value pinned to the anchor pixel", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    const anchorSx = 100;
+    const before = asLinear(vp.x).invert(anchorSx);
+    vp.zoomAt(anchorSx, 0, { x: 2 });
+    const after = asLinear(vp.x).invert(anchorSx);
+    expect(after).toBeCloseTo(before, 6);
+  });
+
+  test("reset returns to the initial domain", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    vp.panBy(40, 0);
+    vp.zoomAt(200, 150, { x: 2 });
+    vp.reset();
+    expect(asLinear(vp.x).invert(0)).toBeCloseTo(0, 6);
+    expect(asLinear(vp.x).invert(400)).toBeCloseTo(100, 6);
+  });
+
+  test("onChange fires on mutation and not on no-op", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    let calls = 0;
+    vp.onChange(() => calls++);
+    vp.panBy(10, 0);
+    expect(calls).toBe(1);
+    vp.panBy(0, 0);
+    expect(calls).toBe(1);
+  });
+
+  test("screenToData and dataToScreen round-trip", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    for (const p of [
+      { x: 25, y: 25 },
+      { x: 50, y: 50 },
+      { x: 75, y: 75 },
+    ]) {
+      const s = vp.dataToScreen(p.x, p.y);
+      const d = vp.screenToData(s.x, s.y);
+      expect(d?.x).toBeCloseTo(p.x, 6);
+      expect(d?.y).toBeCloseTo(p.y, 6);
+    }
+  });
+
+  test("band axis is stable under pan/zoom", () => {
+    const vp = createDataViewport<number, string>({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "band", domain: ["a", "b", "c"] },
+    });
+    const before = asBand(vp.y)("b");
+    vp.panBy(0, 50);
+    expect(asBand(vp.y)("b")).toBeCloseTo(before, 6);
+  });
+
+  test("time axis pans in milliseconds", () => {
+    const t0 = new Date(2020, 0, 1).getTime();
+    const t1 = new Date(2020, 0, 31).getTime();
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "time", domain: [new Date(t0), new Date(t1)] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    expect(asTime(vp.x).invert(200)).toBeInstanceOf(Date);
+  });
+
+  test("setVisibleDomain assigns absolute endpoints and notifies", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    let calls = 0;
+    vp.onChange(() => calls++);
+    vp.setVisibleDomain({ x: [10, 20] });
+    const [x0, x1] = vp.visibleXDomain as readonly [number, number];
+    expect(x0).toBeCloseTo(10, 6);
+    expect(x1).toBeCloseTo(20, 6);
+    expect(calls).toBe(1);
+  });
+
+  test("setVisibleDomain rejects invalid log domains", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "log", domain: [1, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    expect(() => vp.setVisibleDomain({ x: [-1, 10] })).toThrow();
+  });
+
+  test("setVisibleDomain silently skips band axes", () => {
+    const vp = createDataViewport<string, number>({
+      frame: viewportFrame(400, 300),
+      x: { type: "band", domain: ["a", "b", "c"] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    let calls = 0;
+    vp.onChange(() => calls++);
+    vp.setVisibleDomain({ x: [10, 20] as never });
+    expect(calls).toBe(0);
+  });
+
+  test("linkViewports propagates pan on linked axis only", () => {
+    const a = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    const b = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    const unlink = linkViewports([a, b], { x: true, y: false });
+
+    a.panBy(40, 0);
+    expect(asLinear(b.x).invert(240)).toBeCloseTo(50, 6);
+    unlink();
+  });
+
+  test("panBounds: zoomed in, panBy stops at content edges with margin=0", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+      panBounds: {},
+    });
+    vp.zoomAt(200, 150, { x: 2 });
+    vp.panBy(-1000, 0);
+    const [x0, x1] = vp.visibleXDomain as readonly [number, number];
+    expect(x0).toBeCloseTo(50, 6);
+    expect(x1).toBeCloseTo(100, 6);
+  });
+
+  test("panBounds: zoomed out, content stays fully visible", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+      panBounds: {},
+    });
+    vp.zoomAt(200, 150, { x: 0.5 });
+    vp.panBy(400, 0);
+    const [x0, x1] = vp.visibleXDomain as readonly [number, number];
+    expect(x0).toBeLessThanOrEqual(0 + 1e-6);
+    expect(x1).toBeGreaterThanOrEqual(100 - 1e-6);
+  });
+
+  test("panBounds: overshoot allows pan-past content edges when zoomed in", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+      panBounds: { overshoot: { x: 0.1, y: 0 } },
+    });
+    vp.zoomAt(200, 150, { x: 2 });
+    vp.panBy(-1000, 0);
+    const [x0, x1] = vp.visibleXDomain as readonly [number, number];
+    expect(x0).toBeCloseTo(55, 6);
+    expect(x1).toBeCloseTo(105, 6);
+  });
+
+  test("panBounds: setVisibleDomain is also clamped", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+      panBounds: {},
+    });
+    vp.setVisibleDomain({ x: [200, 250] });
+    const [x0, x1] = vp.visibleXDomain as readonly [number, number];
+    expect(x0).toBeCloseTo(50, 6);
+    expect(x1).toBeCloseTo(100, 6);
+  });
+
+  test("panBounds: undefined leaves pan unconstrained", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    vp.setVisibleDomain({ x: [500, 600] });
+    const [x0, x1] = vp.visibleXDomain as readonly [number, number];
+    expect(x0).toBeCloseTo(500, 6);
+    expect(x1).toBeCloseTo(600, 6);
+  });
+});
+
+describe("getLinearProjector", () => {
+  test("projector math matches dataToScreen for linear/linear viewport", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    const proj = vp.getLinearProjector();
+    expect(proj).not.toBeNull();
+    for (const [dx, dy] of [
+      [0, 0],
+      [25, 75],
+      [50, 50],
+      [100, 0],
+    ] as [number, number][]) {
+      const screen = vp.dataToScreen(dx, dy);
+      expect(dx * proj!.txSlope + proj!.txConst).toBeCloseTo(screen.x, 6);
+      expect(dy * proj!.tySlope + proj!.tyConst).toBeCloseTo(screen.y, 6);
+    }
+  });
+
+  test("projector remains correct after panBy", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    vp.panBy(40, 0);
+    const proj = vp.getLinearProjector();
+    expect(proj).not.toBeNull();
+    const screen = vp.dataToScreen(50, 50);
+    expect(50 * proj!.txSlope + proj!.txConst).toBeCloseTo(screen.x, 6);
+    expect(50 * proj!.tySlope + proj!.tyConst).toBeCloseTo(screen.y, 6);
+  });
+
+  test("returns null for log x axis", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "log", domain: [1, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    expect(vp.getLinearProjector()).toBeNull();
+  });
+
+  test("returns null for time x axis", () => {
+    const vp = createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "time", domain: [new Date(2020, 0, 1), new Date(2020, 11, 31)] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+    expect(vp.getLinearProjector()).toBeNull();
+  });
+
+  test("returns null for band y axis", () => {
+    const vp = createDataViewport<number, string>({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "band", domain: ["a", "b", "c"] },
+    });
+    expect(vp.getLinearProjector()).toBeNull();
+  });
+});
+
+describe("axis scale cache", () => {
+  // Each mutator must invalidate the cache; reads must reuse it.
+  // The scale getter returns the cached instance on hot paths like
+  // `dataToScreen` (called per-entry from anchored-labels at 184k+ entries).
+  function makeVp() {
+    return createDataViewport({
+      frame: viewportFrame(400, 300),
+      x: { type: "linear", domain: [0, 100] },
+      y: { type: "linear", domain: [0, 100] },
+    });
+  }
+
+  test("consecutive scale reads return the cached instance", () => {
+    const vp = makeVp();
+    const a = vp.x;
+    const b = vp.x;
+    expect(a).toBe(b);
+  });
+
+  test("panBy invalidates the cache", () => {
+    const vp = makeVp();
+    const before = vp.x;
+    vp.panBy(10, 0);
+    expect(vp.x).not.toBe(before);
+  });
+
+  test("zoomAt invalidates the cache", () => {
+    const vp = makeVp();
+    const before = vp.x;
+    vp.zoomAt(200, 150, 2);
+    expect(vp.x).not.toBe(before);
+  });
+
+  test("setVisibleDomain invalidates the cache", () => {
+    const vp = makeVp();
+    const before = vp.x;
+    vp.setVisibleDomain({ x: [10, 90] });
+    expect(vp.x).not.toBe(before);
+  });
+
+  test("setFrame invalidates the cache when the range changes", () => {
+    const vp = makeVp();
+    const before = vp.x;
+    vp.setFrame(viewportFrame(800, 600));
+    expect(vp.x).not.toBe(before);
+  });
+
+  test("reset invalidates the cache", () => {
+    const vp = makeVp();
+    vp.panBy(10, 0); // move off baseline so reset actually mutates
+    const before = vp.x;
+    vp.reset();
+    expect(vp.x).not.toBe(before);
+  });
+
+  test("no-op mutators (zero pan) keep the cached instance", () => {
+    const vp = makeVp();
+    const before = vp.x;
+    vp.panBy(0, 0);
+    expect(vp.x).toBe(before);
+  });
+});