Aislo/B05_wf2_Route/B05_wf2_Route_UI_Profile_Structures.ts

/* =============================================================================
 * 종단 테이블 구조물 배치 라인 (B05)
 *
 * 구조물 측점을 테이블 위에 세로선으로 얹고, 그 선을 끌어 위치를 옮긴다. 우클릭하면 그 자리에
 * 배관을 넣거나 선을 지운다.
 *
 * 배관 선은 배수유역도의 관 매설 지점이 투영된 것이다(`origin: "pipe"`). 그래서 여기서 옮기면
 * 관 지점 정본(`pipe_points.json`)이 바뀌고 세부유역도 함께 다시 나뉜다 — 값을 두 곳에 따로
 * 쌓지 않기 위해서다(2026-08-01 사용자 지시).
 * ========================================================================== */

import { createMapContextMenu } from "@ui/ui_template_context_menu";
import { irregularLabel, type IrregularStation } from "./B05_wf2_Route_UI_IrregularStations";

/** 선을 잡았다고 볼 좌우 여유(px). 선 자체는 얇아 그대로는 집기 어렵다. */
const GRAB_SLACK_PX = 6;
/** 이만큼(px) 이하로 움직였다 뗐으면 이동이 아니라 고르기로 본다. */
const DRAG_SLOP_PX = 3;

export interface StructureLineOptions {
  /** 테이블에 얹을 구조물 측점 목록. */
  stations: ReadonlyArray<IrregularStation>;
  /** chainage → x(px). 테이블·그래프와 같은 매핑을 쓴다. */
  x: (chainageM: number) => number;
  /** x(px) → chainage. 선을 끌 때 역변환에 쓴다. */
  chainageAt: (px: number) => number;
  /** 노선 총 연장(m). 이 범위를 벗어난 자리로는 옮기지 않는다. */
  maxChainageM: number;
  /** 선을 옮겼을 때. 옛 누가거리와 새 누가거리를 넘긴다. */
  onMove: (fromChainageM: number, toChainageM: number, station: IrregularStation) => void;
  /** 선을 지울 때. */
  onRemove: (station: IrregularStation) => void;
  /** 빈 자리에서 우클릭해 배관을 넣을 때. */
  onAddPipe: (chainageM: number) => void;
  /** 선을 눌렀을 때(끌지 않음) — 값 열 오버레이 선택과 맞춘다. */
  onSelect?: (station: IrregularStation) => void;
}

/**
 * 테이블 요소 위에 구조물 라인 레이어를 얹는다. 테이블은 매 그리기마다 새로 만들어지므로
 * 이 함수도 그때마다 다시 부른다 — 상태를 밖에 남기지 않는다.
 */
export function mountStructureLines(table: HTMLElement, options: StructureLineOptions): void {
  const layer = document.createElement("div");
  layer.className = "b05-profile-table__structures";
  const menu = createMapContextMenu("b05-profile-table");

  /** 끌고 있는 선. null이면 잡은 것이 없다. */
  let dragging: { station: IrregularStation; element: HTMLElement; startX: number } | null = null;
  let moved = false;

  function clamp(chainageM: number): number {
    return Math.min(Math.max(chainageM, 0), options.maxChainageM);
  }

  options.stations.forEach((station) => {
    const line = document.createElement("div");
    line.className =
      "b05-profile-table__structure" + (station.origin === "pipe" ? " is-pipe" : " is-user");
    line.style.left = `${options.x(station.chainage_m)}px`;
    line.title = `${irregularLabel(station)} · ${station.structure || "구조물"}`;
    const label = document.createElement("span");
    label.className = "b05-profile-table__structure-label";
    label.textContent = station.structure || "구조물";
    line.append(label);

    line.addEventListener("pointerdown", (event) => {
      // 이동은 좌클릭 전용 — 우클릭은 메뉴다(2026-08-01 사용자 지시).
      if (event.button !== 0) return;
      event.preventDefault();
      event.stopPropagation();
      menu.close();
      dragging = { station, element: line, startX: event.clientX };
      moved = false;
      line.setPointerCapture(event.pointerId);
    });
    line.addEventListener("pointermove", (event) => {
      if (!dragging || dragging.station.id !== station.id) return;
      if (Math.abs(event.clientX - dragging.startX) > DRAG_SLOP_PX) moved = true;
      const rect = table.getBoundingClientRect();
      line.style.left = `${options.x(clamp(options.chainageAt(event.clientX - rect.left)))}px`;
    });
    line.addEventListener("pointerup", (event) => {
      if (!dragging || dragging.station.id !== station.id) return;
      const rect = table.getBoundingClientRect();
      const next = clamp(options.chainageAt(event.clientX - rect.left));
      dragging = null;
      if (!moved) {
        // 끌지 않고 눌렀다 뗐으면 고르기다 — 원래 자리로 되돌린다.
        line.style.left = `${options.x(station.chainage_m)}px`;
        options.onSelect?.(station);
        return;
      }
      options.onMove(station.chainage_m, Number(next.toFixed(2)), station);
    });
    line.addEventListener("contextmenu", (event) => {
      event.preventDefault();
      event.stopPropagation();
      const rect = table.getBoundingClientRect();
      menu.open(event.clientX - rect.left, event.clientY - rect.top, [
        [station.origin === "pipe" ? "배관 삭제" : "구조물 삭제", () => options.onRemove(station)],
      ]);
    });
    layer.append(line);
  });

  // 빈 자리 우클릭 — 그 누가거리에 배관을 넣는다.
  table.addEventListener("contextmenu", (event) => {
    if (menu.contains(event.target)) {
      event.preventDefault();
      return;
    }
    const rect = table.getBoundingClientRect();
    const chainage = clamp(options.chainageAt(event.clientX - rect.left));
    event.preventDefault();
    menu.open(event.clientX - rect.left, event.clientY - rect.top, [
      ["배관 추가", () => options.onAddPipe(Number(chainage.toFixed(2)))],
    ]);
  });
  table.addEventListener("pointerdown", (event) => {
    if (!menu.contains(event.target)) menu.close();
  });

  table.append(layer, menu.element);
}

/** 선을 잡았다고 볼 여유 — 스타일에서 선 폭을 정할 때 함께 쓴다. */
export const STRUCTURE_GRAB_SLACK_PX = GRAB_SLACK_PX;