// panning.ts
import { Graph } from "@maxgraph/core";

export function enableLeftButtonPanning(graph: Graph) {
  const el = graph.container as HTMLElement;

  let isPanning = false;
  let startClientX = 0;
  let startClientY = 0;
  let startTx = 0;
  let startTy = 0;

  el.style.cursor = "default";
  el.style.userSelect = "none";

  el.addEventListener("pointerdown", (e) => {
    if (e.button !== 0) return;

    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const cell = graph.getCellAt(x, y);
    if (cell) return;

    isPanning = true;
    startClientX = e.clientX;
    startClientY = e.clientY;

    const tr = graph.getView().getTranslate();
    startTx = tr.x;
    startTy = tr.y;

    el.style.cursor = "grabbing";
    el.setPointerCapture(e.pointerId);

    e.preventDefault();
    e.stopPropagation();
  });

  el.addEventListener("pointermove", (e) => {
    if (!isPanning) return;

    const dxPx = e.clientX - startClientX;
    const dyPx = e.clientY - startClientY;

    const scale = graph.getView().getScale();
    graph.getView().setTranslate(startTx + dxPx / scale, startTy + dyPx / scale);

    e.preventDefault();
    e.stopPropagation();
  });

  const stop = (e: PointerEvent) => {
    if (!isPanning) return;
    isPanning = false;

    el.style.cursor = "default";

    try {
      el.releasePointerCapture(e.pointerId);
    } catch {}

    e.preventDefault();
    e.stopPropagation();
  };

  el.addEventListener("pointerup", stop);
  el.addEventListener("pointercancel", stop);
  el.addEventListener("pointerleave", stop);
}