@jxsuite/studio 0.10.2 → 0.13.0

package/src/panels/block-action-bar.js

@@ -6,18 +6,9 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import {
-  getState,
-  update,
-  updateSession,
-  renderOnly,
-  selectNode,
-  moveNode,
-  getNodeAtPath,
-  nodeLabel,
-  parentElementPath,
-  childIndex,
-} from "../store.js";
+import { getNodeAtPath, nodeLabel, parentElementPath, childIndex } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateMoveNode } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit.js";
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
@@ -25,7 +16,21 @@ import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 
-/** @type {any} */
+/**
+ * @typedef {import("../state.js").StudioState} StudioState
+ *
+ * @typedef {import("../state.js").JxPath} JxPath
+ *
+ * @typedef {{ command: string; tag: string; label: string; icon: string; shortcut?: string }} InlineAction
+ */
+
+/**
+ * @type {{
+ *   getCanvasMode: () => string;
+ *   navigateToComponent: (path: string) => void;
+ *   createFloatingContainer: () => HTMLElement;
+ * } | null}
+ */
 let _ctx = null;
 
 /**
@@ -33,8 +38,8 @@ let _ctx = null;
  *
  * @param {{
  *   getCanvasMode: () => string;
- *   navigateToComponent: Function;
- *   createFloatingContainer: Function;
+ *   navigateToComponent: (path: string) => void;
+ *   createFloatingContainer: () => HTMLElement;
  * }} ctx
  */
 export function initBlockActionBar(ctx) {
@@ -45,7 +50,7 @@ export function initBlockActionBar(ctx) {
 }
 
 /** Pre-built icon templates for inline format buttons (avoids unsafeStatic) */
-const formatIconMap = /** @type {Record<string, any>} */ ({
+const formatIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
   "sp-icon-text-bold": html`<sp-icon-text-bold slot="icon"></sp-icon-text-bold>`,
   "sp-icon-text-italic": html`<sp-icon-text-italic slot="icon"></sp-icon-text-italic>`,
   "sp-icon-text-underline": html`<sp-icon-text-underline slot="icon"></sp-icon-text-underline>`,
@@ -63,11 +68,11 @@ const formatIconMap = /** @type {Record<string, any>} */ ({
 /**
  * Prevent the bar from stealing focus from contenteditable
  *
- * @param {any} e
+ * @param {MouseEvent} e
  */
 function onBarMousedown(e) {
-  if (e.target.closest("sp-textfield")) return;
-  if (e.target.closest(".bar-drag-handle")) return;
+  if (/** @type {HTMLElement} */ (e.target).closest("sp-textfield")) return;
+  if (/** @type {HTMLElement} */ (e.target).closest(".bar-drag-handle")) return;
   e.preventDefault();
 }
 
@@ -78,42 +83,48 @@ function captureSelectionRange() {
 }
 
 /**
- * @param {any} e
- * @param {any} action
+ * @param {MouseEvent} e
+ * @param {InlineAction} action
  */
 function onFormatClick(e, action) {
   e.stopPropagation();
   if (action.command === "link") {
-    showLinkPopover(e.target.closest("sp-action-button"));
+    showLinkPopover(
+      /** @type {HTMLElement} */ (
+        /** @type {HTMLElement} */ (e.target).closest("sp-action-button")
+      ),
+    );
   } else if (view.savedRange) {
-    const sel = /** @type {any} */ (window.getSelection());
+    const sel = window.getSelection();
     const anchor = view.savedRange.startContainer;
     const editableRoot = (
-      anchor?.nodeType === Node.ELEMENT_NODE ? anchor : anchor?.parentElement
+      anchor?.nodeType === Node.ELEMENT_NODE
+        ? /** @type {Element} */ (anchor)
+        : anchor?.parentElement
     )?.closest("[contenteditable]");
     if (editableRoot) {
-      editableRoot.focus();
-      sel.removeAllRanges();
-      sel.addRange(view.savedRange);
+      /** @type {HTMLElement} */ (editableRoot).focus();
+      sel?.removeAllRanges();
+      sel?.addRange(view.savedRange);
       applyInlineFormat(action);
     }
   }
 }
 
 function renderParentSelector() {
-  const S = getState();
-  const pPath = parentElementPath(S.selection);
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return nothing;
+  const pPath = parentElementPath(tab.session.selection);
   if (!pPath) return nothing;
-  const parentNode = getNodeAtPath(S.document, pPath);
+  const parentNode = getNodeAtPath(tab.doc.document, pPath);
   return html`
     <sp-action-button
       size="xs"
       quiet
       title="Select parent: ${nodeLabel(parentNode)}"
-      @click=${(/** @type {any} */ e) => {
+      @click=${(/** @type {MouseEvent} */ e) => {
         e.stopPropagation();
-        const S = getState();
-        update(selectNode(S, pPath));
+        activeTab.value.session.selection = pPath;
       }}
     >
       <sp-icon-back slot="icon"></sp-icon-back>
@@ -122,10 +133,12 @@ function renderParentSelector() {
 }
 
 function renderMoveArrows() {
-  const S = getState();
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  const pPath = parentElementPath(S.selection);
-  const parentNode = getNodeAtPath(S.document, /** @type {any} */ (pPath));
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return nothing;
+  const sel = tab.session.selection;
+  const idx = /** @type {number} */ (childIndex(sel));
+  const pPath = parentElementPath(sel);
+  const parentNode = getNodeAtPath(tab.doc.document, /** @type {JxPath} */ (pPath));
   const siblings = parentNode?.children;
   return html`
     <sp-action-button
@@ -133,7 +146,7 @@ function renderMoveArrows() {
       quiet
       title="Move up"
       ?disabled=${idx <= 0}
-      @click=${(/** @type {any} */ e) => {
+      @click=${(/** @type {MouseEvent} */ e) => {
         e.stopPropagation();
         moveSelectionUp();
       }}
@@ -145,7 +158,7 @@ function renderMoveArrows() {
       quiet
       title="Move down"
       ?disabled=${!siblings || idx >= siblings.length - 1}
-      @click=${(/** @type {any} */ e) => {
+      @click=${(/** @type {MouseEvent} */ e) => {
         e.stopPropagation();
         moveSelectionDown();
       }}
@@ -158,10 +171,10 @@ function renderMoveArrows() {
 /**
  * Apply an inline format action.
  *
- * @param {any} action
+ * @param {InlineAction} action
  */
 function applyInlineFormat(action) {
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, string>} */
   const cmdToTag = {
     bold: "strong",
     italic: "em",
@@ -190,19 +203,22 @@ export function dismissBlockActionBar() {
   if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
 }
 
-/** @param {any} anchorBtn */
+/** @param {HTMLElement} anchorBtn */
 function showLinkPopover(anchorBtn) {
   litRender(nothing, view.linkPopoverHost);
 
   const sel = window.getSelection();
-  /** @type {any} */
+  /** @type {HTMLAnchorElement | null} */
   let existingLink = null;
   if (sel?.rangeCount) {
-    /** @type {any} */
+    /** @type {Node | null} */
     let node = sel.anchorNode;
     while (node && node !== document.body) {
-      if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "a") {
-        existingLink = node;
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        /** @type {Element} */ (node).tagName.toLowerCase() === "a"
+      ) {
+        existingLink = /** @type {HTMLAnchorElement} */ (node);
         break;
       }
       node = node.parentNode;
@@ -212,8 +228,10 @@ function showLinkPopover(anchorBtn) {
   const rect = anchorBtn.getBoundingClientRect();
 
   const onApply = () => {
-    const field = view.linkPopoverHost.querySelector("sp-textfield");
-    const url = /** @type {any} */ (field)?.value;
+    const field = /** @type {HTMLInputElement | null} */ (
+      view.linkPopoverHost.querySelector("sp-textfield")
+    );
+    const url = field?.value || "";
     if (existingLink) {
       existingLink.setAttribute("href", url);
     } else if (url) {
@@ -224,6 +242,7 @@ function showLinkPopover(anchorBtn) {
   };
 
   const onRemove = () => {
+    if (!existingLink?.parentNode) return;
     const frag = document.createDocumentFragment();
     while (existingLink.firstChild) frag.appendChild(existingLink.firstChild);
     existingLink.parentNode.replaceChild(frag, existingLink);
@@ -231,7 +250,7 @@ function showLinkPopover(anchorBtn) {
     renderBlockActionBar();
   };
 
-  const onKeydown = (/** @type {any} */ e) => {
+  const onKeydown = (/** @type {KeyboardEvent} */ e) => {
     if (e.key === "Enter") onApply();
     else if (e.key === "Escape") {
       litRender(nothing, view.linkPopoverHost);
@@ -273,32 +292,33 @@ function showLinkPopover(anchorBtn) {
 
 /** Move the selected node up (swap with previous sibling). */
 function moveSelectionUp() {
-  const S = getState();
-  if (!S.selection || S.selection.length < 2) return;
-  const idx = /** @type {number} */ (childIndex(S.selection));
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  const sel = tab.session.selection;
+  const idx = /** @type {number} */ (childIndex(sel));
   if (idx <= 0) return;
-  const pPath = /** @type {any} */ (parentElementPath(S.selection));
-  update(moveNode(S, S.selection, pPath, idx - 1));
-  updateSession({ selection: [...pPath, "children", idx - 1] });
-  renderOnly("overlays");
+  const pPath = /** @type {JxPath} */ (parentElementPath(sel));
+  transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx - 1));
+  tab.session.selection = [...pPath, "children", idx - 1];
 }
 
 /** Move the selected node down (swap with next sibling). */
 function moveSelectionDown() {
-  const S = getState();
-  if (!S.selection || S.selection.length < 2) return;
-  const idx = /** @type {number} */ (childIndex(S.selection));
-  const pPath = /** @type {any} */ (parentElementPath(S.selection));
-  const parentNode = getNodeAtPath(S.document, pPath);
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  const sel = tab.session.selection;
+  const idx = /** @type {number} */ (childIndex(sel));
+  const pPath = /** @type {JxPath} */ (parentElementPath(sel));
+  const parentNode = getNodeAtPath(tab.doc.document, pPath);
   const siblings = parentNode?.children;
   if (!siblings || idx >= siblings.length - 1) return;
-  update(moveNode(S, S.selection, pPath, idx + 2));
-  updateSession({ selection: [...pPath, "children", idx + 1] });
-  renderOnly("overlays");
+  transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx + 2));
+  tab.session.selection = [...pPath, "children", idx + 1];
 }
 
 /** Render the unified block action bar above the selected element. */
 export function renderBlockActionBar() {
+  if (!_ctx) return;
   if (!view.blockActionBarEl) {
     view.blockActionBarEl = _ctx.createFloatingContainer();
   }
@@ -308,21 +328,22 @@ export function renderBlockActionBar() {
     view.selDragCleanup = null;
   }
 
-  const S = getState();
+  const tab = activeTab.value;
   const canvasMode = _ctx.getCanvasMode();
 
-  if (!S.selection || (canvasMode !== "design" && canvasMode !== "edit")) {
+  if (!tab?.session.selection || (canvasMode !== "design" && canvasMode !== "edit")) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
 
+  const selection = tab.session.selection;
   const activePanel = getActivePanel();
   if (!activePanel) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
-  const el = findCanvasElement(S.selection, activePanel.canvas);
-  const node = el && getNodeAtPath(S.document, S.selection);
+  const el = findCanvasElement(selection, activePanel.canvas);
+  const node = el && getNodeAtPath(tab.doc.document, selection);
   if (!el || !node) {
     litRender(nothing, view.blockActionBarEl);
     return;
@@ -347,28 +368,31 @@ export function renderBlockActionBar() {
         style="left:${elRect.left}px; top:${topPos}px"
         @mousedown=${onBarMousedown}
       >
-        ${S.selection.length >= 2 ? renderParentSelector() : nothing}
+        ${selection.length >= 2 ? renderParentSelector() : nothing}
 
         <span class="bar-tag">${node.$id || (node.tagName ?? "div")}</span>
 
-        ${S.selection.length >= 2
+        ${selection.length >= 2
           ? html`<span class="bar-drag-handle" title="Drag to reorder">⡇</span>`
           : nothing}
-        ${S.selection.length >= 2 ? renderMoveArrows() : nothing}
-        ${S.selection.length >= 2 && node.tagName
+        ${selection.length >= 2 ? renderMoveArrows() : nothing}
+        ${selection.length >= 2 && node.tagName
           ? (() => {
               const isComp =
                 node.tagName.includes("-") &&
-                componentRegistry.some((/** @type {any} */ c) => c.tagName === node.tagName);
+                componentRegistry.some(
+                  (/** @type {{ tagName: string }} */ c) => c.tagName === node.tagName,
+                );
               if (isComp) {
                 const comp = componentRegistry.find(
-                  (/** @type {any} */ c) => c.tagName === node.tagName,
+                  (/** @type {{ tagName: string; path: string }} */ c) =>
+                    c.tagName === node.tagName,
                 );
                 return html`<sp-action-button
                   size="xs"
                   quiet
                   title="Edit Component"
-                  @click=${() => _ctx.navigateToComponent(comp.path)}
+                  @click=${() => _ctx?.navigateToComponent(/** @type {string} */ (comp?.path))}
                   ><sp-icon-edit slot="icon" size="xs"></sp-icon-edit
                 ></sp-action-button>`;
               }
@@ -376,7 +400,7 @@ export function renderBlockActionBar() {
                 size="xs"
                 quiet
                 title="Convert to Component"
-                @click=${() => convertToComponent(S)}
+                @click=${() => convertToComponent()}
                 ><sp-icon-box slot="icon" size="xs"></sp-icon-box
               ></sp-action-button>`;
             })()
@@ -398,7 +422,7 @@ export function renderBlockActionBar() {
                       value=${action.tag}
                       title="${action.label}${action.shortcut ? ` (${action.shortcut})` : ""}"
                       @mousedown=${captureSelectionRange}
-                      @click=${(/** @type {any} */ e) => onFormatClick(e, action)}
+                      @click=${(/** @type {MouseEvent} */ e) => onFormatClick(e, action)}
                     >
                       ${formatIconMap[action.icon] ?? nothing}
                     </sp-action-button>
@@ -422,8 +446,8 @@ export function renderBlockActionBar() {
       bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
     }
     // Attach drag handle
-    const currentS = getState();
-    if (currentS.selection?.length >= 2) {
+    const currentTab = activeTab.value;
+    if (currentTab?.session.selection && currentTab.session.selection.length >= 2) {
       const handle = bar.querySelector(".bar-drag-handle");
       if (handle) {
         if (view.selDragCleanup) {
@@ -432,7 +456,7 @@ export function renderBlockActionBar() {
         }
         view.selDragCleanup = draggable({
           element: handle,
-          getInitialData: () => ({ type: "tree-node", path: getState().selection }),
+          getInitialData: () => ({ type: "tree-node", path: activeTab.value?.session.selection }),
         });
       }
     }

package/src/panels/canvas-dnd.js

@@ -20,19 +20,39 @@ import { view } from "../view.js";
 import { applyDropInstruction } from "../panels/dnd.js";
 import { effectiveZoom } from "../canvas/canvas-helpers.js";
 
+/**
+ * @typedef {{
+ *   canvas: HTMLElement;
+ *   overlayClk: HTMLElement;
+ *   overlay: HTMLElement;
+ *   viewport: HTMLElement;
+ *   dropLine: HTMLElement;
+ * }} CanvasPanel
+ *
+ * @typedef {(string | number)[]} JxPath
+ *
+ * @typedef {{ type: "reorder-above" | "reorder-below" | "make-child" }} DropInstruction
+ *
+ * @typedef {{ instruction: DropInstruction; referenceEl: HTMLElement; targetPath: JxPath }} DropResult
+ */
+
+/** @type {HTMLElement | null} */
+let _activeDropEl = null;
+
 /**
  * Register all canvas elements in a panel as DnD drop targets.
  *
- * @param {any} panel
+ * @param {CanvasPanel} panel
  */
 export function registerPanelDnD(panel) {
   const { canvas, dropLine } = panel;
   const allEls = canvas.querySelectorAll("*");
 
   const monitorCleanup = monitorForElements({
-    onDragStart() {
+    onDragStart({ location }) {
+      view.lastDragInput = location.current.input;
       for (const el of canvas.querySelectorAll("*")) {
-        /** @type {any} */ (el).style.pointerEvents = "auto";
+        /** @type {HTMLElement} */ (el).style.pointerEvents = "auto";
       }
       for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
     },
@@ -40,10 +60,12 @@ export function registerPanelDnD(panel) {
       view.lastDragInput = location.current.input;
     },
     onDrop() {
+      _activeDropEl?.classList.remove("canvas-drop-target");
+      _activeDropEl = null;
       for (const p of canvasPanels) p.dropLine.style.display = "none";
       view.lastDragInput = null;
       for (const el of canvas.querySelectorAll("*")) {
-        /** @type {any} */ (el).style.pointerEvents = "none";
+        /** @type {HTMLElement} */ (el).style.pointerEvents = "none";
       }
       for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
     },
@@ -56,34 +78,45 @@ export function registerPanelDnD(panel) {
     if (!elPath) continue;
 
     const node = getNodeAtPath(S.document, elPath);
-    const isVoid = VOID_ELEMENTS.has((node?.tagName || "div").toLowerCase());
+    const tag = (node?.tagName || "div").toLowerCase();
+    const hasElementChildren = node?.children?.some(
+      (/** @type {unknown} */ c) => c != null && typeof c === "object",
+    );
+    const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
 
     const cleanup = dropTargetForElements({
-      element: el,
+      element: /** @type {HTMLElement} */ (el),
       canDrop({ source }) {
-        const srcPath = source.data.path;
-        if (srcPath && isAncestor(/** @type {any} */ (srcPath), elPath)) return false;
+        const srcPath = /** @type {JxPath | undefined} */ (source.data.path);
+        if (srcPath && isAncestor(srcPath, elPath)) return false;
         return true;
       },
       getData() {
-        return { path: elPath, _isVoid: isVoid };
-      },
-      onDragEnter() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
+        return { path: elPath, _isVoid: isLeaf };
       },
-      onDrag() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      onDragEnter({ location }) {
+        view.lastDragInput = location.current.input;
+        if (_activeDropEl && _activeDropEl !== el) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+        }
+        _activeDropEl = /** @type {HTMLElement} */ (el);
+        showCanvasDropIndicator(/** @type {HTMLElement} */ (el), elPath, isLeaf, panel);
       },
-      onDragLeave() {
-        dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
+      onDrag({ location }) {
+        view.lastDragInput = location.current.input;
+        showCanvasDropIndicator(/** @type {HTMLElement} */ (el), elPath, isLeaf, panel);
       },
+      onDragLeave() {},
       onDrop({ source }) {
         dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
-        const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-        if (!instruction) return;
-        applyDropInstruction(instruction, source.data, elPath);
+        /** @type {HTMLElement} */ (el).classList.remove("canvas-drop-target");
+        _activeDropEl = null;
+        const { instruction, targetPath } = getCanvasDropResult(
+          /** @type {HTMLElement} */ (el),
+          elPath,
+          isLeaf,
+        );
+        applyDropInstruction(instruction, source.data, targetPath);
       },
     });
     view.canvasDndCleanups.push(cleanup);
@@ -91,49 +124,98 @@ export function registerPanelDnD(panel) {
 }
 
 /**
- * @param {any} el
- * @param {any} elPath
- * @param {any} isVoid
+ * @param {HTMLElement} el
+ * @param {JxPath} elPath
+ * @param {boolean} isLeaf
+ * @returns {DropResult}
  */
-function getCanvasDropInstruction(el, elPath, isVoid) {
-  const rect = el.getBoundingClientRect();
-  if (!view.lastDragInput) return null;
+function getCanvasDropResult(el, elPath, isLeaf) {
+  if (!view.lastDragInput)
+    return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
   const y = view.lastDragInput.clientY;
+
+  if (elPath.length === 0) {
+    const children = /** @type {HTMLElement[]} */ (Array.from(el.children));
+    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 (elPath.length === 0) return { type: "make-child" };
-  if (isVoid) return relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
-  if (relY < 0.25) return { type: "reorder-above" };
-  if (relY > 0.75) return { type: "reorder-below" };
-  return { type: "make-child" };
+  if (isLeaf) {
+    const instruction =
+      relY < 0.5
+        ? { type: /** @type {const} */ ("reorder-above") }
+        : { type: /** @type {const} */ ("reorder-below") };
+    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 };
 }
 
 /**
- * @param {any} el
- * @param {any} elPath
- * @param {any} isVoid
- * @param {any} panel
+ * 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 showCanvasDropIndicator(el, elPath, isVoid, panel) {
-  const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-  const { dropLine, viewport } = panel;
-  if (!instruction) {
-    dropLine.style.display = "none";
-    return;
+function nearestChildEdge(children, cursorY, parentPath) {
+  let closestDist = Infinity;
+  let instruction = /** @type {DropInstruction} */ ({ type: "reorder-below" });
+  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, elPath, isLeaf, panel) {
+  const { instruction, referenceEl } = getCanvasDropResult(el, elPath, isLeaf);
+  const { dropLine, viewport } = panel;
+
   const scale = effectiveZoom();
   const wrapRect = viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;
-  const width = elRect.width / scale;
+  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 = `${(elRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
+    dropLine.style.top = `${(refRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
     dropLine.style.left = `${left}px`;
     dropLine.style.width = `${width}px`;
-    dropLine.style.height = `${elRect.height / scale}px`;
+    dropLine.style.height = `${refRect.height / scale}px`;
     dropLine.className = "canvas-drop-indicator inside";
     el.classList.add("canvas-drop-target");
     return;
@@ -142,13 +224,13 @@ function showCanvasDropIndicator(el, elPath, isVoid, panel) {
   el.classList.remove("canvas-drop-target");
   const top =
     instruction.type === "reorder-above"
-      ? (elRect.top - wrapRect.top + viewport.scrollTop) / scale
-      : (elRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
+      ? (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 = "2px";
+  dropLine.style.height = "";
   dropLine.className = "canvas-drop-indicator line";
 }