@jxsuite/studio 0.33.0 → 0.34.0

package/src/editor/insertion-helper.ts

@@ -1,308 +0,0 @@
-/// <reference lib="dom" />
-/**
- * Insertion-helper.js — Single floating "+" button for element insertion on the canvas.
- *
- * Uses CSS Anchor Positioning to attach to sibling boundaries and empty containers. Uses Native
- * Observables (Chrome 135+) for declarative event handling.
- */
-
-import { showSlashMenu } from "./slash-menu";
-import { activeTab } from "../workspace/workspace";
-import { mutateInsertNode, transactDoc } from "../tabs/transact";
-import type { CanvasPanel } from "../types";
-import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-
-interface ObservableSubscription {
-  subscribe: ((observer: { next: (e: Event) => void }) => void) &
-    ((observer: { next: (e: MouseEvent) => void }) => void);
-}
-
-interface ObservableElement {
-  on: (event: string, options?: Record<string, unknown>) => ObservableSubscription;
-}
-
-interface InsertionHelperContext {
-  getCanvasMode: () => string; // Returns the active canvas mode.
-  withPanelPointerEvents: (fn: () => unknown) => unknown; // Executes fn with pointer-events
-  effectiveZoom: () => number; // Returns the current zoom scale factor.
-  defaultDef: (tag: string) => JxMutableNode; // Creates a default element definition for a tag.
-  parentElementPath: (path: JxPath) => JxPath | null; // Returns the parent element path,
-  childIndex: (path: JxPath) => string | number; // Returns the child index within the
-  getNodeAtPath: (doc: JxMutableNode, path: JxPath) => JxMutableNode | null; // Retrieves
-  elToPath: WeakMap<Element, JxPath>; // Maps rendered DOM elements to their document
-  panel: CanvasPanel; // The active canvas panel.
-}
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-// ─── State ───────────────────────────────────────────────────────────────────
-
-let _ctx: InsertionHelperContext | null = null;
-
-let _helper: HTMLElement | null = null;
-
-let _currentAnchor: HTMLElement | null = null;
-
-let _insertionPoint: {
-  edge: string;
-  path: JxPath;
-  parentPath: JxPath;
-  idx: number;
-} | null = null;
-
-let _abort: AbortController | null = null;
-
-let _hideTimer: ReturnType<typeof setTimeout> | null = null;
-
-// Edge detection threshold in pixels
-const EDGE_THRESHOLD = 14;
-
-// Delay before hiding to allow cursor to reach the button
-const HIDE_DELAY = 300;
-
-// ─── Public API ──────────────────────────────────────────────────────────────
-
-/**
- * Mount the insertion helper system.
- *
- * @param {InsertionHelperContext} ctx
- */
-export function mount(ctx: InsertionHelperContext) {
-  _ctx = ctx;
-  const { panel } = ctx;
-
-  _helper = document.createElement("button");
-  _helper.className = "insertion-helper";
-  _helper.textContent = "+";
-  _helper.addEventListener("click", onHelperClick);
-  _helper.addEventListener("mouseenter", () => {
-    cancelHide();
-  });
-  _helper.addEventListener("mouseleave", () => {
-    scheduleHide();
-  });
-  panel.viewport.append(_helper);
-
-  _abort = new AbortController();
-
-  // Listen on viewport — overlayClk gets pointer-events:none during editing/selection
-  const viewport = panel.viewport as HTMLElement & ObservableElement;
-  if (typeof viewport.on === "function") {
-    viewport.on("mousemove", { signal: _abort.signal }).subscribe({ next: onMouseMove });
-    viewport.on("mouseleave", { signal: _abort.signal }).subscribe({ next: hide });
-  } else {
-    panel.viewport.addEventListener("mousemove", onMouseMove, {
-      signal: _abort.signal,
-    });
-    panel.viewport.addEventListener("mouseleave", hide, {
-      signal: _abort.signal,
-    });
-  }
-}
-
-export function unmount() {
-  _abort?.abort();
-  _abort = null;
-  cancelHide();
-  if (_helper?.parentElement) {
-    _helper.remove();
-  }
-  clearAnchor();
-  _helper = null;
-  _ctx = null;
-  _insertionPoint = null;
-}
-
-// ─── Detection ───────────────────────────────────────────────────────────────
-
-/** @param {MouseEvent} e */
-function onMouseMove(e: MouseEvent) {
-  if (!_ctx || !_helper) {
-    return;
-  }
-
-  const { getCanvasMode } = _ctx;
-  const mode = getCanvasMode();
-  if (mode !== "design" && mode !== "edit") {
-    hide();
-    return;
-  }
-
-  const { panel, withPanelPointerEvents, elToPath } = _ctx;
-  const el = withPanelPointerEvents(() =>
-    document.elementFromPoint(e.clientX, e.clientY),
-  ) as HTMLElement | null;
-
-  if (!el || !panel.canvas.contains(el)) {
-    hide();
-    return;
-  }
-
-  const path = elToPath.get(el);
-  if (!path) {
-    hide();
-    return;
-  }
-
-  // Empty container: show centered "+"
-  if (el.classList.contains("empty-container-placeholder")) {
-    showAt(el, "center", path, path, 0);
-    return;
-  }
-
-  // Root element — can't insert siblings above/below root
-  if (path.length === 0) {
-    hide();
-    return;
-  }
-
-  // Determine layout direction of parent container
-  const parent = el.parentElement;
-  if (!parent) {
-    hide();
-    return;
-  }
-
-  const parentStyle = getComputedStyle(parent);
-  const { display } = parentStyle;
-  const isFlex = display === "flex" || display === "inline-flex";
-  const isGrid = display === "grid" || display === "inline-grid";
-  const isRow =
-    (isFlex && parentStyle.flexDirection.startsWith("row")) ||
-    (isGrid && parentStyle.gridAutoFlow?.startsWith("column"));
-
-  // Calculate relative position within element
-  const rect = el.getBoundingClientRect();
-  const parentPath = _ctx.parentElementPath(path);
-  if (!parentPath) {
-    hide();
-    return;
-  }
-  const childIdx = _ctx.childIndex(path) as number;
-
-  if (isRow) {
-    const relX = e.clientX - rect.left;
-    if (relX < EDGE_THRESHOLD) {
-      showAt(el, "left", path, parentPath, childIdx);
-    } else if (rect.width - relX < EDGE_THRESHOLD) {
-      showAt(el, "right", path, parentPath, childIdx + 1);
-    } else {
-      hide();
-    }
-  } else {
-    const relY = e.clientY - rect.top;
-    if (relY < EDGE_THRESHOLD) {
-      showAt(el, "top", path, parentPath, childIdx);
-    } else if (rect.height - relY < EDGE_THRESHOLD) {
-      showAt(el, "bottom", path, parentPath, childIdx + 1);
-    } else {
-      hide();
-    }
-  }
-}
-
-// ─── Show / Hide ─────────────────────────────────────────────────────────────
-
-/**
- * @param {HTMLElement} el
- * @param {string} edge
- * @param {JxPath} path
- * @param {JxPath} parentPath
- * @param {number} idx
- */
-function showAt(el: HTMLElement, edge: string, path: JxPath, parentPath: JxPath, idx: number) {
-  if (!_helper) {
-    return;
-  }
-
-  // Set CSS anchor on target element
-  if (_currentAnchor !== el) {
-    clearAnchor();
-    (el.style as CSSStyleDeclaration & Record<string, string>).anchorName = "--jx-insert";
-    _currentAnchor = el;
-  }
-
-  _helper.dataset.edge = edge;
-  _helper.classList.add("visible");
-  _insertionPoint = { edge, idx, parentPath, path };
-  cancelHide();
-}
-
-function scheduleHide() {
-  cancelHide();
-  _hideTimer = setTimeout(hideNow, HIDE_DELAY);
-}
-
-function cancelHide() {
-  if (_hideTimer !== null) {
-    clearTimeout(_hideTimer);
-    _hideTimer = null;
-  }
-}
-
-function hide() {
-  scheduleHide();
-}
-
-function hideNow() {
-  _hideTimer = null;
-  if (!_helper) {
-    return;
-  }
-  _helper.classList.remove("visible");
-  clearAnchor();
-  _insertionPoint = null;
-}
-
-function clearAnchor() {
-  if (_currentAnchor) {
-    (_currentAnchor.style as CSSStyleDeclaration & Record<string, string>).anchorName = "";
-    _currentAnchor = null;
-  }
-}
-
-// ─── Insertion ───────────────────────────────────────────────────────────────
-
-function onHelperClick(e: MouseEvent) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  if (!_ctx || !_helper || !_insertionPoint) {
-    return;
-  }
-
-  const captured = _insertionPoint;
-  showSlashMenu(_helper, "", {
-    onSelect: (cmd) => onSlashSelect(cmd, captured),
-    showFilter: true,
-  });
-}
-
-/**
- * @param {{ label: string; tag: string; description?: string }} cmd
- * @param {{ edge: string; path: JxPath; parentPath: JxPath; idx: number }} point
- */
-function onSlashSelect(
-  cmd: { label: string; tag: string; description?: string },
-  point: { edge: string; path: JxPath; parentPath: JxPath; idx: number },
-) {
-  if (!_ctx) {
-    return;
-  }
-
-  const { defaultDef } = _ctx;
-  const { parentPath, idx, edge } = point;
-
-  const newDef = defaultDef(cmd.tag);
-  const insertPath = edge === "center" ? point.path : parentPath;
-  const insertIdx = edge === "center" ? 0 : idx;
-  const newPath = [...insertPath, "children", insertIdx];
-
-  transactDoc(activeTab.value, (t) => {
-    mutateInsertNode(t, insertPath, insertIdx, newDef);
-    t.session.selection = newPath;
-  });
-
-  hide();
-}

package/src/panels/canvas-dnd.ts

@@ -1,329 +0,0 @@
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/**
- * Canvas DnD — extracted from studio.js (Phase 4m). Registers canvas elements as drag-and-drop
- * targets using @atlaskit/pragmatic-drag-and-drop.
- */
-
-import {
-  dropTargetForElements,
-  monitorForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-
-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";
-
-import type { JxPath } from "../state";
-
-export type { CanvasPanel } from "../types";
-
-interface DropInstruction {
-  type: "reorder-above" | "reorder-below" | "make-child";
-}
-
-interface DropResult {
-  instruction: DropInstruction;
-  referenceEl: HTMLElement;
-  targetPath: JxPath;
-}
-
-let _activeDropEl: HTMLElement | null = null;
-
-/**
- * Register all canvas elements in a panel as DnD drop targets.
- *
- * @param {CanvasPanel} panel
- */
-export function registerPanelDnD(panel: CanvasPanel) {
-  const { canvas, dropLine } = panel;
-  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.
-  /** Innermost drop target if it belongs to this panel's canvas, else null */
-  const innermostCanvasTarget = (location: {
-    current: {
-      dropTargets: {
-        data: Record<string | symbol, unknown>;
-        element: Element;
-      }[];
-    };
-  }) => {
-    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, isLeaf: Boolean(target.data._isVoid), path: tPath as JxPath };
-  };
-
-  const monitorCleanup = monitorForElements({
-    onDrag({ location }) {
-      view.lastDragInput = location.current.input;
-      const target = innermostCanvasTarget(location);
-      if (target) {
-        if (_activeDropEl && _activeDropEl !== target.el) {
-          _activeDropEl.classList.remove("canvas-drop-target");
-        }
-        _activeDropEl = target.el;
-        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.
-        if (_activeDropEl && canvas.contains(_activeDropEl)) {
-          _activeDropEl.classList.remove("canvas-drop-target");
-          _activeDropEl = null;
-        }
-        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) {
-        const { instruction, targetPath } = getCanvasDropResult(
-          target.el,
-          target.path,
-          target.isLeaf,
-        );
-        applyDropInstruction(instruction, source.data, targetPath);
-      }
-      _activeDropEl?.classList.remove("canvas-drop-target");
-      _activeDropEl = null;
-      for (const p of canvasPanels) {
-        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 = "";
-      }
-    },
-  });
-  view.canvasDndCleanups.push(monitorCleanup);
-
-  for (const el of allEls) {
-    if (!elToPath.get(el)) {
-      continue;
-    }
-    registerElementDropTarget(el);
-  }
-}
-
-/**
- * Register one canvas element as a drop target. Path and leaf-ness are read live from elToPath and
- * the current document at drag time, so surgical patches that remap sibling paths never leave stale
- * closures behind.
- *
- * @param {Element} el
- */
-function registerElementDropTarget(el: Element) {
-  const cleanup = dropTargetForElements({
-    canDrop({ source }) {
-      const elPath = elToPath.get(el);
-      if (!elPath) {
-        return false;
-      }
-      const srcPath = source.data.path as JxPath | undefined;
-      if (srcPath && isAncestor(srcPath, elPath)) {
-        return false;
-      }
-      return true;
-    },
-    element: /** @type {HTMLElement} */ el,
-    getData() {
-      const elPath = elToPath.get(el) ?? [];
-      const document = activeTab.value?.doc.document;
-      const node = document ? getNodeAtPath(document, elPath) : undefined;
-      const tag = (node?.tagName || "div").toLowerCase();
-      const hasElementChildren =
-        Array.isArray(node?.children) &&
-        node.children.some((c: unknown) => c != null && typeof c === "object");
-      return { _isVoid: VOID_ELEMENTS.has(tag) || !hasElementChildren, path: elPath };
-    },
-  });
-  view.canvasDndCleanups.push(cleanup);
-}
-
-/**
- * Register drop targets for a freshly patched-in subtree (root plus descendants). Cleanups join
- * view.canvasDndCleanups and are released by the next full render like all canvas DnD handlers.
- *
- * @param {HTMLElement} rootEl
- */
-export function registerSubtreeDnD(rootEl: HTMLElement) {
-  if (elToPath.get(rootEl)) {
-    registerElementDropTarget(rootEl);
-  }
-  for (const el of rootEl.querySelectorAll("*")) {
-    if (elToPath.get(el)) {
-      registerElementDropTarget(el);
-    }
-  }
-}
-
-/**
- * @param {HTMLElement} el
- * @param {JxPath} elPath
- * @param {boolean} isLeaf
- * @returns {DropResult}
- */
-function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean): DropResult {
-  if (!view.lastDragInput) {
-    return {
-      instruction: { type: "make-child" },
-      referenceEl: el,
-      targetPath: elPath,
-    };
-  }
-  const y = view.lastDragInput.clientY;
-
-  if (elPath.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);
-  }
-
-  const rect = el.getBoundingClientRect();
-  const relY = (y - rect.top) / rect.height;
-
-  if (isLeaf) {
-    const instruction =
-      relY < 0.5 ? { type: "reorder-above" as const } : { type: "reorder-below" as const };
-    return { instruction, referenceEl: el, targetPath: elPath };
-  }
-
-  if (relY < 0.25) {
-    return {
-      instruction: { type: "reorder-above" },
-      referenceEl: el,
-      targetPath: elPath,
-    };
-  }
-  if (relY > 0.75) {
-    return {
-      instruction: { type: "reorder-below" },
-      referenceEl: el,
-      targetPath: elPath,
-    };
-  }
-  return {
-    instruction: { type: "make-child" },
-    referenceEl: el,
-    targetPath: elPath,
-  };
-}
-
-/**
- * Find the nearest child edge to the cursor and return the appropriate instruction along with the
- * reference child element and its path.
- *
- * @param {HTMLElement[]} children
- * @param {number} cursorY
- * @param {JxPath} parentPath
- * @returns {DropResult}
- */
-function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath: JxPath) {
-  let closestDist = Infinity;
-  let instruction = { type: "reorder-below" } as DropInstruction;
-  let closestIdx = children.length - 1;
-
-  for (let i = 0; i < children.length; i++) {
-    const rect = children[i]!.getBoundingClientRect();
-    const topDist = Math.abs(cursorY - rect.top);
-    const bottomDist = Math.abs(cursorY - rect.bottom);
-
-    if (topDist < closestDist) {
-      closestDist = topDist;
-      instruction = { type: "reorder-above" };
-      closestIdx = i;
-    }
-    if (bottomDist < closestDist) {
-      closestDist = bottomDist;
-      instruction = { type: "reorder-below" };
-      closestIdx = i;
-    }
-  }
-
-  const childPath = [...parentPath, "children", closestIdx];
-  return {
-    instruction,
-    referenceEl: children[closestIdx]!,
-    targetPath: childPath,
-  };
-}
-
-/**
- * @param {HTMLElement} el
- * @param {JxPath} elPath
- * @param {boolean} isLeaf
- * @param {CanvasPanel} panel
- */
-function showCanvasDropIndicator(
-  el: HTMLElement,
-  elPath: JxPath,
-  isLeaf: boolean,
-  panel: CanvasPanel,
-) {
-  const { instruction, referenceEl } = getCanvasDropResult(el, elPath, isLeaf);
-  const { dropLine, viewport } = panel;
-
-  const scale = effectiveZoom();
-  const wrapRect = viewport.getBoundingClientRect();
-  const refRect = referenceEl.getBoundingClientRect();
-  const left = (refRect.left - wrapRect.left + viewport.scrollLeft) / scale;
-  const width = refRect.width / scale;
-
-  if (instruction.type === "make-child") {
-    dropLine.style.display = "block";
-    dropLine.style.top = `${(refRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
-    dropLine.style.left = `${left}px`;
-    dropLine.style.width = `${width}px`;
-    dropLine.style.height = `${refRect.height / scale}px`;
-    dropLine.className = "canvas-drop-indicator inside";
-    el.classList.add("canvas-drop-target");
-    return;
-  }
-
-  el.classList.remove("canvas-drop-target");
-  const top =
-    instruction.type === "reorder-above"
-      ? (refRect.top - wrapRect.top + viewport.scrollTop) / scale
-      : (refRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
-
-  dropLine.style.display = "block";
-  dropLine.style.top = `${top}px`;
-  dropLine.style.left = `${left}px`;
-  dropLine.style.width = `${width}px`;
-  dropLine.style.height = "";
-  dropLine.className = "canvas-drop-indicator line";
-}