@jsenv/navi 0.30.38 → 0.30.40

package/dist/dev/jsenv_navi.js

@@ -42637,6 +42637,11 @@ const css$16 = /* css */`@property --navi-route-row-pin {
   inherits: false
 }
 
+@property --navi-route-row-stand {
+  syntax: "*";
+  inherits: false
+}
+
 .navi_route_travel {
   flex-direction: column;
   display: flex;
@@ -43178,16 +43183,14 @@ const RouteTravel = ({
     movement.rowTaken = true;
     // A travel no hand set off holds nothing: it goes where it goes.
     releaseHeldPage();
-    row.style.setProperty("--navi-route-row-stand", `${-position}px`);
-    row.setAttribute("data-route-row-taken", "");
+    holdRowAt(row, position);
     afterFrames(2, () => {
       if (movementRef.current !== movement) {
         return;
       }
       // A scroller again, standing where no page does: not snapped meanwhile.
       row.setAttribute("data-route-row-travelling", "");
-      row.removeAttribute("data-route-row-taken");
-      row.style.removeProperty("--navi-route-row-stand");
+      releaseTakenRow(row);
       afterFrames(1, () => {
         if (movementRef.current === movement) {
           travelRowTo(latestRef.current.currentIndex, movement);
@@ -43207,7 +43210,7 @@ const RouteTravel = ({
     movementRef.current = null;
     letRowGo(movement);
     putRowBack(movement);
-    row.removeAttribute("data-route-row-taken");
+    releaseTakenRow(row);
     publishRouteRowMove(null);
     releaseHeldPage();
     releasePaneAtRest(row);
@@ -43685,6 +43688,22 @@ const copyScrollPositions = (from, to) => {
 // A tab pressed over a row a hand has left moving holds it still (takeRowFromHand):
 // what the row says meanwhile is not a hand moving it.
 const isRowTaken = row => row.hasAttribute("data-route-row-taken");
+
+// What the CSS offsets while the row is taken. A picture left meanwhile is a clone
+// of the live page, and takes its offset along.
+const STANDING_IN_ROW = ":scope > [data-route-row-pane], :scope > [data-route-row-live], :scope > [data-route-row-pictures] > *";
+const holdRowAt = (row, position) => {
+  for (const element of row.querySelectorAll(STANDING_IN_ROW)) {
+    element.style.setProperty("--navi-route-row-stand", `${-position}px`);
+  }
+  row.setAttribute("data-route-row-taken", "");
+};
+const releaseTakenRow = row => {
+  row.removeAttribute("data-route-row-taken");
+  for (const element of row.querySelectorAll(STANDING_IN_ROW)) {
+    element.style.removeProperty("--navi-route-row-stand");
+  }
+};
 const afterFrames = (count, callback) => {
   if (count === 0) {
     callback();
@@ -85474,6 +85493,17 @@ const createListItems = () => {
       }
       return null;
     },
+    // Whether a run stands for the item at that index without holding it: the
+    // page it belongs to has not answered yet. An id missing from what the runs
+    // hold says the item is gone only once the page where it stood is in.
+    itemOnItsWayAt: (index) => {
+      for (const locator of locatorByOwner.values()) {
+        if (locator.awaits(index)) {
+          return true;
+        }
+      }
+      return false;
+    },
     // The room the item at that index takes: the room it took when it was
     // last drawn, else the room its run is given for it (see List.Items'
     // itemSize), else undefined.
@@ -88500,10 +88530,14 @@ const useListScrollSync = ({
         // Not there yet, but where it stood is drawn already: the item
         // standing in for it at that index (see holdWindow). The list is placed
         // on that one, measured like any other, and the named item takes over
-        // where it lands.
-        if (listItems.pagesSignal.peek() === 0) {
-          if (typeof scrolledWanted.index === "number") {
-            placeItem(findItemElementAt(getListEl(), scrolledWanted.index), scrolledWanted.offset || 0);
+        // where it lands. Held for as long as the page at that index has not
+        // answered — the first one, or the one a press sends the list to: only
+        // an answer without the item says it is gone.
+        const standInIndex = scrolledWanted.index;
+        const hasStandIn = typeof standInIndex === "number";
+        if (listItems.pagesSignal.peek() === 0 || hasStandIn && listItems.itemOnItsWayAt(standInIndex)) {
+          if (hasStandIn) {
+            placeItem(findItemElementAt(getListEl(), standInIndex), scrolledWanted.offset || 0, scrolledWanted.align);
           }
           return;
         }
@@ -88567,11 +88601,13 @@ const useListScrollSync = ({
     const itemRect = itemEl.getBoundingClientRect();
     const viewportSize = (horizontal ? viewportRect.width : viewportRect.height) / scale;
     const itemSize = (horizontal ? itemRect.width : itemRect.height) / scale;
-    const scrollInset = getItemScrollInset(scrollerEl, itemEl, horizontal);
-    // Centred in what the room at the start leaves of the view (a fixed bar,
-    // a sticky header), not in the whole of it.
-    const alignedOffset = align === "center" ? scrollInset + (viewportSize - scrollInset - itemSize) / 2 : align === "end" ? viewportSize - itemSize : scrollInset;
-    const offsetWanted = resolveOpenOffset(alignedOffset + offset, viewportSize, itemSize);
+    const offsetWanted = resolveHeldOffset({
+      align,
+      offset,
+      scrollInset: getItemScrollInset(scrollerEl, itemEl, horizontal),
+      viewportSize,
+      itemSize
+    });
     const offsetNow = (horizontal ? itemRect.left - viewportRect.left : itemRect.top - viewportRect.top) / scale;
     const scrollNow = horizontal ? scrollerEl.scrollLeft : scrollerEl.scrollTop;
     const delta = offsetNow - offsetWanted;
@@ -89310,6 +89346,7 @@ const useListScrollSync = ({
     }
     let index = null;
     let offset = 0;
+    let align;
     if (typeof wanted === "number") {
       index = wanted;
     } else if (wanted && wanted.id !== undefined) {
@@ -89318,6 +89355,7 @@ const useListScrollSync = ({
         index = wanted.index;
       }
       offset = wanted.offset || 0;
+      align = wanted.align;
     }
     if (index === null || index < 0 || index >= total) {
       return null;
@@ -89328,7 +89366,15 @@ const useListScrollSync = ({
       const rect = itemEl.getBoundingClientRect();
       itemSize = horizontal ? rect.width : rect.height;
     }
-    const above = resolveOpenOffset(getItemScrollInset(scrollerEl, itemEl, horizontal) + offset, screenSize, itemSize);
+    // Not drawn yet, the item weighs nothing and has no inset: centred, it
+    // stands half the screen down, which is where it will be put.
+    const above = resolveHeldOffset({
+      align,
+      offset,
+      scrollInset: getItemScrollInset(scrollerEl, itemEl, horizontal),
+      viewportSize: screenSize,
+      itemSize
+    });
     return {
       index,
       above
@@ -90000,6 +90046,21 @@ const resolveOpenOffset = (offset, viewportSize, itemSize) => {
   }
   return offset;
 };
+// How far from the start of the view an item held at `{ offset, align }`
+// stands: read the same way where the list is placed (placeItem) and where the
+// window is sized around it (readHold), or the window frames a screen the
+// item is not on. Centred in what the room at the start leaves of the view (a
+// fixed bar, a sticky header), not in the whole of it.
+const resolveHeldOffset = ({
+  align,
+  offset,
+  scrollInset,
+  viewportSize,
+  itemSize
+}) => {
+  const alignedOffset = align === "center" ? scrollInset + (viewportSize - scrollInset - itemSize) / 2 : align === "end" ? viewportSize - itemSize : scrollInset;
+  return resolveOpenOffset(alignedOffset + offset, viewportSize, itemSize);
+};
 
 // The room an item must be given at the top (or left) of the view: the
 // scroller's own scroll-padding — where a fixed bar publishes the space it
@@ -92171,6 +92232,7 @@ const useRunItems = (store, {
       });
       return found;
     },
+    awaits: itemIndex => itemIndex >= runStart && itemIndex < runEnd && getItemAt(itemIndex) === undefined,
     roomAt: roomOf,
     givenRoomAt: givenRoomOf
   });