@prose-reader/core 1.168.0 → 1.169.0

package/dist/enhancers/events/translateFramePositionIntoPage.d.ts

@@ -1,4 +1,4 @@
-export declare const translateFramePositionIntoPage: ({ position, frameElement, pageWidth, pageHeight, }: {
+export declare const translateFramePositionIntoPage: ({ position, frameElement, }: {
     position: {
         clientX: number;
         clientY: number;

package/dist/enhancers/html/renderer/HtmlRenderer.d.ts

@@ -1,7 +1,7 @@
 import { DocumentRenderer } from '../../../spineItem/renderer/DocumentRenderer';
 export declare class HtmlRenderer extends DocumentRenderer {
     latestContentHeightWhenLoaded: number | undefined;
-    onCreateDocument(): import('rxjs').Observable<never>;
+    onCreateDocument(): import('rxjs').Observable<HTMLIFrameElement>;
     onLoadDocument(): import('rxjs').Observable<HTMLIFrameElement>;
     onUnload(): import('rxjs').Observable<never>;
     onLayout({ minPageSpread, blankPagePosition, spreadPosition, }: {

package/dist/enhancers/media/ImageRenderer.d.ts

@@ -1,7 +1,7 @@
 import { DocumentRenderer } from '../../spineItem/renderer/DocumentRenderer';
 export declare class ImageRenderer extends DocumentRenderer {
     private getImageElement;
-    onCreateDocument(): import('rxjs').Observable<string>;
+    onCreateDocument(): import('rxjs').Observable<HTMLImageElement>;
     onLoadDocument(): import('rxjs').Observable<Event>;
     onUnload(): import('rxjs').Observable<never>;
     onLayout({ spreadPosition, }: {

package/dist/hooks/types.d.ts

@@ -9,9 +9,7 @@ export type CoreHook = {
     name: `item.onDocumentCreated`;
     runFn: (params: {
         itemId: string;
-        layers: {
-            element: HTMLElement;
-        }[];
+        documentContainer: HTMLElement;
     }) => Observable<void> | void;
 } | {
     name: `item.onDocumentLoad`;
@@ -19,9 +17,7 @@ export type CoreHook = {
         destroy$: Observable<void>;
         destroy: (fn: UserDestroyFn) => void;
         itemId: string;
-        layers: {
-            element: HTMLElement;
-        }[];
+        documentContainer: HTMLElement;
     }) => Observable<void> | void;
 } | {
     name: "item.onBeforeLayout";

package/dist/index.js

@@ -568,28 +568,29 @@ const layoutEnhancer = (next) => (options) => {
     }
   });
   fixReflowable(reader);
-  reader.hookManager.register(`item.onDocumentCreated`, ({ layers }) => {
-    layers.forEach(({ element }) => {
-      element.style.opacity = `0`;
+  reader.hookManager.register(
+    `item.onDocumentCreated`,
+    ({ documentContainer }) => {
+      documentContainer.style.opacity = `0`;
       if (settingsManager.values.layoutLayerTransition) {
-        element.style.transition = `opacity 300ms`;
+        documentContainer.style.transition = `opacity 300ms`;
       }
-    });
-  });
+    }
+  );
   reader.hookManager.register(`item.onBeforeLayout`, ({ item }) => {
     const spineItem = reader.spineItemsManager.get(item.id);
-    spineItem == null ? void 0 : spineItem.renderer.layers.forEach(({ element }) => {
-      if (reader.settings.values.computedPageTurnMode !== `scrollable`) {
-        element.setAttribute(`tab-index`, `0`);
-      }
-    });
+    const element = spineItem == null ? void 0 : spineItem.renderer.documentContainer;
+    if (reader.settings.values.computedPageTurnMode !== `scrollable`) {
+      element == null ? void 0 : element.setAttribute(`tab-index`, `0`);
+    }
   });
   const revealItemOnReady$ = reader.spineItemsObserver.itemIsReady$.pipe(
     filter(({ isReady }) => isReady),
     tap(({ item }) => {
-      item.renderer.layers.forEach(({ element }) => {
+      const element = item.renderer.documentContainer;
+      if (element) {
         element.style.opacity = `1`;
-      });
+      }
     })
   );
   const observeContainerResize = (container) => new Observable((observer) => {
@@ -5435,7 +5436,6 @@ class DocumentRenderer extends DestroyableClass {
       map$1(() => void 0),
       share()
     );
-    this.layers = [];
     this.context = params.context;
     this.settings = params.settings;
     this.hookManager = params.hookManager;
@@ -5453,33 +5453,29 @@ class DocumentRenderer extends DestroyableClass {
     this.load$.pipe(
       switchMap$1(() => {
         this.stateSubject.next(`loading`);
-        const createDocument$ = this.onCreateDocument().pipe(
-          endWith(null),
-          first$1()
-        );
+        const createDocument$ = this.onCreateDocument().pipe(first$1());
         return createDocument$.pipe(
-          tap$1(() => {
+          mergeMap((documentContainer) => {
             this.hookManager.execute(`item.onDocumentCreated`, this.item.id, {
               itemId: this.item.id,
-              layers: this.layers
+              documentContainer
             });
-          }),
-          switchMap$1(() => {
             const loadDocument$ = this.onLoadDocument().pipe(
               endWith(null),
               first$1()
             );
-            return loadDocument$;
-          }),
-          waitForSwitch(this.context.bridgeEvent.viewportFree$),
-          switchMap$1(() => {
-            const hookResults = this.hookManager.execute(`item.onDocumentLoad`, this.item.id, {
-              itemId: this.item.id,
-              layers: this.layers
-            }).filter(
-              (result) => result instanceof Observable
+            return loadDocument$.pipe(
+              waitForSwitch(this.context.bridgeEvent.viewportFree$),
+              switchMap$1(() => {
+                const hookResults = this.hookManager.execute(`item.onDocumentLoad`, this.item.id, {
+                  itemId: this.item.id,
+                  documentContainer
+                }).filter(
+                  (result) => result instanceof Observable
+                );
+                return combineLatest([of(null), ...hookResults]).pipe(first$1());
+              })
             );
-            return combineLatest([of(null), ...hookResults]).pipe(first$1());
           }),
           tap$1(() => {
             this.stateSubject.next(`loaded`);
@@ -5509,6 +5505,16 @@ class DocumentRenderer extends DestroyableClass {
     );
     merge(unload$).pipe(takeUntil(this.destroy$)).subscribe();
   }
+  attach() {
+    if (this.documentContainer) {
+      this.containerElement.appendChild(this.documentContainer);
+    }
+  }
+  detach() {
+    var _a;
+    (_a = this.documentContainer) == null ? void 0 : _a.remove();
+    this.documentContainer = void 0;
+  }
   get state$() {
     return this.stateSubject;
   }
@@ -5614,7 +5620,7 @@ class DefaultRenderer extends DocumentRenderer {
     return EMPTY;
   }
   onCreateDocument() {
-    return EMPTY;
+    return of(document.createElement("div"));
   }
   onLoadDocument() {
     return EMPTY;
@@ -6405,20 +6411,20 @@ const layoutItem = ({
 }) => {
   let minimumWidth = context.getPageSize().width;
   let blankPagePosition = `none`;
-  const itemStartOnNewScreen = horizontalOffset % context.state.visibleAreaRect.width === 0;
+  const isScreenStartItem = horizontalOffset % context.state.visibleAreaRect.width === 0;
   const isLastItem = index === spineItemsManager.items.length - 1;
   if (context.state.isUsingSpreadMode) {
     if (!isGloballyPrePaginated && item.renditionLayout === `reflowable` && !isLastItem) {
       minimumWidth = context.getPageSize().width * 2;
     }
-    if (!isGloballyPrePaginated && item.renditionLayout === `reflowable` && isLastItem && itemStartOnNewScreen) {
+    if (!isGloballyPrePaginated && item.renditionLayout === `reflowable` && isLastItem && isScreenStartItem) {
       minimumWidth = context.getPageSize().width * 2;
     }
-    const lastItemStartOnNewScreenInAPrepaginatedBook = itemStartOnNewScreen && isLastItem && isGloballyPrePaginated;
-    if (item.item.pageSpreadRight && itemStartOnNewScreen && !context.isRTL()) {
+    const lastItemStartOnNewScreenInAPrepaginatedBook = isScreenStartItem && isLastItem && isGloballyPrePaginated;
+    if (item.item.pageSpreadRight && isScreenStartItem && !context.isRTL()) {
       blankPagePosition = `before`;
       minimumWidth = context.getPageSize().width * 2;
-    } else if (item.item.pageSpreadLeft && itemStartOnNewScreen && context.isRTL()) {
+    } else if (item.item.pageSpreadLeft && isScreenStartItem && context.isRTL()) {
       blankPagePosition = `before`;
       minimumWidth = context.getPageSize().width * 2;
     } else if (lastItemStartOnNewScreenInAPrepaginatedBook) {
@@ -6433,13 +6439,13 @@ const layoutItem = ({
   const itemLayout$ = item.layout({
     minimumWidth,
     blankPagePosition,
-    spreadPosition: context.state.isUsingSpreadMode ? itemStartOnNewScreen ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
+    spreadPosition: context.state.isUsingSpreadMode ? isScreenStartItem ? context.isRTL() ? `right` : `left` : context.isRTL() ? `left` : `right` : `none`
   });
   return itemLayout$.pipe(
     map$1(({ width, height }) => {
       if (settings.values.computedPageTurnDirection === `vertical`) {
-        const currentValidEdgeYForVerticalPositioning = itemStartOnNewScreen ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
-        const currentValidEdgeXForVerticalPositioning = itemStartOnNewScreen ? 0 : horizontalOffset;
+        const currentValidEdgeYForVerticalPositioning = isScreenStartItem ? verticalOffset : verticalOffset - context.state.visibleAreaRect.height;
+        const currentValidEdgeXForVerticalPositioning = isScreenStartItem ? 0 : horizontalOffset;
         if (context.isRTL()) {
           item.adjustPositionOfElement({
             top: currentValidEdgeYForVerticalPositioning,
@@ -7162,16 +7168,15 @@ const resourcesEnhancer = (next) => (options) => {
 };
 class ImageRenderer extends DocumentRenderer {
   getImageElement() {
-    var _a;
-    const element = (_a = this.layers[0]) == null ? void 0 : _a.element;
+    const element = this.documentContainer;
     if (!(element instanceof HTMLImageElement)) return void 0;
     return element;
   }
   onCreateDocument() {
+    const imgElement = this.containerElement.ownerDocument.createElement(`img`);
     return from(this.resourcesHandler.getResource()).pipe(
       switchMap$1((responseOrUrl) => {
-        const imgElement = this.containerElement.ownerDocument.createElement(`img`);
-        this.layers = [{ element: imgElement }];
+        this.documentContainer = imgElement;
         imgElement.style.objectFit = `contain`;
         imgElement.style.userSelect = `none`;
         if (responseOrUrl instanceof URL) {
@@ -7186,18 +7191,19 @@ class ImageRenderer extends DocumentRenderer {
         }
         throw new Error(`Invalid resource`);
       }),
-      tap$1((src) => {
+      map$1((src) => {
         const element = this.getImageElement();
         if (element) {
           element.src = src;
         }
+        return imgElement;
       })
     );
   }
   onLoadDocument() {
     const imageElement = this.getImageElement();
     if (!imageElement) throw new Error(`invalid element`);
-    this.containerElement.appendChild(imageElement);
+    this.attach();
     return fromEvent(imageElement, `load`);
   }
   onUnload() {
@@ -7205,10 +7211,7 @@ class ImageRenderer extends DocumentRenderer {
     if (imageElement) {
       URL.revokeObjectURL(imageElement.src);
     }
-    this.layers.forEach(({ element }) => {
-      element.remove();
-    });
-    this.layers = [];
+    this.detach();
     return EMPTY;
   }
   onLayout({
@@ -7575,22 +7578,14 @@ const loadingEnhancer = (next) => (options) => {
 };
 const translateFramePositionIntoPage = ({
   position,
-  frameElement,
-  pageWidth,
-  pageHeight
+  frameElement
 }) => {
-  const {
-    height: viewportHeight = pageHeight,
-    width: viewportWidth = pageWidth
-  } = getFrameViewportInfo(frameElement);
-  const computedWidthScale = pageWidth / viewportWidth;
-  const computedScale = Math.min(
-    computedWidthScale,
-    pageHeight / viewportHeight
-  );
-  const { left = 0, top = 0 } = (frameElement == null ? void 0 : frameElement.getBoundingClientRect()) || {};
-  const adjustedX = position.clientX * computedScale + left;
-  const adjustedY = position.clientY * computedScale + top;
+  const frameRect = frameElement.getBoundingClientRect();
+  const scaleX = frameRect.width / frameElement.offsetWidth;
+  const scaleY = frameRect.height / frameElement.offsetHeight;
+  const { left = 0, top = 0 } = frameRect;
+  const adjustedX = position.clientX * scaleX + left;
+  const adjustedY = position.clientY * scaleY + top;
   return {
     clientX: adjustedX,
     clientY: adjustedY
@@ -8423,12 +8418,8 @@ class HtmlRenderer extends DocumentRenderer {
   }
   onCreateDocument() {
     const frameElement = createFrameElement();
-    this.layers = [
-      {
-        element: frameElement
-      }
-    ];
-    return EMPTY;
+    this.documentContainer = frameElement;
+    return of(frameElement);
   }
   onLoadDocument() {
     const frameElement = this.getFrameElement();
@@ -8440,8 +8431,8 @@ class HtmlRenderer extends DocumentRenderer {
         settings: this.settings
       }),
       waitForSwitch(this.context.bridgeEvent.viewportFree$),
-      tap$1((frameElement2) => {
-        this.containerElement.appendChild(frameElement2);
+      tap$1(() => {
+        this.attach();
       }),
       waitForFrameLoad,
       loadAssets({
@@ -8454,8 +8445,7 @@ class HtmlRenderer extends DocumentRenderer {
   }
   onUnload() {
     unloadMedias(this.getFrameElement());
-    this.layers.forEach((layer) => layer.element.remove());
-    this.layers = [];
+    this.detach();
     return EMPTY;
   }
   onLayout({
@@ -8526,8 +8516,7 @@ class HtmlRenderer extends DocumentRenderer {
     );
   }
   getFrameElement() {
-    var _a;
-    const frame = (_a = this.layers[0]) == null ? void 0 : _a.element;
+    const frame = this.documentContainer;
     if (!(frame instanceof HTMLIFrameElement)) return;
     return frame;
   }