@jxsuite/studio 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {

package/src/canvas/canvas-utils.js

@@ -0,0 +1,313 @@
+/**
+ * Canvas panel utilities — extracted from studio.js (Phase 4l). Panzoom infrastructure: panel DOM
+ * template creation, centering, transform application, zoom indicator, and fit-to-screen.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+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 { view } from "../view.js";
+
+/** @type {any} */
+let _ctx = null;
+
+let zoomIndicatorHost = document.createElement("div");
+zoomIndicatorHost.style.display = "contents";
+document.body.appendChild(zoomIndicatorHost);
+
+/**
+ * Initialize the canvas utils module.
+ *
+ * @param {{
+ *   getCanvasMode: () => string;
+ *   getZoom: () => number;
+ *   setZoomDirect: (zoom: number) => void;
+ *   renderStylebookOverlays: () => void;
+ * }} ctx
+ */
+export function initCanvasUtils(ctx) {
+  _ctx = ctx;
+}
+
+/**
+ * Create the DOM structure for a single canvas panel.
+ *
+ * @param {any} mediaName
+ * @param {any} label
+ * @param {any} fullWidth
+ * @param {any} width
+ */
+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;
+   * }}
+   */
+  const panel = {
+    mediaName,
+    element: null,
+    canvas: null,
+    overlay: null,
+    overlayClk: null,
+    viewport: null,
+    dropLine: null,
+    _width: width || null,
+  };
+  const tpl = html`
+    <div
+      class=${`canvas-panel${fullWidth ? " full-width" : ""}`}
+      data-media=${ifDefined(mediaName !== null ? mediaName : undefined)}
+      ${ref((el) => {
+        if (el) panel.element = el;
+      })}
+    >
+      ${label
+        ? html`
+            <div
+              class="canvas-panel-header"
+              @click=${() => {
+                updateUi("activeMedia", mediaName === "base" ? null : mediaName);
+              }}
+            >
+              ${label}
+            </div>
+          `
+        : nothing}
+      <div
+        class="canvas-panel-viewport"
+        style=${styleMap({ width: width && !fullWidth ? `${width}px` : "" })}
+        ${ref((el) => {
+          if (el) panel.viewport = el;
+        })}
+      >
+        <div
+          class="canvas-panel-canvas"
+          style=${styleMap({ width: width ? `${width}px` : "" })}
+          ${ref((el) => {
+            if (el) panel.canvas = el;
+          })}
+        ></div>
+        <div
+          class="canvas-panel-overlay"
+          ${ref((el) => {
+            if (el) panel.overlay = el;
+          })}
+        >
+          <div
+            class="canvas-drop-indicator"
+            style="display:none"
+            ${ref((el) => {
+              if (el) panel.dropLine = el;
+            })}
+          ></div>
+        </div>
+        <div
+          class="canvas-panel-click"
+          ${ref((el) => {
+            if (el) panel.overlayClk = el;
+          })}
+        ></div>
+      </div>
+    </div>
+  `;
+  return { tpl, panel };
+}
+
+/** Center canvas in viewport. */
+export function centerCanvas() {
+  if (!view.panzoomWrap) return;
+  const wrapWidth = canvasWrap.clientWidth;
+  const wrapHeight = canvasWrap.clientHeight;
+  const contentWidth = view.panzoomWrap.scrollWidth;
+  const contentHeight = view.panzoomWrap.scrollHeight;
+  const zoom = _ctx.getZoom();
+  const scaledWidth = contentWidth * zoom;
+  const scaledHeight = contentHeight * zoom;
+  view.panX = Math.max(16, (wrapWidth - scaledWidth) / 2);
+  const verticalCenter = (wrapHeight - scaledHeight) / 2;
+  view.panY = verticalCenter > 16 ? verticalCenter : 16;
+}
+
+/**
+ * Attach a ResizeObserver to view.panzoomWrap that re-centers until the user pans. Handles async
+ * content (runtime rendering, data fetching) that changes layout after initial paint.
+ */
+export function observeCenterUntilStable() {
+  if (view.centerObserver) {
+    view.centerObserver.disconnect();
+    view.centerObserver = null;
+  }
+  if (!view.panzoomWrap) return;
+  view.needsCenter = true;
+  view.centerObserver = new ResizeObserver(() => {
+    if (!view.needsCenter) {
+      view.centerObserver?.disconnect();
+      view.centerObserver = null;
+      return;
+    }
+    centerCanvas();
+    applyTransform();
+  });
+  view.centerObserver.observe(view.panzoomWrap);
+  centerCanvas();
+}
+
+/** Apply the current zoom + pan transform to the panzoom wrapper. */
+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)}%`;
+  renderOnly("overlays");
+  if (_ctx.getCanvasMode() === "settings") _ctx.renderStylebookOverlays();
+}
+
+/** Calculate zoom + pan to fit all panels within the viewport. */
+export function fitToScreen() {
+  if (!view.panzoomWrap) return;
+  const wrapWidth = canvasWrap.clientWidth;
+  const wrapHeight = canvasWrap.clientHeight;
+  const gap = 24;
+  const padding = 32;
+  let totalPanelWidth = 0;
+  for (const p of canvasPanels) {
+    totalPanelWidth += p._width || 800;
+  }
+  totalPanelWidth += gap * Math.max(0, canvasPanels.length - 1) + padding;
+
+  const zoom = _ctx.getZoom();
+  const wrapRect = view.panzoomWrap.getBoundingClientRect();
+  const unscaledHeight = wrapRect.height / zoom;
+  const maxPanelHeight = unscaledHeight + padding;
+
+  const fitZoomW = wrapWidth / totalPanelWidth;
+  const fitZoomH = wrapHeight / maxPanelHeight;
+  const fitZoom = Math.min(5.0, Math.max(0.05, Math.min(fitZoomW, fitZoomH)));
+
+  _ctx.setZoomDirect(fitZoom);
+
+  const scaledWidth = totalPanelWidth * fitZoom;
+  const scaledHeight = maxPanelHeight * fitZoom;
+  view.panX = Math.max(0, (wrapWidth - scaledWidth) / 2);
+  view.panY = Math.max(0, (wrapHeight - scaledHeight) / 2);
+  applyTransform();
+}
+
+/** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
+export function resetZoomIndicator() {
+  try {
+    litRender(nothing, zoomIndicatorHost);
+  } catch {
+    const newHost = document.createElement("div");
+    newHost.style.display = "contents";
+    zoomIndicatorHost.replaceWith(newHost);
+    zoomIndicatorHost = newHost;
+  }
+}
+
+/**
+ * Render the floating zoom indicator at the bottom center of canvas-wrap. Uses position: fixed,
+ * computed from canvas-wrap bounds.
+ */
+export function renderZoomIndicator() {
+  if (!zoomIndicatorHost.isConnected) document.body.appendChild(zoomIndicatorHost);
+  const zoom = _ctx.getZoom();
+  try {
+    litRender(
+      html`
+        <div class="zoom-indicator">
+          <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
+          <sp-action-button
+            quiet
+            size="s"
+            class="zoom-fit-btn"
+            title="Fit to screen"
+            @click=${fitToScreen}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <rect x="2" y="2" width="12" height="12" rx="1" />
+              <path d="M2 6h12M6 2v12" />
+            </svg>
+          </sp-action-button>
+        </div>
+      `,
+      zoomIndicatorHost,
+    );
+  } catch {
+    const newHost = document.createElement("div");
+    newHost.style.display = "contents";
+    zoomIndicatorHost.replaceWith(newHost);
+    zoomIndicatorHost = newHost;
+    litRender(
+      html`
+        <div class="zoom-indicator">
+          <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
+          <sp-action-button
+            quiet
+            size="s"
+            class="zoom-fit-btn"
+            title="Fit to screen"
+            @click=${fitToScreen}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <rect x="2" y="2" width="12" height="12" rx="1" />
+              <path d="M2 6h12M6 2v12" />
+            </svg>
+          </sp-action-button>
+        </div>
+      `,
+      zoomIndicatorHost,
+    );
+  }
+  positionZoomIndicator();
+}
+
+/** Position the zoom indicator relative to canvas-wrap bounds. */
+export function positionZoomIndicator() {
+  const indicator = /** @type {HTMLElement | null} */ (document.querySelector(".zoom-indicator"));
+  if (!indicator) return;
+  const rect = canvasWrap.getBoundingClientRect();
+  indicator.style.left = `${rect.left + rect.width / 2}px`;
+  indicator.style.top = `${rect.bottom - 32}px`;
+  indicator.style.transform = "translateX(-50%)";
+}
+
+/** Toggle "active" class on canvas panel headers based on activeMedia. */
+export function updateActivePanelHeaders() {
+  const S = getState();
+  for (const p of canvasPanels) {
+    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;
+      header.classList.toggle("active", isActive);
+    }
+  }
+}

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

@@ -0,0 +1,316 @@
+/**
+ * Component inline edit — extracted from studio.js (Phase 4j). Manages plaintext-only editing on
+ * canvas elements in design mode, with slash menu delegation for block insertion.
+ */
+
+import {
+  getState,
+  update,
+  renderOnly,
+  getNodeAtPath,
+  selectNode,
+  removeNode,
+  insertNode,
+  updateProperty,
+  parentElementPath,
+  childIndex,
+  canvasPanels,
+  elToPath,
+} from "../store.js";
+import { view } from "../view.js";
+import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu.js";
+import { renderBlockActionBar } from "../panels/block-action-bar.js";
+import { defaultDef } from "../panels/shared.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the component inline edit module.
+ *
+ * @param {{ findCanvasElement: Function }} ctx
+ */
+export function initComponentInlineEdit(ctx) {
+  _ctx = ctx;
+}
+
+/**
+ * Enter plaintext inline editing on a canvas element.
+ *
+ * @param {any} el
+ * @param {any} path
+ */
+export function enterComponentInlineEdit(el, path) {
+  if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
+    return;
+  }
+
+  const S = getState();
+  const node = getNodeAtPath(S.document, path);
+  if (!node) return;
+
+  const tc = node.textContent;
+  if (node.$props && (node.tagName || "").includes("-")) return;
+  if (Array.isArray(node.children) && node.children.length > 0) return;
+  if (node.children && typeof node.children === "object") return;
+  if (tc && typeof tc === "object") return;
+  const voids = new Set(["img", "input", "br", "hr", "video", "audio", "source", "embed", "slot"]);
+  if (voids.has(node.tagName)) return;
+
+  for (const p of canvasPanels) {
+    const boxes = p.overlay.querySelectorAll(".overlay-box");
+    for (const box of boxes) {
+      box.style.border = "none";
+    }
+    p.overlayClk.style.pointerEvents = "none";
+  }
+
+  el.contentEditable = "plaintext-only";
+  el.style.pointerEvents = "auto";
+  el.style.cursor = "text";
+  el.style.outline = "1px solid var(--accent, #4f8bc7)";
+  el.style.outlineOffset = "-1px";
+  el.style.minHeight = "1em";
+
+  const rawText = typeof tc === "string" ? tc : "";
+  el.textContent = rawText;
+
+  view.componentInlineEdit = {
+    el,
+    path,
+    originalText: rawText,
+    mediaName: canvasPanels.find((p) => p.canvas.contains(el))?.mediaName || null,
+  };
+
+  el.focus();
+  const sel = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+
+  el.addEventListener("keydown", componentInlineKeydown);
+  el.addEventListener("input", componentInlineInput);
+
+  const outsideHandler = (/** @type {any} */ evt) => {
+    if (!view.componentInlineEdit) {
+      document.removeEventListener("mousedown", outsideHandler, true);
+      return;
+    }
+    if (view.componentInlineEdit.el.contains(evt.target)) return;
+    if (isSlashMenuOpen()) return;
+    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
+    document.removeEventListener("mousedown", outsideHandler, true);
+
+    let hitPath = null,
+      hitMedia = null;
+    for (const p of canvasPanels) {
+      const els = 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);
+      p.overlayClk.style.display = "";
+      for (const el of els) el.style.pointerEvents = "none";
+      for (const hit of found) {
+        if (p.canvas.contains(hit) && hit !== p.canvas) {
+          const path = elToPath.get(hit);
+          if (path) {
+            hitPath = path;
+            hitMedia = p.mediaName;
+            break;
+          }
+        }
+      }
+      if (hitPath) break;
+    }
+
+    const { el: editEl, path: editPath, originalText } = view.componentInlineEdit;
+    const newText = (editEl.textContent ?? "").trim();
+    cleanupComponentInlineEdit(editEl);
+
+    const isEmpty = !newText;
+    const pPath = parentElementPath(editPath);
+    const S = getState();
+
+    if (hitPath) {
+      const media = hitMedia === "base" ? null : (hitMedia ?? null);
+      view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
+      const withMedia = { ...S, ui: { ...S.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];
+          view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
+        }
+        update(selectNode(s, hitPath));
+      } else if (newText !== originalText) {
+        update(
+          selectNode(
+            updateProperty(withMedia, editPath, "textContent", newText || undefined),
+            hitPath,
+          ),
+        );
+      } else {
+        update(selectNode(withMedia, hitPath));
+      }
+    } else {
+      if (isEmpty && pPath) {
+        update(removeNode(S, editPath));
+      } else if (newText !== originalText) {
+        update(updateProperty(S, editPath, "textContent", newText || undefined));
+      } else {
+        renderOnly("canvas");
+        renderOnly("overlays");
+      }
+    }
+  };
+  document.addEventListener("mousedown", outsideHandler, true);
+  view.componentInlineEdit._outsideHandler = outsideHandler;
+
+  renderBlockActionBar();
+}
+
+/** @param {any} e */
+function componentInlineKeydown(e) {
+  if (isSlashMenuOpen()) {
+    if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
+  }
+
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    splitParagraph();
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    cancelComponentInlineEdit();
+  }
+  e.stopPropagation();
+}
+
+function splitParagraph() {
+  if (!view.componentInlineEdit) return;
+  const { el, path, mediaName } = view.componentInlineEdit;
+
+  const sel = /** @type {any} */ (el.ownerDocument.defaultView?.getSelection());
+  const fullText = el.textContent || "";
+  let offset = fullText.length;
+  if (sel.rangeCount) {
+    const range = sel.getRangeAt(0);
+    const preRange = document.createRange();
+    preRange.selectNodeContents(el);
+    preRange.setEnd(range.startContainer, range.startOffset);
+    offset = preRange.toString().length;
+  }
+
+  const textBefore = fullText.slice(0, offset);
+  const textAfter = fullText.slice(offset);
+
+  const tag = "p";
+  const pPath = /** @type {any} */ (parentElementPath(path));
+  const idx = /** @type {number} */ (childIndex(path));
+  if (!pPath) return;
+
+  const newDef = { tagName: tag, textContent: textAfter };
+  const newPath = [...pPath, "children", idx + 1];
+
+  cleanupComponentInlineEdit(el);
+
+  const S = getState();
+  let s = updateProperty(S, path, "textContent", textBefore || undefined);
+  s = insertNode(s, pPath, idx + 1, newDef);
+  s = selectNode(s, newPath);
+
+  view.pendingInlineEdit = { path: newPath, mediaName };
+  update(s);
+}
+
+function _commitComponentInlineEdit() {
+  if (!view.componentInlineEdit) return;
+  const { el, path, originalText } = view.componentInlineEdit;
+  const newText = (el.textContent ?? "").trim();
+
+  cleanupComponentInlineEdit(el);
+
+  const S = getState();
+  const pPath = parentElementPath(path);
+  if (!newText && pPath) {
+    update(removeNode(S, path));
+  } else if (newText !== originalText) {
+    update(updateProperty(S, path, "textContent", newText || undefined));
+  } else {
+    renderOnly("canvas");
+    renderOnly("overlays");
+  }
+}
+
+function cancelComponentInlineEdit() {
+  if (!view.componentInlineEdit) return;
+  const { el } = view.componentInlineEdit;
+  cleanupComponentInlineEdit(el);
+  renderOnly("canvas");
+  renderOnly("overlays");
+}
+
+/** @param {any} el */
+function cleanupComponentInlineEdit(el) {
+  el.removeEventListener("keydown", componentInlineKeydown);
+  el.removeEventListener("input", componentInlineInput);
+  dismissSlashMenu();
+  el.removeAttribute("contenteditable");
+  el.style.cursor = "";
+  el.style.outline = "";
+  el.style.outlineOffset = "";
+  el.style.minHeight = "";
+  el.style.pointerEvents = "";
+
+  if (view.componentInlineEdit?._outsideHandler) {
+    document.removeEventListener("mousedown", view.componentInlineEdit._outsideHandler, true);
+  }
+  view.componentInlineEdit = null;
+
+  for (const p of canvasPanels) {
+    p.overlay.style.display = "";
+    p.overlayClk.style.pointerEvents = "";
+  }
+}
+
+// ─── Component-mode slash commands ──────────────────────────────────────────
+
+function componentInlineInput() {
+  if (!view.componentInlineEdit) return;
+  const { el, originalText } = view.componentInlineEdit;
+  const text = el.textContent || "";
+
+  if (originalText === "" && text.startsWith("/")) {
+    const filter = text.slice(1).toLowerCase();
+    showSlashMenu(el, filter, { onSelect: handleComponentSlashSelect });
+  } else {
+    dismissSlashMenu();
+  }
+}
+
+/** @param {any} cmd */
+function handleComponentSlashSelect(cmd) {
+  if (!view.componentInlineEdit) return;
+  const { el, path, mediaName } = view.componentInlineEdit;
+  const pPath = parentElementPath(path);
+  const idx = /** @type {number} */ (childIndex(path));
+  if (!pPath) return;
+
+  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);
+
+  const hasText = newDef.textContent != null;
+  if (hasText) view.pendingInlineEdit = { path: newPath, mediaName };
+  update(s);
+}