Aislo/B05_Profile/B05_Profile_UI_RouteEdit_Label.ts

/* =============================================================================
 * B05_Profile_UI_RouteEdit_Label.ts
 * 고른 꺾임점 옆에 뜨는 **곡선 조작 패널** — 반지름·곡선 길이를 보고 고치고 붙든다.
 *
 * 왜 옆인가(2026-09-07 사용자 지시 ③) — 예전에는 모달 **맨 아래 줄**이라 지금 고른 것이
 * 지도 어디인지 눈으로 안 이어졌다.
 *
 * **R 과 곡선 길이는 한 쌍**(L = R·Δ, Δ 는 앞뒤 직선이 정하는 교각) — 한쪽을 고치면 다른
 * 쪽이 따라온다. 「자동」 단추는 없다: 칸을 비우는 것이 곧 자동이다. 어느 쪽을 붙들지는
 * **고정 단추**로 정한다(둘 다 붙들 수는 없다 — `_Edits.ts` 설명 참고).
 *
 * **자리**(2026-09-07 사용자 지시)
 *   · 몸통은 `document.body` 에 `position: fixed` 로 띄운다 — 모달이 `overflow: hidden` 이라
 *     안에 두면 가장자리에서 **잘린다**.
 *   · 다만 **지도 칸 밖으로는 안 나간다**(2026-09-12 사용자 지적 ⑨) — 상자 밖이나 하단
 *     정보행 위로 넘어가면 지금 무엇을 고치는지 모달 안에서 안 보인다. 「잘리지 않게」와
 *     「상자 밖으로 나가게」는 다른 문제여서 자리 계산에서만 가둔다.
 *   · 자동 자리는 **곡선 중심의 반대쪽**, **16방위**로 잡는다(4방위는 대각 자리에서 곡선을 물었다).
 *   · 머리를 잡아 **손으로 옮길 수 있다**. 옮긴 자리는 그 꺾임점을 보는 동안 유지되고,
 *     다른 꺾임점을 고르면 자동 자리로 돌아간다.
 * ========================================================================== */

import type { CurveLock } from "./B05_Profile_UI_RouteEdit_Edits";

/** 그 꺾임점의 **교각 Δ**(라디안) — 내각의 나머지. 곡선 길이 L = R·Δ 에 쓴다. */
export function deflectionRad(innerAngleDeg: number | null | undefined): number {
  if (innerAngleDeg === null || innerAngleDeg === undefined) return 0;
  return ((180 - innerAngleDeg) * Math.PI) / 180;
}

/** 곡선 중심이 있는 **화면 방향**(단위벡터) — 패널을 그 반대쪽에 붙이는 데 쓴다.
 *
 * 중심은 접선점 둘이 이루는 각의 이등분선 위에 있다. 접선점은 교각점에서 앞뒤 직선을 따라
 * 뻗은 자리이므로, 두 방향의 단위벡터를 더하면 그대로 중심 쪽이다. 셋이 한 점이면 null. */
export function centerDirectionOf(
  apex: [number, number],
  start: [number, number],
  end: [number, number],
): [number, number] | null {
  const arm = (point: [number, number]): [number, number] => {
    const dx = point[0] - apex[0];
    const dy = point[1] - apex[1];
    const length = Math.hypot(dx, dy);
    return length <= 1e-9 ? [0, 0] : [dx / length, dy / length];
  };
  const [ux, uy] = arm(start);
  const [vx, vy] = arm(end);
  const sx = ux + vx;
  const sy = uy + vy;
  const length = Math.hypot(sx, sy);
  return length <= 1e-9 ? null : [sx / length, sy / length];
}

/** 꺾임점과 패널 사이 여백(px) — 손잡이(접선점 네모)를 가리지 않을 만큼 띄운다. */
const GAP_PX = 40;
/** 자동 자리를 고를 방위 수 — 16방위(22.5°마다). */
const COMPASS_STEPS = 16;

export interface CurveLabelState {
  /** 몇 번째 꺾임점인지 — 0부터 센 자리. 표시는 +1 해서 낸다. */
  seat: number;
  /** 그 꺾임점의 **화면(viewport) 좌표** px — 패널이 `position: fixed` 라서. */
  at: [number, number];
  /** **곡선 중심이 있는 쪽**(화면 기준 방향벡터). 패널은 이 반대쪽에 붙는다. */
  centerDirection: [number, number] | null;
  /** 패널이 넘어가면 안 되는 테두리(화면 좌표) — 보통 모달의 지도 칸. 없으면 안 가둔다. */
  bounds?: { left: number; top: number; right: number; bottom: number };
  curveOn: boolean;
  radiusShown: number | null;
  /** 곡선 길이(m) = R·Δ. 곡선이 없으면 null. */
  arcLengthShown: number | null;
  lock: CurveLock;
  /** 교각점(이 꺾임점) 자리를 못 박았나 — 켜면 끌어서 못 옮긴다(2026-09-12 사용자 지시 ①). */
  apexLocked: boolean;
  innerAngleDeg: number | null;
  /** **못 넘는** 반지름·곡선 길이 하한(m). 0이면 제한 없음(계획서 0-9 ④). */
  limitRadiusM?: number;
  limitArcM?: number;
}

export interface CurveLabelHandlers {
  /** 닫기 단추 — 고른 꺾임점을 푼다(계획서 0-9 ㉖). */
  onClose: () => void;
  onRadius: (value: number | null) => void;
  onArcLength: (value: number | null) => void;
  onCurveOn: (on: boolean) => void;
  /** 무엇을 붙들지 바꿨다 — 같은 것을 다시 누르면 null(품). */
  onLock: (lock: CurveLock) => void;
  /** 교각점 자리를 못 박거나 푼다. */
  onApexLock: (locked: boolean) => void;
}

export interface CurveLabel {
  show: (state: CurveLabelState) => void;
  hide: () => void;
  /** 창을 닫을 때 — 몸통이 `document.body` 에 붙어 있어 스스로 안 사라진다. */
  destroy: () => void;
}

/** 방향을 16방위 중 가장 가까운 것으로 맞춘다. */
function quantize(dx: number, dy: number): [number, number] {
  const step = (2 * Math.PI) / COMPASS_STEPS;
  const angle = Math.round(Math.atan2(dy, dx) / step) * step;
  return [Math.cos(angle), Math.sin(angle)];
}

/** 가운데에서 그 방향으로 상자 가장자리까지의 거리 — 방위마다 다르다. */
function boxReach(dx: number, dy: number, width: number, height: number): number {
  const byX = Math.abs(dx) < 1e-9 ? Infinity : width / 2 / Math.abs(dx);
  const byY = Math.abs(dy) < 1e-9 ? Infinity : height / 2 / Math.abs(dy);
  return Math.min(byX, byY);
}

/** 패널을 만든다. 몸통은 `document.body` 에 붙어 모달 밖으로도 넘어간다. */
export function createCurveLabel(handlers: CurveLabelHandlers): CurveLabel {
  const root = document.createElement("div");
  root.className = "b05-routeedit__label";
  root.hidden = true;
  root.innerHTML = `
    <div class="b05-routeedit__label-head">
      <span class="b05-routeedit__curve-label"></span>
      <button type="button" class="b05-routeedit__label-toggle" data-act="curve-toggle"></button>
      <button type="button" class="b05-routeedit__label-close" data-act="curve-close"
        aria-label="닫기" title="닫기">✕</button>
    </div>
    <label class="b05-routeedit__curve-field">반지름
      <input type="number" class="b05-routeedit__curve-radius" min="1" step="0.5" />
      <span>m</span>
      <button type="button" class="b05-routeedit__lock" data-act="lock-radius"
        title="반지름 고정 — 노드를 옮겨도 안 바뀝니다">고정</button>
    </label>
    <label class="b05-routeedit__curve-field">곡선 길이
      <input type="number" class="b05-routeedit__curve-arc" min="1" step="0.5" />
      <span>m</span>
      <button type="button" class="b05-routeedit__lock" data-act="lock-arc"
        title="곡선 길이 고정 — 노드를 옮겨도 안 바뀝니다">고정</button>
    </label>
    <div class="b05-routeedit__curve-field">교각점
      <button type="button" class="b05-routeedit__lock" data-act="lock-apex"
        title="교각점 고정 — 이 꺾임점의 자리를 못 박습니다. 노드도 손잡이도 안 끌리고 반지름·곡선 길이 칸으로만 바뀝니다">고정</button>
    </div>
    <span class="b05-routeedit__curve-info"></span>`;
  document.body.append(root);

  const head = root.querySelector<HTMLElement>(".b05-routeedit__label-head")!;
  const seatText = root.querySelector<HTMLElement>(".b05-routeedit__curve-label")!;
  const toggle = root.querySelector<HTMLButtonElement>('[data-act="curve-toggle"]')!;
  const radius = root.querySelector<HTMLInputElement>(".b05-routeedit__curve-radius")!;
  const arc = root.querySelector<HTMLInputElement>(".b05-routeedit__curve-arc")!;
  const lockRadius = root.querySelector<HTMLButtonElement>('[data-act="lock-radius"]')!;
  const lockArc = root.querySelector<HTMLButtonElement>('[data-act="lock-arc"]')!;
  const lockApex = root.querySelector<HTMLButtonElement>('[data-act="lock-apex"]')!;
  const info = root.querySelector<HTMLElement>(".b05-routeedit__curve-info")!;

  // 패널 위에서 누른 것이 캔버스로 새어 나가면 노드가 딸려 움직인다.
  for (const type of ["pointerdown", "dblclick", "contextmenu", "wheel"] as const) {
    root.addEventListener(type, (event) => event.stopPropagation());
  }

  let curveOn = true;
  let lock: CurveLock = null;
  let apexLocked = false;
  let seat = -1;
  /** 손으로 옮긴 자리 — 꺾임점 기준 어긋남(px). 다른 꺾임점을 고르면 지운다. */
  let manual: [number, number] | null = null;
  let anchor: [number, number] = [0, 0];
  /** 지금 자리의 하한 — 칸이 여기서 멈춘다. 0이면 제한 없음. */
  let limitRadius = 0;
  let limitArc = 0;
  /** 마지막으로 받은 테두리 — 손으로 끌 때도 같은 자리를 지키려고 들고 있는다. */
  let limit: CurveLabelState["bounds"];

  /** 칸에서 읽은 값. **하한 아래는 하한에서 멈추고, 멈춘 값을 칸에 되적어 보인다**
   *  (2026-09-12 사용자 확정 「아예 못 넘게 막음」) — 조용히 바꾸면 왜 안 먹었는지 모른다. */
  const numberOf = (input: HTMLInputElement, floor: number): number | null => {
    const value = Number(input.value);
    if (input.value.trim() === "" || !Number.isFinite(value) || value <= 0) return null;
    if (floor > 0 && value < floor) {
      input.value = String(floor);
      return floor;
    }
    return value;
  };
  radius.addEventListener("change", () => handlers.onRadius(numberOf(radius, limitRadius)));
  arc.addEventListener("change", () => handlers.onArcLength(numberOf(arc, limitArc)));
  toggle.addEventListener("click", () => handlers.onCurveOn(!curveOn));
  root
    .querySelector('[data-act="curve-close"]')!
    .addEventListener("click", () => handlers.onClose());
  lockRadius.addEventListener("click", () => handlers.onLock(lock === "radius" ? null : "radius"));
  lockArc.addEventListener("click", () => handlers.onLock(lock === "arc" ? null : "arc"));
  // 교각점 고정은 **곡선 유무와 무관**하다 — 곡선을 지운 자리도 꺾임점 자리는 못 박을 수 있다.
  lockApex.addEventListener("click", () => handlers.onApexLock(!apexLocked));

  // ── 머리를 잡아 옮기기 — 곡선을 가리면 손으로 치울 수 있어야 한다 ──
  let dragFrom: { x: number; y: number; left: number; top: number } | null = null;
  head.addEventListener("pointerdown", (event) => {
    if ((event.target as HTMLElement).closest("button")) return; // 단추는 단추대로.
    dragFrom = {
      x: event.clientX,
      y: event.clientY,
      left: root.offsetLeft,
      top: root.offsetTop,
    };
    head.setPointerCapture(event.pointerId);
    event.preventDefault();
  });
  head.addEventListener("pointermove", (event) => {
    if (!dragFrom) return;
    // 끄는 동안에도 테두리를 지킨다 — 놓은 뒤에만 가두면 손이 간 자리에서 패널이 튄다.
    const [left, top] = clamp(
      dragFrom.left + event.clientX - dragFrom.x,
      dragFrom.top + event.clientY - dragFrom.y,
      root.offsetWidth,
      root.offsetHeight,
      limit,
    );
    root.style.left = `${Math.round(left)}px`;
    root.style.top = `${Math.round(top)}px`;
    // 꺾임점 기준으로 기억한다 — 지도를 옮기거나 확대해도 같은 자리에 따라온다.
    manual = [left - anchor[0], top - anchor[1]];
  });
  const stopDrag = (event: PointerEvent): void => {
    if (head.hasPointerCapture(event.pointerId)) head.releasePointerCapture(event.pointerId);
    dragFrom = null;
  };
  head.addEventListener("pointerup", stopDrag);
  head.addEventListener("pointercancel", stopDrag);

  /** 자동 자리 — 곡선 중심의 반대쪽, 16방위. 손으로 옮겼으면 그 어긋남을 얹는다.
   *  마지막에 **테두리 안으로 가둔다** — 자동 자리든 손으로 옮긴 자리든 같이 갇힌다. */
  function place(state: CurveLabelState): void {
    const width = root.offsetWidth;
    const height = root.offsetHeight;
    const [nx, ny] = state.at;
    const away = state.centerDirection
      ? quantize(-state.centerDirection[0], -state.centerDirection[1])
      : ([1, 0] as [number, number]);
    const distance = GAP_PX + boxReach(away[0], away[1], width, height);
    anchor = [nx + away[0] * distance - width / 2, ny + away[1] * distance - height / 2];
    const [left, top] = clamp(
      anchor[0] + (manual ? manual[0] : 0),
      anchor[1] + (manual ? manual[1] : 0),
      width,
      height,
      state.bounds,
    );
    root.style.left = `${Math.round(left)}px`;
    root.style.top = `${Math.round(top)}px`;
  }

  /** 테두리 안으로 민다. 패널이 테두리보다 크면 왼쪽·위를 맞춰 **머리가 먼저 보이게** 한다. */
  function clamp(
    left: number,
    top: number,
    width: number,
    height: number,
    bounds: CurveLabelState["bounds"],
  ): [number, number] {
    if (!bounds) return [left, top];
    return [
      Math.max(bounds.left, Math.min(left, bounds.right - width)),
      Math.max(bounds.top, Math.min(top, bounds.bottom - height)),
    ];
  }

  return {
    show(state) {
      if (state.seat !== seat) {
        seat = state.seat;
        manual = null; // 다른 꺾임점이면 자동 자리부터 다시.
      }
      curveOn = state.curveOn;
      lock = state.lock;
      apexLocked = state.apexLocked;
      limit = state.bounds;
      limitRadius = state.limitRadiusM ?? 0;
      limitArc = state.limitArcM ?? 0;
      // 칸 자체에도 하한을 박아 화살표·스피너가 그 아래로 안 내려가게 한다.
      radius.min = limitRadius > 0 ? String(limitRadius) : "1";
      arc.min = limitArc > 0 ? String(limitArc) : "1";
      root.hidden = false;
      seatText.textContent = `${state.seat + 1}번째 꺾임점`;
      toggle.textContent = state.curveOn ? "곡선 지우기" : "곡선 넣기";
      radius.disabled = !state.curveOn;
      arc.disabled = !state.curveOn;
      lockRadius.disabled = !state.curveOn;
      lockArc.disabled = !state.curveOn;
      lockRadius.classList.toggle("is-on", lock === "radius");
      lockArc.classList.toggle("is-on", lock === "arc");
      lockApex.classList.toggle("is-on", apexLocked);
      radius.value =
        state.radiusShown === null ? "" : String(Math.round(state.radiusShown * 10) / 10);
      arc.value =
        state.arcLengthShown === null ? "" : String(Math.round(state.arcLengthShown * 10) / 10);
      const inner = state.innerAngleDeg;
      // 하단에는 **내각만** 남긴다(2026-09-12 사용자 지시 ㉗) — 고정 여부는 단추 색으로,
      // 하한은 칸이 이미 막으므로 글로 또 적을 까닭이 없다.
      info.textContent = state.curveOn
        ? inner
          ? `내각 ${Math.round(inner)}°`
          : ""
        : "곡선 없음 — 직선이 그대로 꺾입니다";
      place(state);
      // 글자가 바뀌면 상자 높이가 한 박자 늦게 자란다 — 다음 그림 직전에 한 번 더 맞춘다.
      requestAnimationFrame(() => {
        if (!root.hidden) place(state);
      });
    },
    hide() {
      root.hidden = true;
    },
    destroy() {
      root.remove();
    },
  };
}