@prose-reader/core 1.195.0 → 1.197.0

package/dist/index.js

@@ -3308,8 +3308,8 @@ const getTotalProgressFromPercentages = (estimateBeforeThisItem, currentItemWeig
 };
 const getScrollPercentageWithinItem = (reader, currentPosition, currentItem) => {
   const context = reader.context;
-  const { height, width } = currentItem.layoutPosition;
-  const { top, left } = reader.spine.spineLayout.getAbsolutePositionOf(currentItem);
+  const { height, width } = currentItem.layout.layoutInfo;
+  const { top, left } = reader.spine.spineLayout.getSpineItemRelativeLayoutInfo(currentItem);
   if (reader.settings.values.computedPageTurnDirection === `vertical`) {
     return Math.max(
       0,
@@ -3371,29 +3371,22 @@ const getPercentageEstimate = (reader, currentSpineIndex, pageIndex, currentPosi
     })
   );
 };
-const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemsManager.items.map((item) => {
-  const { height, width } = item.layoutPosition;
-  return reader.spine.spineItemLocator.getSpineItemNumberOfPages({
-    isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-    itemHeight: height,
-    itemWidth: width
-  });
-}, 0);
 const trackTotalPages = (reader) => {
   const totalPages$ = reader.layout$.pipe(
     debounceTime$1(10, animationFrameScheduler),
     withLatestFrom(reader.pagination.state$),
     map(() => {
-      const numberOfPagesPerItems = getNumberOfPagesForAllSpineItems(reader);
       return {
-        numberOfPagesPerItems,
+        numberOfPagesPerItems: reader.spineItemsManager.items.reduce(
+          (acc, item) => {
+            return [...acc, item.numberOfPages];
+          },
+          []
+        ),
         /**
          * This may be not accurate for reflowable due to dynamic load / unload.
          */
-        numberOfTotalPages: numberOfPagesPerItems.reduce(
-          (acc, numberOfPagesForItem) => acc + numberOfPagesForItem,
-          0
-        )
+        numberOfTotalPages: reader.spine.spineLayout.numberOfPages
       };
     }),
     distinctUntilChanged$1(isShallowEqual),
@@ -5572,7 +5565,7 @@ const createSpineItemLocator = ({
       const range = node ? getRangeFromNode(node, offset) : void 0;
       offsetOfNodeInSpineItem = (range == null ? void 0 : range.getBoundingClientRect().x) || offsetOfNodeInSpineItem;
     }
-    const spineItemWidth = ((_a = spineItem.layoutPosition) == null ? void 0 : _a.width) || 0;
+    const spineItemWidth = ((_a = spineItem.layout.layoutInfo) == null ? void 0 : _a.width) || 0;
     const pageWidth = context.getPageSize().width;
     if (offsetOfNodeInSpineItem !== void 0) {
       const val = getClosestValidOffsetFromApproximateOffsetInPages(
@@ -5592,7 +5585,7 @@ const createSpineItemLocator = ({
     frame.contentWindow.document.body !== null) {
       const { x: left, y: top } = getSpineItemPositionFromPageIndex({
         pageIndex,
-        itemLayout: spineItem.layoutPosition,
+        itemLayout: spineItem.layout.layoutInfo,
         context,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting()
       });
@@ -5611,7 +5604,7 @@ const createSpineItemLocator = ({
     return void 0;
   };
   const getSpineItemClosestPositionFromUnsafePosition = (unsafePosition, spineItem) => {
-    const { width, height } = spineItem.layoutPosition;
+    const { width, height } = spineItem.layout.layoutInfo;
     const adjustedPosition = {
       x: getClosestValidOffsetFromApproximateOffsetInPages(
         unsafePosition.x,
@@ -5628,7 +5621,7 @@ const createSpineItemLocator = ({
   };
   const getSpineItemPageIndexFromNode = (node, offset, spineItem) => {
     const position = getSpineItemPositionFromNode(node, offset, spineItem);
-    const { height, width } = spineItem.layoutPosition;
+    const { height, width } = spineItem.layout.layoutInfo;
     return position ? getSpineItemPageIndexFromPosition({
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
       position,
@@ -5666,14 +5659,9 @@ const createSpineItemLocator = ({
         context,
         isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
         settings,
-        itemLayout: item.layoutPosition
+        itemLayout: item.layout.layoutInfo
       });
-    },
-    getSpineItemNumberOfPages: (params) => getSpineItemNumberOfPages({
-      context,
-      settings,
-      ...params
-    })
+    }
   };
 };
 const createNavigationResolver$1 = ({
@@ -5682,16 +5670,11 @@ const createNavigationResolver$1 = ({
 }) => {
   const spineItemLocator = createSpineItemLocator({ context, settings });
   const getNavigationForLastPage = (spineItem) => {
-    const { height, width } = spineItem.layoutPosition;
-    const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
-      isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-      itemHeight: height,
-      itemWidth: width
-    });
+    const numberOfPages = spineItem.numberOfPages;
     return spineItemLocator.getSpineItemPositionFromPageIndex({
       pageIndex: numberOfPages - 1,
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-      itemLayout: spineItem.layoutPosition
+      itemLayout: spineItem.layout.layoutInfo
     });
   };
   const getNavigationFromNode = (spineItem, node, offset) => {
@@ -5735,7 +5718,7 @@ const getAdjustedPositionWithSafeEdge = ({
   const lastSpineItem = spineItemsManager.get(
     spineItemsManager.items.length - 1
   );
-  const distanceOfLastSpineItem = spineLayout.getAbsolutePositionOf(
+  const distanceOfLastSpineItem = spineLayout.getSpineItemRelativeLayoutInfo(
     lastSpineItem || 0
   );
   const maximumYOffset = distanceOfLastSpineItem.bottom - pageSizeHeight;
@@ -5758,7 +5741,7 @@ const getSpineItemOffsetFromAnchor = ({
   context
 }) => {
   var _a;
-  const itemWidth = ((_a = spineItem.layoutPosition) == null ? void 0 : _a.width) || 0;
+  const itemWidth = ((_a = spineItem.layout.layoutInfo) == null ? void 0 : _a.width) || 0;
   const pageWidth = context.getPageSize().width;
   const anchorElementBoundingRect = spineItem.getBoundingRectOfElementFromSelector(anchor);
   const offsetOfAnchor = (anchorElementBoundingRect == null ? void 0 : anchorElementBoundingRect.x) || 0;
@@ -5917,7 +5900,7 @@ const getNavigationForSpineItemPage = ({
   const spineItemNavigation = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
     pageIndex,
     isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-    itemLayout: spineItem.layoutPosition
+    itemLayout: spineItem.layout.layoutInfo
   });
   const readingOffset = spineLocator.getSpinePositionFromSpineItemPosition({
     spineItemPosition: spineItemNavigation,
@@ -6628,9 +6611,7 @@ const withSpineItem = ({
 const withSpineItemLayoutInfo = ({ spine }) => (stream) => {
   return stream.pipe(
     switchMap(({ navigation, ...rest }) => {
-      const spineItemDimensions = spine.spineLayout.getAbsolutePositionOf(
-        navigation.spineItem
-      );
+      const spineItemDimensions = spine.spineLayout.getSpineItemRelativeLayoutInfo(navigation.spineItem);
       const spineItem = spine.spineItemsManager.get(navigation.spineItem);
       return ((spineItem == null ? void 0 : spineItem.isReady$) ?? of(false)).pipe(
         first$1(),
@@ -6684,7 +6665,7 @@ const withSpineItemPosition = ({
       const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
         pageIndex: beginPageIndexForDirection,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-        itemLayout: spineItem.layoutPosition
+        itemLayout: spineItem.layout.layoutInfo
       });
       return positionInSpineItem;
     }
@@ -6745,7 +6726,7 @@ const restoreNavigationForControlledPageTurnMode = ({
     first$1(),
     map((isReady) => {
       var _a, _b;
-      const spineItemAbsolutePosition = spineLayout.getAbsolutePositionOf(spineItem);
+      const spineItemAbsolutePosition = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
       const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
         navigation.position,
         spineItem
@@ -6816,7 +6797,7 @@ const restoreNavigationForScrollingPageTurnMode = ({
   const { spineItem } = navigation;
   const foundSpineItem = spineItemsManager.get(spineItem);
   if (!foundSpineItem) return { x: 0, y: 0 };
-  const { height, top } = spineLayout.getAbsolutePositionOf(foundSpineItem);
+  const { height, top } = spineLayout.getSpineItemRelativeLayoutInfo(foundSpineItem);
   const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
     navigation.position,
     foundSpineItem
@@ -7383,18 +7364,8 @@ class PaginationController extends DestroyableClass {
             const shouldUpdateEndCfi = previousPagination.endSpineItemIndex !== endSpineItemIndex || endLastCfi === void 0 || isRootCfi(endLastCfi);
             const beginCfi = shouldUpdateBeginCfi ? getRootCfi(beginSpineItem) : beginLastCfi;
             const endCfi = shouldUpdateEndCfi ? getRootCfi(endSpineItem) : endLastCfi;
-            const beginSpineItemDimensions = beginSpineItem.layoutPosition;
-            const beginNumberOfPagesInSpineItem = this.spineItemLocator.getSpineItemNumberOfPages({
-              itemHeight: beginSpineItemDimensions.height,
-              itemWidth: beginSpineItemDimensions.width,
-              isUsingVerticalWriting: !!beginSpineItem.isUsingVerticalWriting()
-            });
-            const endSpineItemDimensions = endSpineItem.layoutPosition;
-            const endNumberOfPagesInSpineItem = this.spineItemLocator.getSpineItemNumberOfPages({
-              itemHeight: endSpineItemDimensions.height,
-              itemWidth: endSpineItemDimensions.width,
-              isUsingVerticalWriting: !!endSpineItem.isUsingVerticalWriting()
-            });
+            const beginNumberOfPagesInSpineItem = beginSpineItem.numberOfPages;
+            const endNumberOfPagesInSpineItem = endSpineItem.numberOfPages;
             this.pagination.update({
               beginCfi,
               beginNumberOfPagesInSpineItem,
@@ -7567,10 +7538,7 @@ class ReaderSettingsManager extends SettingsManager3 {
 const getAbsolutePageIndexFromPageIndex = ({
   pageIndex,
   spineItemOrId,
-  spineLayout,
-  spineItemsManager,
-  context,
-  settings
+  spineItemsManager
 }) => {
   const items = spineItemsManager.items;
   const spineItem = spineItemsManager.get(spineItemOrId);
@@ -7578,14 +7546,7 @@ const getAbsolutePageIndexFromPageIndex = ({
   const { currentAbsolutePage } = items.reduce(
     (acc, item) => {
       if (acc.found) return acc;
-      const itemLayout = spineLayout.getAbsolutePositionOf(item);
-      const numberOfPages = getSpineItemNumberOfPages({
-        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-        itemHeight: itemLayout.height,
-        itemWidth: itemLayout.width,
-        context,
-        settings
-      });
+      const numberOfPages = item.numberOfPages;
       if (spineItem === item) {
         if (pageIndex <= numberOfPages - 1) {
           return {
@@ -7679,23 +7640,13 @@ const getItemVisibilityForPosition = ({
 };
 const getSpineInfoFromAbsolutePageIndex = ({
   absolutePageIndex,
-  spineLayout,
-  spineItemsManager,
-  context,
-  settings
+  spineItemsManager
 }) => {
   const items = spineItemsManager.items;
   const { found, currentAbsolutePage } = items.reduce(
     (acc, item) => {
       if (acc.found) return acc;
-      const itemLayout = spineLayout.getAbsolutePositionOf(item);
-      const numberOfPages = getSpineItemNumberOfPages({
-        isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-        itemHeight: itemLayout.height,
-        itemWidth: itemLayout.width,
-        context,
-        settings
-      });
+      const numberOfPages = item.numberOfPages;
       const possiblePageIndex = absolutePageIndex - acc.currentAbsolutePage;
       const currentAbsolutePage2 = acc.currentAbsolutePage + numberOfPages;
       if (possiblePageIndex <= numberOfPages - 1) {
@@ -7729,7 +7680,7 @@ const getSpineItemFromPosition = ({
   settings
 }) => {
   const spineItem = spineItemsManager.items.find((item) => {
-    const { left, right, bottom, top } = spineLayout.getAbsolutePositionOf(item);
+    const { left, right, bottom, top } = spineLayout.getSpineItemRelativeLayoutInfo(item);
     const isWithinXAxis = position.x >= left && position.x < right;
     if (settings.values.computedPageTurnDirection === `horizontal`) {
       return isWithinXAxis;
@@ -7767,7 +7718,7 @@ const getVisibleSpineItemsFromPosition = ({
   }) || spineItemsManager.get(0);
   const spineItemsVisible = spineItemsManager.items.reduce(
     (acc, spineItem) => {
-      const itemPosition = spineLayout.getAbsolutePositionOf(spineItem);
+      const itemPosition = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
       const { visible } = getItemVisibilityForPosition({
         itemPosition,
         threshold,
@@ -7803,7 +7754,7 @@ const createSpineLocator = ({
     `getSpineItemPositionFromSpinePosition`,
     10,
     (position, spineItem) => {
-      const { left, top } = spineLayout.getAbsolutePositionOf(spineItem);
+      const { left, top } = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
       return {
         /**
          * when using spread the item could be on the right and therefore will be negative
@@ -7821,7 +7772,7 @@ const createSpineLocator = ({
   const getSpinePositionFromSpineItem = (spineItem) => {
     return getSpinePositionFromSpineItemPosition({
       spineItemPosition: { x: 0, y: 0 },
-      itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+      itemLayout: spineLayout.getSpineItemRelativeLayoutInfo(spineItem)
     });
   };
   const getSpineItemFromIframe = (iframe) => {
@@ -7851,21 +7802,16 @@ const createSpineLocator = ({
     spineItem,
     restrictToScreen
   }) => {
-    const { height, width } = spineItem.layoutPosition;
-    const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
-      isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-      itemHeight: height,
-      itemWidth: width
-    });
+    const numberOfPages = spineItem.numberOfPages;
     const pages = Array.from(Array(numberOfPages)).map((_, index) => {
       const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex({
         pageIndex: index,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-        itemLayout: spineItem.layoutPosition
+        itemLayout: spineItem.layout.layoutInfo
       });
       const spinePosition = getSpinePositionFromSpineItemPosition({
         spineItemPosition,
-        itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+        itemLayout: spineLayout.getSpineItemRelativeLayoutInfo(spineItem)
       });
       return {
         index,
@@ -7905,11 +7851,11 @@ const createSpineLocator = ({
     };
   };
   const isPositionWithinSpineItem = (position, spineItem) => {
-    const { bottom, left, right, top } = spineLayout.getAbsolutePositionOf(spineItem);
+    const { bottom, left, right, top } = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
     return position.x >= left && position.x <= right && position.y <= bottom && position.y >= top;
   };
   const getSafeSpineItemPositionFromUnsafeSpineItemPosition = (unsafePosition, spineItem) => {
-    const { height, width } = spineLayout.getAbsolutePositionOf(spineItem);
+    const { height, width } = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
     return {
       x: Math.min(Math.max(0, unsafePosition.x), width),
       y: Math.min(Math.max(0, unsafePosition.y), height)
@@ -7920,7 +7866,7 @@ const createSpineLocator = ({
       spineItem,
       spineItemPosition
     }) => {
-      const itemLayout = spineLayout.getAbsolutePositionOf(spineItem);
+      const itemLayout = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
       return getSpinePositionFromSpineItemPosition({
         itemLayout,
         spineItemPosition
@@ -7928,17 +7874,11 @@ const createSpineLocator = ({
     },
     getAbsolutePageIndexFromPageIndex: (params) => getAbsolutePageIndexFromPageIndex({
       ...params,
-      context,
-      settings,
-      spineItemsManager,
-      spineLayout
+      spineItemsManager
     }),
     getSpineInfoFromAbsolutePageIndex: (params) => getSpineInfoFromAbsolutePageIndex({
       ...params,
-      context,
-      settings,
-      spineItemsManager,
-      spineLayout
+      spineItemsManager
     }),
     getSpinePositionFromSpineItem,
     getSpineItemPositionFromSpinePosition,
@@ -8115,7 +8055,7 @@ const layoutItem = ({
       minimumWidth = context.getPageSize().width * 2;
     }
   }
-  const itemLayout$ = item.layout({
+  const itemLayout$ = item.layout.layout({
     minimumWidth,
     blankPagePosition,
     spreadPosition: context.state.isUsingSpreadMode ? isScreenStartItem ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
@@ -8126,29 +8066,52 @@ const layoutItem = ({
         const currentValidEdgeYForVerticalPositioning = isScreenStartItem ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
         const currentValidEdgeXForVerticalPositioning = isScreenStartItem ? 0 : horizontalOffset;
         if (context.isRTL()) {
-          item.adjustPositionOfElement({
+          item.layout.adjustPositionOfElement({
             top: currentValidEdgeYForVerticalPositioning,
             left: currentValidEdgeXForVerticalPositioning
           });
         } else {
-          item.adjustPositionOfElement({
+          item.layout.adjustPositionOfElement({
             top: currentValidEdgeYForVerticalPositioning,
             left: currentValidEdgeXForVerticalPositioning
           });
         }
         const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
         const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
+        const layoutPosition2 = {
+          left: currentValidEdgeXForVerticalPositioning,
+          right: newEdgeX,
+          top: currentValidEdgeYForVerticalPositioning,
+          bottom: newEdgeY,
+          height,
+          width,
+          x: currentValidEdgeXForVerticalPositioning,
+          y: currentValidEdgeYForVerticalPositioning
+        };
         return {
           horizontalOffset: newEdgeX,
-          verticalOffset: newEdgeY
+          verticalOffset: newEdgeY,
+          layoutPosition: layoutPosition2
         };
       }
-      item.adjustPositionOfElement(
+      item.layout.adjustPositionOfElement(
         context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
       );
+      const left = context.isRTL() ? context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
+      const layoutPosition = {
+        right: context.isRTL() ? context.state.visibleAreaRect.width - horizontalOffset : horizontalOffset + width,
+        left,
+        x: left,
+        top: verticalOffset,
+        bottom: height,
+        height,
+        width,
+        y: verticalOffset
+      };
       return {
         horizontalOffset: horizontalOffset + width,
-        verticalOffset: 0
+        verticalOffset: 0,
+        layoutPosition
       };
     })
   );
@@ -8161,7 +8124,11 @@ class SpineLayout extends DestroyableClass {
     this.context = context;
     this.settings = settings;
     this.layoutSubject = new Subject();
+    this.spineItemsRelativeLayouts = [];
     spineItemsManager.items$.pipe(
+      tap$1(() => {
+        this.spineItemsRelativeLayouts = [];
+      }),
       switchMap((items) => {
         const needsLayouts$ = items.map(
           (spineItem) => spineItem.needsLayout$.pipe(
@@ -8202,28 +8169,41 @@ class SpineLayout extends DestroyableClass {
         layoutInProgress.next(true);
         const manifest = this.context.manifest;
         const isGloballyPrePaginated = isFullyPrePaginated(manifest) ?? false;
-        return from(this.spineItemsManager.items).pipe(
+        const items$ = from(this.spineItemsManager.items);
+        return items$.pipe(
           reduce(
-            (acc$, item, index) => acc$.pipe(
+            (acc$, item, itemIndex) => acc$.pipe(
               concatMap(
-                ({ horizontalOffset, verticalOffset }) => layoutItem({
+                ({ horizontalOffset, verticalOffset, pages }) => layoutItem({
                   context: this.context,
                   horizontalOffset,
-                  index,
+                  index: itemIndex,
                   isGloballyPrePaginated,
                   item,
                   settings: this.settings,
                   spineItemsManager: this.spineItemsManager,
                   verticalOffset
-                })
+                }).pipe(
+                  map(
+                    ({
+                      horizontalOffset: newHorizontalOffset,
+                      verticalOffset: newVerticalOffset,
+                      layoutPosition
+                    }) => {
+                      this.spineItemsRelativeLayouts[itemIndex] = layoutPosition;
+                      return {
+                        horizontalOffset: newHorizontalOffset,
+                        verticalOffset: newVerticalOffset,
+                        pages: [...pages, layoutPosition]
+                      };
+                    }
+                  )
+                )
               )
             ),
-            of({ horizontalOffset: 0, verticalOffset: 0 })
+            of({ horizontalOffset: 0, verticalOffset: 0, pages: [] })
           ),
           concatMap((layout$) => layout$),
-          tap$1(() => {
-            Report.log(NAMESPACE, `layout`);
-          }),
           finalize(() => {
             layoutInProgress.next(false);
           })
@@ -8231,18 +8211,11 @@ class SpineLayout extends DestroyableClass {
       }),
       map(() => {
         const items = spineItemsManager.items;
-        const spineItemsPagesAbsolutePositions = items.map((item) => {
-          const itemLayout = this.getAbsolutePositionOf(item);
-          const numberOfPages = getSpineItemNumberOfPages({
-            isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
-            itemHeight: itemLayout.height,
-            itemWidth: itemLayout.width,
-            context,
-            settings
-          });
-          const pages2 = new Array(numberOfPages).fill(void 0);
-          return pages2.map(
-            (_, pageIndex) => convertSpinePositionToLayoutPosition({
+        const pages = items.reduce((acc, item, itemIndex) => {
+          const itemLayout = this.getSpineItemRelativeLayoutInfo(item);
+          const pages2 = new Array(item.numberOfPages).fill(void 0);
+          const pagesAbsolutePositions = pages2.map((_, pageIndex) => {
+            return convertSpinePositionToLayoutPosition({
               pageSize: this.context.getPageSize(),
               position: getSpinePositionFromSpineItemPosition({
                 itemLayout,
@@ -8253,33 +8226,25 @@ class SpineLayout extends DestroyableClass {
                   context
                 })
               })
-            })
-          );
-        });
-        const pages = spineItemsPagesAbsolutePositions.reduce(
-          (acc, itemPages, itemIndex) => {
-            const itemPagesInfo = itemPages.map(
-              (absolutePosition, pageIndex) => ({
-                itemIndex,
-                absolutePageIndex: itemIndex + pageIndex,
-                absolutePosition
-              })
-            );
-            return [...acc, ...itemPagesInfo];
-          },
-          []
-        );
+            });
+          });
+          const itemPagesInfo = pagesAbsolutePositions.map((absolutePosition, pageIndex) => ({
+            itemIndex,
+            absolutePageIndex: itemIndex + pageIndex,
+            absolutePosition
+          }));
+          return [...acc, ...itemPagesInfo];
+        }, []);
         return {
-          spineItemsAbsolutePositions: items.map(
-            (item) => this.getAbsolutePositionOf(item)
-          ),
-          spineItemsPagesAbsolutePositions,
           pages
         };
       }),
       share()
     );
     this.info$ = this.layout$.pipe(
+      tap$1((layout) => {
+        Report.log(NAMESPACE, `layout:info`, layout);
+      }),
       shareReplay$1({ refCount: true, bufferSize: 1 })
     );
     merge(this.layout$, this.info$).pipe(takeUntil(this.destroy$)).subscribe();
@@ -8287,9 +8252,9 @@ class SpineLayout extends DestroyableClass {
   layout() {
     this.layoutSubject.next(void 0);
   }
-  getAbsolutePositionOf(spineItemOrIndex) {
-    var _a;
-    return ((_a = this.spineItemsManager.get(spineItemOrIndex)) == null ? void 0 : _a.layoutPosition) || {
+  getSpineItemRelativeLayoutInfo(spineItemOrIndex) {
+    const itemIndex = this.spineItemsManager.getSpineItemIndex(spineItemOrIndex) ?? 0;
+    return this.spineItemsRelativeLayouts[itemIndex] || {
       left: 0,
       right: 0,
       top: 0,
@@ -8300,6 +8265,11 @@ class SpineLayout extends DestroyableClass {
       y: 0
     };
   }
+  get numberOfPages() {
+    return this.spineItemsManager.items.reduce((acc, item) => {
+      return acc + item.numberOfPages;
+    }, 0);
+  }
   destroy() {
     super.destroy();
     this.layoutSubject.complete();
@@ -8423,34 +8393,14 @@ class SpineItemLayout extends DestroyableClass {
     const adjustedValue = multiplier * pageSize;
     return Math.max(adjustedValue, pageSize);
   }
-  /**
-   * Returns the absolute layout position relative to the parent element which
-   * is supposedly and expectedly the spine element.
-   *
-   * @important
-   *
-   * This method is stable and does not consider scalings or transforms on the parents.
-   *
-   * It does assume and requires that:
-   * - the navigator element and the spine element are direct parents.
-   * - the spine items are correctly positioned in the DOM and with correct styles values.
-   */
-  get layoutPosition() {
-    const left = Math.round(this.containerElement.offsetLeft * 10) / 10;
-    const top = Math.round(this.containerElement.offsetTop * 10) / 10;
-    const width = Math.round(this.containerElement.offsetWidth * 10) / 10;
-    const height = Math.round(this.containerElement.offsetHeight * 10) / 10;
-    const normalizedValues = {
-      left,
-      top,
-      right: left + width,
-      bottom: top + height,
-      x: left,
-      y: top,
+  get layoutInfo() {
+    const style = this.containerElement.style;
+    const width = style.width ? parseFloat(style.width) : 0;
+    const height = style.height ? parseFloat(style.height) : 0;
+    return {
       width,
       height
     };
-    return normalizedValues;
   }
 }
 class DefaultRenderer extends DocumentRenderer {
@@ -8525,21 +8475,23 @@ class SpineItem extends DestroyableClass {
       resourcesHandler: this.resourcesHandler
     };
     this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
-    this.spineItemLayout = new SpineItemLayout(
+    this.layout = new SpineItemLayout(
       item,
       this.containerElement,
       context,
       hookManager,
       this.renderer
     );
-    this.isReady$ = this.spineItemLayout.layoutProcess$.pipe(
+    this.isReady$ = this.layout.layoutProcess$.pipe(
       withLatestFrom$1(this.renderer.isLoaded$),
       map$1(([event, loaded]) => !!(event.type === `end` && loaded)),
       startWith(false),
       distinctUntilChanged(),
+      tap((isReady) => {
+        this.containerElement.dataset["isReady"] = isReady.toString();
+      }),
       shareReplay({ refCount: true, bufferSize: 1 })
     );
-    this.layout$ = this.spineItemLayout.layout$;
     this.needsLayout$ = merge(this.unloaded$, this.loaded$);
     merge(
       /**
@@ -8549,10 +8501,8 @@ class SpineItem extends DestroyableClass {
        * to layout changes may rely on the isReady value.
        */
       this.isReady$,
-      this.spineItemLayout.layout$
+      this.layout.layout$
     ).pipe(takeUntil$1(this.destroy$)).subscribe();
-    this.layout = this.spineItemLayout.layout;
-    this.adjustPositionOfElement = this.spineItemLayout.adjustPositionOfElement;
   }
   get element() {
     return this.containerElement;
@@ -8568,9 +8518,6 @@ class SpineItem extends DestroyableClass {
   get readingDirection() {
     return this.renderer.readingDirection;
   }
-  get layoutPosition() {
-    return this.spineItemLayout.layoutPosition;
-  }
   get loaded$() {
     return this.renderer.state$.pipe(
       distinctUntilChanged(),
@@ -8592,6 +8539,15 @@ class SpineItem extends DestroyableClass {
   get renditionLayout() {
     return this.renderer.renditionLayout;
   }
+  get numberOfPages() {
+    return getSpineItemNumberOfPages({
+      isUsingVerticalWriting: !!this.isUsingVerticalWriting(),
+      itemHeight: this.layout.layoutInfo.height,
+      itemWidth: this.layout.layoutInfo.width,
+      context: this.context,
+      settings: this.settings
+    });
+  }
 }
 const createContainerElement = (containerElement, item, hookManager) => {
   const element = containerElement.ownerDocument.createElement(`div`);
@@ -8601,6 +8557,7 @@ const createContainerElement = (containerElement, item, hookManager) => {
     position: absolute;
     overflow: hidden;
   `;
+  element.dataset["isReady"] = `false`;
   hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
   return element;
 };