@prose-reader/core 1.120.0 → 1.121.0

package/dist/index.umd.cjs

@@ -518,14 +518,19 @@
         }
       });
     });
-    reader.hookManager.register(`item.onAfterLayout`, ({ item }) => {
-      const spineItem = reader.spineItemsManager.get(item.id);
-      if (spineItem == null ? void 0 : spineItem.isReady) {
-        spineItem == null ? void 0 : spineItem.renderer.layers.forEach(({ element }) => {
+    const revealItemOnReady$ = reader.spineItemsObserver.itemIsReady$.pipe(
+      operators.filter(({ isReady }) => isReady),
+      /**
+       * Make sure that even if the document was loaded instantly, the layout is applied first
+       * and therefore the transition played. eg: pdf are loaded before attached to the dom.
+       */
+      operators.delay(1, rxjs.animationFrameScheduler),
+      operators.tap(({ item }) => {
+        item.renderer.layers.forEach(({ element }) => {
           element.style.opacity = `1`;
         });
-      }
-    });
+      })
+    );
     const observeContainerResize = (container) => new rxjs.Observable((observer) => {
       const resizeObserver = new ResizeObserver(() => {
         observer.next();
@@ -546,7 +551,6 @@
       })
     );
     const movingSafePan$ = createMovingSafePan$(reader);
-    movingSafePan$.subscribe();
     settingsManager.values$.pipe(
       mapKeysTo([`pageHorizontalMargin`, `pageVerticalMargin`]),
       operators.distinctUntilChanged(shared.isShallowEqual),
@@ -556,7 +560,7 @@
       }),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
-    rxjs.merge(layoutOnContainerResize$).pipe(operators.takeUntil(reader.$.destroy$)).subscribe();
+    rxjs.merge(revealItemOnReady$, movingSafePan$, layoutOnContainerResize$).pipe(operators.takeUntil(reader.$.destroy$)).subscribe();
     return {
       ...reader,
       destroy: () => {
@@ -3126,7 +3130,7 @@
       let i, child;
       for (i = 0; i < children.length; i++) {
         child = children[i];
-        switch (child.nodeType) {
+        switch (child == null ? void 0 : child.nodeType) {
           case ELEMENT_NODE:
             if (cfiCount % 2 === 0) {
               cfiCount += 2;
@@ -3162,12 +3166,11 @@
               cfiCount += 1;
             }
             if (cfiCount === index) {
-              const trueLength = this.trueLength(dom, child.textContent);
-              if (offset >= trueLength) {
-                offset -= trueLength;
-              } else {
+              const trueLength = this.trueLength(dom, child.textContent || "");
+              if (offset <= trueLength) {
                 return { node: child, offset };
               }
+              offset -= trueLength;
             }
             lastChild = child;
             break;
@@ -3175,6 +3178,10 @@
             continue;
         }
       }
+      if (lastChild && (lastChild.nodeType === TEXT_NODE || lastChild.nodeType === CDATA_SECTION_NODE)) {
+        const trueLength = this.trueLength(dom, lastChild.textContent || "");
+        return { node: lastChild, offset: Math.min(offset, trueLength) };
+      }
       if (index > cfiCount) {
         const o = { relativeToNode: `after`, offset: 0 };
         if (!lastChild) {
@@ -5958,83 +5965,6 @@
       this.layoutSubject.complete();
     }
   }
-  const createFingerTracker = () => {
-    const fingerPositionInIframe = { x: void 0, y: void 0 };
-    const subject = new rxjs.Subject();
-    let isMouseDown = false;
-    const track = (frame) => {
-      var _a, _b, _c;
-      fingerPositionInIframe.x = void 0;
-      fingerPositionInIframe.y = void 0;
-      (_a = frame.contentDocument) == null ? void 0 : _a.addEventListener(`mousedown`, (e) => {
-        isMouseDown = true;
-        fingerPositionInIframe.x = e.x;
-        fingerPositionInIframe.y = e.y;
-        subject.next({ event: `fingermove`, data: { x: e.x, y: e.y } });
-      });
-      (_b = frame.contentDocument) == null ? void 0 : _b.addEventListener(`mouseup`, () => {
-        isMouseDown = false;
-        fingerPositionInIframe.x = void 0;
-        fingerPositionInIframe.y = void 0;
-        subject.next({ event: `fingerout`, data: void 0 });
-      });
-      (_c = frame.contentDocument) == null ? void 0 : _c.addEventListener(`mousemove`, (e) => {
-        if (isMouseDown) {
-          subject.next({ event: `fingermove`, data: { x: e.x, y: e.y } });
-        }
-      });
-    };
-    return {
-      track,
-      getFingerPositionInIframe() {
-        return fingerPositionInIframe.x === void 0 || fingerPositionInIframe.y === void 0 ? void 0 : fingerPositionInIframe;
-      },
-      destroy: () => {
-      },
-      $: subject.asObservable()
-    };
-  };
-  const createSelectionTracker = () => {
-    let isSelecting = false;
-    let frame;
-    const subject = new rxjs.Subject();
-    const mouseUpEvents = [`mouseup`, `pointerup`];
-    const track = (frameToTrack) => {
-      var _a, _b;
-      frame = frameToTrack;
-      mouseUpEvents.forEach((eventName) => {
-        var _a2;
-        (_a2 = frameToTrack.contentWindow) == null ? void 0 : _a2.addEventListener(eventName, () => {
-          isSelecting = false;
-        });
-      });
-      (_a = frameToTrack.contentDocument) == null ? void 0 : _a.addEventListener(`selectionchange`, () => {
-        var _a2;
-        subject.next({
-          event: `selectionchange`,
-          data: ((_a2 = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a2.getSelection()) || null
-        });
-      });
-      (_b = frameToTrack.contentWindow) == null ? void 0 : _b.addEventListener(`selectstart`, () => {
-        isSelecting = true;
-      });
-    };
-    const destroy = () => {
-    };
-    return {
-      track,
-      destroy,
-      isSelecting: () => isSelecting,
-      getSelection: () => {
-        var _a;
-        const selection = (_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.getSelection();
-        if (!(selection == null ? void 0 : selection.anchorNode) || selection.type === `None` || selection.type === `Caret`)
-          return void 0;
-        return selection;
-      },
-      $: subject.asObservable()
-    };
-  };
   class DocumentRenderer {
     constructor(context, settings, hookManager, item, containerElement, resourcesHandler) {
       this.context = context;
@@ -6065,9 +5995,6 @@
       this.destroy$ = this.triggerSubject.pipe(
         rxjs.filter((trigger) => trigger === `destroy`)
       );
-      this.stateSubject.subscribe((state) => {
-        console.log(`FOOO`, item.id, `state`, state);
-      });
       this.load$.pipe(
         rxjs.switchMap(() => {
           this.stateSubject.next(`loading`);
@@ -6266,8 +6193,6 @@
       this.destroy = () => {
         this.destroySubject$.next();
         this.containerElement.remove();
-        this.fingerTracker.destroy();
-        this.selectionTracker.destroy();
         this.destroySubject$.complete();
         this.renderer.destroy();
       };
@@ -6281,8 +6206,6 @@
         item,
         hookManager
       );
-      this.fingerTracker = createFingerTracker();
-      this.selectionTracker = createSelectionTracker();
       parentElement.appendChild(this.containerElement);
       const RendererClass = ((_b = (_a = this.settings.values).getRenderer) == null ? void 0 : _b.call(_a, item)) ?? DefaultRenderer;
       this.resourcesHandler = new ResourceHandler(item, this.settings);
@@ -6445,15 +6368,6 @@
     layout() {
       this.spineLayout.layout();
     }
-    isSelecting() {
-      return this.spineItemsManager.items.some(
-        (item) => item.selectionTracker.isSelecting()
-      );
-    }
-    getSelection() {
-      var _a;
-      return (_a = this.spineItemsManager.items.find((item) => item.selectionTracker.getSelection())) == null ? void 0 : _a.selectionTracker.getSelection();
-    }
     destroy() {
       super.destroy();
       this.spineItemsLoader.destroy();
@@ -7424,8 +7338,6 @@
             (_a3 = frame.contentDocument) == null ? void 0 : _a3.removeEventListener(event, listener);
           };
         });
-        item.selectionTracker.track(frame);
-        item.fingerTracker.track(frame);
         destroy(() => {
           unregister.forEach((cb) => cb());
         });
@@ -8199,28 +8111,158 @@
     });
     return reader;
   };
+  const generateCfis = ({
+    itemId,
+    selection
+  }) => {
+    const anchorCfi = selection.anchorNode ? CfiHandler.generate(
+      selection.anchorNode,
+      selection.anchorOffset,
+      `|[prose~anchor~${encodeURIComponent(itemId)}]`
+    ) : void 0;
+    const focusCfi = selection.focusNode ? CfiHandler.generate(
+      selection.focusNode,
+      selection.focusOffset,
+      `|[prose~anchor~${encodeURIComponent(itemId)}]`
+    ) : void 0;
+    return {
+      anchorCfi,
+      focusCfi
+    };
+  };
+  class SelectionTracker extends DestroyableClass {
+    constructor(document2) {
+      super();
+      this.selectionChange$ = rxjs.fromEvent(document2, "selectionchange").pipe(
+        rxjs.map(() => document2.getSelection())
+      );
+      this.selectionAfterPointerUp$ = rxjs.fromEvent(document2, "pointerup").pipe(
+        /**
+         * The selection is still valid during the event even if it will
+         * be discarded. The timeout make sure to detect this edge case.
+         */
+        rxjs.delay(0),
+        rxjs.map((event) => {
+          const selection = document2.getSelection();
+          return selection && !selection.isCollapsed ? [event, selection] : void 0;
+        }),
+        rxjs.filter(isDefined)
+      );
+    }
+  }
+  const selectionEnhancer = (next) => (options) => {
+    const reader = next(options);
+    const selectionSubject = new rxjs.BehaviorSubject(
+      void 0
+    );
+    const selectionWithPointerUpSubject = new rxjs.Subject();
+    reader.hookManager.register(
+      `item.onDocumentLoad`,
+      ({ itemId, layers, destroy$, destroy }) => {
+        var _a, _b;
+        const frame = (_a = layers[0]) == null ? void 0 : _a.element;
+        if (frame instanceof HTMLIFrameElement) {
+          const frameDoc = frame.contentDocument || ((_b = frame.contentWindow) == null ? void 0 : _b.document);
+          if (frameDoc) {
+            const selectionTracker = new SelectionTracker(frameDoc);
+            rxjs.merge(
+              selectionTracker.selectionChange$.pipe(
+                rxjs.tap((selection) => {
+                  if (selection == null ? void 0 : selection.toString()) {
+                    selectionSubject.next({
+                      document: frameDoc,
+                      selection,
+                      itemId
+                    });
+                  } else {
+                    selectionSubject.next(void 0);
+                  }
+                })
+              ),
+              selectionTracker.selectionAfterPointerUp$.pipe(
+                rxjs.tap(([event, selection]) => {
+                  selectionWithPointerUpSubject.next([
+                    event,
+                    {
+                      document: frameDoc,
+                      selection,
+                      itemId
+                    }
+                  ]);
+                })
+              )
+            ).pipe(rxjs.takeUntil(destroy$)).subscribe();
+            destroy(() => {
+              selectionTracker.destroy();
+            });
+          }
+        }
+      }
+    );
+    const selection$ = selectionSubject.pipe(
+      rxjs.distinctUntilChanged(),
+      rxjs.shareReplay(1),
+      rxjs.takeUntil(reader.$.destroy$)
+    );
+    const selectionStart$ = selectionSubject.pipe(
+      rxjs.map((selection) => !!selection),
+      rxjs.distinctUntilChanged(),
+      rxjs.filter((isSelecting) => isSelecting),
+      rxjs.share()
+    );
+    const selectionEnd$ = selectionStart$.pipe(
+      rxjs.switchMap(() => selection$),
+      rxjs.distinctUntilChanged(),
+      rxjs.filter((selection) => !selection),
+      rxjs.share()
+    );
+    const selectionAfterPointerUp$ = selectionWithPointerUpSubject.asObservable();
+    const lastSelectionOnPointerdown$ = reader.context.containerElement$.pipe(
+      rxjs.switchMap((container) => rxjs.fromEvent(container, "pointerdown")),
+      rxjs.withLatestFrom(selection$),
+      rxjs.map(([, selection]) => selection),
+      rxjs.startWith(void 0)
+    );
+    return {
+      ...reader,
+      selection: {
+        selection$,
+        selectionStart$,
+        selectionEnd$,
+        selectionAfterPointerUp$,
+        lastSelectionOnPointerdown$,
+        generateCfis
+      },
+      destroy: () => {
+        selectionSubject.complete();
+        reader.destroy();
+      }
+    };
+  };
   const createReaderWithEnhancers = (
     //__
-    hotkeysEnhancer(
-      loadingEnhancer(
-        webkitEnhancer(
-          fontsEnhancer(
-            linksEnhancer(
-              accessibilityEnhancer(
-                resourcesEnhancer(
-                  utilsEnhancer(
-                    layoutEnhancer(
-                      zoomEnhancer(
-                        mediaEnhancer(
-                          chromeEnhancer(
-                            navigationEnhancer(
-                              themeEnhancer(
-                                paginationEnhancer(
-                                  progressionEnhancer(
-                                    eventsEnhancer(
-                                      htmlEnhancer(
-                                        // __
-                                        createReader
+    selectionEnhancer(
+      hotkeysEnhancer(
+        loadingEnhancer(
+          webkitEnhancer(
+            fontsEnhancer(
+              linksEnhancer(
+                accessibilityEnhancer(
+                  resourcesEnhancer(
+                    utilsEnhancer(
+                      layoutEnhancer(
+                        zoomEnhancer(
+                          mediaEnhancer(
+                            chromeEnhancer(
+                              navigationEnhancer(
+                                themeEnhancer(
+                                  paginationEnhancer(
+                                    progressionEnhancer(
+                                      eventsEnhancer(
+                                        htmlEnhancer(
+                                          // __
+                                          createReader
+                                        )
                                       )
                                     )
                                   )
@@ -8244,11 +8286,13 @@
     enumerable: true,
     get: () => shared.isShallowEqual
   });
+  exports2.DestroyableClass = DestroyableClass;
   exports2.DocumentRenderer = DocumentRenderer;
   exports2.HookManager = HookManager;
   exports2.Report = Report;
   exports2.ResourceHandler = ResourceHandler;
   exports2.SettingsManager = SettingsManager;
+  exports2.SpineItem = SpineItem;
   exports2.createReader = createReaderWithEnhancers;
   exports2.isHtmlElement = isHtmlElement;
   exports2.waitForSwitch = waitForSwitch;