@prose-reader/core 1.198.0 → 1.200.0

package/dist/index.js

@@ -2156,22 +2156,32 @@ class SpineElementLayout {
 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 @@ const getNavigationForLeftSinglePage = ({
   );
   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 @@ const getNavigationForRightSinglePage = ({
   );
   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 @@ class ManualNavigator {
   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 @@ class PanNavigator {
   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 @@ class PanNavigator {
     }
     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 resolveCfi = ({
   };
 };
 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 ReplaySubject(1);
@@ -5449,6 +5507,28 @@ class Context {
       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() {
@@ -5528,7 +5608,7 @@ class HookManager {
 }
 const getItemOffsetFromPageIndex = (pageWidth, pageIndex, itemWidth) => {
   const lastPageOffset = itemWidth - pageWidth;
-  const logicalOffset = itemWidth * (pageIndex * pageWidth) / itemWidth;
+  const logicalOffset = itemWidth * (pageIndex * pageWidth) / (itemWidth || 1);
   return Math.max(0, Math.min(lastPageOffset, logicalOffset));
 };
 const calculateNumberOfPagesForItem = (itemWidth, pageWidth) => {
@@ -5802,7 +5882,7 @@ const getAdjustedPositionForSpread = ({
 }) => {
   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 getAdjustedPositionWithSafeEdge = ({
   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 @@ const getNavigationForPosition = ({
       visibleAreaRectWidth: context.state.visibleAreaRect.width
     });
   }
-  return { x: 0, y: 0 };
+  return new SpinePosition({ x: 0, y: 0 });
 };
 const getNavigationForSpineItemPage = ({
   pageIndex,
@@ -5872,7 +5952,7 @@ const getNavigationForSpineItemPage = ({
   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 createNavigationResolver = ({
 }) => {
   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 @@ const createNavigationResolver = ({
         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 createNavigationResolver = ({
     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 @@ const createNavigationResolver = ({
       spineLayout
     }),
     isNavigationGoingForwardFrom,
-    areNavigationDifferent,
     arePositionsDifferent,
     getAdjustedPositionForSpread: (position) => getAdjustedPositionForSpread({
       position,
@@ -6152,7 +6230,7 @@ const getScaledDownPosition = ({
 }) => {
   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 @@ const getScaledDownPosition = ({
       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 @@ class ViewportNavigator extends DestroyableClass {
    * @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"
+      });
       timer(1).pipe(
         tap$1(() => {
           this.scrollingSubject.next(false);
@@ -6326,36 +6426,37 @@ class ViewportNavigator extends DestroyableClass {
         takeUntil(merge(this.scrollingSubject.pipe(skip$1(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 @@ class UserNavigator extends DestroyableClass {
             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 @@ const withFallbackPosition = ({
         return {
           navigation: {
             ...navigation,
-            position: { x: 0, y: 0 }
+            position: new SpinePosition({ x: 0, y: 0 })
           },
           ...rest
         };
@@ -6815,7 +6916,7 @@ const restoreNavigationForControlledPageTurnMode = ({
 }) => {
   const spineItem = spineItemsManager.get(navigation.spineItem);
   if (!spineItem) {
-    return of({ x: 0, y: 0 });
+    return of(new SpinePosition({ x: 0, y: 0 }));
   }
   return spineItem.isReady$.pipe(
     first$1(),
@@ -7631,6 +7732,14 @@ class ReaderSettingsManager extends SettingsManager3 {
     };
   }
 }
+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 @@ const isItemVisibleOnScreenByThresholdForPosition = ({
   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 @@ const getItemVisibilityForPosition = ({
   },
   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 @@ const getItemVisibilityForPosition = ({
     threshold,
     visibleHeightOfItem,
     visibleWidthOfItem,
-    context
+    viewportPosition
   });
   if (restrictToScreen) {
     return { visible: isItemVisibleEnoughOnScreen };
@@ -7804,7 +7912,8 @@ const getVisibleSpineItemsFromPosition = ({
   spineItemsManager,
   context,
   settings,
-  spineLayout
+  spineLayout,
+  useAbsoluteViewport = true
 }) => {
   const fallbackSpineItem = getSpineItemFromPosition({
     position,
@@ -7815,12 +7924,21 @@ const getVisibleSpineItemsFromPosition = ({
   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 @@ const createSpineLocator = ({
   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 @@ const createSpineLocator = ({
     position,
     threshold,
     spineItem,
-    restrictToScreen
+    restrictToScreen,
+    useAbsoluteViewport = true
   }) => {
     const numberOfPages = spineItem.numberOfPages;
     const pages = Array.from(Array(numberOfPages)).map((_, index) => {
@@ -7922,9 +8036,18 @@ const createSpineLocator = ({
     });
     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 @@ class SpineItemsLoader extends DestroyableClass {
         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 createReader = (inputSettings) => {
     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
       }
     });