insomni-plot 0.1.0-alpha.0

package/src/grammar/coord.test.ts

@@ -0,0 +1,355 @@
+// @vitest-environment jsdom
+import { describe, expect, test } from "vite-plus/test";
+import { createFrame } from "insomni";
+import {
+  coordCartesian,
+  coordPolar,
+  coordRadial,
+  type CoordViewportHandle,
+  type Coord,
+} from "./coord.ts";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const F = createFrame({ x: 0, y: 0, width: 200, height: 200 });
+
+/** Minimal viewport stub that captures pan/zoom calls for assertions. */
+function makeViewportStub() {
+  const panCalls: { dx: number; dy: number }[] = [];
+  const zoomCalls: { x: number; y: number; factor: number | { x?: number; y?: number } }[] = [];
+  const handle: CoordViewportHandle = {
+    panBy(dx, dy) {
+      panCalls.push({ dx, dy });
+    },
+    zoomAt(x, y, factor) {
+      zoomCalls.push({ x, y, factor });
+    },
+  };
+  return { handle, panCalls, zoomCalls };
+}
+
+// Polar coords expose their internal angular state via `__polar__` for testing.
+function polarState(c: Coord) {
+  // Cast: every coord returned by `coordPolar` carries the __polar__ readout.
+  return (
+    c as Coord & {
+      __polar__: {
+        startAngle: () => number;
+        endAngle: () => number;
+        innerRadius: () => number;
+        outerRadius: () => number;
+        angleChannel: "x" | "y";
+        direction: 1 | -1;
+      };
+    }
+  ).__polar__;
+}
+
+// ---------------------------------------------------------------------------
+// coordPolar — project / unproject
+// ---------------------------------------------------------------------------
+
+describe("coordPolar project ↔ unproject", () => {
+  test("default polar (angleChannel y, full circle) round-trips", () => {
+    // angleChannel default = 'y'. y=0 (bottom) → θ=startAngle=-π/2; y=plotH
+    // (top) → θ ≈ startAngle - 2π (full revolution). x is the radial channel:
+    // x=0 → r=0; x=plotW → r=outerR.
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    // Pick a few mid-arc points; avoid r=0 (the centre is degenerate under unproject).
+    const samples = [
+      { x: 50, y: 50 },
+      { x: 100, y: 100 },
+      { x: 80, y: 20 },
+      { x: 150, y: 175 },
+    ];
+    for (const p of samples) {
+      const projected = polar.project(p);
+      const back = polar.unproject(projected);
+      expect(back).not.toBeNull();
+      expect(back!.x).toBeCloseTo(p.x, 4);
+      expect(back!.y).toBeCloseTo(p.y, 4);
+    }
+  });
+
+  test("unproject returns null outside the outerRadius", () => {
+    const polar = coordPolar({ outerRadius: 50 });
+    polar.bindFrame(F);
+    // (cx, cy) = (100, 100); pick a point at radius 80 > 50.
+    expect(polar.unproject({ x: 180, y: 100 })).toBeNull();
+  });
+
+  test("unproject returns null inside the innerRadius", () => {
+    const polar = coordPolar({ innerRadius: 40 });
+    polar.bindFrame(F);
+    // r = 10 < 40.
+    expect(polar.unproject({ x: 110, y: 100 })).toBeNull();
+  });
+
+  test("explicit outerRadius overrides the frame-min default", () => {
+    const polar = coordPolar({ outerRadius: 40 });
+    polar.bindFrame(F);
+    // y=0 → θ=startAngle=-π/2; x=plotW → r=outerR=40.
+    // (cx, cy) = (100, 100); θ=-π/2 → (cx, cy - r) = (100, 60).
+    const p = polar.project({ x: 200, y: 0 });
+    expect(p.x).toBeCloseTo(100, 4);
+    expect(p.y).toBeCloseTo(60, 4);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// coordPolar — segment tessellation
+// ---------------------------------------------------------------------------
+
+describe("coordPolar segment", () => {
+  test("radial line (shared θ) emits exactly two endpoints", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    // Same y → same θ; vary x (the radial channel).
+    const points = polar.segment({ x: 20, y: 100 }, { x: 180, y: 100 });
+    expect(points).toHaveLength(2);
+  });
+
+  test("arc (shared r) tessellates with ~1° steps and angular monotonicity", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    // Same x → same r (≠ 0); arc from y=20 to y=180.
+    const points = polar.segment({ x: 100, y: 20 }, { x: 100, y: 180 });
+    expect(points.length).toBeGreaterThan(20); // ~160° of arc at 1° step.
+    // Re-derive (θ, r) for each projected point: dx = x - cx, dy = y - cy.
+    // The arc should keep r approximately constant.
+    const radii = points.map((p) => Math.hypot(p.x - 100, p.y - 100));
+    const r0 = radii[0]!;
+    for (const r of radii) {
+      expect(r).toBeCloseTo(r0, 3);
+    }
+    // Angular monotonicity: consecutive angles strictly increase (or strictly
+    // decrease) — no backtracking.
+    const angles = points.map((p) => Math.atan2(p.y - 100, p.x - 100));
+    // Unwrap once across the ±π boundary.
+    const unwrapped = [angles[0]!];
+    for (let i = 1; i < angles.length; i++) {
+      let a = angles[i]!;
+      const prev = unwrapped[i - 1]!;
+      while (a - prev > Math.PI) a -= 2 * Math.PI;
+      while (a - prev < -Math.PI) a += 2 * Math.PI;
+      unwrapped.push(a);
+    }
+    const dir = Math.sign(unwrapped[1]! - unwrapped[0]!);
+    expect(dir).not.toBe(0);
+    for (let i = 1; i < unwrapped.length; i++) {
+      expect(Math.sign(unwrapped[i]! - unwrapped[i - 1]!)).toBe(dir);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// coordPolar — renderAxes
+// ---------------------------------------------------------------------------
+
+describe("coordPolar renderAxes", () => {
+  test("draws one line per angular tick (spokes)", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    const lines: unknown[] = [];
+    const layer = makeFakeLayer(lines);
+    const angleTicks = [0, 25, 50, 75, 100];
+    const angleScale = makeFakePositionScale(angleTicks, [0, 200]);
+    const radiusScale = makeFakePositionScale([0, 50, 100], [200, 0]);
+    polar.renderAxes({
+      axisLayer: layer,
+      // Only `scales.x.axisScale` / `scales.x.fn` / `scales.y.*` are read by polar.
+      scales: { x: radiusScale, y: angleScale } as never,
+      plotFrame: F,
+      hasX: true,
+      hasY: true,
+      xAxisOptions: {},
+      yAxisOptions: {},
+      atlas: undefined,
+    });
+    // Default angleChannel is 'y'. There should be exactly `angleTicks.length`
+    // spokes — each one a single line from inner radius to outer radius.
+    // Concentric circles are tessellated into many lines, but a spoke is a
+    // single line. Counting lines via line-length: a circle's lines all share
+    // a (cx,cy)-centred radius, while spokes pass through the centre.
+    const spokeCount = countSpokes(lines, F.width / 2, F.height / 2);
+    expect(spokeCount).toBe(angleTicks.length);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// coordCartesian — handlePan / handleZoom regression
+// ---------------------------------------------------------------------------
+
+describe("coordCartesian pan/zoom forwarding", () => {
+  test("handlePan calls viewport.panBy with the same delta", () => {
+    const cart = coordCartesian();
+    const { handle, panCalls } = makeViewportStub();
+    cart.handlePan({ dx: 7, dy: -3, plotFrame: F, viewport: handle });
+    expect(panCalls).toEqual([{ dx: 7, dy: -3 }]);
+  });
+
+  test("handleZoom calls viewport.zoomAt with the same anchor + factor", () => {
+    const cart = coordCartesian();
+    const { handle, zoomCalls } = makeViewportStub();
+    cart.handleZoom({ factor: 1.25, cx: 80, cy: 90, plotFrame: F, viewport: handle });
+    expect(zoomCalls).toEqual([{ x: 80, y: 90, factor: 1.25 }]);
+  });
+
+  test("bindFrame is a no-op (does not throw, leaves project identity)", () => {
+    const cart = coordCartesian();
+    cart.bindFrame(F);
+    expect(cart.project({ x: 12, y: 34 })).toEqual({ x: 12, y: 34 });
+    expect(cart.unproject({ x: 12, y: 34 })).toEqual({ x: 12, y: 34 });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// coordPolar — handlePan rotation + handleZoom radial scaling
+// ---------------------------------------------------------------------------
+
+describe("coordPolar handlePan", () => {
+  test("tangential delta (dx) rotates startAngle by (dx / width) * arc", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    const stateBefore = polarState(polar).startAngle();
+    const { handle } = makeViewportStub();
+    polar.handlePan({ dx: 50, dy: 0, plotFrame: F, viewport: handle });
+    const stateAfter = polarState(polar).startAngle();
+    // arc span = 2π by default; rotation = (50 / 200) * 2π = π/2 in default
+    // direction = 1.
+    expect(stateAfter - stateBefore).toBeCloseTo(Math.PI / 2, 4);
+  });
+
+  test("radial delta (dy) translates the radius scale via viewport.panBy(0, dy)", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    const { handle, panCalls } = makeViewportStub();
+    polar.handlePan({ dx: 0, dy: -12, plotFrame: F, viewport: handle });
+    // Default angleChannel='y', so radius is the x channel. The current impl
+    // translates the *radius* domain — radius corresponds to viewport's x
+    // channel when angleChannel='y'.
+    expect(panCalls).toEqual([{ dx: -12, dy: 0 }]);
+  });
+
+  test("angleChannel='x' inverts which viewport axis receives the radial pan", () => {
+    const polar = coordPolar({ angleChannel: "x" });
+    polar.bindFrame(F);
+    const { handle, panCalls } = makeViewportStub();
+    polar.handlePan({ dx: 0, dy: 5, plotFrame: F, viewport: handle });
+    // With angleChannel='x', radius is the y channel.
+    expect(panCalls).toEqual([{ dx: 0, dy: 5 }]);
+  });
+
+  test("non-full-circle (openAngle) still rotates startAngle on tangential pan", () => {
+    const polar = coordPolar({ openAngle: Math.PI / 2 }); // arc = 3π/2
+    polar.bindFrame(F);
+    const before = polarState(polar).startAngle();
+    const { handle } = makeViewportStub();
+    polar.handlePan({ dx: 50, dy: 0, plotFrame: F, viewport: handle });
+    const after = polarState(polar).startAngle();
+    // rotation = (50/200) * (3π/2) = 3π/8.
+    expect(after - before).toBeCloseTo((3 * Math.PI) / 8, 4);
+  });
+});
+
+describe("coordPolar handleZoom", () => {
+  test("zooms only the radius scale (angle axis unchanged)", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    const { handle, zoomCalls } = makeViewportStub();
+    polar.handleZoom({ factor: 1.5, cx: 130, cy: 100, plotFrame: F, viewport: handle });
+    // angleChannel='y', so radius is x.
+    expect(zoomCalls).toHaveLength(1);
+    expect(zoomCalls[0]!.x).toBe(130);
+    expect(zoomCalls[0]!.y).toBe(100);
+    expect(zoomCalls[0]!.factor).toEqual({ x: 1.5 });
+  });
+
+  test("startAngle is unchanged by zoom", () => {
+    const polar = coordPolar();
+    polar.bindFrame(F);
+    const before = polarState(polar).startAngle();
+    const { handle } = makeViewportStub();
+    polar.handleZoom({ factor: 2, cx: 0, cy: 0, plotFrame: F, viewport: handle });
+    const after = polarState(polar).startAngle();
+    expect(after).toBe(before);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// coordRadial = coordPolar({ openAngle: 0, innerRadius: 0 })
+// ---------------------------------------------------------------------------
+
+describe("coordRadial", () => {
+  test("full circle, zero inner radius", () => {
+    const radial = coordRadial();
+    radial.bindFrame(F);
+    const ps = polarState(radial);
+    expect(ps.innerRadius()).toBe(0);
+    expect(ps.endAngle() - ps.startAngle()).toBeCloseTo(2 * Math.PI, 6);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Fake-layer helpers
+// ---------------------------------------------------------------------------
+
+/** A minimal Layer stub that only captures pushLine shapes. */
+function makeFakeLayer(sink: unknown[]) {
+  const noop = () => layer;
+  const layer = {
+    pushLine: (s: unknown) => {
+      sink.push(s);
+      return layer;
+    },
+    pushCircle: noop,
+    pushEllipse: noop,
+    pushRect: noop,
+    pushTriangles: noop,
+    pushPolygon: noop,
+    pushText: () => ({ width: 0, height: 0, baseline: 0, lines: [] }),
+    pushString: noop,
+    setClipRect: noop,
+  } as unknown as import("insomni").Layer;
+  return layer;
+}
+
+/** Build a fake PositionScale whose `axisScale.ticks()` returns the supplied values. */
+function makeFakePositionScale(ticks: number[], range: [number, number]) {
+  const [r0, r1] = range;
+  const dom: [number, number] = [Math.min(...ticks), Math.max(...ticks)];
+  const apply = (v: number) => r0 + ((v - dom[0]) / (dom[1] - dom[0])) * (r1 - r0);
+  return {
+    kind: "position",
+    type: "linear" as const,
+    dataType: "continuous" as const,
+    fn: (v: unknown) => apply(v as number),
+    axisScale: {
+      domain: dom,
+      range,
+      ticks: () => ticks,
+      tickFormat: () => String,
+      invert: (px: number) => dom[0] + ((px - r0) / (r1 - r0)) * (dom[1] - dom[0]),
+    } as never,
+  };
+}
+
+/**
+ * Spokes pass through (cx, cy) (one endpoint at the centre or close to it
+ * when innerRadius is 0); concentric arcs do not. Count lines whose endpoints
+ * straddle the centre.
+ */
+function countSpokes(lines: unknown[], cx: number, cy: number): number {
+  let count = 0;
+  for (const raw of lines) {
+    const s = raw as { x1: number; y1: number; x2: number; y2: number };
+    const onCentre =
+      (Math.abs(s.x1 - cx) < 1e-6 && Math.abs(s.y1 - cy) < 1e-6) ||
+      (Math.abs(s.x2 - cx) < 1e-6 && Math.abs(s.y2 - cy) < 1e-6);
+    if (onCentre) count++;
+  }
+  return count;
+}