@prose-reader/core 1.191.0 → 1.193.0

package/dist/index.umd.cjs

@@ -902,7 +902,6 @@
     constructor(params) {
       super();
       this.triggerSubject = new rxjs.Subject();
-      this.lastLayoutDims = void 0;
       this.stateSubject = new rxjs.BehaviorSubject(`idle`);
       this.unload$ = this.triggerSubject.pipe(
         rxjs.withLatestFrom(this.stateSubject),
@@ -1034,48 +1033,8 @@
         })
       );
     }
-    /**
-     * @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 rxjs.defer(() => this.onLayout(params)).pipe(
-        rxjs.map((dims) => {
-          var _a, _b;
-          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 };
-            return this.lastLayoutDims;
-          }
-          if (this.renditionLayout === `pre-paginated`) {
-            this.lastLayoutDims = {
-              height: this.context.getPageSize().height,
-              width: params.minimumWidth
-            };
-          } else {
-            this.lastLayoutDims = {
-              height: Math.max(
-                defaultHeight,
-                ((_a = this.lastLayoutDims) == null ? void 0 : _a.height) ?? defaultHeight
-              ),
-              width: Math.max(
-                defaultWidth,
-                ((_b = this.lastLayoutDims) == null ? void 0 : _b.width) ?? defaultWidth
-              )
-            };
-          }
-          return this.lastLayoutDims;
-        })
-      );
+      return rxjs.defer(() => this.onLayout(params)).pipe();
     }
     destroy() {
       super.destroy();
@@ -8380,6 +8339,125 @@
       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 rxjs.Subject();
+      this.lastLayout = null;
+      this.applyDimsAfterLayout = ({
+        blankPagePosition,
+        minimumWidth
+      }) => (stream) => {
+        return stream.pipe(
+          rxjs.map((dims) => {
+            var _a;
+            const trustableLastLayout = shared.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(rxjs.first()));
+        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(
+        rxjs.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 rxjs.merge(
+            rxjs.of({ type: "start" }),
+            rendererLayout$.pipe(
+              this.applyDimsAfterLayout(params),
+              rxjs.map(
+                (data) => ({
+                  type: "end",
+                  data
+                })
+              )
+            )
+          );
+        }),
+        rxjs.share()
+      );
+      this.layout$ = this.layoutProcess$.pipe(
+        rxjs.filter((event) => event.type === `end`),
+        rxjs.map((event) => event.data),
+        rxjs.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 rxjs.EMPTY;
@@ -8410,28 +8488,6 @@
       this.settings = settings;
       this.hookManager = hookManager;
       this.index = index;
-      this.layoutTriggerSubject = new rxjs.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();
@@ -8442,11 +8498,6 @@
           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(operators.first()));
-        this.layoutTriggerSubject.next(params);
-        return nextResult();
-      };
       this.load = () => {
         this.renderer.load();
       };
@@ -8490,52 +8541,21 @@
         resourcesHandler: this.resourcesHandler
       };
       this.renderer = rendererFactory ? rendererFactory(rendererParams) : new DefaultRenderer(rendererParams);
-      const layoutProcess$ = this.layoutTriggerSubject.pipe(
-        operators.switchMap(({ 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 rxjs.merge(
-            rxjs.of({ type: "start" }),
-            layout$.pipe(
-              operators.map(({ 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 }
-                };
-              })
-            )
-          );
-        }),
-        operators.share()
+      this.spineItemLayout = new SpineItemLayout(
+        item,
+        this.containerElement,
+        context,
+        hookManager,
+        this.renderer
       );
-      this.isReady$ = layoutProcess$.pipe(
+      this.isReady$ = this.spineItemLayout.layoutProcess$.pipe(
         operators.withLatestFrom(this.renderer.isLoaded$),
         operators.map(([event, loaded]) => !!(event.type === `end` && loaded)),
         operators.startWith(false),
         operators.distinctUntilChanged(),
         operators.shareReplay({ refCount: true, bufferSize: 1 })
       );
-      this.layout$ = layoutProcess$.pipe(
-        operators.filter((event) => event.type === `end`),
-        operators.map((event) => event.data),
-        operators.share()
-      );
+      this.layout$ = this.spineItemLayout.layout$;
       this.needsLayout$ = rxjs.merge(this.unloaded$, this.loaded$);
       rxjs.merge(
         /**
@@ -8545,8 +8565,10 @@
          * to layout changes may rely on the isReady value.
          */
         this.isReady$,
-        this.layout$
+        this.spineItemLayout.layout$
       ).pipe(operators.takeUntil(this.destroy$)).subscribe();
+      this.layout = this.spineItemLayout.layout;
+      this.adjustPositionOfElement = this.spineItemLayout.adjustPositionOfElement;
     }
     get element() {
       return this.containerElement;