@prose-reader/core 1.192.0 → 1.194.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { switchMap, of, fromEvent, take, map, from, takeUntil, Observable, defer, Subject, combineLatest, merge, EMPTY, withLatestFrom, BehaviorSubject, filter, share, first as first$1, mergeMap, endWith, tap as tap$1, finalize, catchError, lastValueFrom, NEVER, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, throttleTime, debounceTime as debounceTime$1, startWith as startWith$1, switchScan, forkJoin, shareReplay as shareReplay$1, delay, ReplaySubject, identity, timer, skip as skip$1, exhaustMap, reduce, concatMap } from "rxjs";
-import { switchMap as switchMap$1, first, map as map$1, startWith, shareReplay, distinctUntilChanged, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter as filter$1, debounceTime, skip, mergeMap as mergeMap$1, catchError as catchError$1, withLatestFrom as withLatestFrom$1, share as share$1 } from "rxjs/operators";
+import { switchMap as switchMap$1, first, map as map$1, startWith, shareReplay, distinctUntilChanged, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter as filter$1, debounceTime, skip, mergeMap as mergeMap$1, catchError as catchError$1, withLatestFrom as withLatestFrom$1 } from "rxjs/operators";
 import { shallowMergeIfDefined, isShallowEqual, getParentPath, parseContentType, detectMimeTypeFromName, arrayEqual } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const getAttributeValueFromString = (string, key) => {
@@ -902,7 +902,6 @@ class DocumentRenderer extends DestroyableClass {
   constructor(params) {
     super();
     this.triggerSubject = new Subject();
-    this.lastLayoutDims = void 0;
     this.stateSubject = new BehaviorSubject(`idle`);
     this.unload$ = this.triggerSubject.pipe(
       withLatestFrom(this.stateSubject),
@@ -1034,57 +1033,8 @@ class DocumentRenderer extends DestroyableClass {
       })
     );
   }
-  /**
-   * @important
-   *
-   * If renderer returns undefined as dimensions we will use the previous
-   * layout dimensions as fallback. This ensure minmum layout shift during
-   * load / unload of items and improve stability..
-   */
   layout(params) {
-    return defer(() => this.onLayout(params)).pipe(
-      map((dims) => {
-        var _a, _b, _c, _d;
-        const { height: defaultHeight, width: defaultWidth } = this.context.getPageSize();
-        if (dims) {
-          const { height, width } = dims;
-          if (height < defaultHeight || width < defaultWidth) {
-            Report.warn(
-              `Your height or width is smaller than the page size. Please check your rendering.`
-            );
-          }
-          this.lastLayoutDims = {
-            height,
-            width,
-            pageSize: this.context.getPageSize()
-          };
-          return this.lastLayoutDims;
-        }
-        const hasPageSizeChanged = ((_a = this.lastLayoutDims) == null ? void 0 : _a.pageSize.width) !== this.context.getPageSize().width || ((_b = this.lastLayoutDims) == null ? void 0 : _b.pageSize.height) !== this.context.getPageSize().height;
-        if (this.renditionLayout === `pre-paginated` || // in the case the page size change, we cannot use the old size reliably
-        // we have to drop it and use the default one
-        hasPageSizeChanged) {
-          this.lastLayoutDims = {
-            height: this.context.getPageSize().height,
-            width: params.minimumWidth,
-            pageSize: this.context.getPageSize()
-          };
-        } else {
-          this.lastLayoutDims = {
-            height: Math.max(
-              defaultHeight,
-              ((_c = this.lastLayoutDims) == null ? void 0 : _c.height) ?? defaultHeight
-            ),
-            width: Math.max(
-              defaultWidth,
-              ((_d = this.lastLayoutDims) == null ? void 0 : _d.width) ?? defaultWidth
-            ),
-            pageSize: this.context.getPageSize()
-          };
-        }
-        return this.lastLayoutDims;
-      })
-    );
+    return defer(() => this.onLayout(params)).pipe();
   }
   destroy() {
     super.destroy();
@@ -3351,7 +3301,7 @@ const getTotalProgressFromPercentages = (estimateBeforeThisItem, currentItemWeig
 };
 const getScrollPercentageWithinItem = (reader, currentPosition, currentItem) => {
   const context = reader.context;
-  const { height, width } = currentItem.getElementDimensions();
+  const { height, width } = currentItem.layoutPosition;
   const { top, left } = reader.spine.spineLayout.getAbsolutePositionOf(currentItem);
   if (reader.settings.values.computedPageTurnDirection === `vertical`) {
     return Math.max(
@@ -3415,7 +3365,7 @@ const getPercentageEstimate = (reader, currentSpineIndex, pageIndex, currentPosi
   );
 };
 const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemsManager.items.map((item) => {
-  const { height, width } = item.getElementDimensions();
+  const { height, width } = item.layoutPosition;
   return reader.spine.spineItemLocator.getSpineItemNumberOfPages({
     isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
     itemHeight: height,
@@ -5615,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.getElementDimensions()) == null ? void 0 : _a.width) || 0;
+    const spineItemWidth = ((_a = spineItem.layoutPosition) == null ? void 0 : _a.width) || 0;
     const pageWidth = context.getPageSize().width;
     if (offsetOfNodeInSpineItem !== void 0) {
       const val = getClosestValidOffsetFromApproximateOffsetInPages(
@@ -5635,7 +5585,7 @@ const createSpineItemLocator = ({
     frame.contentWindow.document.body !== null) {
       const { x: left, y: top } = getSpineItemPositionFromPageIndex({
         pageIndex,
-        itemLayout: spineItem.getElementDimensions(),
+        itemLayout: spineItem.layoutPosition,
         context,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting()
       });
@@ -5654,7 +5604,7 @@ const createSpineItemLocator = ({
     return void 0;
   };
   const getSpineItemClosestPositionFromUnsafePosition = (unsafePosition, spineItem) => {
-    const { width, height } = spineItem.getElementDimensions();
+    const { width, height } = spineItem.layoutPosition;
     const adjustedPosition = {
       x: getClosestValidOffsetFromApproximateOffsetInPages(
         unsafePosition.x,
@@ -5671,7 +5621,7 @@ const createSpineItemLocator = ({
   };
   const getSpineItemPageIndexFromNode = (node, offset, spineItem) => {
     const position = getSpineItemPositionFromNode(node, offset, spineItem);
-    const { height, width } = spineItem.getElementDimensions();
+    const { height, width } = spineItem.layoutPosition;
     return position ? getSpineItemPageIndexFromPosition({
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
       position,
@@ -5709,7 +5659,7 @@ const createSpineItemLocator = ({
         context,
         isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
         settings,
-        itemLayout: item.getElementDimensions()
+        itemLayout: item.layoutPosition
       });
     },
     getSpineItemNumberOfPages: (params) => getSpineItemNumberOfPages({
@@ -5725,7 +5675,7 @@ const createNavigationResolver$1 = ({
 }) => {
   const spineItemLocator = createSpineItemLocator({ context, settings });
   const getNavigationForLastPage = (spineItem) => {
-    const { height, width } = spineItem.getElementDimensions();
+    const { height, width } = spineItem.layoutPosition;
     const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
       itemHeight: height,
@@ -5734,7 +5684,7 @@ const createNavigationResolver$1 = ({
     return spineItemLocator.getSpineItemPositionFromPageIndex({
       pageIndex: numberOfPages - 1,
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-      itemLayout: spineItem.getElementDimensions()
+      itemLayout: spineItem.layoutPosition
     });
   };
   const getNavigationFromNode = (spineItem, node, offset) => {
@@ -5801,7 +5751,7 @@ const getSpineItemOffsetFromAnchor = ({
   context
 }) => {
   var _a;
-  const itemWidth = ((_a = spineItem.getElementDimensions()) == null ? void 0 : _a.width) || 0;
+  const itemWidth = ((_a = spineItem.layoutPosition) == 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;
@@ -5960,7 +5910,7 @@ const getNavigationForSpineItemPage = ({
   const spineItemNavigation = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
     pageIndex,
     isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-    itemLayout: spineItem.getElementDimensions()
+    itemLayout: spineItem.layoutPosition
   });
   const readingOffset = spineLocator.getSpinePositionFromSpineItemPosition({
     spineItemPosition: spineItemNavigation,
@@ -6727,7 +6677,7 @@ const withSpineItemPosition = ({
       const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
         pageIndex: beginPageIndexForDirection,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-        itemLayout: spineItem.getElementDimensions()
+        itemLayout: spineItem.layoutPosition
       });
       return positionInSpineItem;
     }
@@ -7426,13 +7376,13 @@ 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.getElementDimensions();
+            const beginSpineItemDimensions = beginSpineItem.layoutPosition;
             const beginNumberOfPagesInSpineItem = this.spineItemLocator.getSpineItemNumberOfPages({
               itemHeight: beginSpineItemDimensions.height,
               itemWidth: beginSpineItemDimensions.width,
               isUsingVerticalWriting: !!beginSpineItem.isUsingVerticalWriting()
             });
-            const endSpineItemDimensions = endSpineItem.getElementDimensions();
+            const endSpineItemDimensions = endSpineItem.layoutPosition;
             const endNumberOfPagesInSpineItem = this.spineItemLocator.getSpineItemNumberOfPages({
               itemHeight: endSpineItemDimensions.height,
               itemWidth: endSpineItemDimensions.width,
@@ -7607,24 +7557,44 @@ class ReaderSettingsManager extends SettingsManager3 {
     };
   }
 }
-const getSpineItemFromPosition = ({
-  position,
-  spineItemsManager,
+const getAbsolutePageIndexFromPageIndex = ({
+  pageIndex,
+  spineItemOrId,
   spineLayout,
+  spineItemsManager,
+  context,
   settings
 }) => {
-  const spineItem = spineItemsManager.items.find((item) => {
-    const { left, right, bottom, top } = spineLayout.getAbsolutePositionOf(item);
-    const isWithinXAxis = position.x >= left && position.x < right;
-    if (settings.values.computedPageTurnDirection === `horizontal`) {
-      return isWithinXAxis;
-    }
-    return isWithinXAxis && position.y >= top && position.y < bottom;
-  });
-  if (position.x === 0 && !spineItem) {
-    return spineItemsManager.items[0];
-  }
-  return spineItem;
+  const items = spineItemsManager.items;
+  const spineItem = spineItemsManager.get(spineItemOrId);
+  if (!spineItem) return void 0;
+  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
+      });
+      if (spineItem === item) {
+        if (pageIndex <= numberOfPages - 1) {
+          return {
+            currentAbsolutePage: acc.currentAbsolutePage + pageIndex,
+            found: true
+          };
+        }
+      }
+      return {
+        ...acc,
+        currentAbsolutePage: acc.currentAbsolutePage + numberOfPages
+      };
+    },
+    { currentAbsolutePage: 0, found: false }
+  );
+  return currentAbsolutePage;
 };
 const isItemVisibleByThresholdForPosition = ({
   itemHeight,
@@ -7700,57 +7670,6 @@ const getItemVisibilityForPosition = ({
     visible: isItemVisibleEnough || isItemVisibleEnoughOnScreen
   };
 };
-const getVisibleSpineItemsFromPosition = ({
-  position,
-  threshold,
-  restrictToScreen,
-  spineItemsManager,
-  context,
-  settings,
-  spineLayout
-}) => {
-  const fallbackSpineItem = getSpineItemFromPosition({
-    position,
-    settings,
-    spineItemsManager,
-    spineLayout
-  }) || spineItemsManager.get(0);
-  const spineItemsVisible = spineItemsManager.items.reduce(
-    (acc, spineItem) => {
-      const itemPosition = spineLayout.getAbsolutePositionOf(spineItem);
-      const { visible } = getItemVisibilityForPosition({
-        itemPosition,
-        threshold,
-        viewportPosition: position,
-        restrictToScreen,
-        context
-      });
-      if (visible) {
-        return [...acc, spineItem];
-      }
-      return acc;
-    },
-    []
-  );
-  const beginItem = spineItemsVisible[0] ?? fallbackSpineItem;
-  const endItem = spineItemsVisible[spineItemsVisible.length - 1] ?? beginItem;
-  if (!beginItem || !endItem) return void 0;
-  const beginItemIndex = spineItemsManager.getSpineItemIndex(beginItem);
-  const endItemIndex = spineItemsManager.getSpineItemIndex(endItem);
-  return {
-    beginIndex: beginItemIndex ?? 0,
-    endIndex: endItemIndex ?? 0
-  };
-};
-const getSpinePositionFromSpineItemPosition = ({
-  spineItemPosition,
-  itemLayout: { left, top }
-}) => {
-  return {
-    x: left + spineItemPosition.x,
-    y: top + spineItemPosition.y
-  };
-};
 const getSpineInfoFromAbsolutePageIndex = ({
   absolutePageIndex,
   spineLayout,
@@ -7796,44 +7715,75 @@ const getSpineInfoFromAbsolutePageIndex = ({
   }
   return void 0;
 };
-const getAbsolutePageIndexFromPageIndex = ({
-  pageIndex,
-  spineItemOrId,
+const getSpineItemFromPosition = ({
+  position,
+  spineItemsManager,
   spineLayout,
+  settings
+}) => {
+  const spineItem = spineItemsManager.items.find((item) => {
+    const { left, right, bottom, top } = spineLayout.getAbsolutePositionOf(item);
+    const isWithinXAxis = position.x >= left && position.x < right;
+    if (settings.values.computedPageTurnDirection === `horizontal`) {
+      return isWithinXAxis;
+    }
+    return isWithinXAxis && position.y >= top && position.y < bottom;
+  });
+  if (position.x === 0 && !spineItem) {
+    return spineItemsManager.items[0];
+  }
+  return spineItem;
+};
+const getSpinePositionFromSpineItemPosition = ({
+  spineItemPosition,
+  itemLayout: { left, top }
+}) => {
+  return {
+    x: left + spineItemPosition.x,
+    y: top + spineItemPosition.y
+  };
+};
+const getVisibleSpineItemsFromPosition = ({
+  position,
+  threshold,
+  restrictToScreen,
   spineItemsManager,
   context,
-  settings
+  settings,
+  spineLayout
 }) => {
-  const items = spineItemsManager.items;
-  const spineItem = spineItemsManager.get(spineItemOrId);
-  if (!spineItem) return void 0;
-  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 fallbackSpineItem = getSpineItemFromPosition({
+    position,
+    settings,
+    spineItemsManager,
+    spineLayout
+  }) || spineItemsManager.get(0);
+  const spineItemsVisible = spineItemsManager.items.reduce(
+    (acc, spineItem) => {
+      const itemPosition = spineLayout.getAbsolutePositionOf(spineItem);
+      const { visible } = getItemVisibilityForPosition({
+        itemPosition,
+        threshold,
+        viewportPosition: position,
+        restrictToScreen,
+        context
       });
-      if (spineItem === item) {
-        if (pageIndex <= numberOfPages - 1) {
-          return {
-            currentAbsolutePage: acc.currentAbsolutePage + pageIndex,
-            found: true
-          };
-        }
+      if (visible) {
+        return [...acc, spineItem];
       }
-      return {
-        ...acc,
-        currentAbsolutePage: acc.currentAbsolutePage + numberOfPages
-      };
+      return acc;
     },
-    { currentAbsolutePage: 0, found: false }
+    []
   );
-  return currentAbsolutePage;
+  const beginItem = spineItemsVisible[0] ?? fallbackSpineItem;
+  const endItem = spineItemsVisible[spineItemsVisible.length - 1] ?? beginItem;
+  if (!beginItem || !endItem) return void 0;
+  const beginItemIndex = spineItemsManager.getSpineItemIndex(beginItem);
+  const endItemIndex = spineItemsManager.getSpineItemIndex(endItem);
+  return {
+    beginIndex: beginItemIndex ?? 0,
+    endIndex: endItemIndex ?? 0
+  };
 };
 const createSpineLocator = ({
   spineItemsManager,
@@ -7894,7 +7844,7 @@ const createSpineLocator = ({
     spineItem,
     restrictToScreen
   }) => {
-    const { height, width } = spineItem.getElementDimensions();
+    const { height, width } = spineItem.layoutPosition;
     const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
       itemHeight: height,
@@ -7904,7 +7854,7 @@ const createSpineLocator = ({
       const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex({
         pageIndex: index,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-        itemLayout: spineItem.getElementDimensions()
+        itemLayout: spineItem.layoutPosition
       });
       const spinePosition = getSpinePositionFromSpineItemPosition({
         spineItemPosition,
@@ -8129,8 +8079,7 @@ const layoutItem = ({
   isGloballyPrePaginated,
   settings,
   index,
-  item,
-  newItemLayoutInformation
+  item
 }) => {
   let minimumWidth = context.getPageSize().width;
   let blankPagePosition = `none`;
@@ -8182,16 +8131,6 @@ const layoutItem = ({
         }
         const newEdgeX = width + currentValidEdgeXForVerticalPositioning;
         const newEdgeY = height + currentValidEdgeYForVerticalPositioning;
-        newItemLayoutInformation.push({
-          left: currentValidEdgeXForVerticalPositioning,
-          right: newEdgeX,
-          top: currentValidEdgeYForVerticalPositioning,
-          bottom: newEdgeY,
-          height,
-          width,
-          x: currentValidEdgeXForVerticalPositioning,
-          y: currentValidEdgeYForVerticalPositioning
-        });
         return {
           horizontalOffset: newEdgeX,
           verticalOffset: newEdgeY
@@ -8200,17 +8139,6 @@ const layoutItem = ({
       item.adjustPositionOfElement(
         context.isRTL() ? { right: horizontalOffset, top: 0 } : { left: horizontalOffset, top: 0 }
       );
-      const left = context.isRTL() ? context.state.visibleAreaRect.width - horizontalOffset - width : horizontalOffset;
-      newItemLayoutInformation.push({
-        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
@@ -8225,7 +8153,6 @@ class SpineLayout extends DestroyableClass {
     this.spineItemsManager = spineItemsManager;
     this.context = context;
     this.settings = settings;
-    this.itemLayoutInformation = [];
     this.layoutSubject = new Subject();
     spineItemsManager.items$.pipe(
       switchMap((items) => {
@@ -8267,7 +8194,6 @@ class SpineLayout extends DestroyableClass {
       exhaustMap(() => {
         layoutInProgress.next(true);
         const manifest = this.context.manifest;
-        const newItemLayoutInformation = [];
         const isGloballyPrePaginated = isFullyPrePaginated(manifest) ?? false;
         return from(this.spineItemsManager.items).pipe(
           reduce(
@@ -8281,31 +8207,22 @@ class SpineLayout extends DestroyableClass {
                   item,
                   settings: this.settings,
                   spineItemsManager: this.spineItemsManager,
-                  verticalOffset,
-                  newItemLayoutInformation
+                  verticalOffset
                 })
               )
             ),
             of({ horizontalOffset: 0, verticalOffset: 0 })
           ),
           concatMap((layout$) => layout$),
-          map(() => {
-            const hasChanged = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
-              (old, index) => !isShallowEqual(old, newItemLayoutInformation[index])
-            );
-            this.itemLayoutInformation = newItemLayoutInformation;
-            Report.log(NAMESPACE, `layout`, {
-              hasChanged,
-              itemLayoutInformation: this.itemLayoutInformation
-            });
-            return { hasChanged };
+          tap$1(() => {
+            Report.log(NAMESPACE, `layout`);
           }),
           finalize(() => {
             layoutInProgress.next(false);
           })
         );
       }),
-      map(({ hasChanged }) => {
+      map(() => {
         const items = spineItemsManager.items;
         const spineItemsPagesAbsolutePositions = items.map((item) => {
           const itemLayout = this.getAbsolutePositionOf(item);
@@ -8346,7 +8263,6 @@ class SpineLayout extends DestroyableClass {
           []
         );
         return {
-          hasChanged,
           spineItemsAbsolutePositions: items.map(
             (item) => this.getAbsolutePositionOf(item)
           ),
@@ -8364,12 +8280,9 @@ class SpineLayout extends DestroyableClass {
   layout() {
     this.layoutSubject.next(void 0);
   }
-  /**
-   * It's important to not use x,y since we need the absolute position of each element. Otherwise x,y would be relative to
-   * current window (viewport).
-   */
   getAbsolutePositionOf(spineItemOrIndex) {
-    const fallback = {
+    var _a;
+    return ((_a = this.spineItemsManager.get(spineItemOrIndex)) == null ? void 0 : _a.layoutPosition) || {
       left: 0,
       right: 0,
       top: 0,
@@ -8379,16 +8292,160 @@ class SpineLayout extends DestroyableClass {
       x: 0,
       y: 0
     };
-    const spineItem = this.spineItemsManager.get(spineItemOrIndex);
-    const indexOfItem = spineItem ? this.spineItemsManager.items.indexOf(spineItem) : -1;
-    const layoutInformation = this.itemLayoutInformation[indexOfItem];
-    return layoutInformation || fallback;
   }
   destroy() {
     super.destroy();
     this.layoutSubject.complete();
   }
 }
+class SpineItemLayout extends DestroyableClass {
+  constructor(item, containerElement, context, hookManager, renderer) {
+    super();
+    this.item = item;
+    this.containerElement = containerElement;
+    this.context = context;
+    this.hookManager = hookManager;
+    this.renderer = renderer;
+    this.layoutTriggerSubject = new Subject();
+    this.lastLayout = null;
+    this.applyDimsAfterLayout = ({
+      blankPagePosition,
+      minimumWidth
+    }) => (stream) => {
+      return stream.pipe(
+        map((dims) => {
+          var _a;
+          const trustableLastLayout = isShallowEqual(
+            (_a = this.lastLayout) == null ? void 0 : _a.pageSize,
+            this.context.getPageSize()
+          ) ? this.lastLayout : void 0;
+          const { width: previousWidth, height: previousHeight } = trustableLastLayout ?? {};
+          const { width = previousWidth, height = previousHeight } = dims ?? {};
+          const { width: pageSizeWidth, height: pageSizeHeight } = this.context.getPageSize();
+          const safeWidth = this.validateDimension(
+            width ?? pageSizeWidth,
+            pageSizeWidth,
+            minimumWidth
+          );
+          const safeHeight = this.validateDimension(
+            height ?? pageSizeHeight,
+            pageSizeHeight,
+            pageSizeHeight
+          );
+          this.lastLayout = {
+            width: safeWidth,
+            height: safeHeight,
+            pageSize: this.context.getPageSize()
+          };
+          this.containerElement.style.width = `${safeWidth}px`;
+          this.containerElement.style.height = `${safeHeight}px`;
+          this.hookManager.execute(`item.onAfterLayout`, void 0, {
+            blankPagePosition,
+            item: this.item,
+            minimumWidth
+          });
+          return { width: safeWidth, height: safeHeight };
+        })
+      );
+    };
+    this.layout = (params) => {
+      const nextResult = deferNextResult(this.layout$.pipe(first$1()));
+      this.layoutTriggerSubject.next(params);
+      return nextResult();
+    };
+    this.adjustPositionOfElement = ({
+      right,
+      left,
+      top
+    }) => {
+      if (right !== void 0) {
+        this.containerElement.style.right = `${right}px`;
+      } else {
+        this.containerElement.style.removeProperty(`right`);
+      }
+      if (left !== void 0) {
+        this.containerElement.style.left = `${left}px`;
+      } else {
+        this.containerElement.style.removeProperty(`left`);
+      }
+      if (top !== void 0) {
+        this.containerElement.style.top = `${top}px`;
+      } else {
+        this.containerElement.style.removeProperty(`top`);
+      }
+    };
+    this.layoutProcess$ = this.layoutTriggerSubject.pipe(
+      switchMap((params) => {
+        const { blankPagePosition, minimumWidth, spreadPosition } = params;
+        this.hookManager.execute(`item.onBeforeLayout`, void 0, {
+          blankPagePosition,
+          item: this.item,
+          minimumWidth
+        });
+        const rendererLayout$ = this.renderer.layout({
+          blankPagePosition,
+          minPageSpread: minimumWidth / this.context.getPageSize().width,
+          minimumWidth,
+          spreadPosition
+        });
+        return merge(
+          of({ type: "start" }),
+          rendererLayout$.pipe(
+            this.applyDimsAfterLayout(params),
+            map(
+              (data) => ({
+                type: "end",
+                data
+              })
+            )
+          )
+        );
+      }),
+      share()
+    );
+    this.layout$ = this.layoutProcess$.pipe(
+      filter((event) => event.type === `end`),
+      map((event) => event.data),
+      share()
+    );
+  }
+  validateDimension(value, pageSize, minimum) {
+    if (value <= 0) return minimum;
+    const maxValue = Math.max(value, minimum);
+    const multiplier = Math.ceil(maxValue / pageSize);
+    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,
+      width,
+      height
+    };
+    return normalizedValues;
+  }
+}
 class DefaultRenderer extends DocumentRenderer {
   onUnload() {
     return EMPTY;
@@ -8419,28 +8476,6 @@ class SpineItem extends DestroyableClass {
     this.settings = settings;
     this.hookManager = hookManager;
     this.index = index;
-    this.layoutTriggerSubject = new Subject();
-    this.adjustPositionOfElement = ({
-      right,
-      left,
-      top
-    }) => {
-      if (right !== void 0) {
-        this.containerElement.style.right = `${right}px`;
-      } else {
-        this.containerElement.style.removeProperty(`right`);
-      }
-      if (left !== void 0) {
-        this.containerElement.style.left = `${left}px`;
-      } else {
-        this.containerElement.style.removeProperty(`left`);
-      }
-      if (top !== void 0) {
-        this.containerElement.style.top = `${top}px`;
-      } else {
-        this.containerElement.style.removeProperty(`top`);
-      }
-    };
     this.getBoundingRectOfElementFromSelector = (selector) => {
       var _a2, _b2, _c, _d;
       const frameElement = this.renderer.getDocumentFrame();
@@ -8451,28 +8486,12 @@ class SpineItem extends DestroyableClass {
         return (_d = (_c = frameElement.contentDocument) == null ? void 0 : _c.querySelector(selector)) == null ? void 0 : _d.getBoundingClientRect();
       }
     };
-    this.layout = (params) => {
-      const nextResult = deferNextResult(this.layout$.pipe(first()));
-      this.layoutTriggerSubject.next(params);
-      return nextResult();
-    };
     this.load = () => {
       this.renderer.load();
     };
     this.unload = () => {
       this.renderer.unload();
     };
-    this.getElementDimensions = () => {
-      const rect = this.containerElement.getBoundingClientRect();
-      const normalizedValues = {
-        ...rect,
-        // we want to round to first decimal because it's possible to have half pixel
-        // however browser engine can also gives back x.yyyy based on their precision
-        width: Math.round(rect.width * 10) / 10,
-        height: Math.round(rect.height * 10) / 10
-      };
-      return normalizedValues;
-    };
     this.destroy = () => {
       super.destroy();
       this.containerElement.remove();
@@ -8499,52 +8518,21 @@ class SpineItem extends DestroyableClass {
       resourcesHandler: this.resourcesHandler
     };
     this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
-    const layoutProcess$ = this.layoutTriggerSubject.pipe(
-      switchMap$1(({ blankPagePosition, minimumWidth, spreadPosition }) => {
-        this.hookManager.execute(`item.onBeforeLayout`, void 0, {
-          blankPagePosition,
-          item: this.item,
-          minimumWidth
-        });
-        const layout$ = this.renderer.layout({
-          blankPagePosition,
-          minPageSpread: minimumWidth / this.context.getPageSize().width,
-          minimumWidth,
-          spreadPosition
-        });
-        return merge(
-          of({ type: "start" }),
-          layout$.pipe(
-            map$1(({ height, width }) => {
-              this.containerElement.style.width = `${width}px`;
-              this.containerElement.style.height = `${height}px`;
-              this.hookManager.execute(`item.onAfterLayout`, void 0, {
-                blankPagePosition,
-                item: this.item,
-                minimumWidth
-              });
-              return {
-                type: "end",
-                data: { width, height }
-              };
-            })
-          )
-        );
-      }),
-      share$1()
+    this.spineItemLayout = new SpineItemLayout(
+      item,
+      this.containerElement,
+      context,
+      hookManager,
+      this.renderer
     );
-    this.isReady$ = layoutProcess$.pipe(
+    this.isReady$ = this.spineItemLayout.layoutProcess$.pipe(
       withLatestFrom$1(this.renderer.isLoaded$),
       map$1(([event, loaded]) => !!(event.type === `end` && loaded)),
       startWith(false),
       distinctUntilChanged(),
       shareReplay({ refCount: true, bufferSize: 1 })
     );
-    this.layout$ = layoutProcess$.pipe(
-      filter$1((event) => event.type === `end`),
-      map$1((event) => event.data),
-      share$1()
-    );
+    this.layout$ = this.spineItemLayout.layout$;
     this.needsLayout$ = merge(this.unloaded$, this.loaded$);
     merge(
       /**
@@ -8554,8 +8542,10 @@ class SpineItem extends DestroyableClass {
        * to layout changes may rely on the isReady value.
        */
       this.isReady$,
-      this.layout$
+      this.spineItemLayout.layout$
     ).pipe(takeUntil$1(this.destroy$)).subscribe();
+    this.layout = this.spineItemLayout.layout;
+    this.adjustPositionOfElement = this.spineItemLayout.adjustPositionOfElement;
   }
   get element() {
     return this.containerElement;
@@ -8571,6 +8561,9 @@ class SpineItem extends DestroyableClass {
   get readingDirection() {
     return this.renderer.readingDirection;
   }
+  get layoutPosition() {
+    return this.spineItemLayout.layoutPosition;
+  }
   get loaded$() {
     return this.renderer.state$.pipe(
       distinctUntilChanged(),