@jxsuite/studio 0.11.0 → 0.14.0

package/src/canvas/canvas-utils.js

@@ -8,8 +8,8 @@ import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 
-import { getState, renderOnly, updateUi, canvasWrap, canvasPanels } from "../store.js";
-import { ensureLitState } from "../panels/shared.js";
+import { renderOnly, updateUi, canvasWrap, canvasPanels } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 
 /** @type {any} */
@@ -44,14 +44,14 @@ export function initCanvasUtils(ctx) {
 export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
   /**
    * @type {{
-   *   mediaName: any;
-   *   element: Element | null;
-   *   canvas: Element | null;
-   *   overlay: Element | null;
-   *   overlayClk: Element | null;
-   *   viewport: Element | null;
-   *   dropLine: Element | null;
-   *   _width: any;
+   *   mediaName: string;
+   *   element: HTMLElement | null;
+   *   canvas: HTMLElement | null;
+   *   overlay: HTMLElement | null;
+   *   overlayClk: HTMLElement | null;
+   *   viewport: HTMLElement | null;
+   *   dropLine: HTMLElement | null;
+   *   _width: number | null;
    * }}
    */
   const panel = {
@@ -69,7 +69,7 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
       class=${`canvas-panel${fullWidth ? " full-width" : ""}`}
       data-media=${ifDefined(mediaName !== null ? mediaName : undefined)}
       ${ref((el) => {
-        if (el) panel.element = el;
+        if (el) panel.element = /** @type {HTMLElement} */ (el);
       })}
     >
       ${label
@@ -88,34 +88,34 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
         class="canvas-panel-viewport"
         style=${styleMap({ width: width && !fullWidth ? `${width}px` : "" })}
         ${ref((el) => {
-          if (el) panel.viewport = el;
+          if (el) panel.viewport = /** @type {HTMLElement} */ (el);
         })}
       >
         <div
           class="canvas-panel-canvas"
           style=${styleMap({ width: width ? `${width}px` : "" })}
           ${ref((el) => {
-            if (el) panel.canvas = el;
+            if (el) panel.canvas = /** @type {HTMLElement} */ (el);
           })}
         ></div>
         <div
           class="canvas-panel-overlay"
           ${ref((el) => {
-            if (el) panel.overlay = el;
+            if (el) panel.overlay = /** @type {HTMLElement} */ (el);
           })}
         >
           <div
             class="canvas-drop-indicator"
             style="display:none"
             ${ref((el) => {
-              if (el) panel.dropLine = el;
+              if (el) panel.dropLine = /** @type {HTMLElement} */ (el);
             })}
           ></div>
         </div>
         <div
           class="canvas-panel-click"
           ${ref((el) => {
-            if (el) panel.overlayClk = el;
+            if (el) panel.overlayClk = /** @type {HTMLElement} */ (el);
           })}
         ></div>
       </div>
@@ -168,8 +168,7 @@ export function applyTransform() {
   if (!view.panzoomWrap) return;
   const zoom = _ctx.getZoom();
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
-  const label = document.querySelector(".zoom-indicator-label");
-  if (label) label.textContent = `${Math.round(zoom * 100)}%`;
+  renderZoomIndicator();
   renderOnly("overlays");
   if (_ctx.getCanvasMode() === "settings") _ctx.renderStylebookOverlays();
 }
@@ -207,7 +206,6 @@ export function fitToScreen() {
 
 /** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
 export function resetZoomIndicator() {
-  ensureLitState(zoomIndicatorHost);
   litRender(nothing, zoomIndicatorHost);
 }
 
@@ -220,7 +218,6 @@ export function renderZoomIndicator() {
   if (!zoomIndicatorHost.isConnected) {
     document.body.appendChild(zoomIndicatorHost);
   }
-  ensureLitState(zoomIndicatorHost);
   litRender(
     html`
       <div class="zoom-indicator">
@@ -263,14 +260,14 @@ export function positionZoomIndicator() {
 
 /** Toggle "active" class on canvas panel headers based on activeMedia. */
 export function updateActivePanelHeaders() {
-  const S = getState();
+  const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
   for (const p of canvasPanels) {
-    const header = p.element.querySelector(".canvas-panel-header");
+    const header = p.element?.querySelector(".canvas-panel-header");
     if (header) {
       const isActive =
-        (S.ui.activeMedia === null && p.mediaName === "base") ||
-        (S.ui.activeMedia === null && p.mediaName === null) ||
-        S.ui.activeMedia === p.mediaName;
+        (activeMedia === null && p.mediaName === "base") ||
+        (activeMedia === null && p.mediaName === null) ||
+        activeMedia === p.mediaName;
       header.classList.toggle("active", isActive);
     }
   }

package/src/editor/component-inline-edit.js

@@ -4,20 +4,21 @@
  */
 
 import {
-  getState,
-  update,
   updateUi,
   renderOnly,
   getNodeAtPath,
-  selectNode,
-  removeNode,
-  insertNode,
-  updateProperty,
   parentElementPath,
   childIndex,
   canvasPanels,
   elToPath,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import {
+  transactDoc,
+  mutateRemoveNode,
+  mutateInsertNode,
+  mutateUpdateProperty,
+} from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu.js";
 import { renderBlockActionBar } from "../panels/block-action-bar.js";
@@ -46,8 +47,7 @@ export function enterComponentInlineEdit(el, path) {
     return;
   }
 
-  const S = getState();
-  const node = getNodeAtPath(S.document, path);
+  const node = getNodeAtPath(activeTab.value?.doc.document, path);
   if (!node) return;
 
   const tc = node.textContent;
@@ -59,7 +59,9 @@ export function enterComponentInlineEdit(el, path) {
   if (voids.has(node.tagName)) return;
 
   for (const p of canvasPanels) {
-    const boxes = p.overlay.querySelectorAll(".overlay-box");
+    const boxes = /** @type {NodeListOf<HTMLElement>} */ (
+      p.overlay.querySelectorAll(".overlay-box")
+    );
     for (const box of boxes) {
       box.style.border = "none";
     }
@@ -104,10 +106,11 @@ export function enterComponentInlineEdit(el, path) {
     if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
     document.removeEventListener("mousedown", outsideHandler, true);
 
+    /** @type {(string | number)[] | null} */
     let hitPath = null,
       hitMedia = null;
     for (const p of canvasPanels) {
-      const els = p.canvas.querySelectorAll("*");
+      const els = /** @type {NodeListOf<HTMLElement>} */ (p.canvas.querySelectorAll("*"));
       for (const el of els) el.style.pointerEvents = "auto";
       p.overlayClk.style.display = "none";
       const found = document.elementsFromPoint(evt.clientX, evt.clientY);
@@ -132,37 +135,44 @@ export function enterComponentInlineEdit(el, path) {
 
     const isEmpty = !newText;
     const pPath = parentElementPath(editPath);
-    const S = getState();
 
     if (hitPath) {
+      let hp = hitPath;
       const media = hitMedia === "base" ? null : (hitMedia ?? null);
-      updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
-      const withMedia = { ...S, ui: { ...S.ui, activeMedia: media } };
+      updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
+      activeTab.value.session.ui.activeMedia = media;
       if (isEmpty && pPath) {
-        let s = removeNode(withMedia, editPath);
-        const removedIdx = /** @type {number} */ (childIndex(editPath));
-        const hitIdx = /** @type {number} */ (childIndex(hitPath));
-        const hitParent = parentElementPath(hitPath);
-        if (hitParent && pPath && hitParent.join("/") === pPath.join("/") && hitIdx > removedIdx) {
-          hitPath = [...pPath, "children", hitIdx - 1];
-          updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
-        }
-        update(selectNode(s, hitPath));
+        transactDoc(activeTab.value, (t) => {
+          mutateRemoveNode(t, editPath);
+          const removedIdx = /** @type {number} */ (childIndex(editPath));
+          const hitIdx = /** @type {number} */ (childIndex(hp));
+          const hitParent = parentElementPath(hp);
+          if (
+            hitParent &&
+            pPath &&
+            hitParent.join("/") === pPath.join("/") &&
+            hitIdx > removedIdx
+          ) {
+            hp = [...pPath, "children", hitIdx - 1];
+            updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
+          }
+          t.session.selection = hp;
+        });
       } else if (newText !== originalText) {
-        update(
-          selectNode(
-            updateProperty(withMedia, editPath, "textContent", newText || undefined),
-            hitPath,
-          ),
-        );
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, editPath, "textContent", newText || undefined);
+          t.session.selection = hp;
+        });
       } else {
-        update(selectNode(withMedia, hitPath));
+        activeTab.value.session.selection = hp;
       }
     } else {
       if (isEmpty && pPath) {
-        update(removeNode(S, editPath));
+        transactDoc(activeTab.value, (t) => mutateRemoveNode(t, editPath));
       } else if (newText !== originalText) {
-        update(updateProperty(S, editPath, "textContent", newText || undefined));
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateProperty(t, editPath, "textContent", newText || undefined),
+        );
       } else {
         renderOnly("canvas");
         renderOnly("overlays");
@@ -219,13 +229,13 @@ function splitParagraph() {
 
   cleanupComponentInlineEdit(el);
 
-  const S = getState();
-  let s = updateProperty(S, path, "textContent", textBefore || undefined);
-  s = insertNode(s, pPath, idx + 1, newDef);
-  s = selectNode(s, newPath);
+  transactDoc(activeTab.value, (t) => {
+    mutateUpdateProperty(t, path, "textContent", textBefore || undefined);
+    mutateInsertNode(t, pPath, idx + 1, newDef);
+    t.session.selection = newPath;
+  });
 
   updateUi("pendingInlineEdit", { path: newPath, mediaName });
-  update(s);
 }
 
 function _commitComponentInlineEdit() {
@@ -235,12 +245,13 @@ function _commitComponentInlineEdit() {
 
   cleanupComponentInlineEdit(el);
 
-  const S = getState();
   const pPath = parentElementPath(path);
   if (!newText && pPath) {
-    update(removeNode(S, path));
+    transactDoc(activeTab.value, (t) => mutateRemoveNode(t, path));
   } else if (newText !== originalText) {
-    update(updateProperty(S, path, "textContent", newText || undefined));
+    transactDoc(activeTab.value, (t) =>
+      mutateUpdateProperty(t, path, "textContent", newText || undefined),
+    );
   } else {
     renderOnly("canvas");
     renderOnly("overlays");
@@ -303,15 +314,15 @@ function handleComponentSlashSelect(cmd) {
 
   cleanupComponentInlineEdit(el);
 
-  const S = getState();
   const newDef = defaultDef(cmd.tag);
   const newPath = [...pPath, "children", idx];
 
-  let s = removeNode(S, path);
-  s = insertNode(s, pPath, idx, newDef);
-  s = selectNode(s, newPath);
+  transactDoc(activeTab.value, (t) => {
+    mutateRemoveNode(t, path);
+    mutateInsertNode(t, pPath, idx, newDef);
+    t.session.selection = newPath;
+  });
 
   const hasText = newDef.textContent != null;
   if (hasText) updateUi("pendingInlineEdit", { path: newPath, mediaName });
-  update(s);
 }

package/src/editor/content-inline-edit.js

@@ -4,17 +4,14 @@
  */
 
 import {
-  getState,
-  update,
   renderOnly,
-  selectNode,
-  insertNode,
-  updateProperty,
   getNodeAtPath,
   parentElementPath,
   childIndex,
   canvasPanels,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateInsertNode, mutateUpdateProperty } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { startEditing, isEditableBlock } from "./inline-edit.js";
 import { restoreTemplateExpressions } from "../utils/edit-display.js";
@@ -46,32 +43,24 @@ export function enterInlineEdit(el, path) {
       /** @type {any} */ children,
       /** @type {any} */ textContent,
     ) {
-      const S = getState();
-      const node = getNodeAtPath(S.document, commitPath);
+      const node = getNodeAtPath(activeTab.value?.doc.document, commitPath);
       if (children) {
         if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
-        let s = updateProperty(S, commitPath, "textContent", undefined);
-        s = updateProperty(s, commitPath, "children", children);
-        update(s);
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, commitPath, "textContent", undefined);
+          mutateUpdateProperty(t, commitPath, "children", children);
+        });
       } else if (textContent != null) {
         if (node && node.textContent === textContent && !node.children) return;
-        let s = updateProperty(S, commitPath, "children", undefined);
-        s = updateProperty(s, commitPath, "textContent", textContent);
-        update(s);
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, commitPath, "children", undefined);
+          mutateUpdateProperty(t, commitPath, "textContent", textContent);
+        });
       }
     },
 
     onSplit(/** @type {any} */ splitPath, /** @type {any} */ before, /** @type {any} */ after) {
       const tag = "p";
-      let s = getState();
-
-      if (before.textContent != null) {
-        s = updateProperty(s, splitPath, "children", undefined);
-        s = updateProperty(s, splitPath, "textContent", before.textContent);
-      } else if (before.children) {
-        s = updateProperty(s, splitPath, "textContent", undefined);
-        s = updateProperty(s, splitPath, "children", before.children);
-      }
 
       // Insert new element after with "after" content
       const parentPath = /** @type {any} */ (parentElementPath(splitPath));
@@ -86,10 +75,19 @@ export function enterInlineEdit(el, path) {
         newNode.textContent = "";
       }
 
-      s = insertNode(s, parentPath, idx + 1, newNode);
       const newPath = [...parentPath, "children", idx + 1];
-      s = selectNode(s, newPath);
-      update(s);
+
+      transactDoc(activeTab.value, (t) => {
+        if (before.textContent != null) {
+          mutateUpdateProperty(t, splitPath, "children", undefined);
+          mutateUpdateProperty(t, splitPath, "textContent", before.textContent);
+        } else if (before.children) {
+          mutateUpdateProperty(t, splitPath, "textContent", undefined);
+          mutateUpdateProperty(t, splitPath, "children", before.children);
+        }
+        mutateInsertNode(t, parentPath, idx + 1, newNode);
+        t.session.selection = newPath;
+      });
 
       // Re-enter editing on the new element after render
       requestAnimationFrame(() => {
@@ -125,17 +123,17 @@ export function enterInlineEdit(el, path) {
 
       // If the element is empty, swap its tagName instead of inserting after
       if (isEmpty) {
-        let s = getState();
-        s = updateProperty(s, afterPath, "tagName", cmd.tag);
-        s = updateProperty(s, afterPath, "children", undefined);
-        const def = defaultDef(cmd.tag);
-        if (def.textContent && def.textContent !== "Paragraph text") {
-          s = updateProperty(s, afterPath, "textContent", def.textContent);
-        } else {
-          s = updateProperty(s, afterPath, "textContent", undefined);
-        }
-        s = selectNode(s, afterPath);
-        update(s);
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, afterPath, "tagName", cmd.tag);
+          mutateUpdateProperty(t, afterPath, "children", undefined);
+          const def = defaultDef(cmd.tag);
+          if (def.textContent && def.textContent !== "Paragraph text") {
+            mutateUpdateProperty(t, afterPath, "textContent", def.textContent);
+          } else {
+            mutateUpdateProperty(t, afterPath, "textContent", undefined);
+          }
+          t.session.selection = afterPath;
+        });
 
         requestAnimationFrame(() => {
           const activePanel = getActivePanel();
@@ -152,23 +150,22 @@ export function enterInlineEdit(el, path) {
       const elementDef = defaultDef(cmd.tag);
       const parentPath = /** @type {any} */ (parentElementPath(afterPath));
       const idx = /** @type {number} */ (childIndex(afterPath));
+      const newPath = [...parentPath, "children", idx + 1];
 
       // Apply pending commit from inline edit first (batched to avoid double render)
-      let s = getState();
-      if (commitData) {
-        if (commitData.children) {
-          s = updateProperty(s, afterPath, "textContent", undefined);
-          s = updateProperty(s, afterPath, "children", commitData.children);
-        } else if (commitData.textContent != null) {
-          s = updateProperty(s, afterPath, "children", undefined);
-          s = updateProperty(s, afterPath, "textContent", commitData.textContent);
+      transactDoc(activeTab.value, (t) => {
+        if (commitData) {
+          if (commitData.children) {
+            mutateUpdateProperty(t, afterPath, "textContent", undefined);
+            mutateUpdateProperty(t, afterPath, "children", commitData.children);
+          } else if (commitData.textContent != null) {
+            mutateUpdateProperty(t, afterPath, "children", undefined);
+            mutateUpdateProperty(t, afterPath, "textContent", commitData.textContent);
+          }
         }
-      }
-
-      s = insertNode(s, parentPath, idx + 1, structuredClone(elementDef));
-      const newPath = [...parentPath, "children", idx + 1];
-      s = selectNode(s, newPath);
-      update(s);
+        mutateInsertNode(t, parentPath, idx + 1, structuredClone(elementDef));
+        t.session.selection = newPath;
+      });
 
       // If the inserted element is editable, enter editing
       requestAnimationFrame(() => {