@jsenv/navi 0.30.33 → 0.30.35

package/dist/jsenv_navi.js

@@ -41368,7 +41368,7 @@ const css$16 = /* css */`.navi_route_travel {
     display: flex;
   }
 
-  & > [data-route-row-pane][inert] {
+  & > [data-route-row-pane][inert]:not([data-route-row-held]), &:has( > [data-route-row-held]) > [data-route-row-pane]:not([data-route-row-held]) {
     top: var(--navi-route-row-pin, 0);
     contain: paint;
     max-height: 100dvh;
@@ -41418,6 +41418,12 @@ const ROW_READING = {
 // How far a scroll position written can read back from what was written: rounded to
 // the device's pixels.
 const WRITE_ROUNDING = 1;
+// The most one frame of a travel plays: a frame of a 30fps screen, which is what a
+// browser saving power gives (an iPhone in Low Power Mode, Chrome's Energy Saver).
+// A frame later than that is a main thread busy elsewhere (the page arriving builds,
+// a list fills its budget), and the travel takes longer rather than jump by it. Not a
+// frame of a 60Hz screen: that would play every travel in slow motion at 30fps.
+const TRAVEL_FRAME_MAX_MS = 1000 / 30;
 
 /**
  * @type {import("preact").FunctionComponent<{
@@ -41530,9 +41536,23 @@ const RouteTravel = ({
     params
   }) => new URL(route.buildUrl(params), window.location.href).pathname;
 
+  // The pane laid out as the page on screen for the length of a movement, let go of
+  // when the row rests. Not what readers are told the page held is
+  // (route_travel_hold.js): that follows the hand, and goes at its lift.
+  const heldPaneRef = useRef(null);
+  const releasePaneAtRest = () => {
+    const heldPane = heldPaneRef.current;
+    if (heldPane) {
+      heldPaneRef.current = null;
+      heldPane.removeAttribute("data-route-row-held");
+    }
+  };
+
   // One movement, whoever set it off, from the first thing that moves to the row
-  // at rest. Null when nothing moves.
-  const beginMovement = fields => {
+  // at rest. Null when nothing moves. `paneAtRest` is the pane the row rests on as it
+  // begins: laid out as the page on screen until the row rests again, wherever the
+  // address goes meanwhile (see the CSS).
+  const beginMovement = (fields, paneAtRest) => {
     const row = rowRef.current;
     if (movementRef.current) {
       Object.assign(movementRef.current, fields);
@@ -41547,6 +41567,11 @@ const RouteTravel = ({
       ...fields
     };
     movementRef.current = movement;
+    // In a window the page is a picture, contained with what it holds.
+    if (!windowed && paneAtRest) {
+      heldPaneRef.current = paneAtRest;
+      paneAtRest.setAttribute("data-route-row-held", "");
+    }
     if (movement.scrollsDocument) {
       // Whatever the browser does with the offset meanwhile (clamping it to a page
       // shorter than the trip) is not the reader scrolling, and the address it
@@ -41693,18 +41718,22 @@ const RouteTravel = ({
   // hesitates, then peaks at 1.65 times this one's speed): two rows of tabs in one
   // app would not move alike. The scroll position is written at every frame, so the
   // row stays a scroller all the way: what follows it (a Nav's bar) reads it as it
-  // reads a hand, and a finger landing finds it where it is. The clock starts at the
-  // first frame, after what the press itself costs, as an animation's does.
+  // reads a hand, and a finger landing finds it where it is. That is played on the
+  // main thread: a transform on the panes would play on the compositor, but it would
+  // capture what the page on screen holds in position: fixed. Hence a clock of its
+  // own, which a busy main thread slows down rather than makes jump.
   const playTravel = (pane, movement) => {
     const row = rowRef.current;
     // Already moving, so there is no ease-in to play: it would stall the row for an
     // instant right where the eye is following it.
     const replaced = movement.playing;
     const inFlight = Boolean(replaced) || Boolean(movement.rowTaken);
+    // Before the row is read: let go of for an instant, it would be snapped to the
+    // nearest page by that read, and the travel would start from there.
+    row.setAttribute("data-route-row-travelling", "");
     if (replaced) {
-      // Its frames only: the row stays travelling across the hand-over. Let go of,
-      // it snaps to the nearest page at the read below, and the travel starts there.
-      replaced.cancelFrame();
+      replaced.cancel();
+      movement.playing = null;
     }
     const from = row.scrollLeft;
     const {
@@ -41716,56 +41745,70 @@ const RouteTravel = ({
     const travelMs = boxes < 1 ? durationMs * boxes : durationMs;
     if (!travelMs) {
       row.scrollLeft = pane.offsetLeft;
+      letRowGo(movement);
       // A write that changes nothing is followed by no scroll event to say the row
       // stopped. After the commit that asked, which goes on to say the row moves.
       Promise.resolve().then(landRow);
       return;
     }
     const curve = inFlight ? CSS_EASE_OUT : CSS_EASE;
-    let start = null;
     let frame = null;
+    // How much of the travel has played, frame by frame. A travel setting off plays
+    // nothing at its first frame, which may have begun while the press was still being
+    // handled: that is no travel. One taking over goes on from the last frame of the
+    // one it replaces, or the row would stand still for a frame where the eye follows it.
+    let played = 0;
     const playing = {
       // Where this travel put the row, for a scroll event to tell it from a hand.
       written: from,
-      cancelFrame: () => {
+      lastFrame: replaced ? replaced.lastFrame : null,
+      cancel: () => {
         cancelAnimationFrame(frame);
-      },
-      stop: () => {
-        playing.cancelFrame();
-        if (movement.playing === playing) {
-          movement.playing = null;
-          row.removeAttribute("data-route-row-travelling");
-        }
       }
     };
     const step = now => {
-      if (start === null) {
-        // When this frame runs, not when it began: under load it began while the
-        // press was still being handled, and that time is no travel.
-        start = performance.now();
+      if (playing.lastFrame !== null) {
+        const gap = now - playing.lastFrame;
+        if (gap > TRAVEL_FRAME_MAX_MS) {
+          played += TRAVEL_FRAME_MAX_MS;
+        } else if (gap > 0) {
+          played += gap;
+        }
       }
-      // The next frame may have begun while this first one was still being handled.
-      const elapsed = now > start ? (now - start) / travelMs : 0;
+      playing.lastFrame = now;
+      const elapsed = played / travelMs;
       // Read at every frame: the layout may move under the travel (a scrollbar
       // coming in narrows the row), and it goes where the page stands.
       const to = pane.offsetLeft;
       const arrived = elapsed >= 1;
       playing.written = arrived ? to : from + (to - from) * easedProgress(elapsed, curve);
       row.scrollLeft = playing.written;
+      // In the frame it is written: the scroll event saying so comes a frame later,
+      // and what follows the row would be drawn a frame behind it.
+      sayRowMoves();
       if (!arrived) {
         frame = requestAnimationFrame(step);
         return;
       }
-      playing.stop();
+      letRowGo(movement);
       // Said here rather than waited for: the last frames of a curve can move the row
       // by less than a pixel, and nothing then says it has stopped.
       landRow();
     };
     movement.playing = playing;
-    row.setAttribute("data-route-row-travelling", "");
     frame = requestAnimationFrame(step);
   };
 
+  // The row given back to the browser: no travel writes it any more, and it snaps
+  // again. A travel replacing another keeps it (playTravel).
+  const letRowGo = movement => {
+    if (movement.playing) {
+      movement.playing.cancel();
+      movement.playing = null;
+    }
+    rowRef.current.removeAttribute("data-route-row-travelling");
+  };
+
   // Every column back where the map says, and the row on the page of the address, in
   // one go: that page stands at the same place on screen either way.
   const putRowBack = movement => {
@@ -41822,14 +41865,12 @@ const RouteTravel = ({
       return;
     }
     movementRef.current = null;
-    if (movement.playing) {
-      movement.playing.stop();
-    }
+    letRowGo(movement);
     putRowBack(movement);
-    row.removeAttribute("data-route-row-travelling");
     row.removeAttribute("data-route-row-taken");
     publishRouteRowMove(null);
     releaseHeldPage();
+    releasePaneAtRest();
     if (liveRef.current) {
       liveRef.current.style.top = "";
     }
@@ -41942,9 +41983,11 @@ const RouteTravel = ({
       return;
     }
     const movementBefore = movementRef.current;
+    // The row still rests on the page answered before. Held in the commit that made
+    // its pane inert, so no frame paints it contained.
     const movement = beginMovement({
       travelling: true
-    });
+    }, panesOf(row)[pages.findIndex(each => samePage(each, answered))]);
     if (movementBefore?.byHand && !movementBefore.rowTaken) {
       sayRowMoves();
       takeRowFromHand(movement);
@@ -42003,7 +42046,7 @@ const RouteTravel = ({
       // Not where the travel put it: a hand has taken the row (a trackpad, a wheel),
       // and the travel lets it go, snapping included, as the browser's own scroll does.
       if (moving?.playing && Math.abs(row.scrollLeft - moving.playing.written) > WRITE_ROUNDING) {
-        moving.playing.stop();
+        letRowGo(moving);
       }
       const pane = panes[currentIndex];
       if (!moving && pane && restsOn(row, pane, ROW_READING)) {
@@ -42012,7 +42055,7 @@ const RouteTravel = ({
       }
       const movement = moving || beginMovement({
         byHand: true
-      });
+      }, pane);
       sayRowMoves();
       if (movement.travelling || !travelByDrag || !pane) {
         return;
@@ -42081,7 +42124,8 @@ const RouteTravel = ({
         askForPageOfRow(index, movement);
       }
       // After the address: a pull coming back to its page must not light the tab the
-      // address ran ahead to, even for a render.
+      // address ran ahead to, even for a render. Only what readers are told: the
+      // panes keep their layout until the row rests.
       releaseHeldPage();
     };
     const stopWatching = watchRowScroll(row, {
@@ -42132,12 +42176,14 @@ const RouteTravel = ({
       });
       const movement = movementRef.current;
       if (movement) {
-        movement.playing?.stop();
+        movement.playing?.cancel();
         movement.resumeScrollRecording?.();
       }
+      row.removeAttribute("data-route-row-travelling");
       movementRef.current = null;
       publishRouteRowMove(null);
       releaseHeldPage();
+      releasePaneAtRest();
     };
   }, [windowed]);