@leviosa-ai/detail-page-editor 0.13.1 → 0.13.4

package/components/detail-page/leviosa-canvas-workspace.tsx

@@ -207,9 +207,19 @@ export function LeviosaCanvasWorkspace({
     const frame = inner.getBoundingClientRect();
     const cx = frame.left + inner.clientWidth / 2;
     const cy = frame.top + inner.clientHeight / 2;
+    // **벌은 스크롤로 안 바뀐다.** 벌을 고르는 것은 그 안을 누르는 일이지 지나가는
+    // 일이 아니다 — 빈 자리를 잡아 화면을 옮겼을 뿐인데 «대표로 지정»이 다른 벌로
+    // 건너뛰면 어디를 보고 있는지 알 수가 없다. 같은 벌 안에서 어느 판을 보고 있는지만
+    // 따라간다. 꼬리표 없는 문서는 전부가 한 벌이라 지금까지와 똑같다.
+    const current = frameOf(store.activePage ?? store.pages[0] ?? {});
     const nodes = Array.from(
       inner.querySelectorAll<HTMLElement>("[data-lc-page]"),
-    );
+    ).filter((node) => {
+      const page = node.dataset.lcPage
+        ? store.getPageById(node.dataset.lcPage)
+        : null;
+      return page ? frameOf(page) === current : false;
+    });
     const distance = (node: HTMLElement) => {
       const box = node.getBoundingClientRect();
       const dx = Math.max(box.left - cx, 0, cx - box.right);
@@ -229,11 +239,28 @@ export function LeviosaCanvasWorkspace({
     store.selectPage(id);
   }, [store]);
 
+  /**
+   * 고른 요소가 있으면 «보고 있는 벌»은 손이 가 있는 곳이지 화면 가운데가 아니다.
+   *
+   * 이게 없으면 4번 벌의 요소를 집는 순간 그 선택이 활성 페이지를 옮기고, 그 때문에
+   * 화면이 스르륵 움직이고, 그 스크롤이 가운데에 있는 2번 벌을 다시 활성으로 만든다 —
+   * 집은 것은 4번인데 «대표로 지정»은 2번 위에 뜬다.
+   */
+  const holding = store.selectedElementsIds.length > 0;
+  /** 고른 요소가 놓인 페이지. 활성 화면이 여기로 온 것이면 손으로 누른 것이다. */
+  const heldPageId =
+    store.pageOfElement(store.selectedElementsIds[0] ?? "")?.id ?? null;
+
   const scrollRaf = useRef<number | null>(null);
+  const holdingRef = useRef(holding);
+  holdingRef.current = holding;
+  const heldPageIdRef = useRef(heldPageId);
+  heldPageIdRef.current = heldPageId;
   const onScroll = useCallback(() => {
     if (scrollRaf.current != null) return;
     scrollRaf.current = requestAnimationFrame(() => {
       scrollRaf.current = null;
+      if (holdingRef.current) return;
       recomputeActive();
     });
   }, [recomputeActive]);
@@ -243,6 +270,13 @@ export function LeviosaCanvasWorkspace({
   useEffect(() => {
     const inner = innerRef.current;
     if (!inner || !activeId || activeId === scrollSetId.current) return;
+    // 캔버스에서 요소를 집어 활성 화면이 바뀐 것이면 옮기지 않는다. 방금 손으로
+    // 누른 것이라 이미 보고 있고, 여기서 화면을 움직이면 누를 때마다 밑이 흔들린다.
+    // 목록에서 고른 때만 데려간다.
+    if (activeId === heldPageIdRef.current) {
+      scrollSetId.current = activeId;
+      return;
+    }
     scrollSetId.current = activeId;
     const node = inner.querySelector<HTMLElement>(
       `[data-lc-page="${CSS.escape(activeId)}"]`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.13.1",
+  "version": "0.13.4",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "UNLICENSED",
@@ -67,7 +67,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "0.6.1",
+    "@leviosa-ai/canvas": "0.6.4",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",