@prose-reader/core 1.199.0 → 1.200.0

package/dist/index.umd.cjs

@@ -2156,22 +2156,32 @@
   class SpineItemSpineLayout extends SpineElementLayout {
     constructor() {
       super(...arguments);
-      this.__symbol = Symbol(`SpineItemSpineLayout`);
+      this.__symbol = `SpineItemSpineLayout`;
     }
   }
   class SpineItemPageSpineLayout extends SpineElementLayout {
     constructor() {
       super(...arguments);
-      this.__symbol = Symbol(`SpineItemPageSpineLayout`);
+      this.__symbol = `SpineItemPageSpineLayout`;
     }
   }
   class SpinePosition {
     constructor(position) {
-      this.__symbol = Symbol(`SpinePosition`);
+      this.__symbol = `SpinePosition`;
       this.x = position.x;
       this.y = position.y;
     }
   }
+  class UnsafeSpinePosition {
+    constructor(position) {
+      this.__symbol = `UnsafeSpinePosition`;
+      this.x = position.x;
+      this.y = position.y;
+    }
+    static from(position) {
+      return new UnsafeSpinePosition(position);
+    }
+  }
   const spinePositionToSpineItemSpineLayout = ({
     position,
     pageSize
@@ -2747,7 +2757,13 @@
     );
     if (!isNewNavigationInCurrentItem) {
       return navigationResolver.getAdjustedPositionWithSafeEdge(
-        pageTurnDirection === `horizontal` ? { x: position.x - context.getPageSize().width, y: 0 } : { y: position.y - context.getPageSize().height, x: 0 }
+        pageTurnDirection === `horizontal` ? new SpinePosition({
+          x: position.x - context.getPageSize().width,
+          y: 0
+        }) : new SpinePosition({
+          y: position.y - context.getPageSize().height,
+          x: 0
+        })
       );
     }
     const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition({
@@ -2856,7 +2872,13 @@
     );
     if (!isNewNavigationInCurrentItem) {
       return navigationResolver.getAdjustedPositionWithSafeEdge(
-        pageTurnDirection === `horizontal` ? { x: position.x + context.getPageSize().width, y: 0 } : { y: position.y + context.getPageSize().height, x: 0 }
+        pageTurnDirection === `horizontal` ? new SpinePosition({
+          x: position.x + context.getPageSize().width,
+          y: 0
+        }) : new SpinePosition({
+          y: position.y + context.getPageSize().height,
+          x: 0
+        })
       );
     }
     const readingOrderPosition = spineLocator.getSpinePositionFromSpineItemPosition({
@@ -2918,7 +2940,7 @@
     constructor(reader) {
       this.reader = reader;
       this.movingLastDelta = { x: 0, y: 0 };
-      this.movingLastPosition = { x: 0, y: 0 };
+      this.movingLastPosition = new SpinePosition({ x: 0, y: 0 });
       this.unlock = void 0;
     }
     turnRight() {
@@ -3114,8 +3136,8 @@
     constructor(reader) {
       this.reader = reader;
       this.lastDelta = { x: 0, y: 0 };
-      this.lastPosition = { x: 0, y: 0 };
-      this.lastStartPosition = { x: 0, y: 0 };
+      this.lastPosition = new SpinePosition({ x: 0, y: 0 });
+      this.lastStartPosition = new SpinePosition({ x: 0, y: 0 });
       this.unlock = void 0;
     }
     moveTo(delta, { final, start } = {}) {
@@ -3134,16 +3156,19 @@
       }
       let navigation = this.reader.navigation.getNavigation().position;
       if (delta) {
+        const viewportScale = this.reader.context.absoluteViewport.width / this.reader.context.relativeViewport.width;
         const correctedX = Math.floor(delta.x) - (((_b = this.lastDelta) == null ? void 0 : _b.x) || 0);
         const correctedY = Math.floor(delta.y) - (((_c = this.lastDelta) == null ? void 0 : _c.y) || 0);
-        navigation = {
-          x: Math.floor(
-            pageTurnDirection === `horizontal` ? this.lastPosition.x - correctedX : 0
-          ),
-          y: Math.floor(
-            pageTurnDirection === `horizontal` ? 0 : this.lastPosition.y - correctedY
-          )
-        };
+        const x = Math.floor(
+          pageTurnDirection === `horizontal` ? this.lastPosition.x - correctedX / viewportScale : 0
+        );
+        const y = Math.floor(
+          pageTurnDirection === `horizontal` ? 0 : this.lastPosition.y - correctedY / viewportScale
+        );
+        navigation = new SpinePosition({
+          x,
+          y
+        });
         this.lastDelta = delta;
       } else {
         navigation = this.lastPosition;
@@ -5320,6 +5345,39 @@
     };
   };
   const isFullyPrePaginated = (manifest) => (manifest == null ? void 0 : manifest.renditionLayout) === "pre-paginated" || (manifest == null ? void 0 : manifest.spineItems.every((item) => item.renditionLayout === "pre-paginated"));
+  class ViewportSlicePosition extends DOMRect {
+    constructor() {
+      super(...arguments);
+      this.__symbol = Symbol(`ViewportPosition`);
+    }
+    static from(positionOrRect, viewport) {
+      if (viewport) {
+        const position = positionOrRect;
+        return new ViewportSlicePosition(
+          position.x,
+          position.y,
+          viewport.width,
+          viewport.height
+        );
+      }
+      const rect = positionOrRect;
+      return new ViewportSlicePosition(rect.x, rect.y, rect.width, rect.height);
+    }
+  }
+  class AbsoluteViewport {
+    constructor({ width, height }) {
+      this.__symbol = Symbol(`AbsoluteViewport`);
+      this.width = width;
+      this.height = height;
+    }
+  }
+  class RelativeViewport {
+    constructor({ width, height }) {
+      this.__symbol = Symbol(`RelativeViewport`);
+      this.width = width;
+      this.height = height;
+    }
+  }
   class BridgeEvent {
     constructor() {
       this.navigationSubject = new rxjs.ReplaySubject(1);
@@ -5449,6 +5507,28 @@
         height: visibleAreaRect.height
       };
     }
+    get absoluteViewport() {
+      const absoluteViewport = this._stateSubject.getValue().visibleAreaRect;
+      return new AbsoluteViewport({
+        width: absoluteViewport.width,
+        height: absoluteViewport.height
+      });
+    }
+    /**
+     * @important
+     *
+     * Contains long floating values.
+     */
+    get relativeViewport() {
+      var _a, _b;
+      const absoluteViewport = this.absoluteViewport;
+      const viewportRect = (_b = (_a = this._stateSubject.getValue().containerElement) == null ? void 0 : _a.children[0]) == null ? void 0 : _b.getBoundingClientRect();
+      const relativeScale = ((viewportRect == null ? void 0 : viewportRect.width) ?? absoluteViewport.width) / absoluteViewport.width;
+      return new RelativeViewport({
+        width: absoluteViewport.width / relativeScale,
+        height: absoluteViewport.height / relativeScale
+      });
+    }
   }
   class HookManager {
     constructor() {
@@ -5802,7 +5882,7 @@
   }) => {
     const isOffsetNotAtEdge = x % visibleAreaRectWidth !== 0;
     const correctedX = isOffsetNotAtEdge ? x - pageSizeWidth : x;
-    return { x: correctedX, y };
+    return new SpinePosition({ x: correctedX, y });
   };
   const getAdjustedPositionWithSafeEdge = ({
     position,
@@ -5821,16 +5901,16 @@
     const maximumYOffset = distanceOfLastSpineItem.bottom - pageSizeHeight;
     const y = Math.min(Math.max(0, position.y), maximumYOffset);
     if (isRTL) {
-      return {
+      return new SpinePosition({
         x: Math.max(Math.min(0, position.x), distanceOfLastSpineItem.left),
         y
-      };
+      });
     }
     const maximumXOffset = distanceOfLastSpineItem.right - visibleAreaRectWidth;
-    return {
+    return new SpinePosition({
       x: Math.min(Math.max(0, position.x), maximumXOffset),
       y
-    };
+    });
   };
   const getNavigationForPosition = ({
     viewportPosition,
@@ -5858,7 +5938,7 @@
         visibleAreaRectWidth: context.state.visibleAreaRect.width
       });
     }
-    return { x: 0, y: 0 };
+    return new SpinePosition({ x: 0, y: 0 });
   };
   const getNavigationForSpineItemPage = ({
     pageIndex,
@@ -5872,7 +5952,7 @@
     if (!spineItem) {
       const xPositionForPageIndex = pageIndex * context.getPageSize().width;
       return getNavigationForPosition({
-        viewportPosition: { x: xPositionForPageIndex, y: 0 },
+        viewportPosition: new SpinePosition({ x: xPositionForPageIndex, y: 0 }),
         context,
         spineItemNavigationResolver,
         spineLocator
@@ -6018,7 +6098,6 @@
   }) => {
     const spineItemNavigator = createNavigationResolver$1({ context, settings });
     const arePositionsDifferent = (a, b) => a.x !== b.x || a.y !== b.y;
-    const areNavigationDifferent = (a, b) => arePositionsDifferent(a, b) || !!a.spineItem && !!b.spineItem && a.spineItem !== b.spineItem;
     const getNavigationForCfi = (cfi) => {
       const spineItem = spineItemsManager.getSpineItemFromCfi(cfi);
       const { node, offset = 0 } = resolveCfi({
@@ -6062,7 +6141,7 @@
           visibleAreaRectWidth: context.state.visibleAreaRect.width
         });
       }
-      return { x: 0, y: 0 };
+      return new SpinePosition({ x: 0, y: 0 });
     };
     const getMostPredominantNavigationForPosition = (viewportPosition) => {
       const pageTurnDirection = settings.values.computedPageTurnDirection;
@@ -6070,10 +6149,10 @@
       const triggerXPosition = pageTurnDirection === `horizontal` ? viewportPosition.x + context.state.visibleAreaRect.width * triggerPercentage : 0;
       const triggerYPosition = pageTurnDirection === `horizontal` ? 0 : viewportPosition.y + context.state.visibleAreaRect.height * triggerPercentage;
       const midScreenPositionSafePosition = getAdjustedPositionWithSafeEdge({
-        position: {
+        position: new SpinePosition({
           x: triggerXPosition,
           y: triggerYPosition
-        },
+        }),
         isRTL: context.isRTL(),
         pageSizeHeight: context.getPageSize().height,
         visibleAreaRectWidth: context.state.visibleAreaRect.width,
@@ -6135,7 +6214,6 @@
         spineLayout
       }),
       isNavigationGoingForwardFrom,
-      areNavigationDifferent,
       arePositionsDifferent,
       getAdjustedPositionForSpread: (position) => getAdjustedPositionForSpread({
         position,
@@ -6152,7 +6230,7 @@
   }) => {
     if (!spineElement) throw new Error("Invalid spine element");
     const spineScaleX = spineElement.getBoundingClientRect().width / spineElement.offsetWidth;
-    const scaledDownPosition = {
+    const scaledDownPosition = new SpinePosition({
       x: getNewScaledOffset({
         newScale: 1,
         oldScale: spineScaleX,
@@ -6167,9 +6245,27 @@
         pageSize: spineElement.scrollHeight,
         scrollOffset: y
       })
-    };
+    });
     return scaledDownPosition;
   };
+  const spinePositionToTranslation = (position) => {
+    return {
+      x: -position.x,
+      y: -position.y
+    };
+  };
+  const translationToSpinePosition = (translation) => {
+    if (translation instanceof DOMMatrix) {
+      return new SpinePosition({
+        x: -translation.e,
+        y: -translation.f
+      });
+    }
+    return new SpinePosition({
+      x: -translation.x,
+      y: -translation.y
+    });
+  };
   const NAMESPACE$3 = `navigation/ViewportNavigator`;
   const report$3 = Report.namespace(NAMESPACE$3);
   class ViewportNavigator extends DestroyableClass {
@@ -6314,11 +6410,15 @@
      * @see https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
      * for remark about flicker / fonts smoothing
      */
-    setViewportPosition({ x, y }) {
+    setViewportPosition(position) {
       const element = this.viewportElement$.getValue();
       if (this.settings.values.computedPageTurnMode === `scrollable`) {
         this.scrollingSubject.next(true);
-        element.scrollTo({ left: x, top: y, behavior: "instant" });
+        element.scrollTo({
+          left: position.x,
+          top: position.y,
+          behavior: "instant"
+        });
         rxjs.timer(1).pipe(
           rxjs.tap(() => {
             this.scrollingSubject.next(false);
@@ -6326,36 +6426,37 @@
           rxjs.takeUntil(rxjs.merge(this.scrollingSubject.pipe(rxjs.skip(1)), this.destroy$))
         ).subscribe();
       } else {
-        element.style.transform = `translate(${-x}px, -${y}px)`;
+        const translation = spinePositionToTranslation(position);
+        element.style.transform = `translate(${translation.x}px, ${translation.y}px)`;
       }
       this.hookManager.execute("onViewportOffsetAdjust", void 0, {});
     }
     navigate(navigation) {
       this.navigateSubject.next(navigation);
     }
+    /**
+     * @important The reason we use computed transform and not bounding client is to avoid
+     * transofmration inconsistency between the viewport and the spine.
+     */
     get viewportPosition() {
       const element = this.viewportElement$.getValue();
       if (this.settings.values.computedPageTurnMode === `scrollable`) {
         return getScaledDownPosition({
           element,
-          position: {
+          position: new SpinePosition({
             x: (element == null ? void 0 : element.scrollLeft) ?? 0,
             y: (element == null ? void 0 : element.scrollTop) ?? 0
-          },
+          }),
           spineElement: this.spine.element
         });
       }
-      const { x, y } = (element == null ? void 0 : element.getBoundingClientRect()) ?? {
-        x: 0,
-        y: 0
-      };
-      return {
-        // 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
-        // @see https://stackoverflow.com/questions/13847053/difference-between-and-math-floor for ~~
-        x: ~~(x * -1 * 10) / 10,
-        y: ~~(Math.abs(y) * 10) / 10
-      };
+      const computedStyle = window.getComputedStyle(element);
+      const transform = computedStyle.transform || computedStyle.webkitTransform;
+      if (!transform || transform === "none") {
+        return new SpinePosition({ x: 0, y: 0 });
+      }
+      const matrix = new DOMMatrix(transform);
+      return translationToSpinePosition(matrix);
     }
   }
   class Locker {
@@ -6419,10 +6520,10 @@
               const targetElement = event.target;
               const scaledDownPosition = getScaledDownPosition({
                 element: targetElement,
-                position: {
+                position: new SpinePosition({
                   x: targetElement.scrollLeft ?? 0,
                   y: targetElement.scrollTop ?? 0
-                },
+                }),
                 spineElement: this.spine.element
               });
               this.navigate({
@@ -6616,7 +6717,7 @@
           return {
             navigation: {
               ...navigation,
-              position: { x: 0, y: 0 }
+              position: new SpinePosition({ x: 0, y: 0 })
             },
             ...rest
           };
@@ -6815,7 +6916,7 @@
   }) => {
     const spineItem = spineItemsManager.get(navigation.spineItem);
     if (!spineItem) {
-      return rxjs.of({ x: 0, y: 0 });
+      return rxjs.of(new SpinePosition({ x: 0, y: 0 }));
     }
     return spineItem.isReady$.pipe(
       rxjs.first(),
@@ -7631,6 +7732,14 @@
       };
     }
   }
+  const translateSpinePositionToRelativeViewport = (absolutePosition, absoluteViewport, relativeViewport) => {
+    const offsetX = (relativeViewport.width - absoluteViewport.width) / 2;
+    const offsetY = (relativeViewport.height - absoluteViewport.height) / 2;
+    return new UnsafeSpinePosition({
+      x: absolutePosition.x - offsetX,
+      y: absolutePosition.y - offsetY
+    });
+  };
   const getAbsolutePageIndexFromPageIndex = ({
     pageIndex,
     spineItemOrId,
@@ -7676,10 +7785,10 @@
     visibleWidthOfItem,
     visibleHeightOfItem,
     threshold,
-    context
+    viewportPosition
   }) => {
-    const widthRatioOfSpaceTakenInScreen = visibleWidthOfItem / context.state.visibleAreaRect.width;
-    const heightRatioOfSpaceTakenInScreen = visibleHeightOfItem / context.state.visibleAreaRect.height;
+    const widthRatioOfSpaceTakenInScreen = visibleWidthOfItem / viewportPosition.width;
+    const heightRatioOfSpaceTakenInScreen = visibleHeightOfItem / viewportPosition.height;
     const isItemVisibleEnoughOnScreen = heightRatioOfSpaceTakenInScreen >= threshold && widthRatioOfSpaceTakenInScreen >= threshold;
     return isItemVisibleEnoughOnScreen;
   };
@@ -7694,14 +7803,13 @@
     },
     threshold,
     viewportPosition,
-    restrictToScreen,
-    context
+    restrictToScreen
   }) => {
     const viewportLeft = viewportPosition.x;
-    const viewportRight = viewportPosition.x + (context.state.visibleAreaRect.width - 1);
+    const viewportRight = viewportPosition.x + (viewportPosition.width - 1);
     const viewportTop = viewportPosition.y;
     const viewportBottom = Math.max(
-      viewportPosition.y + (context.state.visibleAreaRect.height - 1),
+      viewportPosition.y + (viewportPosition.height - 1),
       0
     );
     const visibleWidthOfItem = Math.max(
@@ -7718,7 +7826,7 @@
       threshold,
       visibleHeightOfItem,
       visibleWidthOfItem,
-      context
+      viewportPosition
     });
     if (restrictToScreen) {
       return { visible: isItemVisibleEnoughOnScreen };
@@ -7804,7 +7912,8 @@
     spineItemsManager,
     context,
     settings,
-    spineLayout
+    spineLayout,
+    useAbsoluteViewport = true
   }) => {
     const fallbackSpineItem = getSpineItemFromPosition({
       position,
@@ -7815,12 +7924,21 @@
     const spineItemsVisible = spineItemsManager.items.reduce(
       (acc, spineItem) => {
         const itemPosition = spineLayout.getSpineItemSpineLayoutInfo(spineItem);
+        const viewport = useAbsoluteViewport ? context.absoluteViewport : context.relativeViewport;
+        const relativeSpinePosition = translateSpinePositionToRelativeViewport(
+          position,
+          context.absoluteViewport,
+          viewport
+        );
+        const viewportPosition = ViewportSlicePosition.from(
+          relativeSpinePosition,
+          viewport
+        );
         const { visible } = getItemVisibilityForPosition({
           itemPosition,
           threshold,
-          viewportPosition: position,
-          restrictToScreen,
-          context
+          viewportPosition,
+          restrictToScreen
         });
         if (visible) {
           return [...acc, spineItem];
@@ -7846,25 +7964,20 @@
     settings,
     spineLayout
   }) => {
-    const getSpineItemPositionFromSpinePosition = Report.measurePerformance(
-      `getSpineItemPositionFromSpinePosition`,
-      10,
-      (position, spineItem) => {
-        const { left, top } = spineLayout.getSpineItemSpineLayoutInfo(spineItem);
-        return new SpineItemPosition({
-          /**
-           * when using spread the item could be on the right and therefore will be negative
-           * @example
-           * 400 (position = viewport), page of 200
-           * 400 - 600 = -200.
-           * However we can assume we are at 0, because we in fact can see the beginning of the item
-           */
-          x: Math.max(position.x - left, 0),
-          y: Math.max(position.y - top, 0)
-        });
-      },
-      { disable: true }
-    );
+    const getSpineItemPositionFromSpinePosition = (position, spineItem) => {
+      const { left, top } = spineLayout.getSpineItemSpineLayoutInfo(spineItem);
+      return new SpineItemPosition({
+        /**
+         * when using spread the item could be on the right and therefore will be negative
+         * @example
+         * 400 (position = viewport), page of 200
+         * 400 - 600 = -200.
+         * However we can assume we are at 0, because we in fact can see the beginning of the item
+         */
+        x: Math.max(position.x - left, 0),
+        y: Math.max(position.y - top, 0)
+      });
+    };
     const getSpinePositionFromSpineItem = (spineItem) => {
       return getSpinePositionFromSpineItemPosition({
         spineItemPosition: new SpineItemPosition({ x: 0, y: 0 }),
@@ -7896,7 +8009,8 @@
       position,
       threshold,
       spineItem,
-      restrictToScreen
+      restrictToScreen,
+      useAbsoluteViewport = true
     }) => {
       const numberOfPages = spineItem.numberOfPages;
       const pages = Array.from(Array(numberOfPages)).map((_, index) => {
@@ -7922,9 +8036,18 @@
       });
       const pagesVisible = pages.reduce(
         (acc, { absolutePosition, index }) => {
+          const viewport = useAbsoluteViewport ? context.absoluteViewport : context.relativeViewport;
+          const relativeSpinePosition = translateSpinePositionToRelativeViewport(
+            position,
+            context.absoluteViewport,
+            viewport
+          );
+          const viewportPosition = ViewportSlicePosition.from(
+            relativeSpinePosition,
+            viewport
+          );
           const { visible } = getItemVisibilityForPosition({
-            context,
-            viewportPosition: position,
+            viewportPosition,
             restrictToScreen,
             threshold,
             itemPosition: absolutePosition
@@ -8029,7 +8152,8 @@
           const { numberOfAdjacentSpineItemToPreLoad } = settings.values;
           const { beginIndex = 0, endIndex = 0 } = spineLocator.getVisibleSpineItemsFromPosition({
             position: navigation.position,
-            threshold: 0
+            threshold: 0,
+            useAbsoluteViewport: false
           }) || {};
           const beginMaximumIndex = beginIndex - numberOfAdjacentSpineItemToPreLoad;
           const endMaximumIndex = endIndex + numberOfAdjacentSpineItemToPreLoad;
@@ -8792,17 +8916,15 @@
       const margin = 0;
       const marginTop = 0;
       const marginBottom = 0;
-      const containerElementWidth = dimensions.width;
-      const containerElementEvenWidth = containerElementWidth;
       element.style.setProperty(`overflow`, `hidden`);
       element.style.height = `${dimensions.height - marginTop - marginBottom}px`;
-      element.style.width = `${containerElementEvenWidth - 2 * margin}px`;
+      element.style.width = `${dimensions.width - 2 * margin}px`;
       const elementRect = element.getBoundingClientRect();
       context.update({
         visibleAreaRect: {
           x: elementRect.x,
           y: elementRect.y,
-          width: containerElementEvenWidth,
+          width: dimensions.width,
           height: dimensions.height
         }
       });