@jsenv/dom 0.17.82 → 0.17.84

package/dist/jsenv_dom.js

@@ -4611,19 +4611,20 @@ const waitForPressHeld = (
 ) => {
   const { pointerId, clientX, clientY } = pressEvent;
 
-  /* The one capture that says nothing about the press. A pointer that cannot
-     hover is given a capture the moment it lands, by the browser and to the
-     element it landed on, without anybody asking — and it is announced like any
-     other, just before the first pointer event that follows. EVERY touch press
-     has it, so it cannot be read as this one having been settled: read that way,
-     the wait dies at the first pixel of a finger that was only resting on the
-     glass, which is what a finger does. That is the hold that fails one time in
-     two, on the pointer this whole module exists for.
-     Asked rather than assumed, and asked HERE: the press is the one moment where
-     a capture can only be the browser's, since nothing has taken one yet. */
-  const implicitCaptureHolder = pressEvent.target.hasPointerCapture?.(pointerId)
-    ? pressEvent.target
-    : null;
+  /* The one capture that says nothing about the press. A finger is given a
+     capture the moment it lands, by the browser and to the element it landed
+     on, without anybody asking — and it is announced like any other, just
+     before the first pointer event that follows. EVERY touch press has it, so it
+     cannot be read as this one having been settled: read that way, the wait
+     dies at the first pixel of a finger that was only resting on the glass,
+     which is what a finger does. A mouse or a pen is given none.
+     Known from the press, never asked with hasPointerCapture: the capture goes
+     to the deepest element under the finger, and inside a shadow tree (the
+     inner editor of every <input> and <textarea>, any web component) the
+     element the page sees answers false, while the announcement reaches the
+     page retargeted to it. */
+  const implicitCaptureHolder =
+    pressEvent.pointerType === "touch" ? pressEvent.target : null;
 
   const pressCleanupCallbacks = [];
   // Who is still holding the refusal. The finger holds it because the finger is
@@ -4750,8 +4751,8 @@ const waitForPressHeld = (
   }
   holdGiveUps.add(cancelPress);
   // A gesture that captures the pointer without takePress: heard only when the
-  // capture moves, the one it takes on the implicit holder being announced to
-  // nobody (see takePress).
+  // capture moves, the one it takes on the implicit holder being
+  // indistinguishable from the browser's (see takePress).
   const onGotPointerCapture = (captureEvent) => {
     if (captureEvent.pointerId !== pointerId) {
       return;
@@ -10147,6 +10148,11 @@ const dragSourceThatStoodDown = (pressEvent) => {
   return pressEvent[STOOD_DOWN] || null;
 };
 
+// How far (px) a press travels before it means drag. Also how far a carry that
+// was handed over must go before it has gone anywhere (see handedOver in
+// drag_to.js): that is the same question, asked of the hand holding it.
+const DRAG_INTENT_THRESHOLD = 5;
+
 /**
  * Waits for the user to mean it, then starts a drag gesture.
  *
@@ -10192,7 +10198,7 @@ const dragAfterIntent = (
   grabEvent,
   dragGestureInitializer,
   {
-    threshold = 5,
+    threshold = DRAG_INTENT_THRESHOLD,
     longPress = "if-touch",
     longPressDelay = 400,
     longPressSlop = 8,
@@ -14960,8 +14966,12 @@ const createDragToMoveGestureController = ({
  * hold that handed it over, so the carry starts at once. And where the hand is
  * has nothing to do with where the element stands, so the copy is brought to
  * the hand — centred on the finger, flying there from the element's box —
- * rather than following it from a distance. The pointer is taken on the
- * element, away from what the finger first touched. Only a copy can be brought
+ * rather than following it from a distance. Where it was brought then stands
+ * for the element's own place: over whatever the finger happened to be on, so
+ * nothing counts as under it until the hand has taken it further than
+ * `threshold`, and a release before that is a hand that changed its mind. The
+ * pointer is taken on the element, away from what the finger first touched.
+ * Only a copy can be brought
  * like that: `move` carries the element itself, which would leave its place
  * just by being handed a press, and is not started.
  *
@@ -15316,6 +15326,10 @@ const resolveDropMeaning = ({
   canLeave,
   tossDistance = TOSS_DISTANCE_TO_COMMIT,
   tossSpeed = TOSS_SPEED_TO_COMMIT,
+  // How far it may have been taken and still have been taken nowhere: not at
+  // all for a carry that starts over its own place, the drag threshold for one
+  // brought to a hand (see handedOver).
+  stillWithin = 0,
 }) => {
   if (gestureInfo.cancelled) {
     // Nobody let go of anything: the gesture was taken away mid-air (the
@@ -15341,7 +15355,7 @@ const resolveDropMeaning = ({
   // It has to have gone somewhere to be put anywhere, or away from anything:
   // picked up and put straight back down is a hand that changed its mind.
   const { xDelta, yDelta } = gestureInfo.layout;
-  if (!xDelta && !yDelta) {
+  if (Math.hypot(xDelta, yDelta) <= stillWithin) {
     return "cancel";
   }
   if (canLeave && releasedOutside) {
@@ -15399,7 +15413,9 @@ const startDragToCarryCopy = (
     direction = canLand || canLeave
       ? { x: true, y: true }
       : { x: false, y: true },
-    threshold,
+    // Defaulted here rather than left to dragAfterIntent: a carry handed over
+    // reads it too (see stillWithin).
+    threshold = DRAG_INTENT_THRESHOLD,
     longPress,
     longPressDelay,
     longPressSlop,
@@ -15448,6 +15464,13 @@ const startDragToCarryCopy = (
         const reach = handedTo
           ? measureReach(draggedElement, handedTo)
           : undefined;
+        // …and has been taken nowhere until it is further from there than a
+        // press travels to mean drag.
+        const stillWithin = handedTo ? threshold : 0;
+        const hasNotLeftHand = (gestureInfo) =>
+          Boolean(handedTo) &&
+          Math.hypot(gestureInfo.layout.xDelta, gestureInfo.layout.yDelta) <=
+            stillWithin;
         const cloneWrapper =
           cloneWrapperCaught ||
           createDragClone(draggedElement, handedTo || pointerEvent, reach);
@@ -15540,6 +15563,16 @@ const startDragToCarryCopy = (
           if (!dropHintEl) {
             return;
           }
+          // Brought to the hand, the copy starts over whatever the finger is on,
+          // and a place found there is one it was never taken to — the release
+          // frame included, which is how a hold let go of without moving would
+          // land. Around where it was brought is its own place, as the element's
+          // box is for a carry that starts there: nothing is under it yet.
+          if (hasNotLeftHand(gestureInfo)) {
+            clearDropHint();
+            gestureInfo.dropTargetInfo = null;
+            return;
+          }
           const allItems = [];
           const items = [];
           for (const el of containerElement.querySelectorAll(itemSelector)) {
@@ -15686,6 +15719,7 @@ const startDragToCarryCopy = (
             canLeave,
             tossDistance,
             tossSpeed,
+            stillWithin,
           });
           // The hand has let go, and what that means is already known — the
           // answer to it has not run yet. Told, not asked: nothing here waits on
@@ -22186,33 +22220,45 @@ const measureWidestChildRow = (el) => {
   const borderLeft = parseFloat(containerStyle.borderLeftWidth);
   const borderRight = parseFloat(containerStyle.borderRightWidth);
 
-  // Group children by row using their top position
-  const rowsByTop = new Map();
+  // Rows are found by vertical overlap, not by top: in an "align-items: center"
+  // row, a child taller than its neighbours (a 1px border is enough) starts
+  // higher than them and would open a row of its own.
+  const rows = [];
   for (const child of children) {
     const rect = child.getBoundingClientRect();
     if (rect.width === 0 && rect.height === 0) {
       continue;
     }
-    const top = Math.round(rect.top);
-    const existing = rowsByTop.get(top);
-    if (existing === undefined) {
-      rowsByTop.set(top, { left: rect.left, right: rect.right });
-    } else {
-      if (rect.left < existing.left) {
-        existing.left = rect.left;
-      }
-      if (rect.right > existing.right) {
-        existing.right = rect.right;
-      }
+    const row = rows.find((candidate) => sharesLine(candidate, rect));
+    if (row === undefined) {
+      rows.push({
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+      });
+      continue;
+    }
+    if (rect.top < row.top) {
+      row.top = rect.top;
+    }
+    if (rect.bottom > row.bottom) {
+      row.bottom = rect.bottom;
+    }
+    if (rect.left < row.left) {
+      row.left = rect.left;
+    }
+    if (rect.right > row.right) {
+      row.right = rect.right;
     }
   }
 
-  if (rowsByTop.size <= 1) {
+  if (rows.length <= 1) {
     return null;
   }
 
   let widestRowWidth = 0;
-  for (const { left, right } of rowsByTop.values()) {
+  for (const { left, right } of rows) {
     const rowWidth = right - left;
     if (rowWidth > widestRowWidth) {
       widestRowWidth = rowWidth;

package/package.json

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