@jsenv/dom 0.17.92 → 0.17.94

package/dist/jsenv_dom.js

@@ -12491,17 +12491,9 @@ const roundForConstraints = (value) => {
  *
  * @param {Object} gestureInfo - Gesture information
  * @param {Element[]} targetElements - Array of potential drop target elements
- * @param {object} [options]
- * @param {boolean} [options.fallbackToEdge=false] - When true and the drag element does
- *   not intersect any target, falls back to the first item (if above all items) or the
- *   last item (if below all items) so there is always a valid drop target at list edges.
  * @returns {Object|null} Drop target info with elementSide or null if no valid target found
  */
-const getDropTargetInfo = (
-  gestureInfo,
-  targetElements,
-  { fallbackToEdge = false } = {},
-) => {
+const getDropTargetInfo = (gestureInfo, targetElements) => {
   const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
   const dragElementRect = dragElement.getBoundingClientRect();
   const intersectingTargets = [];
@@ -12522,38 +12514,6 @@ const getDropTargetInfo = (
   }
 
   if (intersectingTargets.length === 0) {
-    if (fallbackToEdge) {
-      const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
-      const dragElementRect = dragElement.getBoundingClientRect();
-      const firstItem = targetElements[0];
-      const lastItem = targetElements[targetElements.length - 1];
-      if (
-        firstItem &&
-        dragElementRect.bottom < firstItem.getBoundingClientRect().top
-      ) {
-        // Drag element is above all items → treat as hovering the first item from the top.
-        return {
-          element: firstItem,
-          elementSide: { x: "start", y: "start" },
-          index: 0,
-          intersectingIndex: 0,
-          intersecting: [firstItem],
-        };
-      }
-      if (
-        lastItem &&
-        dragElementRect.top > lastItem.getBoundingClientRect().bottom
-      ) {
-        // Drag element is below all items → treat as hovering the last item from the bottom.
-        return {
-          element: lastItem,
-          elementSide: { x: "start", y: "end" },
-          index: targetElements.length - 1,
-          intersectingIndex: 0,
-          intersecting: [lastItem],
-        };
-      }
-    }
     return null;
   }
 
@@ -14668,6 +14628,22 @@ const css$1 = /* css */ `.navi_drop_hint {
   --drop-hint-y: calc(var(--drop-target-bottom) + var(--drop-hint-margin-y, 0px));
 }
 
+.navi_drop_hint[data-drop-edge="left"], .navi_drop_hint[data-drop-edge="right"] {
+  top: calc(var(--drop-target-top) + var(--drop-hint-margin-y, 0px));
+  left: var(--drop-hint-x);
+  width: var(--drop-hint-size, 3px);
+  height: calc(var(--drop-target-height) - 2 * var(--drop-hint-margin-y, 0px));
+  transform: translateX(-50%);
+}
+
+.navi_drop_hint[data-drop-edge="left"] {
+  --drop-hint-x: calc(var(--drop-target-left) - var(--drop-hint-margin-x, 0px));
+}
+
+.navi_drop_hint[data-drop-edge="right"] {
+  --drop-hint-x: calc(var(--drop-target-right) + var(--drop-hint-margin-x, 0px));
+}
+
 .navi_drop_hint_cap {
   color: var(--drop-hint-background-color, #4476ff);
   display: flex;
@@ -14691,6 +14667,23 @@ const css$1 = /* css */ `.navi_drop_hint {
   rotate: 90deg;
 }
 
+.navi_drop_hint:is([data-drop-edge="left"], [data-drop-edge="right"]) .navi_drop_hint_cap {
+  left: 50%;
+  right: auto;
+  translate: -50%;
+}
+
+.navi_drop_hint:is([data-drop-edge="left"], [data-drop-edge="right"]) .navi_drop_hint_cap[data-side="start"] {
+  top: calc(-1 * var(--drop-hint-arrow-size, 11px));
+  rotate: none;
+}
+
+.navi_drop_hint:is([data-drop-edge="left"], [data-drop-edge="right"]) .navi_drop_hint_cap[data-side="end"] {
+  top: auto;
+  bottom: calc(-1 * var(--drop-hint-arrow-size, 11px));
+  rotate: 180deg;
+}
+
 .navi_drop_surface {
   inset: auto;
   top: var(--drop-target-top);
@@ -15294,6 +15287,12 @@ const createDragToMoveGestureController = ({
  * @param {string} [options.itemSelector] What matches the items of the list.
  *   Left out, nothing is a place: no hint is drawn and no landing can be
  *   answered, which is what a drag that only ever throws the thing away asks for.
+ * @param {"column"|"row"|"wrap"} [options.itemFlow] How the items of a
+ *   reordered list are laid out: one under the other, side by side on one line,
+ *   or side by side over as many lines as it takes (inline-blocks, a flex-wrap,
+ *   a grid). A row runs in the writing direction of `containerElement`. It
+ *   decides which side of an item the copy is read on and where the hint is
+ *   drawn. Left out, it is read from where the items stand (see readItemFlow).
  * @param {function} [options.getItemId] `getItemId(element) → id`. An id rather
  *   than a DOM index, because the two do not match: a list draws fewer rows than
  *   it has, a search reorders them, and the structure may have holes.
@@ -15733,6 +15732,15 @@ const resolveDropMeaning = ({
   return "cancel";
 };
 
+// Which edge of its anchor the reorder hint is drawn at, for each way the items
+// can follow each other (see readItemFlow): before an item, the edge the flow
+// comes in by; after the last one, the edge it leaves by.
+const DROP_HINT_EDGES = {
+  down: { before: "top", after: "bottom" },
+  right: { before: "left", after: "right" },
+  left: { before: "right", after: "left" },
+};
+
 /**
  * A COPY of the element is carried, and the original keeps its place in the
  * layout — which is what makes a reorder possible at all: nothing else moves
@@ -15762,6 +15770,7 @@ const startDragToCarryCopy = (
     areaConstraint = canToss || canLeave ? "none" : undefined,
     containerElement = draggedElement.parentElement,
     itemSelector,
+    itemFlow,
     getItemId,
     onReorder,
     onLand,
@@ -15799,6 +15808,7 @@ const startDragToCarryCopy = (
   if (!isPrimaryButtonEvent(event)) {
     return undefined;
   }
+  const flowSaid = resolveItemFlow(itemFlow, containerElement);
   // Where the hand is, for a press handed over: its `pointerdown` says where it
   // WAS, before the hold and whatever the hold opened. Let go of meanwhile, it
   // is not picked up after the fact.
@@ -15913,6 +15923,7 @@ const startDragToCarryCopy = (
           dropHintEl.style.removeProperty("--drop-target-top");
           dropHintEl.style.removeProperty("--drop-target-bottom");
           dropHintEl.style.removeProperty("--drop-target-left");
+          dropHintEl.style.removeProperty("--drop-target-right");
           dropHintEl.style.removeProperty("--drop-target-width");
           dropHintEl.style.removeProperty("--drop-target-height");
         };
@@ -15954,12 +15965,10 @@ const startDragToCarryCopy = (
             }
           }
 
-          const dropTargetInfo = getDropTargetInfo(gestureInfo, items, {
-            // The edges of a LIST: above the first row means the top of it, below
-            // the last one means the end of it. A board has no such reading — away
-            // from every place is away from every place.
-            fallbackToEdge: !canLand,
-          });
+          const flow = canLand ? undefined : flowSaid || readItemFlow(allItems);
+          const dropTargetInfo = canLand
+            ? getDropTargetInfo(gestureInfo, items)
+            : findPlaceInList(gestureInfo, items, flow);
           gestureInfo.dropTargetInfo = dropTargetInfo || null;
           if (!dropTargetInfo) {
             clearDropHint();
@@ -15993,14 +16002,13 @@ const startDragToCarryCopy = (
             );
             return;
           }
-          // Convert {element, edge} to a beforeElement using the items array
+          // Convert {element, side} to a beforeElement using the items array
           // (not nextElementSibling, which breaks if non-item elements exist between items).
-          //   edge "start" → insert before the hovered element
-          //   edge "end"   → insert before the next item (null = append at end)
-          const edge = dropTargetInfo.elementSide.y;
+          //   side "start" → insert before the hovered element
+          //   side "end"   → insert before the next item (null = append at end)
           const hoveredIndex = items.indexOf(dropTargetInfo.element);
           const beforeElement =
-            edge === "start"
+            dropTargetInfo.side === "start"
               ? dropTargetInfo.element
               : (items[hoveredIndex + 1] ?? null);
           // Detect no-op: result would leave the grabbed element in the same position.
@@ -16023,9 +16031,11 @@ const startDragToCarryCopy = (
           currentReleaseElement = releaseElement;
           // Update drop hint CSS vars.
           // beforeElement = null → insert at end (hint after last item)
-          // beforeElement = X    → insert before X (hint at top edge of X)
+          // beforeElement = X    → insert before X (hint at the edge of X the
+          //                        flow comes in by)
           const anchorEl = beforeElement || items[items.length - 1];
-          const anchorEdge = beforeElement !== null ? "top" : "bottom";
+          const anchorEdge =
+            DROP_HINT_EDGES[flow][beforeElement !== null ? "before" : "after"];
           // Viewport coordinates, straight from the anchor row: the hint is fixed
           // in the page (see its CSS), so there is no container box to be relative
           // to and no scroll offset to add back.
@@ -16043,10 +16053,18 @@ const startDragToCarryCopy = (
             "--drop-target-left",
             `${anchorRect.left}px`,
           );
+          dropHintEl.style.setProperty(
+            "--drop-target-right",
+            `${anchorRect.right}px`,
+          );
           dropHintEl.style.setProperty(
             "--drop-target-width",
             `${anchorRect.width}px`,
           );
+          dropHintEl.style.setProperty(
+            "--drop-target-height",
+            `${anchorRect.height}px`,
+          );
         });
 
         dragGesture.addReleaseCallback(async (gestureInfo) => {
@@ -16307,6 +16325,155 @@ const createDropSurface = () => {
   return div;
 };
 
+/**
+ * The way the items follow each other, from how the caller said they are laid
+ * out (the `itemFlow` of startDragTo). A row runs the way the text of its list
+ * does: from right to left under `direction: rtl`.
+ */
+const resolveItemFlow = (itemFlow, containerElement) => {
+  if (itemFlow === undefined) {
+    return undefined;
+  }
+  if (itemFlow === "column") {
+    return "down";
+  }
+  if (itemFlow === "row" || itemFlow === "wrap") {
+    return getComputedStyle(containerElement).direction === "rtl"
+      ? "left"
+      : "right";
+  }
+  return undefined;
+};
+
+/**
+ * Which way the items of a list follow each other on screen: "down", or along a
+ * line — a row, a wrapped row, a grid — "right", or "left" when it runs from
+ * right to left. Read from where the items stand rather than declared: the
+ * first item level with the one after it makes the list run sideways, and which
+ * of the two is on the left says which way. Asked of the whole list, not of the
+ * item under the copy: alone on the last line of a wrapped row, an item is level
+ * with nothing and still part of a row.
+ */
+const readItemFlow = (items) => {
+  let previousRect;
+  for (const item of items) {
+    const rect = item.getBoundingClientRect();
+    // A box that takes no room stands on no line.
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    if (previousRect && areLevel(previousRect, rect)) {
+      return rect.left < previousRect.left ? "left" : "right";
+    }
+    previousRect = rect;
+  }
+  return "down";
+};
+
+// The middle of one within the height of the other. Overlapping is not enough:
+// items stacked with a negative margin (a border shared between two) overlap by
+// a pixel and are still one under the other.
+const areLevel = (a, b) => {
+  const aMiddle = a.top + a.height / 2;
+  const bMiddle = b.top + b.height / 2;
+  return (
+    (bMiddle > a.top && bMiddle < a.bottom) ||
+    (aMiddle > b.top && aMiddle < b.bottom)
+  );
+};
+
+/**
+ * The item the copy is at, and its `side` in the order of the list: "start" for
+ * before it, "end" for after it.
+ *
+ * Down a list, the item under the copy, read by the copy's leading edge (see
+ * getDropTargetInfo); over no item, above the first one is the start of the
+ * list and below the last one its end.
+ *
+ * Along a row, the copy's middle decides, the way a click puts the caret in a
+ * text: on the nearest line, before the first item whose middle it has not
+ * reached. How high the copy is says which line and nothing more, its size
+ * nothing at all — the leading edge assumes a copy as large as what it passes
+ * over, and items of a row are as wide as their content: read by its edge, one
+ * wider than its neighbour could never be put after it.
+ */
+const findPlaceInList = (gestureInfo, items, flow) => {
+  const dragElementRect = gestureInfo.elementImpacted.getBoundingClientRect();
+  if (flow !== "down") {
+    return findPlaceOnNearestLine(dragElementRect, items, flow);
+  }
+  const dropTargetInfo = getDropTargetInfo(gestureInfo, items);
+  if (dropTargetInfo) {
+    return {
+      element: dropTargetInfo.element,
+      side: dropTargetInfo.elementSide.y,
+    };
+  }
+  const firstItem = items[0];
+  if (!firstItem) {
+    return null;
+  }
+  const lastItem = items[items.length - 1];
+  if (dragElementRect.bottom < firstItem.getBoundingClientRect().top) {
+    return { element: firstItem, side: "start" };
+  }
+  if (dragElementRect.top > lastItem.getBoundingClientRect().bottom) {
+    return { element: lastItem, side: "end" };
+  }
+  return null;
+};
+
+const findPlaceOnNearestLine = (dragElementRect, items, flow) => {
+  const lines = [];
+  let previousRect;
+  for (const item of items) {
+    const rect = item.getBoundingClientRect();
+    // A box that takes no room stands on no line (see readItemFlow).
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    if (!previousRect || !areLevel(previousRect, rect)) {
+      lines.push({ top: rect.top, bottom: rect.bottom, entries: [] });
+    }
+    const line = lines[lines.length - 1];
+    if (rect.top < line.top) {
+      line.top = rect.top;
+    }
+    if (rect.bottom > line.bottom) {
+      line.bottom = rect.bottom;
+    }
+    line.entries.push({ item, middle: rect.left + rect.width / 2 });
+    previousRect = rect;
+  }
+  const dragMiddleY = dragElementRect.top + dragElementRect.height / 2;
+  let nearestLine;
+  let nearestDistance;
+  for (const line of lines) {
+    const distance =
+      dragMiddleY < line.top
+        ? line.top - dragMiddleY
+        : dragMiddleY > line.bottom
+          ? dragMiddleY - line.bottom
+          : 0;
+    if (nearestLine === undefined || distance < nearestDistance) {
+      nearestLine = line;
+      nearestDistance = distance;
+    }
+  }
+  if (!nearestLine) {
+    return null;
+  }
+  const dragMiddleX = dragElementRect.left + dragElementRect.width / 2;
+  for (const { item, middle } of nearestLine.entries) {
+    const notReached =
+      flow === "right" ? middle > dragMiddleX : middle < dragMiddleX;
+    if (notReached) {
+      return { element: item, side: "start" };
+    }
+  }
+  return { element: nearestLine.entries.at(-1).item, side: "end" };
+};
+
 /**
  * The copy leaves the screen the way it was thrown, and the caller says what that
  * meant. Resolves true when it is really gone.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.92",
+  "version": "0.17.94",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {