@jsenv/navi 0.29.372 → 0.29.374

package/dist/dev/jsenv_navi.js

@@ -30029,6 +30029,11 @@ const FURNITURE_NAME_PREFIX = "navi-transition-furniture-";
 const TOP_LAYER_WALL_SELECTOR =
   ".navi_dialog:modal, .navi_popover_backdrop:popover-open";
 const WALL_ATTRIBUTE = "data-navi-transition-wall";
+// Worn by a bar both states have, from the hold on: its two pictures are one
+// group, and the group is ordered over the pages (route_transition.jsx). Only
+// a bar — a popup's class is written by layout/popup_css.js, and a second rule
+// on the same property would replace it.
+const SHARED_ATTRIBUTE = "data-navi-transition-furniture-shared";
 // What the wall paints, resolved on the matched element in both cases (the
 // dialog for its ::backdrop, the popover's wall for itself): the same two
 // properties, copied onto the stand-in.
@@ -30037,7 +30042,11 @@ const WALL_PROPERTIES = ["--backdrop-background", "--backdrop-filter"];
 // The pictures the wall is painted into: the pages', and every bar's own.
 const FIXED_BAR_SELECTOR$1 = ".navi_fixed_bar";
 
-const TRANSITION_WALL_CSS = /* css */ `[data-navi-transition-wall] {
+const TRANSITION_FURNITURE_CSS = /* css */ `.navi_fixed_bar[data-navi-transition-furniture-shared] {
+  view-transition-class: navi_furniture_shared;
+}
+
+[data-navi-transition-wall] {
   z-index: var(--navi-z-index-top-layer);
   background: var(--backdrop-background);
   backdrop-filter: var(--backdrop-filter);
@@ -30070,7 +30079,7 @@ const TRANSITION_WALL_CSS = /* css */ `[data-navi-transition-wall] {
 // a page that never travels between routes must not carry this sheet, and a
 // build that sees no caller drops the css with the function.
 const installTransitionFurnitureCss = () => {
-  import.meta.css = [TRANSITION_WALL_CSS, "@jsenv/navi/src/nav/transition_furniture.js"];
+  import.meta.css = [TRANSITION_FURNITURE_CSS, "@jsenv/navi/src/nav/transition_furniture.js"];
 };
 
 const nameByElement = new WeakMap();
@@ -30132,6 +30141,8 @@ const holdTransitionFurniture = (owner, areaElement) => {
   for (const element of namedElements) {
     if (!element.isConnected) {
       namesLeaving.push(nameByElement.get(element));
+    } else if (element.matches(FIXED_BAR_SELECTOR$1)) {
+      element.setAttribute(SHARED_ATTRIBUTE, "");
     }
   }
   const namesArriving = nameFurnitureAround(areaElement);
@@ -30262,6 +30273,7 @@ const releaseTransitionFurniture = (owner) => {
   furnitureOwner = null;
   for (const element of namedElements) {
     element.style.removeProperty(NAME_PROPERTY$1);
+    element.removeAttribute(SHARED_ATTRIBUTE);
   }
   namedElements = new Set();
   if (travelStyleElement) {
@@ -30293,12 +30305,12 @@ const paintTransitionWalls = (areaElement) => {
       // positioned against an ancestor of it: the wall is placed from
       // wherever its containing block turns out to be, by the offset between
       // that box and the target's.
-      const targetRect = target.getBoundingClientRect();
+      const targetRect = pictureRect(target);
       const wallRect = wall.getBoundingClientRect();
       wall.style.left = `${targetRect.left - wallRect.left}px`;
       wall.style.top = `${targetRect.top - wallRect.top}px`;
-      wall.style.width = `${targetRect.width}px`;
-      wall.style.height = `${targetRect.height}px`;
+      wall.style.width = `${targetRect.right - targetRect.left}px`;
+      wall.style.height = `${targetRect.bottom - targetRect.top}px`;
       wallElements.push(wall);
     }
   }
@@ -30352,11 +30364,45 @@ const paintRestWalls = (sources, opacity) => {
 const measurePictureRects = (areaElement) => {
   const rects = new Map();
   for (const target of pictureTargets(areaElement)) {
-    rects.set(target, target.getBoundingClientRect());
+    rects.set(target, pictureRect(target));
   }
   return rects;
 };
 
+// What the picture holds, which is what the wall covers at rest: a bar's
+// picture carries what its content paints outside its box (a button standing
+// up out of a tab bar), so its rectangle is taken with its descendants'. The
+// pages' is their own box — the movement cuts them at it anyway.
+const pictureRect = (target) => {
+  const rect = target.getBoundingClientRect();
+  let { left, top, right, bottom } = rect;
+  if (!target.matches(FIXED_BAR_SELECTOR$1)) {
+    return { left, top, right, bottom };
+  }
+  for (const descendant of target.querySelectorAll("*")) {
+    if (descendant.hasAttribute(WALL_ATTRIBUTE)) {
+      continue;
+    }
+    const descendantRect = descendant.getBoundingClientRect();
+    if (descendantRect.width === 0 || descendantRect.height === 0) {
+      continue;
+    }
+    if (descendantRect.left < left) {
+      left = descendantRect.left;
+    }
+    if (descendantRect.top < top) {
+      top = descendantRect.top;
+    }
+    if (descendantRect.right > right) {
+      right = descendantRect.right;
+    }
+    if (descendantRect.bottom > bottom) {
+      bottom = descendantRect.bottom;
+    }
+  }
+  return { left, top, right, bottom };
+};
+
 // The holes for the movement, and the ones for its last frame (see the CSS).
 const cutRestWalls = (holes, holesArriving = null) => {
   for (const restWall of restWallElements) {
@@ -30371,15 +30417,83 @@ const cutRestWalls = (holes, holesArriving = null) => {
 };
 
 // One evenodd polygon: the window, then each hole entered from and left by
-// the window's origin, so the bridges between them have no area.
+// the window's origin, so the bridges between them have no area. The holes
+// must not overlap — evenodd fills where two of them do — and they do
+// overlap as measured: the pages run under the bars by design, so a bar's
+// rectangle lies inside the area's. Each is cut down to what the ones before
+// it left.
 const holesPolygon = (holes) => {
   let polygon = "0 0, 100% 0, 100% 100%, 0 100%, 0 0";
-  for (const { left, top, right, bottom } of holes) {
+  for (const { left, top, right, bottom } of disjointRects(holes)) {
     polygon += `, ${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px, ${left}px ${top}px, 0 0`;
   }
   return `polygon(evenodd, ${polygon})`;
 };
 
+const disjointRects = (rects) => {
+  const result = [];
+  for (const rect of rects) {
+    let pieces = [rect];
+    for (const placed of result) {
+      const remaining = [];
+      for (const piece of pieces) {
+        remaining.push(...subtractRect(piece, placed));
+      }
+      pieces = remaining;
+    }
+    result.push(...pieces);
+  }
+  return result;
+};
+
+// What is left of `rect` outside `hole`: up to four rectangles around it.
+const subtractRect = (rect, hole) => {
+  if (
+    hole.left >= rect.right ||
+    hole.right <= rect.left ||
+    hole.top >= rect.bottom ||
+    hole.bottom <= rect.top
+  ) {
+    return [rect];
+  }
+  const pieces = [];
+  const innerTop = hole.top > rect.top ? hole.top : rect.top;
+  const innerBottom = hole.bottom < rect.bottom ? hole.bottom : rect.bottom;
+  if (hole.top > rect.top) {
+    pieces.push({
+      left: rect.left,
+      top: rect.top,
+      right: rect.right,
+      bottom: hole.top,
+    });
+  }
+  if (hole.bottom < rect.bottom) {
+    pieces.push({
+      left: rect.left,
+      top: hole.bottom,
+      right: rect.right,
+      bottom: rect.bottom,
+    });
+  }
+  if (hole.left > rect.left) {
+    pieces.push({
+      left: rect.left,
+      top: innerTop,
+      right: hole.left,
+      bottom: innerBottom,
+    });
+  }
+  if (hole.right < rect.right) {
+    pieces.push({
+      left: hole.right,
+      top: innerTop,
+      right: rect.right,
+      bottom: innerBottom,
+    });
+  }
+  return pieces;
+};
+
 const removeRestWalls = () => {
   for (const restWall of restWallElements) {
     restWall.remove();
@@ -30964,10 +31078,14 @@ const css$12 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
       z-index: 1;
     }
 
-    &::view-transition-group(.navi_popup) {
+    &::view-transition-group(.navi_furniture_shared) {
       z-index: 2;
     }
 
+    &::view-transition-group(.navi_popup) {
+      z-index: 3;
+    }
+
     &::view-transition-group(*), &::view-transition-old(*), &::view-transition-new(*) {
       animation-duration: var(--navi-route-transition-duration, .3s);
     }