@jsenv/dom 0.17.40 → 0.17.42

package/dist/jsenv_dom.js

@@ -9597,7 +9597,17 @@ import.meta.css = [css$4, "@jsenv/dom/src/interaction/drag/drag_after_intent.js"
  * on its way home is pressed through the pictures of a view transition, and the
  * touch lands on the document root (see letCopyBeCaught in drag_to.js). Same
  * rule, other element — and it has to be the same function, or the listener put
- * down is not the one taken back off.
+ * down is not the one taken back off. A box that TRAVELS says it too, from its
+ * own render: given as a JSX prop (`onTouchMove={keepTouchRefusable}`), next to
+ * the attribute naming its axes.
+ *
+ * Registered `{ passive: false }` where it is added by hand — but a framework's
+ * event prop cannot say that (Preact's third addEventListener argument is only
+ * useCapture), and it does not need to: passive-by-default only covers
+ * touchmove listeners on window, document and document.body, so on any other
+ * element a plain addEventListener is non-passive already. The document root is
+ * exactly the one place this goes down where the explicit option is load-
+ * bearing.
  */
 const keepTouchRefusable = () => {
   // Being registered IS the whole of it — see above.
@@ -13470,16 +13480,33 @@ import.meta.css = [/* css */`
 // 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;
+// 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
+// to about twice as far off-axis as along it at the start of a sideways swipe,
+// while a scroll is four or five times purer than that on its own axis.
+const AXIS_CROSS_DOMINANCE = 2;
 // How much of a box has to be pulled for letting go to carry on rather than put
 // things back, when the caller does not say. Under half, because a gesture that
 // has clearly begun is an intention: asking for the box to be dragged all the
 // way across turns a travel into work.
 const DRAG_COMMIT_RATIO = 0.3;
-// A flick travels whatever the distance: the hand said "away" quickly, which is
-// the whole gesture — px/ms of pointer, and a few pixels to tell it from a tap
-// that shook.
-const DRAG_FLICK_VELOCITY = 0.4;
-const DRAG_FLICK_DISTANCE = 8;
+// A hand still moving towards what it is pulling in when it lets go has said
+// where this goes, however slowly: an intention still being acted on at the
+// lift travels whatever the distance. The bar sits just above stillness —
+// capacitive jitter and a hand settling before it lifts measure under it — so
+// only a release at rest is left to the position alone (the commit ratio).
+// It has to sit that low for another reason too: velocity is averaged over
+// the trailing window (see createVelocityMeter) and the release repeats the
+// last position a moment later, both pulling the measure down from the speed
+// the fingertip actually has. A few pixels of pull are asked besides, to tell
+// 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;
 // 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.
@@ -13693,21 +13720,23 @@ const travelsAfter = ({
     return true;
   }
   const sign = pulled > 0 ? 1 : -1;
-  const goingFast = Math.abs(velocity) > DRAG_FLICK_VELOCITY;
   // A hand that is still moving says where it is going, and it says it about
-  // BOTH answers. Going away from what it was bringing in is "put it back",
-  // whatever the distance already covered — which is the whole of what one asks
-  // for when catching something in flight and throwing it back the other way.
-  // Without this the picture alone decides, and a screen caught at 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 (goingFast && Math.sign(velocity) !== sign) {
+  // BOTH answers. Going away from what it was bringing in fast is "put it
+  // back", whatever the distance already covered — which is the whole of what
+  // one asks for when catching something in flight and throwing it back the
+  // other way. Without this the picture alone decides, and a screen caught at
+  // 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.sign(velocity) !== sign) {
     return false;
   }
-  // …and going towards it travels whatever the distance: the hand said "away"
-  // quickly, which is the whole gesture.
-  const flicked = goingFast && Math.abs(pulled) > DRAG_FLICK_DISTANCE;
-  return flicked || Math.abs(pulled) > size * commitRatio;
+  // …and going towards it travels, however slowly: see DRAG_DRIFT_VELOCITY.
+  const drifting = Math.abs(velocity) > DRAG_DRIFT_VELOCITY && Math.sign(velocity) === sign;
+  if (drifting && Math.abs(pulled) > DRAG_DRIFT_DISTANCE) {
+    return true;
+  }
+  // At rest: the position is the only witness left.
+  return Math.abs(pulled) > size * commitRatio;
 };
 
 /**
@@ -13907,12 +13936,30 @@ const startDragToTravel = (pointerDownEvent, {
           // ONE axis, decided by the first movement reported and never
           // revisited: a diagonal would ask for two travels at once and only
           // one thing can arrive.
+          //
+          // The axis this box travels is favoured in that reading: a thumb
+          // swiping a box sideways moves along an ARC, and its first reported
+          // pixels — which are all this decision ever sees — lean off-axis
+          // far more than the gesture does. Read even, that lean hands the
+          // whole gesture to an axis nobody meant (the press is given up, and
+          // the hand's remaining hundred pixels are read by no one). So the
+          // cross axis has to win CLEARLY to take the press — and a gesture
+          // that is really the page's own (a scroll is near-pure on its axis
+          // from the first pixel) still is, at once, whole.
           const reachX = Math.abs(coveredOn("x", gestureInfo));
           const reachY = Math.abs(coveredOn("y", gestureInfo));
           if (!reachX && !reachY) {
             return;
           }
-          axis = reachX >= reachY ? "x" : "y";
+          const travelsX = axesLeft.includes("x");
+          const travelsY = axesLeft.includes("y");
+          if (travelsX && !travelsY) {
+            axis = reachY > reachX * AXIS_CROSS_DOMINANCE ? "y" : "x";
+          } else if (travelsY && !travelsX) {
+            axis = reachX > reachY * AXIS_CROSS_DOMINANCE ? "x" : "y";
+          } else {
+            axis = reachX >= reachY ? "x" : "y";
+          }
           if (!axesLeft.includes(axis)) {
             giveUp();
             return;
@@ -13947,13 +13994,16 @@ const startDragToTravel = (pointerDownEvent, {
           travelBack: Boolean(started.travelBack),
           travelOn: Boolean(started.travelOn),
           slack: started.slack || 0,
-          // The pixels spent deciding the axis are not pulled back — what
-          // travels sets off from where the finger is at that moment rather
-          // than jumping the threshold it just crossed. Except when the intent
-          // was established before the press (see immediate): there was no
-          // threshold to cross, so every pixel since the grab is the hand's and
-          // is owed to it.
-          origin: immediate ? 0 : covered,
+          // Only what the intent threshold cost is withheld, so what travels
+          // does not jump those few pixels at the start — and nothing more:
+          // a fast gesture arrives coalesced, and the first report can carry
+          // most of a flick. Charged whole, the flick would set off with
+          // nothing left of itself to have pulled, move nothing on screen and
+          // be refused at the release for it. Except when the intent was
+          // established before the press (see immediate): there was no
+          // threshold to cross, so every pixel since the grab is the hand's
+          // and is owed to it.
+          origin: immediate ? 0 : covered > DRAG_START_THRESHOLD ? DRAG_START_THRESHOLD : covered < -DRAG_START_THRESHOLD ? -DRAG_START_THRESHOLD : covered,
           pulled: started.slack || 0
         };
         document.documentElement.setAttribute(WALKING_ATTRIBUTE, axis);
@@ -14113,6 +14163,31 @@ const WHEEL_NEXT_STEP_DELTA = 600;
 // slides. Two events in a row are asked for rather than one, because a hand
 // wavers and momentum does not.
 const WHEEL_FADE_RUN = 2;
+// …and the same fact read the other way: momentum only ever weakens, so a
+// stream already recognized as momentum that GROWS twice in a row is a hand
+// pushing again — a second swipe thrown while the tail of the first is still
+// streaming. The browser sees one unbroken burst (the tail never went silent),
+// but to the hand these are two gestures, and the second is answered like a
+// first event: with a screen, now, not with credit towards one.
+const WHEEL_REGROW_RUN = 2;
+// A hand scrolling the OTHER axis over that same tail is a new gesture too,
+// and one that is not ours — but it has to be told apart from the tail's own
+// wobble: at the end of a fade the deltas are a pixel or two on each axis, and
+// read alone such an event says "the other axis" as easily as it says nothing.
+// Three things separate a scroll from those crumbs, and all three are asked
+// for before an event is handed back:
+// - the other axis clearly dominates the event (the same bar a drag uses to
+//   give up its press) — a diagonal crumb says nothing;
+// - the event is the size of a hand (WHEEL_CROSS_CONFIRM_DELTA — crumbs never
+//   reach it), or the run is GROWING event over event, which is a scroll
+//   ramping up from rest and never what decay looks like;
+// - and it is a RUN (one more event for the growing read, which starts from
+//   sizes a crumb also has): wobble is isolated, a scroll insists.
+// What the run costs a real scroll is its first event or two — a few pixels,
+// one notch of a stepped wheel; what it saves a slide is its own scroller
+// creeping under a travel, a header detaching from the edge of the box.
+const WHEEL_CROSS_RUN = 2;
+const WHEEL_CROSS_CONFIRM_DELTA = 10;
 
 /**
  * A travel asked for with a wheel, and it asks for a WHOLE ONE.
@@ -14257,11 +14332,48 @@ const watchWheelTravel = (element, {
         pushed: 0,
         lastMagnitude: 0,
         fadeRun: 0,
+        growRun: 0,
+        crossRun: 0,
+        crossMagnitude: 0,
+        crossHandedBack: false,
+        faded: false,
         stepped: false
       };
       document.documentElement.setAttribute(GESTURE_ATTRIBUTE, "");
       document.documentElement.setAttribute(WALKING_ATTRIBUTE, axis);
     }
+    // The other axis, on a stream that is momentum only: a hand is never
+    // perfectly straight, so cross-axis events WITHIN a push are the push's own
+    // wobble and are swallowed below — but once our axis has faded to a tail,
+    // a hand pushing the other way is a NEW gesture, and on an axis this box
+    // does not travel it is not ours at all: it belongs to whatever scrolls
+    // under the pointer, and it is handed back untouched. Not swallowed, and
+    // not renewing the claim either — an ignored scroll must not keep alive
+    // the very gesture that ignores it, while the tail of ours goes on being
+    // absorbed by the events still on our axis. Only a scroll is handed back,
+    // though, never the tail's own wobble — see WHEEL_CROSS_RUN.
+    if (axis !== gesture.axis && gesture.faded && !axes.includes(axis)) {
+      if (gesture.crossHandedBack) {
+        // Already recognized as a scroll: the whole rest of it is its own.
+        return;
+      }
+      const ownDelta = Math.abs(gesture.axis === "x" ? wheelEvent.deltaX : wheelEvent.deltaY);
+      const crossDelta = Math.abs(delta);
+      const dominant = crossDelta > ownDelta * AXIS_CROSS_DOMINANCE;
+      const handSized = crossDelta >= WHEEL_CROSS_CONFIRM_DELTA;
+      const growing = crossDelta > gesture.crossMagnitude;
+      if (dominant && (handSized || growing)) {
+        gesture.crossRun += 1;
+        gesture.crossMagnitude = crossDelta;
+        if (gesture.crossRun >= (handSized ? WHEEL_CROSS_RUN : WHEEL_CROSS_RUN + 1)) {
+          gesture.crossHandedBack = true;
+          return;
+        }
+      } else {
+        gesture.crossRun = 0;
+        gesture.crossMagnitude = 0;
+      }
+    }
     // Ours from here, on both axes: what the browser would do with the leftover
     // — scroll the page behind the box, bounce it, go back in history — is one
     // gesture answered twice.
@@ -14276,12 +14388,18 @@ const watchWheelTravel = (element, {
       // axis was decided when the gesture set off.
       return;
     }
+    // Back on our axis: whatever cross-axis run was building was wobble.
+    gesture.crossRun = 0;
+    gesture.crossMagnitude = 0;
+    gesture.crossHandedBack = false;
     if (sign !== gesture.sign) {
       // Turned around: what was adding up was going the other way.
       gesture.sign = sign;
       gesture.pushed = 0;
       gesture.lastMagnitude = 0;
       gesture.fadeRun = 0;
+      gesture.growRun = 0;
+      gesture.faded = false;
       gesture.stepped = false;
     }
     if (!gesture.stepped) {
@@ -14300,11 +14418,32 @@ const watchWheelTravel = (element, {
     const magnitude = Math.abs(delta);
     if (magnitude < gesture.lastMagnitude) {
       gesture.fadeRun += 1;
+      gesture.growRun = 0;
+      if (gesture.fadeRun >= WHEEL_FADE_RUN) {
+        // Momentum, recognized — and remembered past the next growth: fadeRun
+        // is transient (one louder event resets it), while what the regrow
+        // rule below needs to know is that a tail WAS established at all.
+        gesture.faded = true;
+      }
     } else if (magnitude > gesture.lastMagnitude) {
       // Back up again — a hand asking for more. Momentum never does this.
       gesture.fadeRun = 0;
+      gesture.growRun += 1;
     }
     gesture.lastMagnitude = magnitude;
+    // A second push, thrown while the tail of the first still streams (see
+    // WHEEL_REGROW_RUN): a new gesture to the hand, whatever the stream says.
+    if (gesture.faded && gesture.growRun >= WHEEL_REGROW_RUN) {
+      gesture.faded = false;
+      gesture.growRun = 0;
+      gesture.pushed = 0;
+      onStep({
+        axis: gesture.axis,
+        sign: gesture.sign,
+        event: wheelEvent
+      });
+      return;
+    }
     if (gesture.fadeRun >= WHEEL_FADE_RUN) {
       return;
     }
@@ -20239,4 +20378,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
 
-export { EASING, ELEMENT_SIZE_CHANGE, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, canScroll, captureScrollState, chainEvent, claimWheelGesture, clickIsSuppressed, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterIntent, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollIntoViewScopedOffsets, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVirtualKeyboardOverlayHeight, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isAncestorOpen, isDisplayedDespiteClosedAncestor, isPressDisputedByDrag, isPrimaryButtonEvent, isSameColor, isScrollable, isTouchDrivenEvent, markDragSource, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, releaseWheelGesture, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewThroughScrollables, scrollIntoViewWithStickyAwareness, scrollRoomTowards, setAttribute, setAttributes, setStyles, setVirtualKeyboardOverlaysContent, snapToPixel, startDragTo, startDragToResizeGesture, startDragToTravel, stickyAsRelativeCoords, stringifyStyle, subscribeVirtualKeyboardGeometryChange, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, suppressClickAfterGesture, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect, waitForPressHeld, watchWheelTravel, wheelGestureIsTakenFrom };
+export { EASING, ELEMENT_SIZE_CHANGE, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, applyNewPosition, canScroll, captureScrollState, chainEvent, claimWheelGesture, clickIsSuppressed, closestOpenableAncestor, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterIntent, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, findSelfOrAncestorFixedPosition, formatEventSideEffect, getAncestorOpenType, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPositioningScrollOffset, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollIntoViewScopedOffsets, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVirtualKeyboardOverlayHeight, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isAncestorOpen, isDisplayedDespiteClosedAncestor, isPressDisputedByDrag, isPrimaryButtonEvent, isSameColor, isScrollable, isTouchDrivenEvent, keepTouchRefusable, markDragSource, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, observeAncestorOpenState, onAncestorReopen, parsePositionArea, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, releaseWheelGesture, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewThroughScrollables, scrollIntoViewWithStickyAwareness, scrollRoomTowards, setAttribute, setAttributes, setStyles, setVirtualKeyboardOverlaysContent, snapToPixel, startDragTo, startDragToResizeGesture, startDragToTravel, stickyAsRelativeCoords, stringifyStyle, subscribeVirtualKeyboardGeometryChange, subscribeVisualViewportResizeSettled, subscribeWindowResizeSettled, suppressClickAfterGesture, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect, waitForPressHeld, watchWheelTravel, wheelGestureIsTakenFrom };

package/package.json

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