@prose-reader/enhancer-annotations 1.222.0 → 1.223.0

package/dist/index.umd.cjs

@@ -6,8 +6,8 @@
 
   class Commands extends core.DestroyableClass {
     commandSubject = new rxjs.Subject();
-    highlight$ = this.commandSubject.pipe(
-      rxjs.filter((command) => command.type === "highlight")
+    annotate$ = this.commandSubject.pipe(
+      rxjs.filter((command) => command.type === "annotate")
     );
     add$ = this.commandSubject.pipe(
       rxjs.filter((command) => command.type === "add")
@@ -24,8 +24,11 @@
     reset$ = this.commandSubject.pipe(
       rxjs.filter((command) => command.type === "reset")
     );
-    highlight = (params) => {
-      this.commandSubject.next({ type: "highlight", data: params });
+    annotate = (params) => {
+      this.commandSubject.next({ type: "annotate", data: params });
+    };
+    annotateAbsolutePage = (params) => {
+      this.commandSubject.next({ type: "annotate", data: params });
     };
     add = (data) => {
       this.commandSubject.next({ type: "add", data });
@@ -48,44 +51,6 @@
     }
   }
 
-  class ProseHighlight {
-    cfi;
-    endCfi;
-    itemIndex;
-    color;
-    contents;
-    range;
-    selectionAsText;
-    /**
-     * Unique local ID. This is to ensure unicity
-     * for duplicate selections
-     */
-    id;
-    constructor(params) {
-      this.cfi = params.cfi;
-      this.endCfi = params.endCfi;
-      this.itemIndex = params.itemIndex;
-      this.color = params.color;
-      this.contents = params.contents;
-      this.id = params.id;
-      this.selectionAsText = params.selectionAsText;
-    }
-    update(params) {
-      Object.assign(this, params);
-      return this;
-    }
-    toJSON() {
-      return {
-        cfi: this.cfi,
-        endCfi: this.endCfi,
-        color: this.color,
-        contents: this.contents,
-        id: this.id,
-        selectionAsText: this.selectionAsText
-      };
-    }
-  }
-
   const createElementForRange = (range, container, color) => {
     const rects = Array.from(range.getClientRects());
     const lineGroups = /* @__PURE__ */ new Map();
@@ -158,7 +123,10 @@
         rxjs.map((event) => ({ event, highlight: this.highlight })),
         rxjs.share()
       );
-      this.render();
+      this.resolvedCfi$ = this.spineItem.loaded$.pipe(
+        rxjs.map(() => this.reader.cfi.resolveCfi({ cfi: this.highlight.cfi })),
+        rxjs.shareReplay({ refCount: true, bufferSize: 1 })
+      );
       this.isSelected.pipe(
         rxjs.skip(1),
         rxjs.tap((isSelected2) => {
@@ -170,38 +138,47 @@
         }),
         rxjs.takeUntil(this.destroy$)
       ).subscribe();
+      rxjs.merge(this.resolvedCfi$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
     container;
     tap$;
+    resolvedCfi$;
     render() {
-      this.container.innerHTML = "";
-      const range = this.highlight.range;
-      if (!range) {
-        return;
-      }
-      const rectElements = createElementForRange(
-        range,
-        this.container,
-        this.highlight.color ?? "yellow"
+      return this.resolvedCfi$.pipe(
+        rxjs.first(),
+        rxjs.map((resolvedCfi) => {
+          if (!resolvedCfi || !resolvedCfi.isRange) return void 0;
+          const range = resolvedCfi.range;
+          this.container.innerHTML = "";
+          if (!range) {
+            return;
+          }
+          const rectElements = createElementForRange(
+            range,
+            this.container,
+            this.highlight.highlightColor ?? "yellow"
+          );
+          rectElements.forEach((elt) => {
+            elt.style.pointerEvents = "initial";
+            elt.style.cursor = "pointer";
+            elt.dataset.highlightRect = this.highlight.id;
+            this.container.appendChild(elt);
+          });
+          const firstElement = rectElements[0];
+          if (firstElement && this.highlight.notes) {
+            const noteIcon = document.createElement("span");
+            noteIcon.textContent = "📝";
+            noteIcon.style.position = "absolute";
+            noteIcon.style.top = "0";
+            noteIcon.style.left = "0";
+            noteIcon.style.transform = "translate(-0%, -80%)";
+            noteIcon.style.fontSize = "18px";
+            noteIcon.style.opacity = "50%";
+            firstElement.appendChild(noteIcon);
+          }
+          return null;
+        })
       );
-      rectElements.forEach((elt) => {
-        elt.style.pointerEvents = "initial";
-        elt.style.cursor = "pointer";
-        elt.dataset.highlightRect = this.highlight.id;
-        this.container.appendChild(elt);
-      });
-      const firstElement = rectElements[0];
-      if (firstElement && this.highlight.contents?.length) {
-        const noteIcon = document.createElement("span");
-        noteIcon.textContent = "📝";
-        noteIcon.style.position = "absolute";
-        noteIcon.style.top = "0";
-        noteIcon.style.left = "0";
-        noteIcon.style.transform = "translate(-0%, -80%)";
-        noteIcon.style.fontSize = "18px";
-        noteIcon.style.opacity = "50%";
-        firstElement.appendChild(noteIcon);
-      }
     }
     isWithinTarget(target) {
       return this.container.contains(target);
@@ -213,9 +190,9 @@
   }
 
   class SpineItemHighlights extends core.DestroyableClass {
-    constructor(highlights$, spineItem, reader, selectedHighlight) {
+    constructor(annotations$, spineItem, reader, selectedHighlight) {
       super();
-      this.highlights$ = highlights$;
+      this.annotations$ = annotations$;
       this.spineItem = spineItem;
       this.reader = reader;
       this.selectedHighlight = selectedHighlight;
@@ -224,7 +201,7 @@
         this.spineItem.containerElement,
         firstLayerElement
       );
-      const itemHighlights$ = this.highlights$.pipe(
+      const itemHighlights$ = this.annotations$.pipe(
         rxjs.switchMap((annotations) => {
           this.highlights.forEach((highlight) => highlight.destroy());
           this.highlights = [];
@@ -253,7 +230,7 @@
           (highlights) => rxjs.merge(...highlights.map((highlight) => highlight.tap$))
         )
       );
-      highlights$.subscribe();
+      annotations$.subscribe();
     }
     layer;
     highlights = [];
@@ -261,7 +238,9 @@
     layout() {
       const firstLayerElement = this.spineItem.renderer.documentContainer ?? document.createElement("div");
       layoutAnnotationLayer(firstLayerElement, this.layer);
-      this.highlights.forEach((highlight) => highlight.render());
+      return rxjs.forkJoin(
+        this.highlights.map((highlight) => highlight.render())
+      ).pipe(rxjs.defaultIfEmpty(null));
     }
     getHighlightsForTarget(target) {
       return this.highlights.filter(
@@ -323,97 +302,97 @@
       return !!this.getHighlightsForTarget(target).length;
     };
     layout() {
-      this.spineItemHighlights.value.forEach((item) => item.layout());
+      return rxjs.forkJoin(
+        this.spineItemHighlights.value.map((item) => item.layout())
+      ).pipe(rxjs.defaultIfEmpty(null));
     }
   }
 
-  const consolidate = (highlight, reader) => {
-    const { itemIndex } = reader.cfi.parseCfi(highlight.cfi ?? "");
-    const spineItem = reader.spineItemsManager.get(itemIndex);
-    if (!spineItem) return rxjs.of(highlight);
-    return rxjs.of(highlight).pipe(
-      rxjs.withLatestFrom(spineItem.isReady$),
-      rxjs.tap(([, isItemReady]) => {
-        const startCfi = reader.cfi.resolveCfi({ cfi: highlight.cfi ?? "" });
-        const resolvedFocusCfi = reader.cfi.resolveCfi({
-          cfi: highlight.endCfi ?? ""
-        });
-        if (startCfi?.node && resolvedFocusCfi?.node && isItemReady) {
-          const range = startCfi?.node.ownerDocument?.createRange();
-          range?.setStart(startCfi?.node, startCfi.offset ?? 0);
-          range?.setEnd(resolvedFocusCfi?.node, resolvedFocusCfi.offset ?? 0);
-          highlight.range = range;
-          highlight.selectionAsText = range?.toString();
-        } else {
-          highlight.range = void 0;
-        }
-      }),
-      rxjs.map(() => highlight)
-    );
-  };
-
   const d = () => {
     if (!(typeof window > "u"))
       return window;
   };
-  function E() {
+  function h() {
     var n;
     const e = (n = d()) == null ? void 0 : n.__PROSE_READER_DEBUG;
     return e === true || e === "true";
   }
-  const i = (e) => `[${e}]`, s = (e, n = E()) => ({
-    namespace: (t, o) => s(`${e} ${t}`, o),
-    debug: n ? e ? Function.prototype.bind.call(console.debug, console, i(e)) : Function.prototype.bind.call(console.debug, console) : () => {
+  const u = (e, n = h(), t) => ({
+    namespace: (o, l) => u(`[${e}] [${o}]`, l, t),
+    debug: n ? e ? Function.prototype.bind.call(console.debug, console, e) : Function.prototype.bind.call(console.debug, console) : () => {
     },
-    info: n ? e ? Function.prototype.bind.call(console.info, console, i(e)) : Function.prototype.bind.call(console.info, console) : () => {
+    info: n ? e ? Function.prototype.bind.call(
+      console.info,
+      console,
+      `%c${e}`,
+      t != null && t.color ? `color: ${t.color}` : void 0
+    ) : Function.prototype.bind.call(console.info, console) : () => {
     },
-    log: n ? e ? Function.prototype.bind.call(console.log, console, i(e)) : Function.prototype.bind.call(console.log, console) : () => {
+    log: n ? e ? Function.prototype.bind.call(console.log, console, e) : Function.prototype.bind.call(console.log, console) : () => {
     },
-    warn: n ? e ? Function.prototype.bind.call(console.warn, console, i(e)) : Function.prototype.bind.call(console.warn, console) : () => {
+    warn: n ? e ? Function.prototype.bind.call(console.warn, console, e) : Function.prototype.bind.call(console.warn, console) : () => {
     },
-    error: n ? e ? Function.prototype.bind.call(console.error, console, i(e)) : Function.prototype.bind.call(console.error, console) : () => {
+    error: n ? e ? Function.prototype.bind.call(console.error, console, e) : Function.prototype.bind.call(console.error, console) : () => {
     }
-  }), b = {
-    ...s(),
-    namespace: (e, n) => s(e, n)
+  }), F = {
+    ...u(),
+    namespace: (e, n, t) => u(e, n, t)
   };
 
   const name = "@prose-reader/enhancer-annotations";
 
   const IS_DEBUG_ENABLED = true;
-  const report = b.namespace(name, IS_DEBUG_ENABLED);
+  const report = F.namespace(name, IS_DEBUG_ENABLED);
 
   const annotationsEnhancer = (next) => (options) => {
     const reader = next(options);
     const commands = new Commands();
-    const highlightsSubject = new rxjs.BehaviorSubject([]);
+    const annotationsSubject = new rxjs.BehaviorSubject([]);
     const selectedHighlightSubject = new rxjs.BehaviorSubject(
       void 0
     );
-    const highlights$ = highlightsSubject.asObservable().pipe(rxjs.distinctUntilChanged());
+    const annotations$ = annotationsSubject.asObservable().pipe(
+      rxjs.distinctUntilChanged(),
+      rxjs.tap((annotations) => {
+        report.debug("annotations", annotations);
+      }),
+      rxjs.shareReplay({
+        refCount: true,
+        bufferSize: 1
+      })
+    );
     const readerHighlights = new ReaderHighlights(
       reader,
-      highlightsSubject,
+      annotationsSubject,
       selectedHighlightSubject
     );
-    const highlighted$ = commands.highlight$.pipe(
-      rxjs.map(({ data: { itemIndex, selection, ...rest } }) => {
+    const resolveItemInformation = (params) => {
+      if (params.itemIndex !== void 0)
+        return { itemIndex: params.itemIndex, pageIndex: void 0 };
+      if (params.absolutePageIndex !== void 0) {
+        return reader.spine.locator.getSpineInfoFromAbsolutePageIndex({
+          absolutePageIndex: params.absolutePageIndex
+        });
+      }
+      return void 0;
+    };
+    const annotated$ = commands.annotate$.pipe(
+      rxjs.map(({ data: { selection, ...rest } }) => {
+        const { itemIndex, pageIndex = 0 } = resolveItemInformation(rest) ?? {};
         const spineItem = reader.spineItemsManager.get(itemIndex);
         if (!spineItem) return void 0;
-        const range = reader.selection.createOrderedRangeFromSelection({
+        const range = selection ? reader.selection.createOrderedRangeFromSelection({
           selection,
           spineItem
-        });
-        if (!range) return void 0;
-        const { start: startCfi, end: endCfi } = reader.cfi.generateCfiFromRange(range, spineItem.item);
-        const highlight = new ProseHighlight({
-          cfi: startCfi,
-          endCfi,
-          itemIndex,
+        }) : void 0;
+        const cfi = range ? reader.cfi.generateCfiFromRange(range, spineItem.item) : reader.cfi.generateCfiForSpineItemPage({ pageIndex, spineItem });
+        const highlight = {
+          cfi,
+          itemIndex: spineItem.index,
           id: window.crypto.randomUUID(),
           ...rest
-        });
-        highlightsSubject.next([...highlightsSubject.getValue(), highlight]);
+        };
+        annotationsSubject.next([...annotationsSubject.getValue(), highlight]);
         return [highlight.id];
       }),
       rxjs.filter(reactjrx.isDefined),
@@ -423,28 +402,31 @@
       rxjs.map(({ data }) => {
         const annotations = Array.isArray(data) ? data : [data];
         const addedHighlights = annotations.map((annotation) => {
-          const { itemIndex } = reader.cfi.parseCfi(annotation.cfi ?? "");
-          const highlight = new ProseHighlight({ ...annotation, itemIndex });
+          const { itemIndex = 0 } = reader.cfi.parseCfi(annotation.cfi ?? "");
+          const highlight = {
+            ...annotation,
+            itemIndex
+          };
           return highlight;
         });
-        highlightsSubject.next([
-          ...highlightsSubject.getValue(),
+        annotationsSubject.next([
+          ...annotationsSubject.getValue(),
           ...addedHighlights
         ]);
       })
     );
     const delete$ = commands.delete$.pipe(
       rxjs.tap(({ id }) => {
-        highlightsSubject.next(
-          highlightsSubject.getValue().filter((highlight) => highlight.id !== id)
+        annotationsSubject.next(
+          annotationsSubject.getValue().filter((highlight) => highlight.id !== id)
         );
       })
     );
     const update$ = commands.update$.pipe(
       rxjs.tap(({ id, data }) => {
-        highlightsSubject.next(
-          highlightsSubject.getValue().map((highlight) => {
-            return highlight.id === id ? highlight.update(data) : highlight;
+        annotationsSubject.next(
+          annotationsSubject.getValue().map((highlight) => {
+            return highlight.id === id ? { ...highlight, ...data } : highlight;
           })
         );
       })
@@ -456,55 +438,52 @@
     );
     const reset$ = commands.reset$.pipe(
       rxjs.tap(() => {
-        highlightsSubject.next([]);
+        annotationsSubject.next([]);
       })
     );
-    const highlightsConsolidation$ = rxjs.merge(highlighted$, reader.layout$).pipe(
+    const renderAnnotations$ = rxjs.merge(annotations$, reader.layout$).pipe(
       rxjs.debounceTime(50),
-      rxjs.withLatestFrom(highlights$),
-      rxjs.mergeMap(
-        () => rxjs.forkJoin(
-          highlightsSubject.value.map(
-            (highlight) => consolidate(highlight, reader)
-          )
+      rxjs.switchMap(() => readerHighlights.layout())
+    );
+    const candidates$ = reader.layoutInfo$.pipe(
+      rxjs.switchMap(
+        ({ pages }) => rxjs.combineLatest(
+          pages.map((page) => {
+            const item = reader.spineItemsManager.get(page.itemIndex);
+            if (!item) return rxjs.of(false);
+            if (item.renditionLayout === "pre-paginated") return rxjs.of(true);
+            if (page.firstVisibleNode) return rxjs.of(true);
+            return rxjs.of(false);
+          })
         )
-      ),
-      rxjs.tap((consolidatedHighlights) => {
-        const consolidatedExistingHighlights = highlightsSubject.value.map(
-          (highlight) => consolidatedHighlights.find((c) => c.id === highlight.id) ?? highlight
-        );
-        highlightsSubject.next(consolidatedExistingHighlights);
-        readerHighlights.layout();
-      })
+      )
     );
     rxjs.merge(
-      highlighted$,
+      annotated$,
       add$,
       delete$,
       update$,
       select$,
       reset$,
-      highlightsConsolidation$,
-      highlights$.pipe(
-        rxjs.tap((annotations) => {
-          report.debug("highlights", annotations);
-        })
-      )
+      renderAnnotations$,
+      annotations$
     ).pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
     return {
       ...reader,
       __PROSE_READER_ENHANCER_ANNOTATIONS: true,
       destroy: () => {
-        highlightsSubject.complete();
+        annotationsSubject.complete();
         commands.destroy();
         readerHighlights.destroy();
         reader.destroy();
       },
       annotations: {
-        highlights$,
+        annotations$,
         highlightTap$: readerHighlights.tap$,
+        candidates$,
         isTargetWithinHighlight: readerHighlights.isTargetWithinHighlight,
-        highlight: commands.highlight,
+        annotate: commands.annotate,
+        annotateAbsolutePage: commands.annotateAbsolutePage,
         add: commands.add,
         delete: commands.delete,
         update: commands.update,
@@ -514,7 +493,6 @@
     };
   };
 
-  exports.ProseHighlight = ProseHighlight;
   exports.annotationsEnhancer = annotationsEnhancer;
 
   Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });