@prose-reader/core 1.193.0 → 1.194.0

package/dist/index.umd.cjs

@@ -3301,7 +3301,7 @@
   };
   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(
@@ -3365,7 +3365,7 @@
     );
   };
   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,
@@ -5565,7 +5565,7 @@
         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(
@@ -5585,7 +5585,7 @@
       frame.contentWindow.document.body !== null) {
         const { x: left, y: top } = getSpineItemPositionFromPageIndex({
           pageIndex,
-          itemLayout: spineItem.getElementDimensions(),
+          itemLayout: spineItem.layoutPosition,
           context,
           isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting()
         });
@@ -5604,7 +5604,7 @@
       return void 0;
     };
     const getSpineItemClosestPositionFromUnsafePosition = (unsafePosition, spineItem) => {
-      const { width, height } = spineItem.getElementDimensions();
+      const { width, height } = spineItem.layoutPosition;
       const adjustedPosition = {
         x: getClosestValidOffsetFromApproximateOffsetInPages(
           unsafePosition.x,
@@ -5621,7 +5621,7 @@
     };
     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,
@@ -5659,7 +5659,7 @@
           context,
           isUsingVerticalWriting: !!item.isUsingVerticalWriting(),
           settings,
-          itemLayout: item.getElementDimensions()
+          itemLayout: item.layoutPosition
         });
       },
       getSpineItemNumberOfPages: (params) => getSpineItemNumberOfPages({
@@ -5675,7 +5675,7 @@
   }) => {
     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,
@@ -5684,7 +5684,7 @@
       return spineItemLocator.getSpineItemPositionFromPageIndex({
         pageIndex: numberOfPages - 1,
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-        itemLayout: spineItem.getElementDimensions()
+        itemLayout: spineItem.layoutPosition
       });
     };
     const getNavigationFromNode = (spineItem, node, offset) => {
@@ -5751,7 +5751,7 @@
     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;
@@ -5910,7 +5910,7 @@
     const spineItemNavigation = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
       pageIndex,
       isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-      itemLayout: spineItem.getElementDimensions()
+      itemLayout: spineItem.layoutPosition
     });
     const readingOffset = spineLocator.getSpinePositionFromSpineItemPosition({
       spineItemPosition: spineItemNavigation,
@@ -6677,7 +6677,7 @@
         const positionInSpineItem = spineLocator.spineItemLocator.getSpineItemPositionFromPageIndex({
           pageIndex: beginPageIndexForDirection,
           isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-          itemLayout: spineItem.getElementDimensions()
+          itemLayout: spineItem.layoutPosition
         });
         return positionInSpineItem;
       }
@@ -7376,13 +7376,13 @@
               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,
@@ -7557,24 +7557,44 @@
       };
     }
   }
-  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,
@@ -7650,57 +7670,6 @@
       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,
@@ -7746,44 +7715,75 @@
     }
     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,
@@ -7844,7 +7844,7 @@
       spineItem,
       restrictToScreen
     }) => {
-      const { height, width } = spineItem.getElementDimensions();
+      const { height, width } = spineItem.layoutPosition;
       const numberOfPages = spineItemLocator.getSpineItemNumberOfPages({
         isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
         itemHeight: height,
@@ -7854,7 +7854,7 @@
         const spineItemPosition = spineItemLocator.getSpineItemPositionFromPageIndex({
           pageIndex: index,
           isUsingVerticalWriting: !!spineItem.isUsingVerticalWriting(),
-          itemLayout: spineItem.getElementDimensions()
+          itemLayout: spineItem.layoutPosition
         });
         const spinePosition = getSpinePositionFromSpineItemPosition({
           spineItemPosition,
@@ -8079,8 +8079,7 @@
     isGloballyPrePaginated,
     settings,
     index,
-    item,
-    newItemLayoutInformation
+    item
   }) => {
     let minimumWidth = context.getPageSize().width;
     let blankPagePosition = `none`;
@@ -8132,16 +8131,6 @@
           }
           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
@@ -8150,17 +8139,6 @@
         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
@@ -8175,7 +8153,6 @@
       this.spineItemsManager = spineItemsManager;
       this.context = context;
       this.settings = settings;
-      this.itemLayoutInformation = [];
       this.layoutSubject = new rxjs.Subject();
       spineItemsManager.items$.pipe(
         rxjs.switchMap((items) => {
@@ -8217,7 +8194,6 @@
         rxjs.exhaustMap(() => {
           layoutInProgress.next(true);
           const manifest = this.context.manifest;
-          const newItemLayoutInformation = [];
           const isGloballyPrePaginated = isFullyPrePaginated(manifest) ?? false;
           return rxjs.from(this.spineItemsManager.items).pipe(
             rxjs.reduce(
@@ -8231,31 +8207,22 @@
                     item,
                     settings: this.settings,
                     spineItemsManager: this.spineItemsManager,
-                    verticalOffset,
-                    newItemLayoutInformation
+                    verticalOffset
                   })
                 )
               ),
               rxjs.of({ horizontalOffset: 0, verticalOffset: 0 })
             ),
             rxjs.concatMap((layout$) => layout$),
-            rxjs.map(() => {
-              const hasChanged = this.itemLayoutInformation.length !== newItemLayoutInformation.length || this.itemLayoutInformation.some(
-                (old, index) => !shared.isShallowEqual(old, newItemLayoutInformation[index])
-              );
-              this.itemLayoutInformation = newItemLayoutInformation;
-              Report.log(NAMESPACE, `layout`, {
-                hasChanged,
-                itemLayoutInformation: this.itemLayoutInformation
-              });
-              return { hasChanged };
+            rxjs.tap(() => {
+              Report.log(NAMESPACE, `layout`);
             }),
             rxjs.finalize(() => {
               layoutInProgress.next(false);
             })
           );
         }),
-        rxjs.map(({ hasChanged }) => {
+        rxjs.map(() => {
           const items = spineItemsManager.items;
           const spineItemsPagesAbsolutePositions = items.map((item) => {
             const itemLayout = this.getAbsolutePositionOf(item);
@@ -8296,7 +8263,6 @@
             []
           );
           return {
-            hasChanged,
             spineItemsAbsolutePositions: items.map(
               (item) => this.getAbsolutePositionOf(item)
             ),
@@ -8314,12 +8280,9 @@
     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,
@@ -8329,10 +8292,6 @@
         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();
@@ -8457,6 +8416,35 @@
       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() {
@@ -8504,17 +8492,6 @@
       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();
@@ -8584,6 +8561,9 @@
     get readingDirection() {
       return this.renderer.readingDirection;
     }
+    get layoutPosition() {
+      return this.spineItemLayout.layoutPosition;
+    }
     get loaded$() {
       return this.renderer.state$.pipe(
         operators.distinctUntilChanged(),