Aislo/ui_template/ui_template_context_menu.ts

/* =============================================================================
 * 지도 우클릭 메뉴 (B04 2D 지도 · B05 배수유역도 공용)
 *
 * 지도 위 객체를 우클릭했을 때 뜨는 작은 메뉴. 뷰포트의 자식으로 넣고 뷰포트 기준 절대
 * 위치로 띄운다.
 *
 * **주의**: 메뉴는 뷰포트 안에 있으므로 메뉴 위에서 난 pointer 이벤트가 지도 조작으로
 * 새어 들어간다. 걸러 내지 않으면 메뉴를 닫는 처리가 항목의 click보다 먼저 돌아 아무 일도
 * 일어나지 않는다(2026-08-01 B04에서 실제로 발생). 그래서 `contains()`를 함께 제공한다 —
 * 지도 쪽 pointerdown/pointerup/contextmenu는 이 판정으로 먼저 걸러야 한다.
 * 모양은 공용 CSS 한 벌(`ui_template_context_menu.css` · `.ui-ctx-menu`) — 나무 메뉴와 같음(계획서 39-9b).
 * ========================================================================== */

import "./ui_template_context_menu.css";

/** 평면 항목 = [문구, 동작]. 하위 메뉴 항목 = {label, children} — 누르면 바로 아래로
 *  펼쳐지는 아코디언(구조물군 → 종류, 2026-08-18 B05 우클릭 메뉴 일원화). */
export type MapContextMenuItem =
  | [label: string, action: () => void]
  | { label: string; children: Array<[label: string, action: () => void]> };

export interface MapContextMenu {
  /** 뷰포트에 append할 요소. */
  element: HTMLElement;
  /** 위치는 뷰포트 기준 px. */
  open: (x: number, y: number, items: MapContextMenuItem[]) => void;
  close: () => void;
  /** 이벤트가 메뉴 안에서 났는지. 지도 조작에서 걸러 내는 데 쓴다. */
  contains: (target: EventTarget | null) => boolean;
}

/* ── 전역 단일 메뉴 규칙 (2026-08-19 사용자 지시) ────────────────────────────
 * 종단그래프·배수유역도·3D 어디서 열리든 우클릭 메뉴는 **한 번에 하나**다 — 새로
 * 열리면 다른 영역의 메뉴는 닫힌다. 좌클릭(0)·중간버튼(1)은 어디서 눌러도 열린
 * 메뉴를 닫는다. 캡처 단계로 들어 지도 캔버스가 이벤트를 삼켜도 닫힌다. */
type MenuEntry = Pick<MapContextMenu, "close" | "contains">;
const openMenus = new Set<MenuEntry>();
let globalCloseBound = false;

/** 다른 메뉴를 닫고 장부에 올림 — 나무 메뉴(`ui_template_tree.ts`)도 같은 장부(한 번에 하나) */
export function enterMenu(entry: MenuEntry): void {
  bindGlobalClose();
  openMenus.forEach((menu) => {
    if (menu !== entry) menu.close();
  });
  openMenus.add(entry);
}

/** 닫힌 메뉴를 장부에서 뺌 */
export function leaveMenu(entry: MenuEntry): void {
  openMenus.delete(entry);
}

function bindGlobalClose(): void {
  if (globalCloseBound) return;
  globalCloseBound = true;
  document.addEventListener(
    "pointerdown",
    (event) => {
      openMenus.forEach((menu) => {
        if (!menu.contains(event.target)) menu.close();
      });
    },
    true,
  );
  // Esc 도 열린 메뉴를 닫음 — 메뉴가 열렸을 때만 키를 먹음(편집 취소 등 아래로 안 샘)
  document.addEventListener(
    "keydown",
    (event) => {
      if (event.key !== "Escape" || !openMenus.size) return;
      openMenus.forEach((menu) => menu.close());
      event.stopPropagation();
      event.preventDefault();
    },
    true,
  );
}

/** `blockClass`는 페이지 CSS 블록명(예: `b04-map`, `b05-drainage`). */
export function createMapContextMenu(blockClass: string): MapContextMenu {
  bindGlobalClose();
  const element = document.createElement("div");
  element.className = `${blockClass}__context-menu ui-ctx-menu`;
  element.hidden = true;
  // 메뉴 안 click 은 메뉴에서 끝냄 — 그릇(종단 그래프 등)의 「빈 곳 클릭 = 선택 해제」로 새면
  // 폼이 리셋되고 다시 그려져 메뉴가 사라짐(54-49).
  element.addEventListener("click", (event) => event.stopPropagation());

  const registryEntry = {
    close,
    contains: (target: EventTarget | null) => target instanceof Node && element.contains(target),
  };

  function close(): void {
    element.hidden = true;
    // 항목까지 비운다 — 남겨 두면 다음에 열었을 때 옛 동작이 함께 걸린다.
    element.replaceChildren();
    leaveMenu(registryEntry);
  }

  function buildLeaf(label: string, action: () => void, sub = false): HTMLButtonElement {
    const entry = document.createElement("button");
    entry.type = "button";
    entry.className = `${blockClass}__context-menu-item ui-ctx-menu__item`;
    if (sub) entry.classList.add("is-sub");
    entry.textContent = label;
    entry.addEventListener("click", () => {
      close();
      action();
    });
    return entry;
  }

  return {
    element,
    open(x, y, items) {
      // 다른 영역에 열려 있던 메뉴는 닫는다 — 전역에 하나만(2026-08-19 사용자 지시).
      enterMenu(registryEntry);
      element.replaceChildren();
      items.forEach((item) => {
        if (Array.isArray(item)) {
          element.append(buildLeaf(item[0], item[1]));
          return;
        }
        // 하위 메뉴(아코디언) — 머리글을 누르면 종류 목록이 바로 아래로 펼쳐진다.
        // 한 번에 한 군만 연다(다른 군을 열면 앞의 군은 접힘).
        const head = document.createElement("button");
        head.type = "button";
        head.className = `${blockClass}__context-menu-item ui-ctx-menu__item is-group`;
        head.textContent = `${item.label} ▸`;
        const body = document.createElement("div");
        body.className = `${blockClass}__context-menu-sub ui-ctx-menu__sub`;
        body.hidden = true;
        item.children.forEach(([label, action]) => body.append(buildLeaf(label, action, true)));
        head.addEventListener("click", () => {
          const willOpen = body.hidden;
          element
            .querySelectorAll<HTMLElement>(`.${blockClass}__context-menu-sub`)
            .forEach((other) => (other.hidden = true));
          element
            .querySelectorAll<HTMLElement>(`.${blockClass}__context-menu-item.is-group`)
            .forEach((other) => (other.textContent = other.textContent!.replace("▾", "▸")));
          body.hidden = !willOpen;
          head.textContent = `${item.label} ${willOpen ? "▾" : "▸"}`;
        });
        element.append(head, body);
      });
      element.style.left = `${x}px`;
      element.style.top = `${y}px`;
      element.hidden = false;
      // 화면 밖으로 나가면 안쪽으로 당김(오른쪽 · 아래 끝에서 연 메뉴)
      const box = element.getBoundingClientRect();
      const view = element.ownerDocument.defaultView ?? window; // 새 창에 옮겨진 패널(54-35)
      const dx = Math.max(0, box.right - view.innerWidth + 4);
      const dy = Math.max(0, box.bottom - view.innerHeight + 4);
      if (dx) element.style.left = `${Math.max(x - dx, x - box.left)}px`;
      if (dy) element.style.top = `${Math.max(y - dy, y - box.top)}px`;
    },
    close,
    contains: (target) => target instanceof Node && element.contains(target),
  };
}