@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/canvas-dnd.ts

@@ -10,17 +10,18 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import { elToPath, canvasPanels, getNodeAtPath, VOID_ELEMENTS, isAncestor } from "../store";
+import { VOID_ELEMENTS, canvasPanels, elToPath, getNodeAtPath, isAncestor } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
 import { applyDropInstruction } from "../panels/dnd";
 import { effectiveZoom } from "../canvas/canvas-helpers";
 
 import type { CanvasPanel } from "../types";
-export type { CanvasPanel };
 
 import type { JxPath } from "../state";
 
+export type { CanvasPanel };
+
 interface DropInstruction {
   type: "reorder-above" | "reorder-below" | "make-child";
 }
@@ -43,8 +44,8 @@ export function registerPanelDnD(panel: CanvasPanel) {
   const allEls = canvas.querySelectorAll("*");
 
   // Drop-target callbacks fire on EVERY target in the stack (innermost → outermost),
-  // and every canvas element is a drop target — so the indicator and the drop are
-  // driven from the monitor using only the innermost target.
+  // And every canvas element is a drop target — so the indicator and the drop are
+  // Driven from the monitor using only the innermost target.
   /** Innermost drop target if it belongs to this panel's canvas, else null */
   const innermostCanvasTarget = (location: {
     current: {
@@ -54,22 +55,19 @@ export function registerPanelDnD(panel: CanvasPanel) {
       }[];
     };
   }) => {
-    const target = location.current.dropTargets[0];
-    if (!target) return null;
+    const [target] = location.current.dropTargets;
+    if (!target) {
+      return null;
+    }
     const tEl = target.element as HTMLElement;
     const tPath = target.data.path;
-    if (!canvas.contains(tEl) || !Array.isArray(tPath)) return null;
-    return { el: tEl, path: tPath as JxPath, isLeaf: !!target.data._isVoid };
+    if (!canvas.contains(tEl) || !Array.isArray(tPath)) {
+      return null;
+    }
+    return { el: tEl, isLeaf: Boolean(target.data._isVoid), path: tPath as JxPath };
   };
 
   const monitorCleanup = monitorForElements({
-    onDragStart({ location }) {
-      view.lastDragInput = location.current.input;
-      for (const el of canvas.querySelectorAll("*")) {
-        (el as HTMLElement).style.pointerEvents = "auto";
-      }
-      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
-    },
     onDrag({ location }) {
       view.lastDragInput = location.current.input;
       const target = innermostCanvasTarget(location);
@@ -81,8 +79,8 @@ export function registerPanelDnD(panel: CanvasPanel) {
         showCanvasDropIndicator(target.el, target.path, target.isLeaf, panel);
       } else if (location.current.dropTargets.length > 0) {
         // Pointer is over a non-canvas target (e.g. a layer row) — hide this panel's
-        // indicator. When over dead space (no targets at all) keep the last indicator
-        // visible so it persists for the whole drag.
+        // Indicator. When over dead space (no targets at all) keep the last indicator
+        // Visible so it persists for the whole drag.
         if (_activeDropEl && canvas.contains(_activeDropEl)) {
           _activeDropEl.classList.remove("canvas-drop-target");
           _activeDropEl = null;
@@ -90,6 +88,15 @@ export function registerPanelDnD(panel: CanvasPanel) {
         dropLine.style.display = "none";
       }
     },
+    onDragStart({ location }) {
+      view.lastDragInput = location.current.input;
+      for (const el of canvas.querySelectorAll("*")) {
+        (el as HTMLElement).style.pointerEvents = "auto";
+      }
+      for (const p of canvasPanels) {
+        p.overlayClk.style.pointerEvents = "none";
+      }
+    },
     onDrop({ source, location }) {
       const target = innermostCanvasTarget(location);
       if (target) {
@@ -103,13 +110,17 @@ export function registerPanelDnD(panel: CanvasPanel) {
       _activeDropEl?.classList.remove("canvas-drop-target");
       _activeDropEl = null;
       for (const p of canvasPanels) {
-        if (p.dropLine) p.dropLine.style.display = "none";
+        if (p.dropLine) {
+          p.dropLine.style.display = "none";
+        }
       }
       view.lastDragInput = null;
       for (const el of canvas.querySelectorAll("*")) {
         (el as HTMLElement).style.pointerEvents = "none";
       }
-      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
+      for (const p of canvasPanels) {
+        p.overlayClk.style.pointerEvents = "";
+      }
     },
   });
   view.canvasDndCleanups.push(monitorCleanup);
@@ -117,7 +128,9 @@ export function registerPanelDnD(panel: CanvasPanel) {
   const document = activeTab.value?.doc.document;
   for (const el of allEls) {
     const elPath = elToPath.get(el);
-    if (!elPath) continue;
+    if (!elPath) {
+      continue;
+    }
 
     const node = getNodeAtPath(document!, elPath);
     const tag = (node?.tagName || "div").toLowerCase();
@@ -127,14 +140,16 @@ export function registerPanelDnD(panel: CanvasPanel) {
     const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
 
     const cleanup = dropTargetForElements({
-      element: /** @type {HTMLElement} */ el,
       canDrop({ source }) {
         const srcPath = source.data.path as JxPath | undefined;
-        if (srcPath && isAncestor(srcPath, elPath)) return false;
+        if (srcPath && isAncestor(srcPath, elPath)) {
+          return false;
+        }
         return true;
       },
+      element: /** @type {HTMLElement} */ el,
       getData() {
-        return { path: elPath, _isVoid: isLeaf };
+        return { _isVoid: isLeaf, path: elPath };
       },
     });
     view.canvasDndCleanups.push(cleanup);
@@ -148,22 +163,24 @@ export function registerPanelDnD(panel: CanvasPanel) {
  * @returns {DropResult}
  */
 function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean): DropResult {
-  if (!view.lastDragInput)
+  if (!view.lastDragInput) {
     return {
       instruction: { type: "make-child" },
       referenceEl: el,
       targetPath: elPath,
     };
+  }
   const y = view.lastDragInput.clientY;
 
   if (elPath.length === 0) {
-    const children = Array.from(el.children) as HTMLElement[];
-    if (children.length === 0)
+    const children = [...el.children] as HTMLElement[];
+    if (children.length === 0) {
       return {
         instruction: { type: "make-child" },
         referenceEl: el,
         targetPath: elPath,
       };
+    }
     return nearestChildEdge(children, y, elPath);
   }
 
@@ -176,18 +193,20 @@ function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean):
     return { instruction, referenceEl: el, targetPath: elPath };
   }
 
-  if (relY < 0.25)
+  if (relY < 0.25) {
     return {
       instruction: { type: "reorder-above" },
       referenceEl: el,
       targetPath: elPath,
     };
-  if (relY > 0.75)
+  }
+  if (relY > 0.75) {
     return {
       instruction: { type: "reorder-below" },
       referenceEl: el,
       targetPath: elPath,
     };
+  }
   return {
     instruction: { type: "make-child" },
     referenceEl: el,

package/src/panels/data-explorer.ts

@@ -3,24 +3,34 @@
 
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
+import type { TemplateResult } from "lit-html";
 
 /** Expanded data entries set — persists across renders. */
 const expandedDataKeys = new Set();
 
 /** Unwrap a Vue ref (has .value and .__v_isRef) to get the underlying value. */
 function unwrapSignal(value: unknown) {
-  if (value && typeof value === "object" && (value as Record<string, unknown>).__v_isRef)
+  if (value && typeof value === "object" && (value as Record<string, unknown>).__v_isRef) {
     return (value as Record<string, unknown>).value;
+  }
   return value;
 }
 
 /** Type label for a signal value in the data explorer. */
 function dataTypeLabel(value: unknown) {
   const v = unwrapSignal(value);
-  if (v === null) return "null";
-  if (v === undefined) return "pending";
-  if (Array.isArray(v)) return `Array(${v.length})`;
-  if (typeof v === "object") return `{${Object.keys(v).length}}`;
+  if (v === null) {
+    return "null";
+  }
+  if (v === undefined) {
+    return "pending";
+  }
+  if (Array.isArray(v)) {
+    return `Array(${v.length})`;
+  }
+  if (typeof v === "object") {
+    return `{${Object.keys(v).length}}`;
+  }
   return typeof v;
 }
 
@@ -82,8 +92,11 @@ export function renderDataExplorerTemplate(
                   expanded: isExpanded,
                 })}
                 @click=${() => {
-                  if (expandedDataKeys.has(name)) expandedDataKeys.delete(name);
-                  else expandedDataKeys.add(name);
+                  if (expandedDataKeys.has(name)) {
+                    expandedDataKeys.delete(name);
+                  } else {
+                    expandedDataKeys.add(name);
+                  }
                   renderLeftPanel();
                 }}
               >
@@ -91,8 +104,8 @@ export function renderDataExplorerTemplate(
                 <span class="data-name">${name}</span>
                 <span
                   class=${classMap({
-                    "data-type": true,
                     "data-pending": unwrapped === null,
+                    "data-type": true,
                   })}
                   >${dataTypeLabel(value)}</span
                 >
@@ -115,7 +128,7 @@ export function renderDataTreeTemplate(
   value: unknown,
   depth: number,
   maxDepth = 5,
-): import("lit-html").TemplateResult {
+): TemplateResult {
   const indent = `${(depth + 1) * 12}px`;
 
   if (depth > maxDepth) {
@@ -140,7 +153,7 @@ export function renderDataTreeTemplate(
 
   if (Array.isArray(value)) {
     const cap = 20;
-    const items: import("lit-html").TemplateResult[] = value.slice(0, cap).map((item, i) => {
+    const items: TemplateResult[] = value.slice(0, cap).map((item, i) => {
       if (item === null || item === undefined || typeof item !== "object") {
         const valText =
           typeof item === "string" && item.length > 80
@@ -171,7 +184,7 @@ export function renderDataTreeTemplate(
   const obj = value as Record<string, unknown>;
   const keys = Object.keys(obj);
   const cap = 30;
-  const items: import("lit-html").TemplateResult[] = keys.slice(0, cap).map((key) => {
+  const items: TemplateResult[] = keys.slice(0, cap).map((key) => {
     const v = obj[key];
     if (v === null || v === undefined || typeof v !== "object") {
       const valText =