Aislo/D03_PlanAnalysis/D03_PlanAnalysis_UI_Points.ts

/* =============================================================================
 * D03_PlanAnalysis_UI_Points.ts
 * D03 지점(PLAN 591-2 · 요구 452 · 453) — 옛 기준 지정(D02) 지점 마킹을 노선분석으로.
 *   지점 = 긋기에 붙는 점 · 목록 하나(줄 왼 띠 = 지점 색 `pointColor` · 「지점 N」 · 🗑) · 핀 = 늘 맨 위(`pointLayer`).
 *   핀 끌기 = 지점 + 그 자리 노선 노드 같이(`moveNodesAt`) · 놓을 때 한 걸음(되돌리기 · 캐시 = 페이지).
 *   지도 우클릭 = 메뉴(부품 상자 `createMapContextMenu`) — 핀: 여기서 긋기 · 지움 / 그 밖: 긋기 시작(빈 땅 = 새 본선 ·
 *     선 위 = 갈래 · 선 끝 = 이어 긋기) · 지점 놓기(꺾임점 둘레면 그 점에) · 긋는 중 = 긋기 끝.
 *   겹 둘 — `input`(핀 누름 · 끌기 · 고르기 겹보다 앞) · `pins`(그림 · 우클릭 메뉴 · 겹 맨 끝 = 맨 위 ·
 *     꺾임점 · 마크 오른쪽 누름 = 고르기 겹이 먼저 지움).
 * ========================================================================== */

import { createIconButton } from "@ui/ui_template_button";
import { createMapContextMenu, type MapContextMenuItem } from "@ui/ui_template_context_menu";
import { createListRow } from "@ui/ui_template_list_row";
import { pointColor } from "@ui/ui_template_palette";
import { createText } from "@ui/ui_template_text";
import { moveNodesAt, type PlanNetwork, type Vertex } from "./logic/D03_PlanAnalysis_Plan";
import { tmParams, tmToLonLat } from "./logic/D03_PlanAnalysis_Tm";
import type { PlanDraw } from "./D03_PlanAnalysis_UI_Draw";
import { pointLayer, screenGap, SNAP_PX } from "./D03_PlanAnalysis_UI_DrawPaint";
import type { PlanMapLayer, ScreenMap } from "./D03_PlanAnalysis_UI_Map";

/** 지점 상한 — 서버 `MAX_POINTS` 와 같음. */
const MAX_POINTS = 40;
/** 핀 머리 = 꼭지 위 px(`pointLayer` 그림과 같음). */
const PIN_HEAD_PX = 18;

export interface PlanPointsParams {
  points: () => Vertex[];
  /** 지점 이름(차례 = `points` · 빈 값 = 「지점 N」). */
  names: () => string[];
  network: () => PlanNetwork;
  epsg: () => number;
  draw: PlanDraw;
  /** 한 걸음 — 지점 · 이름 · 노선 함께. */
  commit: (points: Vertex[], names: string[], network: PlanNetwork) => void;
  /** 지도 보기 가운데(작업 좌표 · 못 잼 = null) — [추가] 자리. */
  center: () => Vertex | null;
  /** 끌기 중 — 화면만. */
  show: (points: Vertex[], network: PlanNetwork) => void;
  /** 쉴 때(긋기 · 재기 아님)만 핀을 끎. */
  idle: () => boolean;
  editable: () => boolean;
}

export interface PlanPoints {
  /** 좌측 「지점」 칸 몸. */
  panel: HTMLElement;
  input: PlanMapLayer;
  pins: PlanMapLayer;
  render: () => void;
  /** 메뉴를 띄울 지도 그릇(우클릭 자리 = 그릇 기준). */
  mount: (viewport: HTMLElement) => void;
}

export function createPlanPoints(params: PlanPointsParams): PlanPoints {
  const list = document.createElement("div");
  list.className = "d03-plan__points";
  const hint = createText("", "muted");
  hint.classList.add("d03-plan__hint");
  const panel = document.createElement("div");
  panel.append(list, hint);
  const menu = createMapContextMenu("d03-plan");
  let menuAt: [number, number] = [0, 0];
  let drag: {
    index: number;
    points: Vertex[];
    network: PlanNetwork;
    last: [Vertex[], PlanNetwork] | null;
  } | null = null;

  const name = (i: number): string => `지점 ${i + 1}`;

  /** 핀 집기 — 꼭지 · 머리(보이는 화면 위쪽) 둘레 · 뒤 지점(위에 그려짐) 먼저. */
  function pinAt(px: number, py: number, map: ScreenMap): number | null {
    const [cx, cy] = map.rerotate(px, py);
    let best: number | null = null;
    let bestGap = SNAP_PX;
    params.points().forEach((point, i) => {
      const [sx, sy] = map.rerotate(...map.toScreen(point));
      const gap = Math.min(
        Math.hypot(cx - sx, cy - sy),
        Math.hypot(cx - sx, cy - sy + PIN_HEAD_PX),
      );
      if (gap <= bestGap) [best, bestGap] = [i, gap];
    });
    return best;
  }

  function remove(i: number): void {
    params.commit(
      params.points().filter((_, k) => k !== i),
      params.names().filter((_, k) => k !== i),
      params.network(),
    );
  }

  /** 지점 놓기 — 꺾임점 둘레(SNAP_PX)면 그 점 자리(노드에 붙음). */
  function place(px: number, py: number, map: ScreenMap): void {
    if (params.points().length >= MAX_POINTS) return;
    const node = params
      .network()
      .lines.flatMap((line) => line.vertices)
      .map((point) => ({ point, gap: screenGap(map, point, px, py) }))
      .filter((item) => item.gap <= SNAP_PX)
      .sort((a, b) => a.gap - b.gap)[0];
    const at = node?.point ?? map.toMetric(px, py);
    params.commit([...params.points(), [at[0], at[1]]], [...params.names(), ""], params.network());
  }

  function openMenu(px: number, py: number, map: ScreenMap): boolean {
    if (!params.editable()) return false;
    const draw = params.draw;
    const pin = pinAt(px, py, map);
    const items: MapContextMenuItem[] = [];
    if (draw.mode() === "draw" && draw.stroke())
      items.push(["긋기 끝", () => draw.setMode("idle")]);
    else if (pin !== null) {
      const [sx, sy] = map.toScreen(params.points()[pin]); // 핀 머리를 눌러도 지점 자리에서
      items.push([`${name(pin)}에서 긋기 시작`, () => draw.startAt(sx, sy, map)]);
      items.push([`${name(pin)} 지우기`, () => remove(pin)]);
    } else {
      const label = {
        tip: "이어 긋기",
        point: "지점에서 긋기 시작",
        line: "갈래 시작",
        empty: "여기서 긋기 시작",
      }[draw.aim(px, py, map)];
      items.push([label, () => draw.startAt(px, py, map)]);
    }
    if (pin === null && params.points().length < MAX_POINTS)
      items.push(["지점 놓기", () => place(px, py, map)]);
    menu.open(menuAt[0], menuAt[1], items);
    return true;
  }

  const pins = pointLayer(params.points);
  pins.press = (px, py, map, button) => (button === 2 ? openMenu(px, py, map) : false);

  const input: PlanMapLayer = {
    draw: () => undefined,
    press(px, py, map, button) {
      if (button !== 0 || !params.editable() || !params.idle()) return false;
      const index = pinAt(px, py, map);
      if (index === null) return false;
      drag = { index, points: params.points(), network: params.network(), last: null };
      return true;
    },
    hover(px, py, map) {
      if (!drag) return;
      const to = map.toMetric(px, py);
      const from = drag.points[drag.index];
      const points = drag.points.map((p, k): Vertex => (k === drag!.index ? to : p));
      drag.last = [points, moveNodesAt(drag.network, from, to)];
      params.show(...drag.last);
    },
    release() {
      const done = drag;
      drag = null;
      if (!done?.last) return;
      params.show(done.points, done.network);
      params.commit(done.last[0], params.names(), done.last[1]);
    },
  };

  function render(): void {
    const tm = tmParams(params.epsg());
    const editable = params.editable();
    list.replaceChildren(
      ...params.points().map((point, i) => {
        const lonLat = tm ? tmToLonLat(tm, point[0], point[1]) : null;
        const drop = createIconButton({
          icon: "trash",
          title: `${name(i)} 지우기`,
          size: 24,
          onClick: () => remove(i),
        });
        drop.hidden = !editable;
        return createListRow({
          label: name(i),
          sub: lonLat ? `${lonLat[0].toFixed(6)}, ${lonLat[1].toFixed(6)}` : undefined,
          stripe: pointColor(i),
          size: 28,
          trailing: drop,
        });
      }),
    );
    hint.textContent = !editable
      ? params.points().length
        ? "보기만 — 지점은 산림청이 놓습니다."
        : "지점 없음"
      : params.points().length
        ? "핀을 끌면 그 자리 노선 점도 같이 옮깁니다 · 지도 우클릭 「지점 놓기」로 더함."
        : "지도 우클릭 「지점 놓기」 — 긋기가 붙는 점(없어도 우클릭으로 긋기 시작).";
  }

  return {
    panel,
    input,
    pins,
    render,
    mount(viewport) {
      viewport.append(menu.element);
      viewport.addEventListener(
        "contextmenu",
        (event) => {
          const rect = viewport.getBoundingClientRect();
          menuAt = [event.clientX - rect.left, event.clientY - rect.top];
        },
        true,
      );
    },
  };
}