fabro/apps/fabro-web/app/lib/graph-viewport.test.ts

import { describe, expect, test } from "bun:test";

import {
  GRAPH_MAX_ZOOM_TB,
  GRAPH_MAX_ZOOM_LR,
  GRAPH_MIN_ZOOM,
  clampZoom,
  wheelZoomFactor,
  zoomAtPoint,
  type GraphView,
} from "./graph-viewport";

// Screen offset (from container center) of a content point at pre-transform offset q.
const screenOffset = (view: GraphView, q: { x: number; y: number }) => ({
  x: view.pan.x + (view.zoom / 100) * q.x,
  y: view.pan.y + (view.zoom / 100) * q.y,
});

describe("zoomAtPoint", () => {
  test("keeps the point under the cursor anchored on screen", () => {
    const view: GraphView = { zoom: 100, pan: { x: 30, y: -20 } };
    const cursor = { x: 50, y: 40 };
    // Content point currently under the cursor, in pre-transform coords.
    const q = {
      x: (cursor.x - view.pan.x) / (view.zoom / 100),
      y: (cursor.y - view.pan.y) / (view.zoom / 100),
    };

    const after = zoomAtPoint(view, 1.5, cursor);
    const anchored = screenOffset(after, q);

    expect(after.zoom).toBeCloseTo(150);
    expect(anchored.x).toBeCloseTo(cursor.x);
    expect(anchored.y).toBeCloseTo(cursor.y);
  });

  test("clamps zoom and applies the clamped ratio to pan", () => {
    const view: GraphView = { zoom: GRAPH_MAX_ZOOM_TB, pan: { x: 10, y: 10 } };
    const after = zoomAtPoint(view, 4, { x: 0, y: 0 }); // wants 800%, must clamp to max
    expect(after.zoom).toBe(GRAPH_MAX_ZOOM_TB);
    expect(after.pan).toEqual({ x: 10, y: 10 }); // k == 1, pan unchanged toward center
  });

  test("center-anchored zoom in then out is a round trip", () => {
    const start: GraphView = { zoom: 80, pan: { x: 12, y: -6 } };
    const factor = 1.25;
    const zoomedIn = zoomAtPoint(start, factor, { x: 0, y: 0 });
    const roundTrip = zoomAtPoint(zoomedIn, 1 / factor, { x: 0, y: 0 });
    expect(roundTrip.zoom).toBeCloseTo(start.zoom);
    expect(roundTrip.pan.x).toBeCloseTo(start.pan.x);
    expect(roundTrip.pan.y).toBeCloseTo(start.pan.y);
  });

  describe("direction-aware clamping", () => {
    test("TB direction clamps to 200%", () => {
      const view: GraphView = { zoom: 180, pan: { x: 0, y: 0 } };
      const after = zoomAtPoint(view, 1.5, { x: 0, y: 0 }, "TB");
      expect(after.zoom).toBe(200); // 180 * 1.5 = 270, clamped to 200
      // k = 200/180 = 1.111..., pan adjustment reflects clamped ratio
      const k = 200 / 180;
      expect(after.pan.x).toBeCloseTo(0 * (1 - k) + k * 0);
      expect(after.pan.y).toBeCloseTo(0 * (1 - k) + k * 0);
    });

    test("LR direction clamps to 400%", () => {
      const view: GraphView = { zoom: 350, pan: { x: 0, y: 0 } };
      const after = zoomAtPoint(view, 1.5, { x: 0, y: 0 }, "LR");
      expect(after.zoom).toBe(400); // 350 * 1.5 = 525, clamped to 400
      const k = 400 / 350;
      expect(after.pan.x).toBeCloseTo(0 * (1 - k) + k * 0);
      expect(after.pan.y).toBeCloseTo(0 * (1 - k) + k * 0);
    });

    test("without direction defaults to TB (max 200%)", () => {
      const view: GraphView = { zoom: 180, pan: { x: 0, y: 0 } };
      const after = zoomAtPoint(view, 1.5, { x: 0, y: 0 });
      expect(after.zoom).toBe(200);
      const k = 200 / 180;
      expect(after.pan.x).toBeCloseTo(0);
      expect(after.pan.y).toBeCloseTo(0);
    });

    test("LR cursor-anchored zoom near 400% limit", () => {
      const view: GraphView = { zoom: 380, pan: { x: 50, y: 40 } };
      const cursor = { x: 50, y: 40 };
      const after = zoomAtPoint(view, 1.2, cursor, "LR");
      expect(after.zoom).toBe(400); // 380 * 1.2 = 456, clamped to 400
      const k = 400 / 380;
      expect(after.pan.x).toBeCloseTo(cursor.x * (1 - k) + k * view.pan.x);
      expect(after.pan.y).toBeCloseTo(cursor.y * (1 - k) + k * view.pan.y);
    });
  });
});

describe("zoom constants", () => {
  test("TB max zoom is 200", () => {
    expect(GRAPH_MAX_ZOOM_TB).toBe(200);
  });

  test("LR max zoom is 400", () => {
    expect(GRAPH_MAX_ZOOM_LR).toBe(400);
  });
});

test("clampZoom respects bounds", () => {
  expect(clampZoom(10)).toBe(GRAPH_MIN_ZOOM);
  expect(clampZoom(500)).toBe(GRAPH_MAX_ZOOM_TB);
  expect(clampZoom(75)).toBe(75);
});

describe("clampZoom with direction", () => {
  describe("TB direction", () => {
    test("clamps zoom above 200% to 200%", () => {
      expect(clampZoom(250, "TB")).toBe(200);
    });

    test("preserves zoom at 150%", () => {
      expect(clampZoom(150, "TB")).toBe(150);
    });

    test("preserves zoom exactly at 200%", () => {
      expect(clampZoom(200, "TB")).toBe(200);
    });

    test("clamps zoom just over 200%", () => {
      expect(clampZoom(200.1, "TB")).toBe(200);
    });
  });

  describe("LR direction", () => {
    test("clamps zoom above 400% to 400%", () => {
      expect(clampZoom(450, "LR")).toBe(400);
    });

    test("preserves zoom at 250%", () => {
      expect(clampZoom(250, "LR")).toBe(250);
    });

    test("preserves zoom exactly at 400%", () => {
      expect(clampZoom(400, "LR")).toBe(400);
    });

    test("clamps zoom just over 400%", () => {
      expect(clampZoom(400.1, "LR")).toBe(400);
    });

    test("preserves zoom just under 400%", () => {
      expect(clampZoom(399.9, "LR")).toBe(399.9);
    });
  });

  describe("backward compatibility", () => {
    test("defaults to TB max (200%) when no direction specified", () => {
      expect(clampZoom(250)).toBe(200);
    });

    test("preserves zoom at 150% when no direction specified", () => {
      expect(clampZoom(150)).toBe(150);
    });
  });

  describe("minimum zoom", () => {
    test("clamps to 25% for TB direction", () => {
      expect(clampZoom(10, "TB")).toBe(25);
    });

    test("clamps to 25% for LR direction", () => {
      expect(clampZoom(10, "LR")).toBe(25);
    });
  });
});

test("wheelZoomFactor is positive and symmetric: equal scrolls up and down cancel", () => {
  expect(wheelZoomFactor(120)).toBeGreaterThan(0);
  expect(wheelZoomFactor(120)).toBeLessThan(1); // scroll down zooms out
  expect(wheelZoomFactor(-120)).toBeGreaterThan(1); // scroll up zooms in
  expect(wheelZoomFactor(120) * wheelZoomFactor(-120)).toBeCloseTo(1);
});