@prose-reader/core 1.195.0 → 1.197.0

package/dist/index.umd.cjs

@@ -3308,8 +3308,8 @@
   };
   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 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(
       rxjs.debounceTime(10, rxjs.animationFrameScheduler),
       rxjs.withLatestFrom(reader.pagination.state$),
       rxjs.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
         };
       }),
       rxjs.distinctUntilChanged(shared.isShallowEqual),
@@ -5572,7 +5565,7 @@
         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 @@
       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 @@
       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 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 @@
           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 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 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 @@
     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 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 withSpineItemLayoutInfo = ({ spine }) => (stream) => {
     return stream.pipe(
       rxjs.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$) ?? rxjs.of(false)).pipe(
           rxjs.first(),
@@ -6684,7 +6665,7 @@
         const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
           pageIndex: beginPageIndexForDirection,
           isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-          itemLayout: spineItem.layoutPosition
+          itemLayout: spineItem.layout.layoutInfo
         });
         return positionInSpineItem;
       }
@@ -6745,7 +6726,7 @@
       rxjs.first(),
       rxjs.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 { 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 @@
               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 @@
   const getAbsolutePageIndexFromPageIndex = ({
     pageIndex,
     spineItemOrId,
-    spineLayout,
-    spineItemsManager,
-    context,
-    settings
+    spineItemsManager
   }) => {
     const items = spineItemsManager.items;
     const spineItem = spineItemsManager.get(spineItemOrId);
@@ -7578,14 +7546,7 @@
     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 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 @@
     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 @@
     }) || 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 @@
       `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 getSpinePositionFromSpineItem = (spineItem) => {
       return getSpinePositionFromSpineItemPosition({
         spineItemPosition: { x: 0, y: 0 },
-        itemLayout: spineLayout.getAbsolutePositionOf(spineItem)
+        itemLayout: spineLayout.getSpineItemRelativeLayoutInfo(spineItem)
       });
     };
     const getSpineItemFromIframe = (iframe) => {
@@ -7851,21 +7802,16 @@
       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 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 @@
         spineItem,
         spineItemPosition
       }) => {
-        const itemLayout = spineLayout.getAbsolutePositionOf(spineItem);
+        const itemLayout = spineLayout.getSpineItemRelativeLayoutInfo(spineItem);
         return getSpinePositionFromSpineItemPosition({
           itemLayout,
           spineItemPosition
@@ -7928,17 +7874,11 @@
       },
       getAbsolutePageIndexFromPageIndex: (params) => getAbsolutePageIndexFromPageIndex({
         ...params,
-        context,
-        settings,
-        spineItemsManager,
-        spineLayout
+        spineItemsManager
       }),
       getSpineInfoFromAbsolutePageIndex: (params) => getSpineInfoFromAbsolutePageIndex({
         ...params,
-        context,
-        settings,
-        spineItemsManager,
-        spineLayout
+        spineItemsManager
       }),
       getSpinePositionFromSpineItem,
       getSpineItemPositionFromSpinePosition,
@@ -8115,7 +8055,7 @@
         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 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 @@
       this.context = context;
       this.settings = settings;
       this.layoutSubject = new rxjs.Subject();
+      this.spineItemsRelativeLayouts = [];
       spineItemsManager.items$.pipe(
+        rxjs.tap(() => {
+          this.spineItemsRelativeLayouts = [];
+        }),
         rxjs.switchMap((items) => {
           const needsLayouts$ = items.map(
             (spineItem) => spineItem.needsLayout$.pipe(
@@ -8202,28 +8169,41 @@
           layoutInProgress.next(true);
           const manifest = this.context.manifest;
           const isGloballyPrePaginated = isFullyPrePaginated(manifest) ?? false;
-          return rxjs.from(this.spineItemsManager.items).pipe(
+          const items$ = rxjs.from(this.spineItemsManager.items);
+          return items$.pipe(
             rxjs.reduce(
-              (acc$, item, index) => acc$.pipe(
+              (acc$, item, itemIndex) => acc$.pipe(
                 rxjs.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(
+                    rxjs.map(
+                      ({
+                        horizontalOffset: newHorizontalOffset,
+                        verticalOffset: newVerticalOffset,
+                        layoutPosition
+                      }) => {
+                        this.spineItemsRelativeLayouts[itemIndex] = layoutPosition;
+                        return {
+                          horizontalOffset: newHorizontalOffset,
+                          verticalOffset: newVerticalOffset,
+                          pages: [...pages, layoutPosition]
+                        };
+                      }
+                    )
+                  )
                 )
               ),
-              rxjs.of({ horizontalOffset: 0, verticalOffset: 0 })
+              rxjs.of({ horizontalOffset: 0, verticalOffset: 0, pages: [] })
             ),
             rxjs.concatMap((layout$) => layout$),
-            rxjs.tap(() => {
-              Report.log(NAMESPACE, `layout`);
-            }),
             rxjs.finalize(() => {
               layoutInProgress.next(false);
             })
@@ -8231,18 +8211,11 @@
         }),
         rxjs.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 @@
                     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
           };
         }),
         rxjs.share()
       );
       this.info$ = this.layout$.pipe(
+        rxjs.tap((layout) => {
+          Report.log(NAMESPACE, `layout:info`, layout);
+        }),
         rxjs.shareReplay({ refCount: true, bufferSize: 1 })
       );
       rxjs.merge(this.layout$, this.info$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
@@ -8287,9 +8252,9 @@
     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 @@
         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 @@
       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 @@
         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(
         operators.withLatestFrom(this.renderer.isLoaded$),
         operators.map(([event, loaded]) => !!(event.type === `end` && loaded)),
         operators.startWith(false),
         operators.distinctUntilChanged(),
+        operators.tap((isReady) => {
+          this.containerElement.dataset["isReady"] = isReady.toString();
+        }),
         operators.shareReplay({ refCount: true, bufferSize: 1 })
       );
-      this.layout$ = this.spineItemLayout.layout$;
       this.needsLayout$ = rxjs.merge(this.unloaded$, this.loaded$);
       rxjs.merge(
         /**
@@ -8549,10 +8501,8 @@
          * to layout changes may rely on the isReady value.
          */
         this.isReady$,
-        this.spineItemLayout.layout$
+        this.layout.layout$
       ).pipe(operators.takeUntil(this.destroy$)).subscribe();
-      this.layout = this.spineItemLayout.layout;
-      this.adjustPositionOfElement = this.spineItemLayout.adjustPositionOfElement;
     }
     get element() {
       return this.containerElement;
@@ -8568,9 +8518,6 @@
     get readingDirection() {
       return this.renderer.readingDirection;
     }
-    get layoutPosition() {
-      return this.spineItemLayout.layoutPosition;
-    }
     get loaded$() {
       return this.renderer.state$.pipe(
         operators.distinctUntilChanged(),
@@ -8592,6 +8539,15 @@
     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 @@
     position: absolute;
     overflow: hidden;
   `;
+    element.dataset["isReady"] = `false`;
     hookManager.execute("item.onBeforeContainerCreated", void 0, { element });
     return element;
   };