@prose-reader/core 1.201.0 → 1.203.0

package/dist/index.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("rxjs"), require("rxjs/operators"), require("@prose-reader/shared"), require("reactjrx")) : typeof define === "function" && define.amd ? define(["exports", "rxjs", "rxjs/operators", "@prose-reader/shared", "reactjrx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.prose = {}, global.rxjs, global.operators, global.shared, global.reactjrx));
-})(this, function(exports2, rxjs, operators, shared, reactjrx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("rxjs"), require("rxjs/operators"), require("@prose-reader/shared")) : typeof define === "function" && define.amd ? define(["exports", "rxjs", "rxjs/operators", "@prose-reader/shared"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.prose = {}, global.rxjs, global.operators, global.shared));
+})(this, function(exports2, rxjs, operators, shared) {
   "use strict";
   const getAttributeValueFromString = (string, key) => {
     const regExp = new RegExp(`${key}\\s*=\\s*([0-9.]+)`, `i`);
@@ -677,6 +677,17 @@
       return () => observer.disconnect();
     });
   };
+  function observeIntersection(element, options) {
+    return new rxjs.Observable((observer) => {
+      const intersectionObserver = new IntersectionObserver((entries) => {
+        observer.next(entries);
+      }, options);
+      intersectionObserver.observe(element);
+      return () => {
+        intersectionObserver.disconnect();
+      };
+    });
+  }
   class SettingsManagerOverload {
     constructor(initialSettings, settingsManager) {
       this.settingsManager = settingsManager;
@@ -731,9 +742,12 @@
         ...this.outputSettings
       };
     }
-    watch(keys) {
+    watch(keyOrKeys) {
+      if (Array.isArray(keyOrKeys)) {
+        return this.values$.pipe(watchKeys(keyOrKeys));
+      }
       return this.values$.pipe(
-        mapKeysTo(keys),
+        operators.map((result) => result[keyOrKeys]),
         operators.distinctUntilChanged(shared.isShallowEqual)
       );
     }
@@ -931,7 +945,7 @@
       this.destroySubject.complete();
     }
   }
-  class DocumentRenderer extends DestroyableClass {
+  const _DocumentRenderer = class _DocumentRenderer extends DestroyableClass {
     constructor(params) {
       super();
       this.triggerSubject = new rxjs.Subject();
@@ -1021,6 +1035,12 @@
       );
       rxjs.merge(unload$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
+    setDocumentContainer(element) {
+      this._documentContainer = element;
+      this._documentContainer.classList.add(
+        _DocumentRenderer.DOCUMENT_CONTAINER_CLASS_NAME
+      );
+    }
     attach() {
       if (this.documentContainer) {
         this.containerElement.appendChild(this.documentContainer);
@@ -1028,8 +1048,8 @@
     }
     detach() {
       var _a;
-      (_a = this.documentContainer) == null ? void 0 : _a.remove();
-      this.documentContainer = void 0;
+      (_a = this._documentContainer) == null ? void 0 : _a.remove();
+      this._documentContainer = void 0;
     }
     get state$() {
       return this.stateSubject;
@@ -1070,8 +1090,12 @@
       return rxjs.defer(() => this.onLayout(params)).pipe();
     }
     destroy() {
-      super.destroy();
+      this.unload();
       this.stateSubject.complete();
+      super.destroy();
+    }
+    get documentContainer() {
+      return this._documentContainer;
     }
     get writingMode() {
       return void 0;
@@ -1090,7 +1114,9 @@
       }
       return ((_a = this.context.manifest) == null ? void 0 : _a.renditionLayout) ?? "reflowable";
     }
-  }
+  };
+  _DocumentRenderer.DOCUMENT_CONTAINER_CLASS_NAME = `prose-reader-document-container`;
+  let DocumentRenderer = _DocumentRenderer;
   const defaultGetResource = (item) => new URL(item.href);
   class ResourceHandler {
     constructor(item, settings) {
@@ -1883,7 +1909,7 @@
     }
     onCreateDocument() {
       const frameElement = createFrameElement();
-      this.documentContainer = frameElement;
+      this.setDocumentContainer(frameElement);
       return rxjs.of(frameElement);
     }
     onLoadDocument() {
@@ -2053,6 +2079,7 @@
         pageHorizontalMargin,
         pageVerticalMargin,
         layoutLayerTransition,
+        viewportMode,
         ...rest
       } = settings;
       return rest;
@@ -2062,7 +2089,8 @@
         layoutAutoResize: "container",
         pageHorizontalMargin: 24,
         pageVerticalMargin: 24,
-        layoutLayerTransition: true
+        layoutLayerTransition: true,
+        viewportMode: "normal"
       };
     }
   };
@@ -2240,6 +2268,24 @@
     info$.pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
     return { layout$, info$ };
   };
+  const createViewportModeHandler = (reader, viewportMode$) => {
+    return viewportMode$.pipe(
+      rxjs.tap((viewportMode) => {
+        reader.viewport.value.element.style.transition = `transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
+        if (reader.settings.values.computedPageTurnMode === "scrollable") {
+          reader.viewport.value.element.style.transformOrigin = `top`;
+        } else {
+          reader.viewport.value.element.style.transformOrigin = `center`;
+        }
+        if (viewportMode === `thumbnails`) {
+          reader.viewport.value.element.style.transform = `scale(0.5)`;
+        } else {
+          reader.viewport.value.element.style.transform = `scale(1)`;
+        }
+        reader.layout();
+      })
+    );
+  };
   const layoutEnhancer = (next) => (options) => {
     const {
       pageHorizontalMargin,
@@ -2375,11 +2421,16 @@
       })
     );
     const { layout$, info$ } = createLayoutInfo(reader);
+    const viewportModeHandler$ = createViewportModeHandler(
+      reader,
+      settingsManager.watch(`viewportMode`)
+    );
     rxjs.merge(
       updateSpineItemClassName$,
       revealItemOnReady$,
       movingSafePan$,
-      layoutOnContainerResize$
+      layoutOnContainerResize$,
+      viewportModeHandler$
     ).pipe(operators.takeUntil(reader.$.destroy$)).subscribe();
     return {
       ...reader,
@@ -2525,7 +2576,7 @@
       const imgElement = this.containerElement.ownerDocument.createElement(`img`);
       return rxjs.from(this.resourcesHandler.getResource()).pipe(
         rxjs.switchMap((responseOrUrl) => {
-          this.documentContainer = imgElement;
+          this.setDocumentContainer(imgElement);
           imgElement.style.objectFit = `contain`;
           imgElement.style.userSelect = `none`;
           if (responseOrUrl instanceof URL) {
@@ -2698,7 +2749,7 @@
       })
     );
   };
-  const report$4 = Report.namespace(`navigation`);
+  const report$3 = Report.namespace(`navigation`);
   class SpineItemPosition {
     constructor(position) {
       this.__symbol = Symbol(`SpineItemPosition`);
@@ -3098,7 +3149,7 @@
         pageIndex,
         spineItemId
       });
-      report$4.debug(`.goToPageOfSpineItem()`, {
+      report$3.debug(`.goToPageOfSpineItem()`, {
         pageIndex,
         spineItemId,
         ...rest,
@@ -3116,7 +3167,7 @@
       const foundInfo = this.reader.spine.locator.getSpineInfoFromAbsolutePageIndex({
         absolutePageIndex
       });
-      report$4.debug(`.goToAbsolutePageIndex()`, {
+      report$3.debug(`.goToAbsolutePageIndex()`, {
         absolutePageIndex,
         ...rest,
         foundInfo
@@ -3159,7 +3210,7 @@
       }
       let navigation = this.reader.navigation.getNavigation().position;
       if (delta) {
-        const viewportScale = this.reader.viewport.absoluteViewport.width / this.reader.viewport.absoluteViewport.width;
+        const viewportScale = this.reader.viewport.absoluteViewport.width / this.reader.viewport.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);
         const x = Math.floor(
@@ -3285,7 +3336,7 @@
       }
     };
   };
-  const NAMESPACE$5 = `paginationEnhancer`;
+  const NAMESPACE$4 = `paginationEnhancer`;
   const consolidate = (item, reader) => {
     var _a;
     let itemPageIndex = (_a = item.meta) == null ? void 0 : _a.itemPageIndex;
@@ -3640,7 +3691,7 @@
     );
     return { paginationInfo$, getPaginationInfo: () => currentValue.value };
   };
-  Report.namespace(NAMESPACE$5);
+  Report.namespace(NAMESPACE$4);
   const paginationEnhancer = (next) => (options) => {
     const reader = next(options);
     const { paginationInfo$, getPaginationInfo } = trackPaginationInfo(reader);
@@ -6157,8 +6208,8 @@
       );
     })
   );
-  const NAMESPACE$4 = `navigation/InternalNavigator`;
-  const report$3 = Report.namespace(NAMESPACE$4);
+  const NAMESPACE$3 = `navigation/InternalNavigator`;
+  const report$2 = Report.namespace(NAMESPACE$3);
   class InternalNavigator extends DestroyableClass {
     constructor(settings, context, userNavigation$, viewportController, scrollNavigationController, navigationResolver, spine, isUserLocked$) {
       super();
@@ -6360,7 +6411,7 @@
       );
       const notifyNavigationUpdate = (stream) => stream.pipe(
         rxjs.tap(([currentNavigation, previousNavigation]) => {
-          report$3.info(
+          report$2.info(
             `navigation updated from ${currentNavigation.meta.triggeredBy} of type ${currentNavigation.type}`,
             {
               previousNavigation,
@@ -6436,40 +6487,23 @@
     return scaledDownPosition;
   };
   const SCROLL_FINISHED_DEBOUNCE_TIMEOUT = 500;
-  const NAMESPACE$3 = `navigation/UserNavigator`;
-  const report$2 = Report.namespace(NAMESPACE$3);
-  class UserNavigator extends DestroyableClass {
-    constructor(settings, scrollNavigatorElement$, context, scrollHappeningFromBrowser$, spine) {
+  class UserScrollNavigation extends DestroyableClass {
+    constructor(settings, context, spine, scrollNavigationController, locker) {
       super();
       this.settings = settings;
-      this.scrollNavigatorElement$ = scrollNavigatorElement$;
       this.context = context;
-      this.scrollHappeningFromBrowser$ = scrollHappeningFromBrowser$;
       this.spine = spine;
+      this.scrollNavigationController = scrollNavigationController;
+      this.locker = locker;
       this.navigationSubject = new rxjs.Subject();
-      this.locker = new Locker();
       this.navigation$ = this.navigationSubject.asObservable();
-      const userScroll$ = scrollNavigatorElement$.pipe(
-        rxjs.filter(reactjrx.isDefined),
-        rxjs.switchMap(
-          (element) => settings.watch(["computedPageTurnMode"]).pipe(
-            rxjs.switchMap(
-              ({ computedPageTurnMode }) => computedPageTurnMode === "controlled" ? rxjs.NEVER : rxjs.fromEvent(element, `scroll`).pipe(
-                rxjs.withLatestFrom(scrollHappeningFromBrowser$),
-                rxjs.filter(
-                  ([, shouldAvoidScrollEvent]) => !shouldAvoidScrollEvent
-                ),
-                rxjs.map(([event]) => event)
-              )
-            )
-          )
-        ),
-        rxjs.share()
-      );
-      const navigateOnScroll$ = userScroll$.pipe(
+      const navigateOnScroll$ = this.scrollNavigationController.userScroll$.pipe(
         rxjs.exhaustMap((event) => {
           const unlock = this.locker.lock();
-          return rxjs.merge(userScroll$, rxjs.of(event)).pipe(
+          return rxjs.merge(
+            this.scrollNavigationController.userScroll$,
+            rxjs.of(event)
+          ).pipe(
             rxjs.debounceTime(
               SCROLL_FINISHED_DEBOUNCE_TIMEOUT,
               rxjs.animationFrameScheduler
@@ -6485,7 +6519,7 @@
                 }),
                 spineElement: this.spine.element
               });
-              this.navigate({
+              this.navigationSubject.next({
                 animation: false,
                 type: "scroll",
                 position: scaledDownPosition
@@ -6499,15 +6533,6 @@
       );
       rxjs.merge(navigateOnScroll$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
-    /**
-     * Remember that this navigation is not trustable.
-     *
-     * It needs to be verified and adjusted if necessary before becoming internal.
-     */
-    navigate(to) {
-      report$2.info(`.navigate`, to);
-      this.navigationSubject.next(to);
-    }
   }
   const spinePositionToTranslation = (position) => {
     return {
@@ -6772,6 +6797,46 @@
         rxjs.switchMap(() => rxjs.merge(rxjs.of(true), rxjs.of(false))),
         rxjs.shareReplay(1)
       );
+      const isSpineScrolling$ = rxjs.merge(
+        spine.element$.pipe(rxjs.switchMap((element) => observeResize(element))),
+        spine.element$.pipe(rxjs.switchMap((element) => rxjs.fromEvent(element, "scroll"))),
+        spine.spineItemsObserver.itemResize$
+      ).pipe(
+        rxjs.switchMap(
+          () => rxjs.timer(10).pipe(
+            rxjs.map(() => false),
+            rxjs.startWith(true)
+          )
+        ),
+        rxjs.distinctUntilChanged(),
+        rxjs.startWith(false)
+      );
+      const scrollHappeningFromBrowser$ = rxjs.combineLatest([
+        isSpineScrolling$,
+        this.isScrolling$
+      ]).pipe(
+        rxjs.map(
+          ([spineScrolling, viewportScrolling]) => spineScrolling || viewportScrolling
+        ),
+        rxjs.shareReplay(1)
+      );
+      this.userScroll$ = this.watch("element").pipe(
+        rxjs.filter(isDefined),
+        rxjs.switchMap(
+          (element) => settings.watch(["computedPageTurnMode"]).pipe(
+            rxjs.switchMap(
+              ({ computedPageTurnMode }) => computedPageTurnMode === "controlled" ? rxjs.NEVER : rxjs.fromEvent(element, `scroll`).pipe(
+                rxjs.withLatestFrom(scrollHappeningFromBrowser$),
+                rxjs.filter(
+                  ([, shouldAvoidScrollEvent]) => !shouldAvoidScrollEvent
+                ),
+                rxjs.map(([event]) => event)
+              )
+            )
+          )
+        ),
+        rxjs.share()
+      );
       rxjs.merge(elementCreation$, toggleElementDisplay$, navigate$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
     navigate(navigation) {
@@ -7415,6 +7480,8 @@
     settings,
     viewport
   }) => {
+    const userExplicitNavigationSubject = new rxjs.Subject();
+    const locker = new Locker();
     const navigationResolver = createNavigationResolver({
       context,
       settings,
@@ -7436,58 +7503,42 @@
       spine,
       context
     );
-    const isSpineScrolling$ = rxjs.merge(
-      spine.element$.pipe(operators.switchMap((element) => observeResize(element))),
-      spine.element$.pipe(operators.switchMap((element) => rxjs.fromEvent(element, "scroll"))),
-      spine.spineItemsObserver.itemResize$
-    ).pipe(
-      operators.switchMap(
-        () => rxjs.timer(10).pipe(
-          operators.map(() => false),
-          operators.startWith(true)
-        )
-      ),
-      operators.distinctUntilChanged(),
-      operators.startWith(false)
-    );
-    const scrollHappeningFromBrowser$ = rxjs.combineLatest([
-      isSpineScrolling$,
-      scrollNavigationController.isScrolling$
-    ]).pipe(
-      operators.map(
-        ([spineScrolling, viewportScrolling]) => spineScrolling || viewportScrolling
-      ),
-      operators.shareReplay(1)
-    );
-    const userNavigator = new UserNavigator(
+    const userScrollNavigation = new UserScrollNavigation(
       settings,
-      scrollNavigationController.watch("element"),
       context,
-      scrollHappeningFromBrowser$,
-      spine
+      spine,
+      scrollNavigationController,
+      locker
+    );
+    const userNavigation$ = rxjs.merge(
+      userExplicitNavigationSubject,
+      userScrollNavigation.navigation$
     );
     const internalNavigator = new InternalNavigator(
       settings,
       context,
-      userNavigator.navigation$,
+      userNavigation$,
       controlledNavigationController,
       scrollNavigationController,
       navigationResolver,
       spine,
-      userNavigator.locker.isLocked$
+      locker.isLocked$
     );
     const viewportState$ = rxjs.combineLatest([
       controlledNavigationController.isNavigating$,
       scrollNavigationController.isNavigating$,
-      userNavigator.locker.isLocked$,
+      locker.isLocked$,
       internalNavigator.locker.isLocked$
     ]).pipe(
       operators.map((states) => states.some((isLocked) => isLocked) ? `busy` : `free`),
       operators.distinctUntilChanged(),
       operators.shareReplay(1)
     );
+    const navigate = (to) => {
+      userExplicitNavigationSubject.next(to);
+    };
     const destroy = () => {
-      userNavigator.destroy();
+      userScrollNavigation.destroy();
       controlledNavigationController.destroy();
       internalNavigator.destroy();
     };
@@ -7497,11 +7548,11 @@
       internalNavigator,
       scrollNavigationController,
       controlledNavigationController,
-      isLocked$: userNavigator.locker.isLocked$,
+      locker,
       viewportState$,
-      navigate: userNavigator.navigate.bind(userNavigator),
+      navigate,
       lock() {
-        return userNavigator.locker.lock();
+        return locker.lock();
       },
       navigationResolver,
       navigation$: internalNavigator.navigation$
@@ -8368,11 +8419,16 @@
       loadSpineItems$.pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
     forceOpen(spineItems) {
-      this.forcedOpenSubject.next([...this.forcedOpenSubject.value, spineItems]);
+      const indexes = spineItems.map(
+        (item) => typeof item === "number" ? item : item.index
+      );
+      this.forcedOpenSubject.next([...this.forcedOpenSubject.value, indexes]);
       return () => {
         if (this.isDestroyed) return;
         this.forcedOpenSubject.next(
-          this.forcedOpenSubject.value.filter((item) => item !== spineItems)
+          this.forcedOpenSubject.value.filter(
+            (arrayOfIndexes) => arrayOfIndexes !== indexes
+          )
         );
       };
     }
@@ -8954,11 +9010,23 @@
     `;
       element.className = `${HTML_PREFIX$1}-viewport`;
       super({
-        element
+        element,
+        pageSize: {
+          width: 1,
+          height: 1
+        }
       });
       this.context = context;
+      const updatePageSize$ = this.context.watch("visibleAreaRect").pipe(
+        rxjs.tap(() => {
+          this.update({
+            pageSize: this.calculatePageSize()
+          });
+        })
+      );
+      rxjs.merge(updatePageSize$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
-    getPageSize() {
+    calculatePageSize() {
       const absoluteViewport = this.absoluteViewport;
       const { isUsingSpreadMode: isUsingSpreadMode2 } = this.context.state;
       return {
@@ -8977,6 +9045,9 @@
      * @important
      *
      * Contains long floating values.
+     *
+     * @todo take position of translate into consideration in something
+     * like relativeViewportPosition or even better a ViewportSlicePosition
      */
     get relativeViewport() {
       const absoluteViewport = this.absoluteViewport;
@@ -9037,7 +9108,9 @@
     );
     navigator2.viewportState$.subscribe(context.bridgeEvent.viewportStateSubject);
     navigator2.navigation$.subscribe(context.bridgeEvent.navigationSubject);
-    navigator2.isLocked$.subscribe(context.bridgeEvent.navigationIsLockedSubject);
+    navigator2.locker.isLocked$.subscribe(
+      context.bridgeEvent.navigationIsLockedSubject
+    );
     pagination.state$.subscribe(context.bridgeEvent.paginationSubject);
     const layout = () => {
       var _a;
@@ -9244,6 +9317,7 @@
   exports2.isHtmlElement = isHtmlElement;
   exports2.isHtmlTagElement = isHtmlTagElement;
   exports2.mapKeysTo = mapKeysTo;
+  exports2.observeIntersection = observeIntersection;
   exports2.observeMutation = observeMutation;
   exports2.observeResize = observeResize;
   exports2.removeCSS = removeCSS;