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 { createIconButton } from "./ui_template_button";
import { createBadge } from "./ui_template_badge";
import { icon, type IconName } from "./ui_template_icons";
import "./ui_template_context_menu.css";
import { showConfirmDialog } from "./ui_template_modal";

/** 평면 항목 = [문구, 동작]. 하위 메뉴 항목 = {label, children} — 「글 ▸」 한 줄 · 올리거나 누르면
 *  오른쪽 옆 새 판(하위 메뉴 · 화면 오른쪽 끝이면 왼쪽) · → 열기 · ← 닫기(PLAN 246-2).
 *  구분선 = `"-"` — 맨 앞 · 맨 뒤 · 겹친 것은 안 그림. */
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.addEventListener("pointerenter", closeSide); // 다른 줄로 옮기면 옆 판 닫힘
    entry.textContent = label;
    entry.addEventListener("click", () => {
      close();
      action();
    });
    return entry;
  }

  /** 옆 판(하위 메뉴) 닫음 — 머리 줄 표시도 풂 */
  function closeSide(): void {
    element.querySelector(".ui-ctx-menu__side")?.remove();
    element
      .querySelectorAll<HTMLElement>(".ui-ctx-menu__item.is-open")
      .forEach((head) => head.classList.remove("is-open"));
  }

  /** 옆 판 자리 — 머리 줄 오른쪽(넘치면 메뉴 왼쪽) · 아래 끝은 올림 · fixed(메뉴 overflow 에 안 잘림) ·
   *  변환된 그릇 안이면 실제 자리와 어긋난 만큼 바로잡음 */
  function placeSide(side: HTMLElement, head: HTMLElement): void {
    const view = element.ownerDocument.defaultView ?? window;
    const menu = element.getBoundingClientRect();
    let x = menu.right;
    let y = head.getBoundingClientRect().top;
    side.style.left = `${x}px`;
    side.style.top = `${y}px`;
    const box = side.getBoundingClientRect();
    const [ox, oy] = [box.left - x, box.top - y];
    y -= (side.firstElementChild?.getBoundingClientRect().top ?? box.top) - box.top; // 첫 줄 = 머리 줄 높이
    if (x + box.width > view.innerWidth - 4) x = Math.max(4, menu.left - box.width);
    if (y + box.height > view.innerHeight - 4) y = Math.max(4, view.innerHeight - 4 - box.height);
    side.style.left = `${x - ox}px`;
    side.style.top = `${y - oy}px`;
  }

  /** 하위 메뉴 머리 줄 — 올림 · 누름 · → = 옆 판 · 옆 판 ← = 닫고 머리로 */
  function buildGroup(label: string, children: Array<[string, () => void]>): HTMLButtonElement {
    const head = document.createElement("button");
    head.type = "button";
    head.className = `${blockClass}__context-menu-item ui-ctx-menu__item is-group`;
    head.setAttribute("aria-haspopup", "menu");
    head.textContent = `${label} ▸`;
    const show = (focus: boolean): void => {
      if (!head.classList.contains("is-open")) {
        closeSide();
        const side = document.createElement("div");
        side.className = `${blockClass}__context-menu-sub ui-ctx-menu ui-ctx-menu__side`;
        side.style.position = "fixed";
        side.setAttribute("role", "menu");
        children.forEach(([text, action]) => side.append(buildLeaf(text, action, true)));
        side.addEventListener("keydown", (event) => {
          if (event.key !== "ArrowLeft") return;
          event.preventDefault();
          event.stopPropagation();
          closeSide();
          head.focus();
        });
        element.append(side);
        head.classList.add("is-open");
        placeSide(side, head);
      }
      if (focus) element.querySelector<HTMLElement>(".ui-ctx-menu__side button")?.focus();
    };
    head.addEventListener("pointerenter", () => show(false));
    head.addEventListener("click", () => show(true));
    head.addEventListener("keydown", (event) => {
      if (event.key !== "ArrowRight") return;
      event.preventDefault();
      event.stopPropagation();
      show(true);
    });
    return head;
  }

  /** 화면 밖으로 나가면 안쪽으로 당김(오른쪽 · 아래 끝) — 열 때 */
  function fit(): void {
    const x = parseFloat(element.style.left);
    const y = parseFloat(element.style.top);
    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`;
  }

  return {
    element,
    open(x, y, items) {
      // 다른 영역에 열려 있던 메뉴는 닫는다 — 전역에 하나만(2026-08-19 사용자 지시).
      enterMenu(registryEntry);
      element.replaceChildren();
      items.forEach((item) => {
        if (item === "-") {
          const last = element.lastElementChild;
          if (last && !last.classList.contains("ui-ctx-menu__sep"))
            element.append(
              Object.assign(document.createElement("div"), { className: "ui-ctx-menu__sep" }),
            );
          return;
        }
        if (Array.isArray(item)) {
          element.append(buildLeaf(item[0], item[1]));
          return;
        }
        // 하위 메뉴 = 머리 줄 하나 · 옆 판(한 번에 하나)
        element.append(buildGroup(item.label, item.children));
      });
      if (element.lastElementChild?.classList.contains("ui-ctx-menu__sep"))
        element.lastElementChild.remove();
      element.style.left = `${x}px`;
      element.style.top = `${y}px`;
      element.hidden = false;
      fit();
    },
    close,
    contains: (target) => target instanceof Node && element.contains(target),
  };
}

/* =============================================================================
 * 부품 「⋯ · 오른쪽 메뉴」(552-3 · 목록 20)
 *   꼴   = 줄 끝 ⋯(`createRowMenu` · 아이콘 단추 28 → 아래 판) · 오른쪽 누름 메뉴(`createMapContextMenu` · 위 · 하위판 ▸ · 구분선)
 *          · 위험 항목(`danger` → 빨강 + 확인창 · `ownConfirm` 이면 확인창 없이)
 *   크기 = ⋯ 단추 28(아이콘 18) · 항목 줄 32 · 판 최소 폭 132(⋯) / 160(오른쪽 누름)
 *   상태 = 기본 · 마우스(항목 바탕) · 눌림(.is-open · 단추 바탕) · 막힘(항목 disabled)
 *   쓰는 법 = `createRowMenu([{ label: "열기", onClick: open }, { label: "삭제", danger: true, onClick: drop }])`
 *   대신하는 옛 변종 = B01 `rowMenu`(`.b01-pg-menu`) · `.b01-proj-menu__context-menu` · 시트 `.ss-toolbar__popover` · B06 `b06-design__more` · CAD `.cad-ribbon-overflow`
 *   한 번에 하나 · 밖 누름 · Esc 로 닫힘 = 위 장부(enterMenu · leaveMenu)를 같이 씀
 * ========================================================================== */

export interface RowMenuItem {
  label: string;
  onClick: () => void;
  /** 삭제 · 빼기 = 빨강 + 확인창 */
  danger?: boolean;
  /** 확인창 글(danger 일 때) */
  confirm?: string;
  /** 누르면 열리는 모달이 확인을 맡음 — 빨강만 · 확인창 없음 */
  ownConfirm?: boolean;
  disabled?: boolean;
}

/** 줄 끝 ⋯ — 열면 항목 · 밖을 누르면 닫힘 · danger 는 확인 뒤 실행 */
export function createRowMenu(items: RowMenuItem[]): HTMLElement {
  const wrap = document.createElement("div");
  wrap.className = "ui-row-menu";
  if (!items.length) return wrap;
  const trigger = createIconButton({ icon: "dots", title: "더 보기", size: 28 });
  trigger.classList.add("ui-row-menu__btn");
  trigger.setAttribute("aria-haspopup", "menu");
  trigger.setAttribute("aria-expanded", "false");
  const pop = document.createElement("div");
  pop.className = "ui-row-menu__pop";
  pop.setAttribute("role", "menu");
  pop.hidden = true;
  const entry: MenuEntry = {
    close: () => setOpen(false),
    contains: (target) => target instanceof Node && wrap.contains(target),
  };
  function setOpen(open: boolean): void {
    pop.hidden = !open;
    trigger.setAttribute("aria-expanded", String(open));
    wrap.classList.toggle("is-open", open);
    if (open) enterMenu(entry);
    else leaveMenu(entry);
  }
  for (const item of items) {
    const b = document.createElement("button");
    b.type = "button";
    b.className = `ui-row-menu__item${item.danger ? " is-danger" : ""}`;
    b.textContent = item.label;
    b.disabled = !!item.disabled;
    b.setAttribute("role", "menuitem");
    b.addEventListener("click", () => {
      setOpen(false);
      if (!item.danger || item.ownConfirm) return item.onClick();
      void showConfirmDialog(item.confirm ?? `${item.label} 하시겠습니까?`, item.label).then(
        (ok) => ok && item.onClick(),
      );
    });
    pop.append(b);
  }
  trigger.addEventListener("click", (e) => {
    e.stopPropagation();
    setOpen(pop.hidden === true);
  });
  wrap.append(trigger, pop);
  return wrap;
}

/* =============================================================================
 * 부품 「고르기 메뉴」(PLAN 626-1 · 634-1 · 요구 530 · 546 · 지도 도구줄 단추 하나 + 아래 판)
 *   꼴   = 하나(기본) — 아이콘 단추(32) → 아래 판 = 항목 하나만 고름(✓) · 누르면 닫힘 · `offLabel` 이면 맨 끝 「끔」 줄 + 고르면 눌림
 *          여럿(`multi`) — 아이콘 + 켠 수 배지(0 = 없음) + ▾ · 판 = 켬끔 줄(✓) · 눌러도 안 닫힘 · 하나라도 켜면 눌림
 *   줄   = `icon` · `title`(마우스 글) · `disabled`(흐림) — 바꿈은 `setItem(value, { checked, disabled, title })`
 *   자리 = 판은 화면 맨 위(body · fixed) — 도구줄 가로 밀기 칸에 잘리지 않게 · 단추 바로 아래 · 밀기 · 창 크기 바뀌면 닫힘
 *   상태 = 고름 `aria-checked` · 단추 `aria-pressed` · 막힘(단추 · 줄 disabled)
 *   쓰는 법 = `createPickMenu({ icon: "compass", title, items: [{ value, label }], offLabel: "끔", onPick })`
 *            → { root, set(value | null), value(), values(), setItem() } · `onPick` 은 누를 때만(set · setItem 은 안 부름)
 *            여럿 = `createPickMenu({ multi: true, icon, title, items: [{ value, label, icon }], onPick: (value) => 켬끔 })`
 *   한 번에 하나 · 밖 누름 · Esc 로 닫힘 = 위 장부(enterMenu · leaveMenu)
 * ========================================================================== */

export interface PickMenuItem {
  value: string;
  label: string;
  title?: string;
  icon?: IconName;
  disabled?: boolean;
}

export interface PickMenu {
  root: HTMLButtonElement;
  /** 하나 — 고름 바꿈 · 여럿 — 그 하나만 켬(null = 모두 끔). */
  set: (value: string | null) => void;
  value: () => string | null;
  /** 켠(고른) 줄 값들. */
  values: () => string[];
  /** 줄 하나 고침 — 켬 · 막힘 · 마우스 글. */
  setItem: (
    value: string,
    patch: { checked?: boolean; disabled?: boolean; title?: string },
  ) => void;
}

export function createPickMenu(opts: {
  icon: IconName;
  title: string;
  items: PickMenuItem[];
  offLabel?: string;
  multi?: boolean;
  onPick: (value: string | null) => void;
}): PickMenu {
  const multi = !!opts.multi;
  const root = createIconButton({
    icon: opts.icon,
    title: opts.title,
    size: 32,
    pressed: multi || opts.offLabel ? false : undefined,
  });
  root.setAttribute("aria-haspopup", "menu");
  root.setAttribute("aria-expanded", "false");
  const badge = createBadge("0", "accent", { kind: "count", size: 18 });
  if (multi) {
    root.classList.add("ui-pick-menu--multi");
    badge.hidden = true;
    const caret = Object.assign(document.createElement("span"), { textContent: "▾" });
    caret.className = "ui-pick-menu__caret";
    root.append(badge, caret);
  }
  const pop = document.createElement("div");
  pop.className = "ui-row-menu__pop ui-pick-menu__pop";
  pop.setAttribute("role", "menu");
  pop.hidden = true;
  const all: PickMenuItem[] = [
    ...opts.items,
    ...(!multi && opts.offLabel ? [{ value: "", label: opts.offLabel }] : []),
  ];
  const rows = all.map((item) => {
    const b = document.createElement("button");
    b.type = "button";
    b.className = "ui-row-menu__item";
    if (item.icon) b.append(icon(item.icon, 18));
    b.append(Object.assign(document.createElement("span"), { textContent: item.label }));
    if (item.title) b.title = item.title;
    b.disabled = !!item.disabled;
    b.dataset.value = item.value;
    b.setAttribute("role", multi ? "menuitemcheckbox" : "menuitemradio");
    b.addEventListener("click", () => {
      if (multi) {
        mark(b, b.getAttribute("aria-checked") !== "true");
        return opts.onPick(item.value);
      }
      setOpen(false);
      set(item.value || null);
      opts.onPick(current);
    });
    pop.append(b);
    return b;
  });
  const rowOf = (value: string): HTMLButtonElement | undefined =>
    rows.find((row) => row.dataset.value === value);
  const values = (): string[] =>
    rows
      .filter((row) => row.getAttribute("aria-checked") === "true")
      .map((row) => row.dataset.value!);
  let current: string | null = null;
  /** 단추 눌림 · 배지 — 줄 켬에 맞춤. */
  function paint(): void {
    if (!multi) {
      if (opts.offLabel) root.setAttribute("aria-pressed", String(current !== null));
      return;
    }
    const count = values().length;
    root.setAttribute("aria-pressed", String(count > 0));
    badge.textContent = String(count);
    badge.hidden = count === 0;
  }
  function mark(row: HTMLButtonElement, checked: boolean): void {
    row.setAttribute("aria-checked", String(checked));
    paint();
  }
  const entry: MenuEntry = {
    close: () => setOpen(false),
    contains: (target) => target instanceof Node && (root.contains(target) || pop.contains(target)),
  };
  /** 밀기(도구줄 · 쪽) · 창 크기 = 판이 단추에서 떨어짐 → 닫음(판 안 밀기는 그대로). */
  const onShift = (event: Event): void => {
    if (!(event.target instanceof Node && pop.contains(event.target))) setOpen(false);
  };
  function setOpen(open: boolean): void {
    if (open) {
      document.body.append(pop);
      const at = root.getBoundingClientRect();
      Object.assign(pop.style, {
        position: "fixed",
        top: `${at.bottom + 4}px`,
        left: `${at.left}px`,
        right: "auto",
      });
      window.addEventListener("resize", onShift);
      document.addEventListener("scroll", onShift, true);
    } else {
      window.removeEventListener("resize", onShift);
      document.removeEventListener("scroll", onShift, true);
    }
    pop.hidden = !open;
    root.setAttribute("aria-expanded", String(open));
    if (open) return enterMenu(entry);
    leaveMenu(entry);
    pop.remove();
  }
  function set(value: string | null): void {
    current = value;
    for (const row of rows)
      row.setAttribute("aria-checked", String((row.dataset.value || null) === value));
    paint();
  }
  set(null);
  root.addEventListener("click", (e) => {
    e.stopPropagation();
    setOpen(pop.hidden === true);
  });
  return {
    root,
    set,
    value: () => current,
    values,
    setItem(value, patch) {
      const row = rowOf(value);
      if (!row) return;
      if (patch.disabled !== undefined) row.disabled = patch.disabled;
      if (patch.title !== undefined) row.title = patch.title;
      if (patch.checked !== undefined) mark(row, patch.checked);
    },
  };
}