@jsenv/dom 0.17.74 → 0.17.76

package/dist/jsenv_dom.js

@@ -9350,8 +9350,11 @@ const createDragGestureController = (options = {}) => {
         const deltaX = Math.abs(dragX - grabX);
         const deltaY = Math.abs(dragY - grabY);
         if (direction.x && direction.y) {
-          // Both directions: check both axes
-          if (deltaX < threshold && deltaY < threshold) {
+          // The distance walked, not the larger of the two axes: a browser
+          // measures its own touch slop that way, and a gesture racing it for
+          // a touch (see DRAG_START_THRESHOLD_TOUCH in drag_to_travel.js) must
+          // not be 1.4 times later than it on a diagonal.
+          if (Math.hypot(deltaX, deltaY) < threshold) {
             return dragData;
           }
         } else if (direction.x) {
@@ -12360,6 +12363,19 @@ import.meta.css = /* css */ [`:root[data-drag-travel-gesture] {
 // How far a pointer goes before it is a travel rather than a click: below this
 // a press that wandered a pixel is still a press, and nothing budges.
 const DRAG_START_THRESHOLD = 10;
+// …and for a finger or a pen, which the browser pans with and has a deadline:
+// ~8px in, it commits the touch to its own pan if that way is open to it (the
+// axis touch-action leaves, or any axis over a scroller inside the box, which
+// resets touch-action for what it holds). Chrome does it with the first
+// touchmove it sends, held back until the touch leaves its slop; Safari with
+// its pan recognizer. Refusing the touchmoves after that moment changes
+// nothing — the pointer is cancelled and the swipe does nothing, or the travel
+// already under way goes back. So the axis has to be read before it, with a
+// margin: Safari does not wait for the answer to a report that jumps over its
+// decision. The price is a tap that shook more than this: it is a swipe that
+// went nowhere, and its click is lost (Chrome would click it up to 8px, Safari
+// never once a touchmove is refused).
+const DRAG_START_THRESHOLD_TOUCH = 6;
 // How much the cross axis must dominate the travel axis, over the first
 // reported pixels, to take the press away from the box (see the axis decision
 // in onDrag). Sized against the two hands it separates: a thumb's arc leans up
@@ -12383,10 +12399,12 @@ const DRAG_COMMIT_RATIO = 0.3;
 // a movement from a tap that shook.
 const DRAG_DRIFT_VELOCITY = 0.03;
 const DRAG_DRIFT_DISTANCE = 8;
-// Thrown back: a hand moving AWAY from what it was bringing in this fast asks
-// for it to be put back, whatever the distance already covered. Well above the
-// drift bar, so a hand merely wavering as it lets go does not read as a throw.
-const DRAG_THROW_BACK_VELOCITY = 0.3;
+// Thrown: a hand moving this fast as it lets go says where things go, whatever
+// the distance already covered. AWAY from what it was bringing in, it asks for
+// it to be put back (travelsAfter); the way a travel it caught in flight was
+// already going, it asks for the one after (see thrownOn). Well above the drift
+// bar, so a hand merely wavering as it lets go does not read as a throw.
+const DRAG_THROW_VELOCITY = 0.3;
 // Pulling towards nothing: what travels follows at a fraction of the finger, so
 // the gesture is answered (something moves) while saying there is nothing that
 // way. Let go and it comes back — a wall one can lean on, never walk through.
@@ -12656,7 +12674,7 @@ const travelsAfter = ({
   // two thirds and thrown back still arrives: the gesture was read as the
   // place it was let go of rather than as a movement.
   if (
-    Math.abs(velocity) > DRAG_THROW_BACK_VELOCITY &&
+    Math.abs(velocity) > DRAG_THROW_VELOCITY &&
     Math.sign(velocity) !== sign
   ) {
     return false;
@@ -12671,6 +12689,27 @@ const travelsAfter = ({
   return Math.abs(pulled) > size * commitRatio;
 };
 
+// A travel caught in flight and thrown on the way it was already going: a
+// second push, and it asks for the screen AFTER the one on its way — two
+// gestures, two screens, as a second push over a wheel's tail is. Read as the
+// verdict above, it only confirms what was already arriving: the throw stops
+// the travel at the press and lets it go on to the same place, and what the
+// hand feels is its second swipe swallowed. The hand has to have moved that way
+// by more than a tremor, so a travel merely touched still carries on to where
+// it was going (see the slack rule in travelsAfter).
+const thrownOn = ({ pulled, slack, velocity, towardsSomething, cancelled }) => {
+  if (!slack || cancelled || !towardsSomething) {
+    return false;
+  }
+  const way = Math.sign(slack);
+  return (
+    Math.sign(pulled) === way &&
+    (pulled - slack) * way >= DRAG_START_THRESHOLD &&
+    Math.sign(velocity) === way &&
+    Math.abs(velocity) > DRAG_THROW_VELOCITY
+  );
+};
+
 /**
  * Read a press, and tell the caller what the hand is doing with it.
  *
@@ -12715,7 +12754,7 @@ const travelsAfter = ({
  * @param {(detail: {axis: string, pulled: number, size: number, progress: number, event: PointerEvent}) => void} options.onPull
  *   - the finger has moved. `pulled` is in px from the resting place, `progress`
  *   the same as a fraction of the box, signed the same way.
- * @param {(detail: {axis: string, sign: number, event: PointerEvent}) => false|{size: number, travelBack?: boolean, travelOn?: boolean}} [options.onEdge]
+ * @param {(detail: {axis: string, sign: number, thrown: boolean, event: PointerEvent}) => false|{size: number, travelBack?: boolean, travelOn?: boolean}} [options.onEdge]
  *   - the hand has reached an end of the box it holds and keeps going: `sign`
  *   says which one — the far edge, a box walked whole, or its start, a box
  *   walked back to where it began. Answer with the geometry of the box that
@@ -12723,9 +12762,15 @@ const travelsAfter = ({
  *   become its first ones, so nothing is spent twice and the hand feels one
  *   continuous movement. Answer `false` (or leave it out) for a wall — the
  *   gesture stays on the box it has and leans on it.
+ *   `thrown`: the hand did not walk there, it let go throwing a travel it had
+ *   caught on the way it was already going (see thrownOn). The box is asked for
+ *   at the release, with the picture still short of the end; answer `false` if
+ *   it cannot be handed over from there, and the travel simply arrives.
  * @param {(detail: {axis: string, pulled: number, size: number, sign: number, travels: boolean, cancelled: boolean, event: PointerEvent}) => void} options.onEnd
  *   - the finger is off. `travels` is the gesture's answer: carry on to what was
- *   being pulled in, or put things back.
+ *   being pulled in, or put things back. `sign` is the side of what was being
+ *   pulled in — the side `pulled` is on, except after a throw handed over at
+ *   the release, where the picture still stands short of the new box.
  * @param {() => void} [options.onGiveUp] - the press is over without ever
  *   becoming a travel: it stayed still, leaned the wrong way, or `onStart`
  *   refused it. Nothing was painted and nothing has to be put back — this is
@@ -12777,6 +12822,10 @@ const startDragToTravel = (
   if (immediate && !axesLeft.includes(immediate)) {
     return null;
   }
+  const startThreshold =
+    pointerDownEvent.pointerType === "mouse"
+      ? DRAG_START_THRESHOLD
+      : DRAG_START_THRESHOLD_TOUCH;
 
   // The travel in hand: null until the finger has picked an axis and the caller
   // has accepted it.
@@ -12832,10 +12881,11 @@ const startDragToTravel = (
   // from where the finger IS: nothing is spent twice, and the gesture is one
   // movement rather than a wall the hand had to let go of to cross.
   // Returns where the new box stands, or null when there is nothing that way.
-  const relayTo = (sign, distance, gestureInfo) => {
+  const relayTo = (sign, distance, gestureInfo, { thrown = false } = {}) => {
     const next = onEdge({
       axis: travel.axis,
       sign,
+      thrown,
       event: gestureInfo.dragEvent,
     });
     if (!next || !next.size) {
@@ -12961,10 +13011,10 @@ const startDragToTravel = (
           // and is owed to it.
           origin: immediate
             ? 0
-            : covered > DRAG_START_THRESHOLD
-              ? DRAG_START_THRESHOLD
-              : covered < -DRAG_START_THRESHOLD
-                ? -DRAG_START_THRESHOLD
+            : covered > startThreshold
+              ? startThreshold
+              : covered < -startThreshold
+                ? -startThreshold
                 : covered,
           pulled: started.slack || 0,
         };
@@ -13042,6 +13092,37 @@ const startDragToTravel = (
         axis === "x" ? gestureInfo.velocityX : gestureInfo.velocityY;
       const releaseEvent = gestureInfo.releaseEvent || gestureInfo.dragEvent;
       const { cancelled } = gestureInfo;
+      if (thrownOn({ pulled, slack, velocity, towardsSomething, cancelled })) {
+        const sign = pulled > 0 ? 1 : -1;
+        // Where the picture stands, said from the box past the one in hand:
+        // short of it by what is left of the travel that was caught.
+        const relayed = relayTo(sign, pulled - sign * size, gestureInfo, {
+          thrown: true,
+        });
+        if (relayed !== null) {
+          // Nothing moves: the same place, measured from the new box — so the
+          // caller's picture of the gesture agrees with it before it is let go.
+          onPull({
+            axis,
+            pulled: relayed,
+            size: travel.size,
+            progress: relayed / travel.size,
+            event: releaseEvent,
+          });
+          onEnd({
+            axis,
+            pulled: relayed,
+            size: travel.size,
+            // The way it was thrown, not the side the picture stands on: it
+            // still sits short of the box it was bringing in.
+            sign,
+            travels: true,
+            cancelled: false,
+            event: releaseEvent,
+          });
+          return;
+        }
+      }
       onEnd({
         axis,
         pulled,
@@ -13094,7 +13175,7 @@ const startDragToTravel = (
   } else {
     dragAfterIntent(pointerDownEvent, grab, {
       longPress: false,
-      threshold: DRAG_START_THRESHOLD,
+      threshold: startThreshold,
       selection: "manual",
     });
   }
@@ -13819,9 +13900,8 @@ const installPanZoom = (
   };
 
   // A touch drag left unrefused makes Chrome Android drop the click of the NEXT
-  // tap, whatever `touch-action` says (see navi's
-  // docs/mobile_tap_suppression_after_drag.md), so the surface refuses every
-  // touchmove while it moves. Whether one can be refused at all is settled when
+  // tap, whatever `touch-action` says (see navi's docs/mobile_touch.md), so the
+  // surface refuses every touchmove while it moves. Whether one can be refused at all is settled when
   // the touch begins, before the surface moves: the listener goes down with the
   // surface and refuses nothing until then — a tap, a hold, or under
   // `afterHold` the page scrolling, which is the whole point of the wait.

package/package.json

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