Aislo/B06_Section/B06_Section_UI_Cross_View_Zoom.ts

/* =============================================================================
 * B06_Section_UI_Cross_View_Zoom.ts
 * 횡단 카드 그래프의 **확대·축소·팬** 조작구. 카드 렌더러(`_UI_Cross_View.ts`)에서
 * 700줄 제한으로 분리했다. 동작 규칙(휠은 줌이 아님)은 아래 주석 그대로다.
 * ========================================================================== */

import { CROSS_PAD, L } from "./B06_Section_UI_Section_Common";

/**
 * 횡단 카드 줌·팬 제어. 반환한 `zoom()`을 그래프 우측 상단 버튼이 부른다.
 *
 * **휠은 줌이 아니다**(2026-08-02 사용자 확정). 카드가 수십 장 깔리는 화면에서 휠을 줌에
 * 묶으면 목록을 훑을 수가 없다. 확대·축소는 버튼, 팬은 가운데 버튼 드래그, 원복은 더블클릭.
 */
export interface ZoomPanHandle {
  /** 1보다 크면 확대, 작으면 축소. 플롯 영역의 중앙을 붙잡는다. */
  zoom: (factor: number) => void;
  reset: () => void;
}

export function attachZoomPan(
  svg: SVGSVGElement,
  plotLayer: SVGGElement,
  widthPx: number,
  heightPx: number,
): ZoomPanHandle {
  // 플롯 영역(축 안쪽) — 확대·축소의 중심이자 이동 한계의 기준이다.
  const plot = {
    x: CROSS_PAD.left,
    y: CROSS_PAD.top,
    width: Math.max(widthPx - CROSS_PAD.left - CROSS_PAD.right, 1),
    height: Math.max(heightPx - CROSS_PAD.top - CROSS_PAD.bottom, 1),
  };
  const maxScale = 8;
  let scale = 1;
  let tx = 0;
  let ty = 0;
  const applyTransform = (): void =>
    plotLayer.setAttribute("transform", `translate(${tx} ${ty}) scale(${scale})`);
  // 확대한 도형이 플롯 영역을 항상 덮게 이동량을 가둔다 — 원배율에서는 이동량이 0으로 묶인다.
  const clampPan = (): void => {
    tx = Math.min(Math.max(tx, (plot.x + plot.width) * (1 - scale)), plot.x * (1 - scale));
    ty = Math.min(Math.max(ty, (plot.y + plot.height) * (1 - scale)), plot.y * (1 - scale));
  };

  // 보이는 **플롯 영역의 중앙**을 붙잡고 확대·축소한다 — 버튼에는 마우스 위치가 없다.
  const zoom = (factor: number): void => {
    const next = Math.min(maxScale, Math.max(1, scale * factor));
    const cx = plot.x + plot.width / 2;
    const cy = plot.y + plot.height / 2;
    tx = cx - ((cx - tx) / scale) * next;
    ty = cy - ((cy - ty) / scale) * next;
    scale = next;
    clampPan();
    applyTransform();
  };

  let panning = false;
  let moved = false;
  let lastX = 0;
  let lastY = 0;
  // 가운데 버튼을 누르면 브라우저가 자동 스크롤(가운데 클릭 스크롤)을 켠다 — `mousedown`
  // 기본동작이라 `pointerdown`에서는 못 막는다. 여기서 막아야 팬만 남는다(2026-08-02 사용자 지시).
  svg.addEventListener("mousedown", (event) => {
    if (event.button === 1) event.preventDefault();
  });
  svg.addEventListener("auxclick", (event) => {
    if (event.button === 1) event.preventDefault();
  });
  svg.addEventListener("pointerdown", (event) => {
    // 팬은 **가운데 버튼**만. 좌클릭은 측점 선택·면적 강조 몫이다.
    if (event.button !== 1) return;
    event.preventDefault();
    panning = true;
    moved = false;
    lastX = event.clientX;
    lastY = event.clientY;
    svg.classList.add("is-panning");
    svg.setPointerCapture(event.pointerId);
  });
  svg.addEventListener("pointermove", (event) => {
    if (!panning) return;
    if (Math.abs(event.clientX - lastX) + Math.abs(event.clientY - lastY) > 2) moved = true;
    // 도형을 직접 미는 방식이라 커서를 따라간다(viewBox를 밀던 때와 부호가 반대다).
    const rect = svg.getBoundingClientRect();
    tx += ((event.clientX - lastX) / rect.width) * widthPx;
    ty += ((event.clientY - lastY) / rect.height) * heightPx;
    lastX = event.clientX;
    lastY = event.clientY;
    clampPan();
    applyTransform();
  });
  const endPan = (event: PointerEvent): void => {
    if (!panning) return;
    panning = false;
    svg.classList.remove("is-panning");
    try {
      svg.releasePointerCapture(event.pointerId);
    } catch {
      /* 이미 해제됨 */
    }
  };
  svg.addEventListener("pointerup", endPan);
  svg.addEventListener("pointercancel", endPan);
  // 드래그(팬)로 끝난 클릭은 카드 선택으로 전파하지 않는다.
  svg.addEventListener("click", (event) => {
    if (moved) event.stopPropagation();
  });
  const reset = (): void => {
    scale = 1;
    tx = 0;
    ty = 0;
    applyTransform();
  };
  // 더블클릭 원복.
  svg.addEventListener("dblclick", (event) => {
    event.stopPropagation();
    reset();
  });
  return { zoom, reset };
}

/** 그래프 우측 상단 줌 버튼(확대/축소/핏). 휠을 대신하는 조작구다. */
export function buildZoomControls(handle: ZoomPanHandle): HTMLElement {
  const bar = document.createElement("div");
  bar.className = "b06-cross-card__zoom";
  const add = (label: string, title: string, action: () => void): void => {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "b06-cross-card__zoom-btn";
    button.textContent = label;
    button.title = title;
    button.addEventListener("click", (event) => {
      // 카드 선택으로 번지면 그래프가 다시 그려져 방금 맞춘 배율이 날아간다.
      event.stopPropagation();
      action();
    });
    bar.append(button);
  };
  add("+", L("B06_Profile_View_ZoomIn"), () => handle.zoom(1 / 0.85));
  add("−", L("B06_Profile_View_ZoomOut"), () => handle.zoom(0.85));
  add("⤢", L("B06_Profile_View_ZoomFit"), () => handle.reset());
  return bar;
}