@prose-reader/enhancer-annotations 1.222.0 → 1.223.0

package/dist/Commands.d.ts

@@ -1,20 +1,25 @@
 import { DestroyableClass } from '@prose-reader/core';
-import { SerializableHighlight } from './types';
-type HighlightParams = {
-    selection: Selection;
+import { Annotation } from './types';
+type AnnotationSharedParams = Omit<Annotation, "id" | "cfi"> & {
+    selection?: Selection;
+};
+type AnnotateParams = AnnotationSharedParams & {
     itemIndex: number;
-    color?: string;
-    contents?: string[];
+};
+type AnnotateAbsolutePageParams = AnnotationSharedParams & {
+    absolutePageIndex: number;
 };
 export declare class Commands extends DestroyableClass {
     private commandSubject;
-    readonly highlight$: import('rxjs').Observable<{
-        type: "highlight";
-        data: HighlightParams;
+    readonly annotate$: import('rxjs').Observable<{
+        type: "annotate";
+        data: (AnnotateParams | AnnotateAbsolutePageParams) & {
+            absolutePageIndex?: number;
+        };
     }>;
     readonly add$: import('rxjs').Observable<{
         type: "add";
-        data: SerializableHighlight | SerializableHighlight[];
+        data: Annotation | Annotation[];
     }>;
     readonly delete$: import('rxjs').Observable<{
         type: "delete";
@@ -23,7 +28,7 @@ export declare class Commands extends DestroyableClass {
     readonly update$: import('rxjs').Observable<{
         type: "update";
         id: string;
-        data: Pick<HighlightParams, "color" | "contents">;
+        data: Pick<AnnotationSharedParams, "highlightColor" | "notes">;
     }>;
     readonly select$: import('rxjs').Observable<{
         type: "select";
@@ -32,10 +37,11 @@ export declare class Commands extends DestroyableClass {
     readonly reset$: import('rxjs').Observable<{
         type: "reset";
     }>;
-    highlight: (params: HighlightParams) => void;
-    add: (data: SerializableHighlight | SerializableHighlight[]) => void;
+    annotate: (params: AnnotateParams) => void;
+    annotateAbsolutePage: (params: AnnotateAbsolutePageParams) => void;
+    add: (data: Annotation | Annotation[]) => void;
     delete: (id: string) => void;
-    update: (id: string, data: Pick<HighlightParams, "color" | "contents">) => void;
+    update: (id: string, data: Pick<AnnotationSharedParams, "highlightColor" | "notes">) => void;
     select: (id: string | undefined) => void;
     reset: () => void;
     destroy(): void;

package/dist/{highlights → annotations}/ReaderHighlights.d.ts

@@ -1,15 +1,15 @@
 import { DestroyableClass, Reader } from '@prose-reader/core';
 import { BehaviorSubject } from 'rxjs';
-import { ProseHighlight } from './Highlight';
 import { SpineItemHighlights } from './SpineItemHighlights';
+import { RuntimeAnnotation } from './types';
 export declare class ReaderHighlights extends DestroyableClass {
     private reader;
     private highlights;
     private selectedHighlight;
     private spineItemHighlights;
     tap$: SpineItemHighlights["tap$"];
-    constructor(reader: Reader, highlights: BehaviorSubject<ProseHighlight[]>, selectedHighlight: BehaviorSubject<string | undefined>);
-    getHighlightsForTarget: (target: EventTarget) => ProseHighlight[];
+    constructor(reader: Reader, highlights: BehaviorSubject<RuntimeAnnotation[]>, selectedHighlight: BehaviorSubject<string | undefined>);
+    getHighlightsForTarget: (target: EventTarget) => RuntimeAnnotation[];
     isTargetWithinHighlight: (target: EventTarget) => boolean;
-    layout(): void;
+    layout(): import('rxjs').Observable<((null | undefined)[] | null)[] | null>;
 }

package/dist/{highlights → annotations}/SpineItemHighlight.d.ts

@@ -1,19 +1,20 @@
 import { DestroyableClass, Reader, SpineItem } from '@prose-reader/core';
 import { Observable } from 'rxjs';
-import { ProseHighlight } from './Highlight';
+import { RuntimeAnnotation } from './types';
 export declare class SpineItemHighlight extends DestroyableClass {
     private spineItem;
     private containerElement;
     private reader;
-    readonly highlight: ProseHighlight;
+    readonly highlight: RuntimeAnnotation;
     private isSelected;
     private container;
     readonly tap$: Observable<{
         event: Event;
-        highlight: ProseHighlight;
+        highlight: RuntimeAnnotation;
     }>;
-    constructor(spineItem: SpineItem, containerElement: HTMLElement, reader: Reader, highlight: ProseHighlight, isSelected: Observable<boolean>);
-    render(): void;
+    private resolvedCfi$;
+    constructor(spineItem: SpineItem, containerElement: HTMLElement, reader: Reader, highlight: RuntimeAnnotation, isSelected: Observable<boolean>);
+    render(): Observable<null | undefined>;
     isWithinTarget(target: Node): boolean;
     destroy(): void;
 }

package/dist/{highlights → annotations}/SpineItemHighlights.d.ts

@@ -1,17 +1,17 @@
 import { DestroyableClass, Reader, SpineItem } from '@prose-reader/core';
 import { Observable } from 'rxjs';
-import { ProseHighlight } from './Highlight';
 import { SpineItemHighlight } from './SpineItemHighlight';
+import { RuntimeAnnotation } from './types';
 export declare class SpineItemHighlights extends DestroyableClass {
-    private highlights$;
+    private annotations$;
     private spineItem;
     private reader;
     private selectedHighlight;
     private layer;
     private highlights;
     readonly tap$: SpineItemHighlight["tap$"];
-    constructor(highlights$: Observable<ProseHighlight[]>, spineItem: SpineItem, reader: Reader, selectedHighlight: Observable<string | undefined>);
-    layout(): void;
+    constructor(annotations$: Observable<RuntimeAnnotation[]>, spineItem: SpineItem, reader: Reader, selectedHighlight: Observable<string | undefined>);
+    layout(): Observable<(null | undefined)[] | null>;
     getHighlightsForTarget(target: EventTarget): SpineItemHighlight[];
     destroy(): void;
 }

package/dist/annotations/types.d.ts

@@ -0,0 +1,4 @@
+import { Annotation } from '../types';
+export interface RuntimeAnnotation extends Annotation {
+    itemIndex: number;
+}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export * from './annotationsEnhancer';
 export * from './types';
-export * from './highlights/Highlight';
+export * from './annotations/types';

package/dist/index.js

@@ -1,11 +1,11 @@
 import { isDefined } from 'reactjrx';
-import { Subject, filter, fromEvent, map, share, skip, tap, takeUntil, switchMap, distinctUntilChanged, of, shareReplay, merge, BehaviorSubject, withLatestFrom, debounceTime, mergeMap, forkJoin } from 'rxjs';
+import { Subject, filter, fromEvent, map, share, shareReplay, skip, tap, takeUntil, merge, first, switchMap, distinctUntilChanged, of, forkJoin, defaultIfEmpty, BehaviorSubject, debounceTime, combineLatest } from 'rxjs';
 import { DestroyableClass } from '@prose-reader/core';
 
 class Commands extends DestroyableClass {
   commandSubject = new Subject();
-  highlight$ = this.commandSubject.pipe(
-    filter((command) => command.type === "highlight")
+  annotate$ = this.commandSubject.pipe(
+    filter((command) => command.type === "annotate")
   );
   add$ = this.commandSubject.pipe(
     filter((command) => command.type === "add")
@@ -22,8 +22,11 @@ class Commands extends DestroyableClass {
   reset$ = this.commandSubject.pipe(
     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 });
@@ -46,44 +49,6 @@ class Commands extends DestroyableClass {
   }
 }
 
-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();
@@ -156,7 +121,10 @@ class SpineItemHighlight extends DestroyableClass {
       map((event) => ({ event, highlight: this.highlight })),
       share()
     );
-    this.render();
+    this.resolvedCfi$ = this.spineItem.loaded$.pipe(
+      map(() => this.reader.cfi.resolveCfi({ cfi: this.highlight.cfi })),
+      shareReplay({ refCount: true, bufferSize: 1 })
+    );
     this.isSelected.pipe(
       skip(1),
       tap((isSelected2) => {
@@ -168,38 +136,47 @@ class SpineItemHighlight extends DestroyableClass {
       }),
       takeUntil(this.destroy$)
     ).subscribe();
+    merge(this.resolvedCfi$).pipe(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(
+      first(),
+      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);
@@ -211,9 +188,9 @@ class SpineItemHighlight extends DestroyableClass {
 }
 
 class SpineItemHighlights extends 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;
@@ -222,7 +199,7 @@ class SpineItemHighlights extends DestroyableClass {
       this.spineItem.containerElement,
       firstLayerElement
     );
-    const itemHighlights$ = this.highlights$.pipe(
+    const itemHighlights$ = this.annotations$.pipe(
       switchMap((annotations) => {
         this.highlights.forEach((highlight) => highlight.destroy());
         this.highlights = [];
@@ -251,7 +228,7 @@ class SpineItemHighlights extends DestroyableClass {
         (highlights) => merge(...highlights.map((highlight) => highlight.tap$))
       )
     );
-    highlights$.subscribe();
+    annotations$.subscribe();
   }
   layer;
   highlights = [];
@@ -259,7 +236,9 @@ class SpineItemHighlights extends DestroyableClass {
   layout() {
     const firstLayerElement = this.spineItem.renderer.documentContainer ?? document.createElement("div");
     layoutAnnotationLayer(firstLayerElement, this.layer);
-    this.highlights.forEach((highlight) => highlight.render());
+    return forkJoin(
+      this.highlights.map((highlight) => highlight.render())
+    ).pipe(defaultIfEmpty(null));
   }
   getHighlightsForTarget(target) {
     return this.highlights.filter(
@@ -321,97 +300,97 @@ class ReaderHighlights extends DestroyableClass {
     return !!this.getHighlightsForTarget(target).length;
   };
   layout() {
-    this.spineItemHighlights.value.forEach((item) => item.layout());
+    return forkJoin(
+      this.spineItemHighlights.value.map((item) => item.layout())
+    ).pipe(defaultIfEmpty(null));
   }
 }
 
-const consolidate = (highlight, reader) => {
-  const { itemIndex } = reader.cfi.parseCfi(highlight.cfi ?? "");
-  const spineItem = reader.spineItemsManager.get(itemIndex);
-  if (!spineItem) return of(highlight);
-  return of(highlight).pipe(
-    withLatestFrom(spineItem.isReady$),
-    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;
-      }
-    }),
-    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 BehaviorSubject([]);
+  const annotationsSubject = new BehaviorSubject([]);
   const selectedHighlightSubject = new BehaviorSubject(
     void 0
   );
-  const highlights$ = highlightsSubject.asObservable().pipe(distinctUntilChanged());
+  const annotations$ = annotationsSubject.asObservable().pipe(
+    distinctUntilChanged(),
+    tap((annotations) => {
+      report.debug("annotations", annotations);
+    }),
+    shareReplay({
+      refCount: true,
+      bufferSize: 1
+    })
+  );
   const readerHighlights = new ReaderHighlights(
     reader,
-    highlightsSubject,
+    annotationsSubject,
     selectedHighlightSubject
   );
-  const highlighted$ = commands.highlight$.pipe(
-    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(
+    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];
     }),
     filter(isDefined),
@@ -421,28 +400,31 @@ const annotationsEnhancer = (next) => (options) => {
     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(
     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(
     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;
         })
       );
     })
@@ -454,55 +436,52 @@ const annotationsEnhancer = (next) => (options) => {
   );
   const reset$ = commands.reset$.pipe(
     tap(() => {
-      highlightsSubject.next([]);
+      annotationsSubject.next([]);
     })
   );
-  const highlightsConsolidation$ = merge(highlighted$, reader.layout$).pipe(
+  const renderAnnotations$ = merge(annotations$, reader.layout$).pipe(
     debounceTime(50),
-    withLatestFrom(highlights$),
-    mergeMap(
-      () => forkJoin(
-        highlightsSubject.value.map(
-          (highlight) => consolidate(highlight, reader)
-        )
+    switchMap(() => readerHighlights.layout())
+  );
+  const candidates$ = reader.layoutInfo$.pipe(
+    switchMap(
+      ({ pages }) => combineLatest(
+        pages.map((page) => {
+          const item = reader.spineItemsManager.get(page.itemIndex);
+          if (!item) return of(false);
+          if (item.renditionLayout === "pre-paginated") return of(true);
+          if (page.firstVisibleNode) return of(true);
+          return of(false);
+        })
       )
-    ),
-    tap((consolidatedHighlights) => {
-      const consolidatedExistingHighlights = highlightsSubject.value.map(
-        (highlight) => consolidatedHighlights.find((c) => c.id === highlight.id) ?? highlight
-      );
-      highlightsSubject.next(consolidatedExistingHighlights);
-      readerHighlights.layout();
-    })
+    )
   );
   merge(
-    highlighted$,
+    annotated$,
     add$,
     delete$,
     update$,
     select$,
     reset$,
-    highlightsConsolidation$,
-    highlights$.pipe(
-      tap((annotations) => {
-        report.debug("highlights", annotations);
-      })
-    )
+    renderAnnotations$,
+    annotations$
   ).pipe(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,
@@ -512,5 +491,5 @@ const annotationsEnhancer = (next) => (options) => {
   };
 };
 
-export { ProseHighlight, annotationsEnhancer };
+export { annotationsEnhancer };
 //# sourceMappingURL=index.js.map