Aislo/B06_Section/B06_Section_UI_Cross_Box_Panel.ts

/* =============================================================================
 * B06_Section_UI_Cross_Box_Panel.ts
 * BOX암거 **조정 오버레이 창**(2026-08-25 사용자 확정).
 *
 * 좌·우 끝을 따로 잡는다 — 도면에서 그쪽 절반을 누르면 그 측이 선택되고,
 * ◀▶는 **구체 길이**를, ▲▼는 **그 끝의 구체 표고**를 0.1m씩 움직인다. 좌·우 표고가
 * 달라지면 구체가 기울고, 날개벽 구간 바닥(에이프런)은 각 끝에서 수평을 유지한다.
 * CSS 클래스와 조작 관례는 세월교·배수관 조정창과 같다.
 * ========================================================================== */

import type { BoxSideAdjust, BoxSideRole } from "./B06_Section_UI_Cross_Box_Geom";
import {
  bindArrowKeys,
  buildPanelShell,
  dpadButton,
  makeRow,
} from "./B06_Section_UI_Cross_Panel_Base";

/** 조정창이 쓰는 값·동작. 카드가 자기 상태에 맞춰 물려 준다. */
export interface BoxPanelDeps {
  /** 지금 조작값(한계에 걸린 뒤 실제 적용값). */
  adjustFor: (role: BoxSideRole) => BoxSideAdjust;
  /** 구체 길이 ±0.1m — 화면 좌(◀)/우(▶) 부호 환산은 카드가 한다. */
  nudgeLength: (role: BoxSideRole, screenDeltaM: number) => void;
  /** 그 끝의 구체 표고 ±0.1m. */
  nudgeRise: (role: BoxSideRole, deltaM: number) => void;
  /** 그 측을 자동 자리로 되돌린다. */
  reset: (role: BoxSideRole) => void;
  /** 지금 그려진 구체 길이(m)와 물매(1:n, 수평이면 null). */
  bodyLengthM: () => number;
  slopeRatio: () => number | null;
  /** 창을 닫는다 = 선택 해제. */
  close: () => void;
}

export interface BoxPanelHandle {
  root: HTMLElement;
  /** null이면 숨긴다. 값이 오면 그 측 기준으로 다시 그린다. */
  show: (role: BoxSideRole | null) => void;
}

/** 한 걸음(m) — 사용자 지정 0.1m. */
const STEP_M = 0.1;

/** BOX암거 조정 오버레이 창을 만든다. 처음에는 숨어 있다. */
export function buildBoxPanel(deps: BoxPanelDeps): BoxPanelHandle {
  const shell = buildPanelShell(() => deps.close());
  const { root, title } = shell;

  const value = document.createElement("div");
  value.className = "b06-structure-panel__value";
  const lengthLine = document.createElement("span");
  const riseLine = document.createElement("span");
  const slopeLine = document.createElement("span");
  value.append(lengthLine, riseLine, slopeLine);

  let current: BoxSideRole | null = null;
  const act = (run: (role: BoxSideRole) => void) => () => {
    if (current) run(current);
  };

  // 십자 조작 세트 — **창 맨 아래**(템플릿 규약 — 2026-08-25 일원화).
  const moveRow = makeRow("길이 ◀▶ · 표고 ▲▼");
  moveRow.controls.classList.add("b06-structure-panel__buttons");
  const dpad = dpadButton;
  moveRow.controls.append(
    dpad(
      "▲",
      "up",
      "이쪽 끝 구체 표고 0.1m 올리기",
      act((role) => deps.nudgeRise(role, STEP_M)),
    ),
    dpad(
      "◀",
      "left",
      "화면 왼쪽으로 구체 0.1m 늘리기",
      act((role) => deps.nudgeLength(role, STEP_M)),
    ),
    dpad("↺", "reset", "이 측 조정값 초기화", act(deps.reset)),
    dpad(
      "▶",
      "right",
      "화면 오른쪽으로 구체 0.1m 늘리기",
      act((role) => deps.nudgeLength(role, -STEP_M)),
    ),
    dpad(
      "▼",
      "down",
      "이쪽 끝 구체 표고 0.1m 내리기",
      act((role) => deps.nudgeRise(role, -STEP_M)),
    ),
  );

  root.append(value, moveRow.row);

  const arrows = bindArrowKeys(root, () => [moveRow.controls]);

  function render(): void {
    if (!current) return;
    const side = current === "left" ? "좌" : "우";
    title.textContent = `BOX암거 ${side}측 끝`;
    const adjust = deps.adjustFor(current);
    lengthLine.textContent =
      `구체 길이 ${deps.bodyLengthM().toFixed(2)}m` +
      (adjust.lengthM > 0 ? ` (이 측 +${adjust.lengthM.toFixed(1)}m)` : " (이 측 자동)");
    riseLine.textContent = `표고 ${adjust.riseM >= 0 ? "+" : ""}${adjust.riseM.toFixed(1)}m`;
    const ratio = deps.slopeRatio();
    slopeLine.textContent = ratio ? `구체 물매 1:${ratio.toFixed(1)}` : "구체 수평";
  }

  return {
    root,
    show(role) {
      current = role;
      root.classList.toggle("is-hidden", role === null);
      arrows.detach();
      if (role !== null) arrows.attach();
      render();
    },
  };
}

/** 측점별 BOX암거 조작값 제어 — 페이지(세션·정본)가 구현한다. */
export interface BoxControl {
  adjustFor: (chainageM: number) => { left: BoxSideAdjust; right: BoxSideAdjust };
  update: (chainageM: number, role: BoxSideRole, patch: Partial<BoxSideAdjust>) => void;
  reset: (chainageM: number, role: BoxSideRole) => void;
  selectedFor: (chainageM: number) => BoxSideRole | null;
  select: (chainageM: number, role: BoxSideRole | null) => void;
}