@jsenv/dom 0.17.93 → 0.17.95

package/dist/jsenv_dom.js

@@ -13253,6 +13253,14 @@ const startDragToTravel = (
   if (movingAxis && !axesLeft.includes(movingAxis)) {
     return null;
   }
+  // A link and an image are draggable without anyone asking, and the browser
+  // starts that drag about 3px in, under the threshold below: it cancels the
+  // pointer and keeps the rest of the press, so the travel never forms. Refused
+  // for this press only — one excluded above, or left to a box inside, keeps it.
+  const refuseNativeDrag = (dragStartEvent) => {
+    dragStartEvent.preventDefault();
+  };
+  element.addEventListener("dragstart", refuseNativeDrag);
   const startThreshold =
     pointerDownEvent.pointerType === "mouse"
       ? DRAG_START_THRESHOLD
@@ -13278,6 +13286,7 @@ const startDragToTravel = (
     clearTimeout(holdTimeout);
     document.documentElement.removeAttribute(GESTURE_ATTRIBUTE);
     document.documentElement.removeAttribute(WALKING_ATTRIBUTE);
+    element.removeEventListener("dragstart", refuseNativeDrag);
     window.removeEventListener("pointerup", onPressOver);
     window.removeEventListener("pointercancel", onPressOver);
   };
@@ -14091,10 +14100,11 @@ const findPanZoomSurface = (element) => {
  * @param {boolean|"kept"} [options.afterHold=false] Whether a FINGER must be held
  *   still before it pans, the page keeping its scroll until then. For a surface
  *   standing in something that scrolls; a mouse pans by travelling either way.
- *   `"kept"` asks for the wait once: from the moment the surface has the hand it
- *   pans on contact, and it asks again only after a pointer has gone down away
- *   from it. `data-hand-kept` is on the element for as long as it holds the hand
- *   that way, a hand touching it or not.
+ *   `"kept"` asks for the wait once: from the moment a finger has given the
+ *   surface the hand it pans on contact, and it asks again only after a pointer
+ *   has gone down away from it. `data-hand-kept` is on the element for as long
+ *   as it holds the hand that way, a hand touching it or not; a mouse pan never
+ *   sets it.
  * @param {"auto"|"always"} [options.wheelZoom="auto"] Whether a BARE wheel zooms.
  *   `"auto"` gives it to whatever scrolls around the surface when there is one,
  *   and zooms when there is none; `"always"` takes it back, for a surface that
@@ -14115,8 +14125,8 @@ const installPanZoom = (
   } = {},
 ) => {
   // Whether a finger still owes the wait. Constant under a plain `afterHold`;
-  // under `"kept"` it is spent the first time the surface is given the hand and
-  // asked for again once the hand has gone elsewhere.
+  // under `"kept"` it is spent the first time a finger gives the surface the hand
+  // and asked for again once the hand has gone elsewhere.
   let holdIsOwed = Boolean(afterHold);
   const reflectHoldOwed = () => {
     // What a touch may do is settled before it lands, so the mode is in the DOM
@@ -14195,10 +14205,14 @@ const installPanZoom = (
 
   const activate = (anchorWhere, event) => {
     active = true;
-    if (afterHold === "kept" && holdIsOwed && onPan) {
-      // Asked for and given: whatever proved it — the hold, a second finger, a
-      // mouse travelling — the surface is the hand's from here. What it keeps
-      // is the pan on contact, which a surface that does not pan has none of.
+    if (
+      afterHold === "kept" &&
+      [...pointers.values()].some((pointer) => pointer.waitsForHold)
+    ) {
+      // Spent by the finger that owed it, whether the hold or a second finger
+      // proved it: the surface is the hand's from here. A mouse never owed the
+      // wait, so it neither spends it nor marks it — and a surface that does not
+      // pan asks no finger to wait, having no pan on contact to keep.
       keepTheHand();
     }
     for (const pointer of pointers.values()) {
@@ -14379,6 +14393,16 @@ const installPanZoom = (
     }
   };
 
+  // A link and an image are draggable without anyone asking, and the browser
+  // starts that drag about 3px in, under `threshold`: it cancels the pointer and
+  // keeps the rest of the press, so the pan never forms. Refused only while the
+  // surface reads a press — one yielded to something inside never got here.
+  const refuseNativeDrag = (dragStartEvent) => {
+    if (pointers.size > 0) {
+      dragStartEvent.preventDefault();
+    }
+  };
+
   // What the first event of the burst going on settled: a key let go of (or
   // pressed) halfway through must not hand a zoom to the page mid-gesture, and
   // a burst has no end but a silence.
@@ -14448,6 +14472,10 @@ const installPanZoom = (
   element.addEventListener("touchmove", preventTouchScroll, {
     passive: false,
   });
+  // Without a pan, one pointer is whatever else reads it, its drag included.
+  if (onPan) {
+    element.addEventListener("dragstart", refuseNativeDrag);
+  }
   if (onZoom) {
     element.addEventListener("wheel", onWheel, { passive: false });
   }
@@ -14459,6 +14487,7 @@ const installPanZoom = (
     element.removeEventListener("pointerdown", onPointerDown);
     element.removeEventListener("lostpointercapture", onLostPointerCapture);
     element.removeEventListener("touchmove", preventTouchScroll);
+    element.removeEventListener("dragstart", refuseNativeDrag);
     element.removeEventListener("wheel", onWheel);
     window.removeEventListener("pointerdown", onPointerDownAway, true);
     element.removeAttribute(SURFACE_ATTRIBUTE);
@@ -16384,62 +16413,94 @@ const areLevel = (a, b) => {
 
 /**
  * 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, read by the copy's leading edge
- * (see getDropTargetInfo); along a row, by its middle against the item's — how
- * high the copy is says nothing there, and the leading edge assumes a copy as
- * large as what it passes over: items of a row are as wide as their content,
- * and one wider than its neighbour could never be put after it.
- *
- * Beyond an end of the list, over no item, is a place too: above the first line
- * or below the last, and along a row beside the first item or past the last.
+ * 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) {
-    const { element } = dropTargetInfo;
-    if (flow === "down") {
-      return { element, side: dropTargetInfo.elementSide.y };
-    }
-    const elementRect = element.getBoundingClientRect();
-    const dragMiddle = dragElementRect.left + dragElementRect.width / 2;
-    const elementMiddle = elementRect.left + elementRect.width / 2;
-    const beforeItsMiddle =
-      flow === "right"
-        ? dragMiddle < elementMiddle
-        : dragMiddle > elementMiddle;
-    return { element, side: beforeItsMiddle ? "start" : "end" };
+    return {
+      element: dropTargetInfo.element,
+      side: dropTargetInfo.elementSide.y,
+    };
   }
   const firstItem = items[0];
   if (!firstItem) {
     return null;
   }
   const lastItem = items[items.length - 1];
-  const firstRect = firstItem.getBoundingClientRect();
-  const lastRect = lastItem.getBoundingClientRect();
-  if (
-    dragElementRect.bottom < firstRect.top ||
-    (flow !== "down" &&
-      areLevel(dragElementRect, firstRect) &&
-      isBeyond(dragElementRect, firstRect, flow === "right" ? "left" : "right"))
-  ) {
+  if (dragElementRect.bottom < firstItem.getBoundingClientRect().top) {
     return { element: firstItem, side: "start" };
   }
-  if (
-    dragElementRect.top > lastRect.bottom ||
-    (flow !== "down" &&
-      areLevel(dragElementRect, lastRect) &&
-      isBeyond(dragElementRect, lastRect, flow))
-  ) {
+  if (dragElementRect.top > lastItem.getBoundingClientRect().bottom) {
     return { element: lastItem, side: "end" };
   }
   return null;
 };
 
-const isBeyond = (dragElementRect, itemRect, towards) => {
-  return towards === "left"
-    ? dragElementRect.right < itemRect.left
-    : dragElementRect.left > itemRect.right;
+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" };
 };
 
 /**

package/package.json

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