@jxsuite/studio 0.7.0 → 0.9.0

package/src/panels/left-panel.js

@@ -20,6 +20,7 @@ import { ensureLitState } from "./shared.js";
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
 import { renderElementsTemplate } from "./elements-panel.js";
+import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -65,8 +66,8 @@ function _render() {
     content =
       _ctx.getCanvasMode() === "settings"
         ? renderStylebookLayersTemplate({
-            selectStylebookTag: _ctx.selectStylebookTag,
-            stylebookMeta: _ctx.stylebookMeta,
+            selectStylebookTag,
+            stylebookMeta,
           })
         : renderLayersTemplate({
             navigateToComponent: _ctx.navigateToComponent,

package/src/panels/panel-events.js

@@ -0,0 +1,263 @@
+/**
+ * Panel events — extracted from studio.js (Phase 4m). Unified event handler system for canvas
+ * panels: click-to-select, double-click inline edit, context menu, hover tracking, insertion
+ * helper.
+ */
+
+import {
+  update,
+  selectNode,
+  hoverNode,
+  elToPath,
+  pathsEqual,
+  insertNode,
+  parentElementPath,
+  childIndex,
+  getNodeAtPath,
+  renderOnly,
+} from "../store.js";
+import { view } from "../view.js";
+import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.js";
+import { showContextMenu } from "../editor/context-menu.js";
+import * as insertionHelper from "../editor/insertion-helper.js";
+import { defaultDef } from "../panels/shared.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the panel events module.
+ *
+ * @param {{
+ *   getState: () => any;
+ *   setState: (s: any) => void;
+ *   getCanvasMode: () => string;
+ *   bubbleInlinePath: (doc: any, path: any) => any;
+ *   findCanvasElement: (path: any, canvasEl: any) => any;
+ *   enterInlineEdit: (el: any, path: any) => void;
+ *   navigateToComponent: (path: any) => void;
+ *   effectiveZoom: () => number;
+ * }} ctx
+ */
+export function initPanelEvents(ctx) {
+  _ctx = ctx;
+}
+
+/** @param {any} panel */
+export function registerPanelEvents(panel) {
+  const { canvas, overlayClk, mediaName } = panel;
+  const ac = new AbortController();
+  const opts = { signal: ac.signal };
+  view.canvasEventCleanups.push(() => ac.abort());
+
+  /** @param {any} fn */
+  function withPanelPointerEvents(fn) {
+    const els = canvas.querySelectorAll("*");
+    for (const el of els) el.style.pointerEvents = "auto";
+    overlayClk.style.display = "none";
+    const result = fn();
+    overlayClk.style.display = "";
+    for (const el of els) el.style.pointerEvents = "none";
+    return result;
+  }
+
+  overlayClk.addEventListener(
+    "click",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      if (isEditing()) {
+        stopEditing();
+      }
+
+      const S = _ctx.getState();
+      const canvasMode = _ctx.getCanvasMode();
+
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            let path = _ctx.bubbleInlinePath(S.document, originalPath);
+            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+
+            const resolvedEl =
+              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+
+            if (
+              pathsEqual(path, S.selection) &&
+              isEditableBlock(resolvedEl) &&
+              (canvasMode === "edit" || S.mode === "content")
+            ) {
+              _ctx.setState(withMedia);
+              _ctx.enterInlineEdit(resolvedEl, path);
+              return;
+            }
+
+            if (canvasMode === "design" && S.mode !== "content") {
+              view.pendingInlineEdit = { path, mediaName };
+              update(selectNode(withMedia, path));
+              return;
+            }
+
+            update(selectNode(withMedia, path));
+            return;
+          }
+        }
+      }
+      update(selectNode(S, null));
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "dblclick",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const canvasMode = _ctx.getCanvasMode();
+      if (canvasMode !== "edit" && canvasMode !== "design") return;
+
+      const S = _ctx.getState();
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            const path = _ctx.bubbleInlinePath(S.document, originalPath);
+            const resolvedEl =
+              path === originalPath ? el : _ctx.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));
+              _ctx.enterInlineEdit(resolvedEl, path);
+              return;
+            }
+          }
+        }
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "contextmenu",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const S = _ctx.getState();
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          let path = elToPath.get(el);
+          if (path) {
+            path = _ctx.bubbleInlinePath(S.document, path);
+            showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
+            return;
+          }
+        }
+      }
+      e.preventDefault();
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "mousemove",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      let S = _ctx.getState();
+      const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+      if (el && canvas.contains(el) && el !== canvas) {
+        let path = elToPath.get(el);
+        if (path) {
+          path = _ctx.bubbleInlinePath(S.document, path);
+          if (!pathsEqual(path, S.hover)) {
+            _ctx.setState(hoverNode(S, path));
+            renderOnly("overlays");
+          }
+        }
+      } else if (S.hover) {
+        _ctx.setState(hoverNode(S, null));
+        renderOnly("overlays");
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "mouseleave",
+    () => {
+      const S = _ctx.getState();
+      if (S.hover) {
+        _ctx.setState(hoverNode(S, null));
+        renderOnly("overlays");
+      }
+    },
+    opts,
+  );
+
+  insertionHelper.mount({
+    getState: _ctx.getState,
+    update,
+    getCanvasMode: _ctx.getCanvasMode,
+    withPanelPointerEvents,
+    effectiveZoom: _ctx.effectiveZoom,
+    defaultDef,
+    insertNode,
+    selectNode,
+    parentElementPath,
+    childIndex,
+    getNodeAtPath,
+    elToPath,
+    panel,
+  });
+  view.canvasEventCleanups.push(() => insertionHelper.unmount());
+}

package/src/panels/preview-render.js

@@ -0,0 +1,103 @@
+/**
+ * Preview render — extracted from studio.js (Phase 4m). Structural preview renderer that creates
+ * DOM from Jx node trees as a fallback when runtime rendering fails.
+ */
+
+import { getState, elToPath } from "../store.js";
+import { applyCanvasStyle } from "../utils/canvas-media.js";
+import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
+
+/**
+ * Recursively render a Jx node to the canvas DOM. Media-aware: applies base styles + active
+ * breakpoint/feature overrides.
+ *
+ * @param {any} node
+ * @param {any} path
+ * @param {any} parent
+ * @param {any} activeBreakpoints
+ * @param {any} featureToggles
+ */
+export function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles) {
+  if (typeof node === "string" || typeof node === "number" || typeof node === "boolean") {
+    parent.appendChild(document.createTextNode(String(node)));
+    return;
+  }
+  if (!node || typeof node !== "object") return;
+
+  const tag = node.tagName || "div";
+  const el = document.createElement(tag);
+
+  elToPath.set(el, path);
+
+  if (typeof node.textContent === "string") {
+    el.textContent = node.textContent;
+  } else if (typeof node.textContent === "object" && node.textContent?.$ref) {
+    const resolved = resolveDefaultForCanvas(node.textContent, getState().document.state);
+    el.textContent = resolved;
+    el.style.opacity = "0.7";
+    el.style.fontStyle = "italic";
+    el.title = `Bound: ${node.textContent.$ref}`;
+  }
+
+  if (node.id) el.id = node.id;
+  if (node.className) el.className = node.className;
+
+  applyCanvasStyle(el, node.style, activeBreakpoints, featureToggles);
+
+  if (node.attributes && typeof node.attributes === "object") {
+    for (const [attr, val] of Object.entries(node.attributes)) {
+      try {
+        if (typeof val === "object" && val?.$ref) {
+          const resolved = resolveDefaultForCanvas(val, getState().document.state);
+          el.setAttribute(attr, resolved);
+        } else {
+          el.setAttribute(attr, val);
+        }
+      } catch {}
+    }
+  }
+
+  if (Array.isArray(node.children)) {
+    for (let i = 0; i < node.children.length; i++) {
+      renderCanvasNode(
+        node.children[i],
+        [...path, "children", i],
+        el,
+        activeBreakpoints,
+        featureToggles,
+      );
+    }
+  } else if (
+    node.children &&
+    typeof node.children === "object" &&
+    node.children.$prototype === "Array"
+  ) {
+    const template = node.children.map;
+    if (template && typeof template === "object") {
+      const wrapper = document.createElement("div");
+      wrapper.className = "repeater-perimeter";
+      elToPath.set(wrapper, [...path, "children"]);
+      renderCanvasNode(
+        template,
+        [...path, "children", "map"],
+        wrapper,
+        activeBreakpoints,
+        featureToggles,
+      );
+      el.appendChild(wrapper);
+    }
+  }
+
+  if (node.$switch && node.cases && typeof node.cases === "object") {
+    const keys = Object.keys(node.cases);
+    const placeholder = document.createElement("div");
+    placeholder.textContent = `[$switch: ${keys.join(" | ")}]`;
+    placeholder.style.cssText =
+      "font-family:monospace;font-size:11px;padding:6px 10px;background:color-mix(in srgb, var(--danger) 8%, transparent);border:1px dashed color-mix(in srgb, var(--danger) 40%, transparent);border-radius:4px;color:var(--danger);font-style:italic";
+    el.appendChild(placeholder);
+  }
+
+  el.style.pointerEvents = "none";
+  parent.appendChild(el);
+  return el;
+}