feat(spreadsheet): D 잇기 — 데이터 메뉴(조건부 서식 · 유효성 · 이름 · 눈금선) · 유효성 검사 · 이름 상자 · 여러 범위

- spreadsheet_data_menu.ts(새) — [↑] [↓] [필터] [데이터 ▾] · 패널 창(sub4 조건부 서식 · 유효성 · 이름 관리) · 눈금선 · 유효성 목록 ▼ · Alt+↓ - spreadsheet_editor.ts — 확정 때 유효성 검사(막음 = 편집 유지 · 경고 = 알림) · 주소 상자에 이름 = 그 범위로 · 새 이름 = 지금 고름에 정의 - spreadsheet_mouse.ts · spreadsheet_selection.ts — Ctrl+누르기 여러 범위 · Shift 는 마지막 범위 - spreadsheet_keys.ts · spreadsheet.ts — 유효성에 막히면 이동 · 시트 바꿈 멈춤 - spreadsheet_extras.ts — 정렬 · 필터를 데이터 메뉴로 옮김 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L6KXAabDTenEU7hrDQmCKY
2026-09-27 21:13:10 +09:00
parent 015c35ad0e
commit 61d9c0de58
8 changed files with 320 additions and 59 deletions
@@ -0,0 +1,213 @@
+/* =============================================================================
+ * spreadsheet_data_menu.ts  (주인 D)
+ * 데이터 단추 · 메뉴 잇기 — 수식 입력줄 앞 [↑] [↓] [필터] [데이터 ▾].
+ *   정렬 · 자동 필터(sub3 `spreadsheet_sort_dialog` · `spreadsheet_filter`) ·
+ *   조건부 서식 · 데이터 유효성 · 이름 관리(sub4 패널 — 부품 오른위 창에 띄움) · 눈금선 보이기/숨기기.
+ * 유효성 목록 칸은 고르면 칸 옆 ▼ · Alt+↓ 로 값 목록(필터 머리 칸이면 필터 목록이 먼저).
+ * ========================================================================== */
+
+import "./spreadsheet_stage3.css"; // sub4 패널 스타일(잇는 쪽이 붙임)
+import { createMapContextMenu } from "@ui/ui_template_context_menu";
+import { el } from "@ui/ui_template_elements";
+import { parseRange, toA1 } from "./spreadsheet_address";
+import { createCondFmtPanel } from "./spreadsheet_condfmt";
+import { attachFilter, toggleFilter } from "./spreadsheet_filter";
+import { createNameManagerPanel } from "./spreadsheet_names";
+import { openSortDialog, sortSelection } from "./spreadsheet_sort_dialog";
+import {
+  createValidationDropdown,
+  createValidationPanel,
+  findValidation,
+} from "./spreadsheet_validation";
+import type { KeyHooks } from "./spreadsheet_keys";
+import type { PartHandle, SpreadsheetContext } from "./spreadsheet_view_types";
+
+const TEXT = {
+  asc: "오름차순 정렬(활성 칸 열 기준)",
+  desc: "내림차순 정렬(활성 칸 열 기준)",
+  filter: "자동 필터 켜기 · 끄기(Ctrl+Shift+L · 머리 칸에서 Alt+↓ 값 목록)",
+  menu: "데이터 ▾",
+  sort: "정렬…",
+  filterItem: "자동 필터 켜기 · 끄기",
+  condfmt: "조건부 서식…",
+  validation: "데이터 유효성…",
+  names: "이름 관리…",
+  grid: "눈금선 보이기 · 숨기기",
+  close: "닫기",
+  list: "값 목록(Alt+↓)",
+};
+
+export interface DataMenu {
+  /** 수식 입력줄 앞에 둘 단추들 */
+  buttons: HTMLElement[];
+  keys: Pick<KeyHooks, "filter" | "dropdown">;
+  part: PartHandle;
+}
+
+export function mountDataMenu(ctx: SpreadsheetContext, back: () => void): DataMenu {
+  const filter = attachFilter(ctx);
+  const menu = createMapContextMenu("ss");
+  ctx.root.append(menu.element);
+  let closeSort: (() => void) | null = null;
+
+  const button = (text: string, title: string, run: (b: HTMLElement) => void, keep = false) => {
+    const b = el("button", { className: "ss-brush", text, attrs: { type: "button", title } });
+    b.addEventListener("click", () => {
+      run(b);
+      if (!keep) back();
+    });
+    return b;
+  };
+
+  // ── 패널 창(조건부 서식 · 유효성 · 이름) — 한 번에 하나 ─────────────────────
+  const title = el("span", { className: "ss-dialog__title" });
+  const body = el("div", { className: "ss-dialog__body" });
+  const shut = el("button", {
+    className: "ss-find__btn",
+    text: "×",
+    attrs: { type: "button", title: TEXT.close },
+  });
+  const dialog = el("div", {
+    className: "ss-dialog",
+    attrs: { hidden: "" },
+    children: [el("div", { className: "ss-dialog__head", children: [title, shut] }), body],
+  });
+  ctx.root.append(dialog);
+  let panel: PartHandle | null = null;
+  const closePanel = (): void => {
+    panel?.destroy();
+    panel = null;
+    body.replaceChildren();
+    dialog.setAttribute("hidden", "");
+  };
+  shut.addEventListener("click", () => (closePanel(), back()));
+  dialog.addEventListener("keydown", (e) => {
+    if (e.key !== "Escape") return;
+    e.stopPropagation();
+    closePanel();
+    back();
+  });
+  function openPanel(name: string, make: (c: SpreadsheetContext) => PartHandle): void {
+    closePanel();
+    panel = make(ctx);
+    title.textContent = name.replace("…", "");
+    if (panel.root) body.append(panel.root);
+    dialog.removeAttribute("hidden");
+  }
+
+  function openMenu(anchor: HTMLElement): void {
+    const r = anchor.getBoundingClientRect();
+    const items: [string, () => void][] = [
+      [TEXT.sort, () => ((closeSort = openSortDialog(ctx)), undefined)],
+      [TEXT.filterItem, () => (toggleFilter(ctx), back())],
+      [TEXT.condfmt, () => openPanel(TEXT.condfmt, createCondFmtPanel)],
+      [TEXT.validation, () => openPanel(TEXT.validation, createValidationPanel)],
+      [TEXT.names, () => openPanel(TEXT.names, createNameManagerPanel)],
+      [TEXT.grid, () => (toggleGridlines(), back())],
+    ];
+    if (!ctx.readOnly) menu.open(r.left, r.bottom, items);
+  }
+
+  function toggleGridlines(): void {
+    const s = ctx.sheet();
+    ctx.dispatch({ 종류: "눈금선", 시트: s.id, 보임: s.보기?.눈금선 === false });
+  }
+
+  // ── 유효성 목록 — ▼ 단추 · Alt+↓ ─────────────────────────────────────────
+  let drop: HTMLElement | null = null;
+  const closeDrop = (): void => {
+    drop?.remove();
+    drop = null;
+  };
+  const arrow = el("button", {
+    className: "ss-list-arrow",
+    text: "▼",
+    attrs: { type: "button", hidden: "", title: TEXT.list },
+  });
+  arrow.addEventListener("mousedown", (e) => e.preventDefault());
+  arrow.addEventListener("click", () => openList());
+  ctx.root.append(arrow);
+  /** 칸 자리(부품 뿌리 기준) */
+  const at = (r: number, c: number) => {
+    const { box } = ctx.grid.editorSlot(r, c);
+    const g = ctx.grid.root.getBoundingClientRect();
+    const o = ctx.root.getBoundingClientRect();
+    return { x: box.x + g.left - o.left, y: box.y + g.top - o.top, w: box.w, h: box.h };
+  };
+  function openList(): boolean {
+    const { r, c } = ctx.selection.활성;
+    const rule = findValidation(ctx.sheet(), r, c);
+    if (ctx.readOnly || !rule) return false;
+    closeDrop();
+    drop = createValidationDropdown(ctx, r, c, rule, (value) => {
+      closeDrop();
+      const key = toA1(r, c);
+      const n = Number(value);
+      const 값 = value !== "" && Number.isFinite(n) ? n : value;
+      const 서식 = ctx.sheet().칸[key]?.서식;
+      const cell = 서식 === undefined ? { 값 } : { 값, 서식 };
+      ctx.dispatch({ 종류: "칸", 시트: ctx.selection.시트, 칸: { [key]: cell } });
+      back();
+    });
+    if (!drop) return false;
+    const p = at(r, c);
+    drop.style.left = `${p.x}px`; // cellBox(스크롤 전 내용 좌표) 자리를 화면 자리로 고침
+    drop.style.top = `${p.y + p.h}px`;
+    ctx.root.append(drop);
+    return true;
+  }
+  const onOutside = (e: MouseEvent): void => {
+    if (drop && !drop.contains(e.target as Node) && e.target !== arrow) closeDrop();
+  };
+  document.addEventListener("mousedown", onOutside, true);
+
+  const buttons = ctx.readOnly
+    ? []
+    : [
+        button("↑", TEXT.asc, () => sortSelection(ctx, false)),
+        button("↓", TEXT.desc, () => sortSelection(ctx, true)),
+        button("필터", TEXT.filter, () => toggleFilter(ctx)),
+        button(TEXT.menu, TEXT.menu, openMenu, true),
+      ];
+
+  return {
+    buttons,
+    keys: {
+      filter: () => toggleFilter(ctx),
+      dropdown() {
+        const f = ctx.sheet().필터;
+        const g = f && parseRange(f.범위);
+        const { r, c } = ctx.selection.활성;
+        if (g && r === g.r0 && c >= g.c0 && c <= g.c1) return (filter.open(c), true);
+        return openList();
+      },
+    },
+    part: {
+      root: null,
+      refresh() {
+        filter.refresh();
+        panel?.refresh();
+        closeDrop();
+        const { r, c } = ctx.selection.활성;
+        const list = !ctx.readOnly && findValidation(ctx.sheet(), r, c)?.규칙.종류 === "목록";
+        arrow.hidden = !list || ctx.editor.editing();
+        if (!list) return;
+        const p = at(r, c);
+        arrow.style.left = `${p.x + p.w + 1}px`;
+        arrow.style.top = `${p.y}px`;
+        arrow.style.height = `${p.h}px`;
+      },
+      destroy() {
+        document.removeEventListener("mousedown", onOutside, true);
+        closeSort?.();
+        closePanel();
+        closeDrop();
+        filter.destroy();
+        menu.element.remove();
+        dialog.remove();
+        arrow.remove();
+        buttons.forEach((b) => b.remove());
+      },
+    },
+  };
+}