@jxsuite/studio 0.11.0 → 0.13.0

package/src/panels/overlays.js

@@ -4,42 +4,83 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, canvasPanels, pathsEqual, subscribe } from "../store.js";
+import { canvasPanels, pathsEqual } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
-import {
-  findCanvasElement,
-  getActivePanel,
-  overlayBoxDescriptor,
-} from "../canvas/canvas-helpers.js";
+import { findCanvasElement, getActivePanel, effectiveZoom } from "../canvas/canvas-helpers.js";
 import { layoutElements } from "../canvas/canvas-live-render.js";
 
-/** @type {any} */
+/**
+ * @typedef {{
+ *   cls: string;
+ *   top: string;
+ *   left: string;
+ *   width: string;
+ *   height: string;
+ *   border?: string;
+ *   isLayout?: boolean;
+ * }} OverlayBox
+ */
+
+/**
+ * @typedef {{
+ *   getCanvasMode: () => string;
+ *   isEditing: () => boolean;
+ *   renderBlockActionBar: () => void;
+ * }} OverlaysCtx
+ */
+
+/** @type {OverlaysCtx | null} */
 let _ctx = null;
 
-/** @type {(() => void) | null} */
-let _unsub = null;
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+let _scheduled = false;
 
 /**
  * Mount the overlays panel.
  *
- * @param {any} ctx — { getCanvasMode, isEditing, renderBlockActionBar }
+ * @param {OverlaysCtx} ctx
  */
 export function mount(ctx) {
   _ctx = ctx;
-  _unsub = subscribe((change) => {
-    if (change.selection || change.hover || change.mode || change.ui || change.doc) render();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Track selection, hover, and mode
+      void tab.session.selection;
+      void tab.session.hover;
+      void tab.doc.mode;
+      render();
+    });
   });
 }
 
 export function unmount() {
-  _unsub?.();
-  _unsub = null;
+  _scope?.stop();
+  _scope = null;
   _ctx = null;
 }
 
 export function render() {
   if (!_ctx) return;
-  const S = getState();
+  if (!_scheduled) {
+    _scheduled = true;
+    queueMicrotask(_flush);
+  }
+}
+
+function _flush() {
+  _scheduled = false;
+  if (!_ctx) return;
+  const tab = activeTab.value;
+  if (!tab) return;
+  const { selection, hover } = tab.session;
+  const { stylebookTab } = tab.session.ui;
   const canvasMode = _ctx.getCanvasMode();
 
   if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "settings") {
@@ -55,7 +96,7 @@ export function render() {
   }
 
   if (canvasMode === "settings") {
-    const enable = S.ui.stylebookTab === "elements";
+    const enable = stylebookTab === "elements";
     for (const p of canvasPanels) {
       p.overlayClk.style.pointerEvents = enable ? "" : "none";
     }
@@ -72,33 +113,46 @@ export function render() {
   }
 
   for (const p of canvasPanels) {
-    /**
-     * @type {{
-     *   cls: string;
-     *   top: string;
-     *   left: string;
-     *   width: string;
-     *   height: string;
-     *   border?: string;
-     * }[]}
-     */
+    /** @type {OverlayBox[]} */
     const boxes = [];
 
-    if (S.hover && !pathsEqual(S.hover, S.selection)) {
-      const el = findCanvasElement(S.hover, p.canvas);
+    // Batch layout reads: read viewport geometry once per panel
+    const vpRect = p.viewport.getBoundingClientRect();
+    const scrollTop = p.viewport.scrollTop;
+    const scrollLeft = p.viewport.scrollLeft;
+    const scale = effectiveZoom();
+
+    if (hover && !pathsEqual(hover, selection)) {
+      const el = findCanvasElement(hover, p.canvas);
       if (el) {
-        const desc = overlayBoxDescriptor(el, "hover", p);
-        if (layoutElements.has(el)) /** @type {any} */ (desc).isLayout = true;
+        const elRect = el.getBoundingClientRect();
+        /** @type {OverlayBox} */
+        const desc = {
+          cls: "overlay-box overlay-hover",
+          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
+          left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
+          width: `${elRect.width / scale}px`,
+          height: `${elRect.height / scale}px`,
+        };
+        if (layoutElements.has(el)) desc.isLayout = true;
         boxes.push(desc);
       }
     }
 
-    if (S.selection && p === getActivePanel()) {
-      const el = findCanvasElement(S.selection, p.canvas);
+    if (selection && p === getActivePanel()) {
+      const el = findCanvasElement(selection, p.canvas);
       if (el) {
-        const desc = overlayBoxDescriptor(el, "selection", p);
-        if (view.componentInlineEdit || _ctx.isEditing()) /** @type {any} */ (desc).border = "none";
-        if (layoutElements.has(el)) /** @type {any} */ (desc).isLayout = true;
+        const elRect = el.getBoundingClientRect();
+        /** @type {OverlayBox} */
+        const desc = {
+          cls: "overlay-box overlay-selection",
+          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
+          left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
+          width: `${elRect.width / scale}px`,
+          height: `${elRect.height / scale}px`,
+        };
+        if (view.componentInlineEdit || _ctx.isEditing()) desc.border = "none";
+        if (layoutElements.has(el)) desc.isLayout = true;
         boxes.push(desc);
       }
     }
@@ -109,16 +163,12 @@ export function render() {
         ${boxes.map(
           (b) => html`
             <div
-              class="${b.cls}${/** @type {any} */ (b).isLayout ? " overlay-layout" : ""}"
+              class="${b.cls}${b.isLayout ? " overlay-layout" : ""}"
               style="top:${b.top};left:${b.left};width:${b.width};height:${b.height}${b.border
                 ? `;border:${b.border}`
                 : ""}"
             >
-              ${
-                /** @type {any} */ (b).isLayout
-                  ? html`<span class="overlay-layout-badge">Layout</span>`
-                  : nothing
-              }
+              ${b.isLayout ? html`<span class="overlay-layout-badge">Layout</span>` : nothing}
             </div>
           `,
         )}

package/src/panels/panel-events.js

@@ -5,18 +5,16 @@
  */
 
 import {
-  update,
   updateUi,
-  selectNode,
   hoverNode,
   elToPath,
   pathsEqual,
-  insertNode,
   parentElementPath,
   childIndex,
   getNodeAtPath,
   renderOnly,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.js";
 import { showContextMenu } from "../editor/context-menu.js";
@@ -91,7 +89,7 @@ export function registerPanelEvents(panel) {
           // Layout element clicked — show layout info instead of selecting in page doc
           if (layoutElements.has(el)) {
             view.layoutSelection = { el, layoutPath: activeLayoutPath };
-            update(selectNode(S, null));
+            activeTab.value.session.selection = null;
             renderOnly("rightPanel");
             return;
           }
@@ -117,16 +115,18 @@ export function registerPanelEvents(panel) {
 
             if (canvasMode === "design" && S.mode !== "content") {
               updateUi("pendingInlineEdit", { path, mediaName });
-              update(selectNode(withMedia, path));
+              activeTab.value.session.ui.activeMedia = newMedia;
+              activeTab.value.session.selection = path;
               return;
             }
 
-            update(selectNode(withMedia, path));
+            activeTab.value.session.ui.activeMedia = newMedia;
+            activeTab.value.session.selection = path;
             return;
           }
         }
       }
-      update(selectNode(S, null));
+      activeTab.value.session.selection = null;
     },
     opts,
   );
@@ -161,8 +161,8 @@ export function registerPanelEvents(panel) {
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-              const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
-              update(selectNode(withMedia, path));
+              activeTab.value.session.ui.activeMedia = newMedia;
+              activeTab.value.session.selection = path;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
@@ -253,13 +253,10 @@ export function registerPanelEvents(panel) {
 
   insertionHelper.mount({
     getState: _ctx.getState,
-    update,
     getCanvasMode: _ctx.getCanvasMode,
     withPanelPointerEvents,
     effectiveZoom: effectiveZoom,
     defaultDef,
-    insertNode,
-    selectNode,
     parentElementPath,
     childIndex,
     getNodeAtPath,