@prose-reader/core 1.192.0 → 1.193.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { switchMap, of, fromEvent, take, map, from, takeUntil, Observable, defer, Subject, combineLatest, merge, EMPTY, withLatestFrom, BehaviorSubject, filter, share, first as first$1, mergeMap, endWith, tap as tap$1, finalize, catchError, lastValueFrom, NEVER, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, throttleTime, debounceTime as debounceTime$1, startWith as startWith$1, switchScan, forkJoin, shareReplay as shareReplay$1, delay, ReplaySubject, identity, timer, skip as skip$1, exhaustMap, reduce, concatMap } from "rxjs";
-import { switchMap as switchMap$1, first, map as map$1, startWith, shareReplay, distinctUntilChanged, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter as filter$1, debounceTime, skip, mergeMap as mergeMap$1, catchError as catchError$1, withLatestFrom as withLatestFrom$1, share as share$1 } from "rxjs/operators";
+import { switchMap as switchMap$1, first, map as map$1, startWith, shareReplay, distinctUntilChanged, tap, pairwise, take as take$1, takeUntil as takeUntil$1, filter as filter$1, debounceTime, skip, mergeMap as mergeMap$1, catchError as catchError$1, withLatestFrom as withLatestFrom$1 } from "rxjs/operators";
 import { shallowMergeIfDefined, isShallowEqual, getParentPath, parseContentType, detectMimeTypeFromName, arrayEqual } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const getAttributeValueFromString = (string, key) => {
@@ -902,7 +902,6 @@ class DocumentRenderer extends DestroyableClass {
   constructor(params) {
     super();
     this.triggerSubject = new Subject();
-    this.lastLayoutDims = void 0;
     this.stateSubject = new BehaviorSubject(`idle`);
     this.unload$ = this.triggerSubject.pipe(
       withLatestFrom(this.stateSubject),
@@ -1034,57 +1033,8 @@ class DocumentRenderer extends DestroyableClass {
       })
     );
   }
-  /**
-   * @important
-   *
-   * If renderer returns undefined as dimensions we will use the previous
-   * layout dimensions as fallback. This ensure minmum layout shift during
-   * load / unload of items and improve stability..
-   */
   layout(params) {
-    return defer(() => this.onLayout(params)).pipe(
-      map((dims) => {
-        var _a, _b, _c, _d;
-        const { height: defaultHeight, width: defaultWidth } = this.context.getPageSize();
-        if (dims) {
-          const { height, width } = dims;
-          if (height < defaultHeight || width < defaultWidth) {
-            Report.warn(
-              `Your height or width is smaller than the page size. Please check your rendering.`
-            );
-          }
-          this.lastLayoutDims = {
-            height,
-            width,
-            pageSize: this.context.getPageSize()
-          };
-          return this.lastLayoutDims;
-        }
-        const hasPageSizeChanged = ((_a = this.lastLayoutDims) == null ? void 0 : _a.pageSize.width) !== this.context.getPageSize().width || ((_b = this.lastLayoutDims) == null ? void 0 : _b.pageSize.height) !== this.context.getPageSize().height;
-        if (this.renditionLayout === `pre-paginated` || // in the case the page size change, we cannot use the old size reliably
-        // we have to drop it and use the default one
-        hasPageSizeChanged) {
-          this.lastLayoutDims = {
-            height: this.context.getPageSize().height,
-            width: params.minimumWidth,
-            pageSize: this.context.getPageSize()
-          };
-        } else {
-          this.lastLayoutDims = {
-            height: Math.max(
-              defaultHeight,
-              ((_c = this.lastLayoutDims) == null ? void 0 : _c.height) ?? defaultHeight
-            ),
-            width: Math.max(
-              defaultWidth,
-              ((_d = this.lastLayoutDims) == null ? void 0 : _d.width) ?? defaultWidth
-            ),
-            pageSize: this.context.getPageSize()
-          };
-        }
-        return this.lastLayoutDims;
-      })
-    );
+    return defer(() => this.onLayout(params)).pipe();
   }
   destroy() {
     super.destroy();
@@ -8389,6 +8339,125 @@ class SpineLayout extends DestroyableClass {
     this.layoutSubject.complete();
   }
 }
+class SpineItemLayout extends DestroyableClass {
+  constructor(item, containerElement, context, hookManager, renderer) {
+    super();
+    this.item = item;
+    this.containerElement = containerElement;
+    this.context = context;
+    this.hookManager = hookManager;
+    this.renderer = renderer;
+    this.layoutTriggerSubject = new Subject();
+    this.lastLayout = null;
+    this.applyDimsAfterLayout = ({
+      blankPagePosition,
+      minimumWidth
+    }) => (stream) => {
+      return stream.pipe(
+        map((dims) => {
+          var _a;
+          const trustableLastLayout = isShallowEqual(
+            (_a = this.lastLayout) == null ? void 0 : _a.pageSize,
+            this.context.getPageSize()
+          ) ? this.lastLayout : void 0;
+          const { width: previousWidth, height: previousHeight } = trustableLastLayout ?? {};
+          const { width = previousWidth, height = previousHeight } = dims ?? {};
+          const { width: pageSizeWidth, height: pageSizeHeight } = this.context.getPageSize();
+          const safeWidth = this.validateDimension(
+            width ?? pageSizeWidth,
+            pageSizeWidth,
+            minimumWidth
+          );
+          const safeHeight = this.validateDimension(
+            height ?? pageSizeHeight,
+            pageSizeHeight,
+            pageSizeHeight
+          );
+          this.lastLayout = {
+            width: safeWidth,
+            height: safeHeight,
+            pageSize: this.context.getPageSize()
+          };
+          this.containerElement.style.width = `${safeWidth}px`;
+          this.containerElement.style.height = `${safeHeight}px`;
+          this.hookManager.execute(`item.onAfterLayout`, void 0, {
+            blankPagePosition,
+            item: this.item,
+            minimumWidth
+          });
+          return { width: safeWidth, height: safeHeight };
+        })
+      );
+    };
+    this.layout = (params) => {
+      const nextResult = deferNextResult(this.layout$.pipe(first$1()));
+      this.layoutTriggerSubject.next(params);
+      return nextResult();
+    };
+    this.adjustPositionOfElement = ({
+      right,
+      left,
+      top
+    }) => {
+      if (right !== void 0) {
+        this.containerElement.style.right = `${right}px`;
+      } else {
+        this.containerElement.style.removeProperty(`right`);
+      }
+      if (left !== void 0) {
+        this.containerElement.style.left = `${left}px`;
+      } else {
+        this.containerElement.style.removeProperty(`left`);
+      }
+      if (top !== void 0) {
+        this.containerElement.style.top = `${top}px`;
+      } else {
+        this.containerElement.style.removeProperty(`top`);
+      }
+    };
+    this.layoutProcess$ = this.layoutTriggerSubject.pipe(
+      switchMap((params) => {
+        const { blankPagePosition, minimumWidth, spreadPosition } = params;
+        this.hookManager.execute(`item.onBeforeLayout`, void 0, {
+          blankPagePosition,
+          item: this.item,
+          minimumWidth
+        });
+        const rendererLayout$ = this.renderer.layout({
+          blankPagePosition,
+          minPageSpread: minimumWidth / this.context.getPageSize().width,
+          minimumWidth,
+          spreadPosition
+        });
+        return merge(
+          of({ type: "start" }),
+          rendererLayout$.pipe(
+            this.applyDimsAfterLayout(params),
+            map(
+              (data) => ({
+                type: "end",
+                data
+              })
+            )
+          )
+        );
+      }),
+      share()
+    );
+    this.layout$ = this.layoutProcess$.pipe(
+      filter((event) => event.type === `end`),
+      map((event) => event.data),
+      share()
+    );
+  }
+  validateDimension(value, pageSize, minimum) {
+    if (value <= 0) return minimum;
+    const maxValue = Math.max(value, minimum);
+    const multiplier = Math.ceil(maxValue / pageSize);
+    const adjustedValue = multiplier * pageSize;
+    return Math.max(adjustedValue, pageSize);
+  }
+}
 class DefaultRenderer extends DocumentRenderer {
   onUnload() {
     return EMPTY;
@@ -8419,28 +8488,6 @@ class SpineItem extends DestroyableClass {
     this.settings = settings;
     this.hookManager = hookManager;
     this.index = index;
-    this.layoutTriggerSubject = new Subject();
-    this.adjustPositionOfElement = ({
-      right,
-      left,
-      top
-    }) => {
-      if (right !== void 0) {
-        this.containerElement.style.right = `${right}px`;
-      } else {
-        this.containerElement.style.removeProperty(`right`);
-      }
-      if (left !== void 0) {
-        this.containerElement.style.left = `${left}px`;
-      } else {
-        this.containerElement.style.removeProperty(`left`);
-      }
-      if (top !== void 0) {
-        this.containerElement.style.top = `${top}px`;
-      } else {
-        this.containerElement.style.removeProperty(`top`);
-      }
-    };
     this.getBoundingRectOfElementFromSelector = (selector) => {
       var _a2, _b2, _c, _d;
       const frameElement = this.renderer.getDocumentFrame();
@@ -8451,11 +8498,6 @@ class SpineItem extends DestroyableClass {
         return (_d = (_c = frameElement.contentDocument) == null ? void 0 : _c.querySelector(selector)) == null ? void 0 : _d.getBoundingClientRect();
       }
     };
-    this.layout = (params) => {
-      const nextResult = deferNextResult(this.layout$.pipe(first()));
-      this.layoutTriggerSubject.next(params);
-      return nextResult();
-    };
     this.load = () => {
       this.renderer.load();
     };
@@ -8499,52 +8541,21 @@ class SpineItem extends DestroyableClass {
       resourcesHandler: this.resourcesHandler
     };
     this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
-    const layoutProcess$ = this.layoutTriggerSubject.pipe(
-      switchMap$1(({ blankPagePosition, minimumWidth, spreadPosition }) => {
-        this.hookManager.execute(`item.onBeforeLayout`, void 0, {
-          blankPagePosition,
-          item: this.item,
-          minimumWidth
-        });
-        const layout$ = this.renderer.layout({
-          blankPagePosition,
-          minPageSpread: minimumWidth / this.context.getPageSize().width,
-          minimumWidth,
-          spreadPosition
-        });
-        return merge(
-          of({ type: "start" }),
-          layout$.pipe(
-            map$1(({ height, width }) => {
-              this.containerElement.style.width = `${width}px`;
-              this.containerElement.style.height = `${height}px`;
-              this.hookManager.execute(`item.onAfterLayout`, void 0, {
-                blankPagePosition,
-                item: this.item,
-                minimumWidth
-              });
-              return {
-                type: "end",
-                data: { width, height }
-              };
-            })
-          )
-        );
-      }),
-      share$1()
+    this.spineItemLayout = new SpineItemLayout(
+      item,
+      this.containerElement,
+      context,
+      hookManager,
+      this.renderer
     );
-    this.isReady$ = layoutProcess$.pipe(
+    this.isReady$ = this.spineItemLayout.layoutProcess$.pipe(
       withLatestFrom$1(this.renderer.isLoaded$),
       map$1(([event, loaded]) => !!(event.type === `end` && loaded)),
       startWith(false),
       distinctUntilChanged(),
       shareReplay({ refCount: true, bufferSize: 1 })
     );
-    this.layout$ = layoutProcess$.pipe(
-      filter$1((event) => event.type === `end`),
-      map$1((event) => event.data),
-      share$1()
-    );
+    this.layout$ = this.spineItemLayout.layout$;
     this.needsLayout$ = merge(this.unloaded$, this.loaded$);
     merge(
       /**
@@ -8554,8 +8565,10 @@ class SpineItem extends DestroyableClass {
        * to layout changes may rely on the isReady value.
        */
       this.isReady$,
-      this.layout$
+      this.spineItemLayout.layout$
     ).pipe(takeUntil$1(this.destroy$)).subscribe();
+    this.layout = this.spineItemLayout.layout;
+    this.adjustPositionOfElement = this.spineItemLayout.adjustPositionOfElement;
   }
   get element() {
     return this.containerElement;