@prose-reader/core 1.201.0 → 1.202.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`);
@@ -731,9 +731,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)
       );
     }
@@ -1070,8 +1073,9 @@
       return rxjs.defer(() => this.onLayout(params)).pipe();
     }
     destroy() {
-      super.destroy();
+      this.unload();
       this.stateSubject.complete();
+      super.destroy();
     }
     get writingMode() {
       return void 0;
@@ -2053,6 +2057,7 @@
         pageHorizontalMargin,
         pageVerticalMargin,
         layoutLayerTransition,
+        viewportMode,
         ...rest
       } = settings;
       return rest;
@@ -2062,7 +2067,8 @@
         layoutAutoResize: "container",
         pageHorizontalMargin: 24,
         pageVerticalMargin: 24,
-        layoutLayerTransition: true
+        layoutLayerTransition: true,
+        viewportMode: "normal"
       };
     }
   };
@@ -2240,6 +2246,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 +2399,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,
@@ -2698,7 +2727,7 @@
       })
     );
   };
-  const report$4 = Report.namespace(`navigation`);
+  const report$3 = Report.namespace(`navigation`);
   class SpineItemPosition {
     constructor(position) {
       this.__symbol = Symbol(`SpineItemPosition`);
@@ -3098,7 +3127,7 @@
         pageIndex,
         spineItemId
       });
-      report$4.debug(`.goToPageOfSpineItem()`, {
+      report$3.debug(`.goToPageOfSpineItem()`, {
         pageIndex,
         spineItemId,
         ...rest,
@@ -3116,7 +3145,7 @@
       const foundInfo = this.reader.spine.locator.getSpineInfoFromAbsolutePageIndex({
         absolutePageIndex
       });
-      report$4.debug(`.goToAbsolutePageIndex()`, {
+      report$3.debug(`.goToAbsolutePageIndex()`, {
         absolutePageIndex,
         ...rest,
         foundInfo
@@ -3159,7 +3188,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 +3314,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 +3669,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 +6186,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 +6389,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 +6465,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 +6497,7 @@
                 }),
                 spineElement: this.spine.element
               });
-              this.navigate({
+              this.navigationSubject.next({
                 animation: false,
                 type: "scroll",
                 position: scaledDownPosition
@@ -6499,15 +6511,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 +6775,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 +7458,8 @@
     settings,
     viewport
   }) => {
+    const userExplicitNavigationSubject = new rxjs.Subject();
+    const locker = new Locker();
     const navigationResolver = createNavigationResolver({
       context,
       settings,
@@ -7436,58 +7481,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 +7526,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 +8397,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 +8988,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 +9023,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 +9086,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;