@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/canvas-context-menu.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useEffect, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import { observer } from "./canvas-observer";
+import { useTranslation } from "react-i18next";
+import {
+  ChevronDown,
+  ChevronUp,
+  ChevronsDown,
+  ChevronsUp,
+  Copy,
+  Group,
+  Lock,
+  Paintbrush,
+  PaintBucket,
+  Trash2,
+  Ungroup,
+  Unlock,
+  type LucideIcon,
+} from "lucide-react";
+
+import { frontmostPath, type DrillElement } from "./group-drill-in";
+import { konvaClientRect } from "./element-rects";
+import {
+  canvasMenuItems,
+  runCanvasMenuAction,
+  type CanvasMenuAction,
+  type CanvasMenuStore,
+} from "../../lib/detail-page/canvas-menu";
+
+/**
+ * 캔버스 우클릭 메뉴.
+ *
+ * 스톡 편집기의 ``<Page>``는 ``contextmenu``를 안 단다 — 스톡 ``<Workspace>``가 달던 것이고
+ * 우리는 그걸 갈아치웠다(``stacked-canvas-workspace.tsx``). 그래서 워크스페이스
+ * 컨테이너에 우리가 직접 단다.
+ *
+ * 어느 요소를 대상으로 삼는지는 **스톡 편집기의 좌클릭과 같은 규칙**을 따른다: 커서 아래
+ * 최상위 요소. 다만 이미 그 안쪽(드릴인한 자식)이 선택돼 있으면 선택을 안 건드린다 —
+ * 그룹 안 도형을 골라 놓고 우클릭했는데 그룹으로 되돌아가면 메뉴가 남의 것을 만진다.
+ *
+ * 히트테스트는 ``GroupDrillIn``의 ``frontmostPath``를 그대로 쓴다. 스톡 편집기가 Konva
+ * 그룹에 요소 id를 안 박기 때문에 잎(leaf)부터 찾아 올라가야 한다.
+ */
+
+type MenuStore = CanvasMenuStore & {
+  pages?: Array<{ id: string; children?: DrillElement[] }>;
+  selectElements?: (ids: string[]) => void;
+};
+
+const ICONS: Record<CanvasMenuAction, LucideIcon> = {
+  duplicate: Copy,
+  lock: Lock,
+  unlock: Unlock,
+  delete: Trash2,
+  copyFormat: Paintbrush,
+  pasteFormat: PaintBucket,
+  front: ChevronsUp,
+  forward: ChevronUp,
+  backward: ChevronDown,
+  back: ChevronsDown,
+  group: Group,
+  ungroup: Ungroup,
+};
+
+const MENU_WIDTH = 200;
+/** 화면 밖으로 안 나가게 미는 여백. */
+const EDGE = 8;
+
+/** 커서 자리에서 시작하되, 뷰포트를 넘으면 안쪽으로 당긴다. */
+export function menuPosition(
+  point: { x: number; y: number },
+  viewport: { width: number; height: number },
+  size: { width: number; height: number },
+): { left: number; top: number } {
+  const left = Math.max(
+    EDGE,
+    Math.min(point.x, viewport.width - size.width - EDGE),
+  );
+  const top = Math.max(
+    EDGE,
+    Math.min(point.y, viewport.height - size.height - EDGE),
+  );
+  return { left, top };
+}
+
+/**
+ * 우클릭이 가리키는 요소 id. 선택을 안 바꿔도 되면 null.
+ *
+ * 커서 아래 아무것도 없으면 ``{ hit: false }`` — 메뉴를 안 연다.
+ */
+export function contextTarget(
+  pages: ReadonlyArray<{ children?: DrillElement[] }>,
+  rectOf: (id: string) => { left: number; top: number; right: number; bottom: number } | null,
+  point: { x: number; y: number },
+  selectedIds: ReadonlyArray<string>,
+): { hit: boolean; select: string | null } {
+  for (const page of pages) {
+    const path = frontmostPath(page.children ?? [], rectOf, point);
+    if (!path) continue;
+    const top = path[0];
+    // 선택이 이미 이 최상위 요소 안에 있으면 그대로 둔다(드릴인·다중선택 보존).
+    const inside = new Set<string>();
+    const collect = (el: DrillElement) => {
+      inside.add(el.id);
+      for (const c of el.children ?? []) collect(c);
+    };
+    collect(top);
+    if (selectedIds.some((id) => inside.has(id))) return { hit: true, select: null };
+    return { hit: true, select: top.id };
+  }
+  return { hit: false, select: null };
+}
+
+export const CanvasContextMenu = observer(function CanvasContextMenu({
+  store,
+  containerRef,
+}: {
+  store: unknown;
+  containerRef: RefObject<HTMLDivElement | null>;
+}) {
+  const { t } = useTranslation("branding");
+  const s = store as MenuStore;
+  const [at, setAt] = useState<{ x: number; y: number } | null>(null);
+
+  const close = useCallback(() => setAt(null), []);
+
+  useEffect(() => {
+    const host = containerRef.current;
+    if (!host) return;
+
+    const onContextMenu = (e: MouseEvent) => {
+      const point = { x: e.clientX, y: e.clientY };
+      const target = contextTarget(
+        s.pages ?? [],
+        konvaClientRect,
+        point,
+        s.selectedElementsIds ?? [],
+      );
+      if (!target.hit) {
+        // 빈 캔버스: 브라우저 기본 메뉴에 맡긴다(새로고침·검사 등이 여전히 쓸모 있다).
+        setAt(null);
+        return;
+      }
+      e.preventDefault();
+      if (target.select) s.selectElements?.([target.select]);
+      setAt(point);
+    };
+
+    host.addEventListener("contextmenu", onContextMenu);
+    return () => host.removeEventListener("contextmenu", onContextMenu);
+  }, [s, containerRef]);
+
+  // 스크롤·줌·리사이즈로 캔버스가 움직이면 메뉴가 엉뚱한 자리를 가리킨다 — 닫는다.
+  useEffect(() => {
+    if (!at) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("resize", close);
+    window.addEventListener("wheel", close, { passive: true });
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", close);
+      window.removeEventListener("wheel", close);
+    };
+  }, [at, close]);
+
+  const items = at ? canvasMenuItems(s) : [];
+  if (!at || items.length === 0) return null;
+
+  // 항목 높이 30 + 구분선 9 + 상하 여백 8. 실측 대신 계산으로 충분하다(살짝 어긋나도
+  // 화면 안이면 그만).
+  const height =
+    items.length * 30 + items.filter((i) => i.separated).length * 9 + 8;
+  const { left, top } = menuPosition(
+    at,
+    { width: window.innerWidth, height: window.innerHeight },
+    { width: MENU_WIDTH, height },
+  );
+
+  // 워크스페이스 **바깥**(body)에 그린다. 안에 두면 배경막을 누르는 pointerdown이
+  // GroupDrillIn의 캡처 리스너에 먼저 걸려, 메뉴를 닫으려는 클릭이 그룹 안 도형을
+  // 골라 버린다. 어차피 fixed 배치라 DOM 위치는 상관없다.
+  return createPortal(
+    <>
+      {/* 바깥 아무 데나 누르면 닫힌다. 우클릭도 잡아야 메뉴가 겹쳐 뜨지 않는다. */}
+      <div
+        data-dp-menu-backdrop
+        className="fixed inset-0 z-[70]"
+        onPointerDown={close}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          close();
+        }}
+      />
+      <div
+        role="menu"
+        data-dp-canvas-menu
+        style={{ left, top, width: MENU_WIDTH }}
+        className="fixed z-[71] rounded-lg border border-neutral-200 bg-white py-1 shadow-lg"
+      >
+        {items.map((item) => {
+          const Icon = ICONS[item.action];
+          const label = t(`detailPage.canvasMenu.${item.action}`);
+          return (
+            <div key={item.action}>
+              {item.separated ? (
+                <div className="my-1 border-t border-neutral-100" />
+              ) : null}
+              <button
+                type="button"
+                role="menuitem"
+                data-dp-menu-action={item.action}
+                disabled={item.disabled}
+                onClick={() => {
+                  runCanvasMenuAction(s, item.action);
+                  close();
+                }}
+                className="flex h-[30px] w-full items-center gap-2.5 px-3 text-left text-[13px] text-neutral-700 transition-colors hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+              >
+                <Icon size={14} className="shrink-0 text-neutral-500" />
+                {label}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </>,
+    document.body,
+  );
+});

package/components/detail-page/canvas-observer.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+/**
+ * 편집기 컴포넌트가 스토어 변경에 다시 그려지게 하는 자리 (G7-b).
+ *
+ * 편집기의 패널·오버레이는 거의 다 이 `observer`로 싸여 있다. 이름은 mobx에서 왔지만
+ * 이제 mobx가 아니다 — 우리 엔진 스토어는 리스너 + `version` 숫자이므로(하드룰: 새
+ * 런타임 의존성 0) 구독해서 버전을 읽으면 그만이다. 스톡 편집기가 사라지면서 관측할 mobx
+ * 값도 같이 사라졌고, `mobx-react-lite`는 그때 함께 걷어냈다. 남은 것은 그것이 얹어
+ * 주던 `memo` 한 겹이라 여기서 직접 씌운다.
+ *
+ * **한 겹 안에서 구독과 렌더를 같이 한다.** 감싼 컴포넌트를 자식 엘리먼트로 그리면
+ * (`<Component {...props}/>`) 구독한 쪽과 읽는 쪽이 갈라진다. 그래서 자식으로 두지 않고
+ * **그 자리에서 함수로 부른다**. 훅 목록이 [우리 것, …컴포넌트 것]으로 매번 같은
+ * 순서라 규칙에도 맞다.
+ *
+ * 밖에서 신호를 주는 방법(props에 버전을 얹기)은 안 쓴다 — `memo`를 뚫으려고 컴포넌트가
+ * 모르는 prop을 끼워 넣게 되고, 그게 DOM 속성으로 새면 조용한 경고가 된다.
+ *
+ * 왜 얼굴(`canvas-store-facade`)을 새로 만들어 내려보내지 않는가 — 그 방법도 되지만
+ * 스토어의 정체성이 매번 바뀌어서, `[store]`를 의존성으로 둔 effect가 글자 한 자마다
+ * 다시 붙는다(리스너 재등록, 타이머 재시작). 스토어는 그대로 두고 신호만 보낸다.
+ */
+
+import {
+  createContext,
+  memo,
+  useContext,
+  useSyncExternalStore,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+
+import type { CanvasStore } from "@leviosa-ai/canvas/store";
+
+/** 이 편집기가 그리고 있는 스토어. 하네스처럼 안 꽂는 자리도 있어 `null`을 받는다. */
+export const CanvasStoreContext = createContext<CanvasStore | null>(null);
+
+/** 스토어가 없을 때 쓰는 붙박이 구독 — 매번 새 함수를 만들면 재구독이 돈다. */
+const NO_SUBSCRIBE = () => () => {};
+
+export function useCanvasStoreVersion(): number {
+  const store = useContext(CanvasStoreContext);
+  return useSyncExternalStore(
+    store?.subscribe ?? NO_SUBSCRIBE,
+    () => store?.version ?? 0,
+    () => 0,
+  );
+}
+
+/**
+ * 함수 컴포넌트만 받는다(`memo`·`forwardRef`로 이미 싸인 것은 그 자리에서 부를 수
+ * 없다). 편집기의 `observer(function …)` 자리들이 전부 여기 해당하고, 아닌 것을
+ * 넘기면 타입 단계에서 걸린다 — 조용히 다른 길로 새는 것보다 낫다.
+ */
+export function observer<P extends object>(
+  Component: (props: P) => ReactNode,
+): ComponentType<P> {
+  function Reactive(props: P) {
+    useCanvasStoreVersion();
+    // 자식 엘리먼트로 두지 않고 그 자리에서 부른다(위 주석).
+    return Component(props);
+  }
+  Reactive.displayName = `canvasObserver(${Component.name || "Anonymous"})`;
+  // `memo`는 mobx `observer`가 얹어 주던 것이다. 빼면 부모가 다시 그려질 때마다
+  // 패널 전부가 따라 그려진다 — 구독이 이미 필요한 때를 알려 주므로 그건 순손해다.
+  return memo(Reactive) as ComponentType<P>;
+}

package/components/detail-page/canvas-overlay-host.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useMemo, useSyncExternalStore, type RefObject } from "react";
+
+import {
+  legacyStoreFacade,
+  type LegacyStoreFacade,
+} from "./canvas-store-facade";
+import { SpecResizeAbsorber } from "./spec-resize-absorber";
+import { TableCanvasOverlay } from "./table-canvas-overlay";
+import type { CanvasStore } from "@leviosa-ai/canvas/store";
+
+/**
+ * 표·차트 오버레이를 **우리 엔진** 캔버스 위에 얹는다 (G4).
+ *
+ * 오버레이 코드는 한 줄도 안 고쳤다. 얼굴 하나(`canvas-store-facade`)와 리렌더 신호만
+ * 대 주면 그대로 돈다 — 왜 그런지는 그 파일에 적어 뒀다.
+ */
+
+/** 스토어가 바뀔 때마다 새 얼굴. 안 바뀌면 같은 얼굴이라 오버레이도 안 다시 그린다. */
+export function useLegacyStore(store: CanvasStore): LegacyStoreFacade {
+  const version = useSyncExternalStore(
+    store.subscribe,
+    () => store.version,
+    () => store.version,
+  );
+  return useMemo(() => legacyStoreFacade(store), [store, version]);
+}
+
+export function CanvasOverlayHost({
+  store,
+  containerRef,
+}: {
+  store: CanvasStore;
+  containerRef: RefObject<HTMLElement | null>;
+}) {
+  const facade = useLegacyStore(store);
+  return (
+    <>
+      <TableCanvasOverlay store={facade} containerRef={containerRef} />
+      <SpecResizeAbsorber store={facade} containerRef={containerRef} />
+    </>
+  );
+}

package/components/detail-page/canvas-store-facade.ts

@@ -0,0 +1,51 @@
+import type { SelectableElement } from "./detail-page-selection";
+import type { StoreLike } from "../../lib/detail-page/spec-group/sync";
+import type { CanvasStore } from "@leviosa-ai/canvas/store";
+
+/**
+ * 우리 엔진 스토어를 **캔버스 위 층이 보는 얼굴**로 바꾼다 (G4).
+ *
+ * 표·차트(`spec-group/sync`)와 그 오버레이들은 스토어를 구조적 타입으로만 받는다 —
+ * 스톡 SDK 클래스를 부르는 자리가 한 곳도 없다. 그래서 새 엔진을 물리는 일은 이식이
+ * 아니라 얼굴 하나 만드는 일이다. 아래 목록이 곧 **"캔버스 위 층이 스토어에서 실제로
+ * 쓰는 것 전부"**이고, G7에서 패키지 경계를 그을 때 이 목록이 그대로 계약이 된다.
+ *
+ * ## 왜 클래스를 그대로 안 넘기는가
+ *
+ * 두 가지다.
+ *
+ * 1. **리렌더.** 오버레이는 `observer`(mobx-react-lite)로 싸여 있고 그 안에 `React.memo`가
+ *    있다. 우리 스토어는 mobx가 아니라 리스너 + `version`이라 mobx가 추적할 게 없고,
+ *    props identity가 그대로면 memo가 리렌더를 막는다. 버전마다 새 얼굴을 만들면
+ *    memo가 통과시킨다(`useLegacyStore`).
+ * 2. **`null` vs `undefined`.** 계약은 "없으면 `undefined`"인데 우리는 `null`을 준다.
+ *    여기 한 줄로 맞춘다.
+ *
+ * ## 왜 스프레드도 `Object.create`도 아닌가
+ *
+ * `{ ...store }`는 프로토타입 메서드를 전부 잃는다(우리 메서드는 전부 프로토타입에 있다).
+ * `Object.create(store)`는 반대로 위험하다 — 메서드 안의 `this.selectedElementsIds = …`
+ * 같은 대입이 **얼굴 쪽에 그림자 속성**을 만들어 진짜 스토어와 조용히 갈라진다.
+ * 그래서 필요한 것만 손으로 적는다.
+ */
+export type LegacyStoreFacade = StoreLike & {
+  /** 화면 배율. 줌이 바뀌면 캔버스 위 층이 상자를 다시 잰다. */
+  scale: number;
+  selectedElementsIds: string[];
+  getElementById: (id: string) => SelectableElement | undefined;
+};
+
+export function legacyStoreFacade(store: CanvasStore): LegacyStoreFacade {
+  return {
+    pages: store.pages,
+    activePage: store.activePage ?? undefined,
+    history: store.history,
+    scale: store.scale,
+    selectedElementsIds: store.selectedElementsIds,
+    getElementById: (id) =>
+      (store.getElementById(id) as SelectableElement | null) ?? undefined,
+    groupElements: (ids, attrs) => store.groupElements(ids, attrs),
+    deleteElements: (ids) => store.deleteElements(ids),
+    selectElements: (ids) => store.selectElements(ids),
+  };
+}