@prose-reader/enhancer-annotations 1.124.0 → 1.126.0

package/dist/Commands.d.ts

@@ -1,9 +1,7 @@
-import { DestroyableClass } from '@prose-reader/core';
-import { Highlight } from './types';
-type HighlightParams = {
-    document: Document;
-    selection: Selection;
-    itemId: string;
+import { DestroyableClass, Reader } from '@prose-reader/core';
+import { ObservedValueOf } from 'rxjs';
+import { SerializableHighlight } from './types';
+type HighlightParams = ObservedValueOf<Reader["selection"]["selection$"]> & {
     color?: string;
     contents?: string[];
 };
@@ -15,7 +13,7 @@ export declare class Commands extends DestroyableClass {
     }>;
     readonly add$: import('rxjs').Observable<{
         type: "add";
-        data: Highlight | Highlight[];
+        data: SerializableHighlight | SerializableHighlight[];
     }>;
     readonly delete$: import('rxjs').Observable<{
         type: "delete";
@@ -31,7 +29,7 @@ export declare class Commands extends DestroyableClass {
         id: string | undefined;
     }>;
     highlight: (params: HighlightParams) => void;
-    add: (data: Highlight | Highlight[]) => void;
+    add: (data: SerializableHighlight | SerializableHighlight[]) => void;
     delete: (id: string) => void;
     update: (id: string, data: Pick<HighlightParams, "color" | "contents">) => void;
     select: (id: string | undefined) => void;

package/dist/annotationsEnhancer.d.ts

@@ -1,11 +1,11 @@
 import { Reader } from '@prose-reader/core';
 import { Observable } from 'rxjs';
-import { RuntimeHighlight } from './types';
 import { ReaderHighlights } from './highlights/ReaderHighlights';
 import { Commands } from './Commands';
+import { Highlight } from './highlights/Highlight';
 export declare const annotationsEnhancer: <InheritOptions, InheritOutput extends Reader>(next: (options: InheritOptions) => InheritOutput) => (options: InheritOptions) => InheritOutput & {
     annotations: {
-        annotations$: Observable<RuntimeHighlight[]>;
+        highlights$: Observable<Highlight[]>;
         highlightTap$: ReaderHighlights["tap$"];
         highlight: Commands["highlight"];
         add: Commands["add"];

package/dist/highlights/Highlight.d.ts

@@ -0,0 +1,21 @@
+import { SerializableHighlight } from '../types';
+export declare class Highlight {
+    anchorCfi: string | undefined;
+    focusCfi: string | undefined;
+    itemIndex?: number;
+    color?: string;
+    contents?: string[];
+    spineItemPageIndex?: number;
+    absolutePageIndex?: number;
+    range?: Range;
+    lastSelectionText?: string;
+    /**
+     * Unique local ID. This is to ensure unicity
+     * for duplicate selections
+     */
+    id: string;
+    constructor(params: SerializableHighlight & {
+        itemIndex?: number;
+    });
+    toJSON(): SerializableHighlight;
+}

package/dist/highlights/ReaderHighlights.d.ts

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

package/dist/highlights/SpineItemHighlight.d.ts

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

package/dist/highlights/SpineItemHighlights.d.ts

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

package/dist/highlights/consolidate.d.ts

@@ -0,0 +1,3 @@
+import { Reader } from '@prose-reader/core';
+import { Highlight } from './Highlight';
+export declare const consolidate: (highlight: Highlight, reader: Reader) => void;

package/dist/highlights/utils.d.ts

@@ -1,11 +1,4 @@
-export declare const getElementsForRange: (range: Range, container: HTMLElement) => HTMLDivElement[];
-export declare const getRangeFromSelection: (overlayElement: HTMLElement, anchor: {
-    node: Node;
-    offset?: number;
-}, focus: {
-    node: Node;
-    offset?: number;
-}) => Range;
+export declare const createElementForRange: (range: Range, container: HTMLElement, color: string) => HTMLDivElement[];
 export declare const copyPositionStyle: (source: HTMLElement, target: HTMLElement) => void;
 export declare const createAnnotationLayer: (container: HTMLElement, layer: HTMLElement) => HTMLDivElement;
 export declare const layoutAnnotationLayer: (layer: HTMLElement, annotationLayer: HTMLElement) => void;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,5 +1,5 @@
-import { fromEvent, map, share, skip, tap, takeUntil, switchMap, distinctUntilChanged, of, shareReplay, merge, BehaviorSubject, Subject, filter } from 'rxjs';
-import { DestroyableClass } from '@prose-reader/core';
+import { DestroyableClass, waitForSwitch } from '@prose-reader/core';
+import { fromEvent, map, share, skip, tap, takeUntil, switchMap, distinctUntilChanged, of, shareReplay, merge, BehaviorSubject, Subject, filter, debounceTime, withLatestFrom } from 'rxjs';
 
 const c = "@prose-reader", i = (e) => `[${e}]`, p = (e, n) => ({
   debug: !n || (window == null ? void 0 : window.__PROSE_READER_DEBUG) !== !0 ? () => {
@@ -16,7 +16,7 @@ const c = "@prose-reader", i = (e) => `[${e}]`, p = (e, n) => ({
 const IS_DEBUG_ENABLED = true;
 const report = $.namespace(`enhancer-annotations`, IS_DEBUG_ENABLED);
 
-const getElementsForRange = (range, container) => {
+const createElementForRange = (range, container, color) => {
   const rects = Array.from(range.getClientRects());
   const lineGroups = /* @__PURE__ */ new Map();
   rects.forEach((rect) => {
@@ -31,39 +31,27 @@ const getElementsForRange = (range, container) => {
     const right = Math.max(...lineRects.map((r) => r.right));
     const top = lineRects[0]?.top;
     const height = lineRects[0]?.height;
+    const rectEltContainer = container.ownerDocument.createElement("div");
     const rectElt = container.ownerDocument.createElement("div");
-    rectElt.style.cssText = `
+    rectEltContainer.style.cssText = `
         position: absolute;
         width: ${right - left}px;
         height: ${height}px;
         top: ${top}px;
         left: ${left}px;
-        opacity: 50%;
+        box-sizing: border-box;
+        border: 3px dashed transparent;
+    `;
+    rectElt.style.cssText = `
+        height: 100%;
+        width: 100%;
+        opacity: 25%;
+        background-color: ${color}
     `;
-    return rectElt;
+    rectEltContainer.appendChild(rectElt);
+    return rectEltContainer;
   });
 };
-const getRangeFromSelection = (overlayElement, anchor, focus) => {
-  const range = overlayElement.ownerDocument.createRange();
-  const comparison = anchor.node.compareDocumentPosition(focus.node);
-  try {
-    if (comparison & Node.DOCUMENT_POSITION_PRECEDING) {
-      range.setStart(focus.node, focus.offset || 0);
-      range.setEnd(anchor.node, anchor.offset || 0);
-    } else if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {
-      range.setStart(anchor.node, anchor.offset || 0);
-      range.setEnd(focus.node, focus.offset || 0);
-    } else {
-      const startOffset = Math.min(anchor.offset || 0, focus.offset || 0);
-      const endOffset = Math.max(anchor.offset || 0, focus.offset || 0);
-      range.setStart(anchor.node, startOffset);
-      range.setEnd(anchor.node, endOffset);
-    }
-  } catch (e) {
-    report.error(e);
-  }
-  return range;
-};
 const copyPositionStyle = (source, target) => {
   target.style.cssText = source.style.cssText;
 };
@@ -92,6 +80,7 @@ class SpineItemHighlight extends DestroyableClass {
     this.highlight = highlight;
     this.isSelected = isSelected;
     void this.spineItem;
+    void this.reader;
     this.container = this.containerElement.ownerDocument.createElement("div");
     this.container.dataset["highlightContainer"] = this.highlight.id;
     this.containerElement.appendChild(this.container);
@@ -105,7 +94,7 @@ class SpineItemHighlight extends DestroyableClass {
       tap((isSelected2) => {
         Array.from(this.container.children).forEach((child) => {
           if (child instanceof HTMLElement) {
-            child.style.border = isSelected2 ? "3px dashed red" : "none";
+            child.style.border = isSelected2 ? "3px dashed red" : "3px dashed transparent";
           }
         });
       }),
@@ -116,25 +105,29 @@ class SpineItemHighlight extends DestroyableClass {
   tap$;
   render() {
     this.container.innerHTML = "";
-    const { node: anchorNode, offset: anchorOffset } = this.reader.cfi.resolveCfi({ cfi: this.highlight.anchorCfi ?? `` }) ?? {};
-    const { node: focusNode, offset: focusOffset } = this.reader.cfi.resolveCfi({ cfi: this.highlight.focusCfi ?? `` }) ?? {};
-    if (!anchorNode || !focusNode) {
-      report.error(`Unable to resolve anchor cfi: ${this.highlight.anchorCfi}`);
+    const range = this.highlight.range;
+    if (!range) {
       return;
     }
-    const range = getRangeFromSelection(
-      this.containerElement,
-      { node: anchorNode, offset: anchorOffset },
-      { node: focusNode, offset: focusOffset }
-    );
-    const rectElements = getElementsForRange(range, this.container);
+    const rectElements = createElementForRange(range, this.container, this.highlight.color ?? "yellow");
     rectElements.forEach((elt) => {
       elt.style.pointerEvents = "initial";
       elt.style.cursor = "pointer";
-      elt.style.backgroundColor = this.highlight.color ?? "yellow";
       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);
@@ -146,20 +139,20 @@ class SpineItemHighlight extends DestroyableClass {
 }
 
 class SpineItemHighlights extends DestroyableClass {
-  constructor(annotations$, spineItem, reader, selectedHighlight) {
+  constructor(highlights$, spineItem, reader, selectedHighlight) {
     super();
-    this.annotations$ = annotations$;
+    this.highlights$ = highlights$;
     this.spineItem = spineItem;
     this.reader = reader;
     this.selectedHighlight = selectedHighlight;
     const firstLayerElement = spineItem.renderer.layers[0]?.element ?? document.createElement("div");
     this.layer = createAnnotationLayer(this.spineItem.containerElement, firstLayerElement);
-    const highlights$ = this.annotations$.pipe(
+    const itemHighlights$ = this.highlights$.pipe(
       switchMap((annotations) => {
         this.highlights.forEach((highlight) => highlight.destroy());
         this.highlights = [];
         annotations.forEach((annotation) => {
-          if (annotation.itemId !== this.spineItem.item.id) return;
+          if (annotation.itemIndex !== this.spineItem.item.index) return;
           const isSelected$ = this.selectedHighlight.pipe(
             map((id) => id === annotation.id),
             distinctUntilChanged()
@@ -172,7 +165,7 @@ class SpineItemHighlights extends DestroyableClass {
       shareReplay(1),
       takeUntil(this.destroy$)
     );
-    this.tap$ = highlights$.pipe(switchMap((highlights) => merge(...highlights.map((highlight) => highlight.tap$))));
+    this.tap$ = itemHighlights$.pipe(switchMap((highlights) => merge(...highlights.map((highlight) => highlight.tap$))));
     highlights$.subscribe();
   }
   layer;
@@ -202,18 +195,13 @@ class ReaderHighlights extends DestroyableClass {
       const spineItem = reader.spineItemsManager.get(itemId);
       if (!spineItem) return;
       const spineItemHighlights$ = this.highlights.pipe(
-        map((highlights2) => highlights2.filter((highlight) => highlight.itemId === itemId))
+        map((highlights2) => highlights2.filter((highlight) => highlight.itemIndex === spineItem.item.index))
       );
       const spineItemHighlights = new SpineItemHighlights(spineItemHighlights$, spineItem, reader, this.selectedHighlight);
       this.spineItemHighlights.next([...this.spineItemHighlights.getValue(), spineItemHighlights]);
-      const deregister = reader.hookManager.register("item.onAfterLayout", ({ item }) => {
-        if (item.id !== itemId) return;
-        spineItemHighlights.layout();
-      });
       destroy(() => {
         this.spineItemHighlights.next(this.spineItemHighlights.getValue().filter((layer) => layer !== spineItemHighlights));
         spineItemHighlights.destroy();
-        deregister();
       });
     });
     this.tap$ = this.spineItemHighlights.pipe(switchMap((layers) => merge(...layers.map((layer) => layer.tap$))));
@@ -226,6 +214,9 @@ class ReaderHighlights extends DestroyableClass {
   isTargetWithinHighlight = (target) => {
     return !!this.getHighlightsForTarget(target).length;
   };
+  layout() {
+    this.spineItemHighlights.getValue().forEach((item) => item.layout());
+  }
 }
 
 class Commands extends DestroyableClass {
@@ -256,6 +247,82 @@ class Commands extends DestroyableClass {
   }
 }
 
+class Highlight {
+  anchorCfi;
+  focusCfi;
+  itemIndex;
+  color;
+  contents;
+  spineItemPageIndex;
+  absolutePageIndex;
+  range;
+  lastSelectionText;
+  /**
+   * Unique local ID. This is to ensure unicity
+   * for duplicate selections
+   */
+  id;
+  constructor(params) {
+    this.anchorCfi = params.anchorCfi;
+    this.focusCfi = params.focusCfi;
+    this.itemIndex = params.itemIndex;
+    this.color = params.color;
+    this.contents = params.contents;
+    this.id = params.id;
+    this.lastSelectionText = params.lastSelectionText;
+  }
+  toJSON() {
+    return {
+      anchorCfi: this.anchorCfi,
+      focusCfi: this.focusCfi,
+      color: this.color,
+      contents: this.contents,
+      id: this.id,
+      lastSelectionText: this.lastSelectionText
+    };
+  }
+}
+
+const consolidate = (highlight, reader) => {
+  const { itemIndex } = reader.cfi.parseCfi(highlight.anchorCfi ?? "");
+  const spineItem = reader.spineItemsManager.get(itemIndex);
+  const resolvedAnchorCfi = reader.cfi.resolveCfi({ cfi: highlight.anchorCfi ?? "" });
+  const resolvedFocusCfi = reader.cfi.resolveCfi({ cfi: highlight.focusCfi ?? "" });
+  if (!spineItem) return;
+  if (spineItem.item.renditionLayout === `pre-paginated`) {
+    highlight.spineItemPageIndex = 0;
+  } else {
+    if (resolvedAnchorCfi?.node) {
+      highlight.spineItemPageIndex = reader.spine.locator.spineItemLocator.getSpineItemPageIndexFromNode(
+        resolvedAnchorCfi.node,
+        resolvedAnchorCfi.offset ?? 0,
+        spineItem
+      );
+    }
+  }
+  if (resolvedAnchorCfi?.node && resolvedFocusCfi?.node && spineItem.isReady) {
+    const range = reader.selection.createRangeFromSelection({
+      selection: {
+        anchorNode: resolvedAnchorCfi.node,
+        anchorOffset: resolvedAnchorCfi.offset ?? 0,
+        focusNode: resolvedFocusCfi.node,
+        focusOffset: resolvedFocusCfi.offset ?? 0
+      },
+      spineItem
+    });
+    highlight.range = range;
+    highlight.lastSelectionText = range?.toString();
+  } else {
+    highlight.range = void 0;
+  }
+  if (highlight.spineItemPageIndex !== void 0) {
+    highlight.absolutePageIndex = reader.spine.locator.getAbsolutePageIndexFromPageIndex({
+      pageIndex: highlight.spineItemPageIndex,
+      spineItemOrId: spineItem
+    });
+  }
+};
+
 const annotationsEnhancer = (next) => (options) => {
   const reader = next(options);
   const commands = new Commands();
@@ -263,16 +330,27 @@ const annotationsEnhancer = (next) => (options) => {
   const selectedHighlightSubject = new BehaviorSubject(void 0);
   const readerHighlights = new ReaderHighlights(reader, highlightsSubject, selectedHighlightSubject);
   const highlight$ = commands.highlight$.pipe(
-    tap(({ data: { itemId, selection, ...rest } }) => {
-      const { anchorCfi, focusCfi } = reader.selection.generateCfis({ itemId, selection });
-      const annotation = { anchorCfi, focusCfi, itemId, id: window.crypto.randomUUID(), ...rest };
-      highlightsSubject.next([...highlightsSubject.getValue(), annotation]);
+    tap(({ data: { itemIndex, selection, ...rest } }) => {
+      const item = reader.spineItemsManager.get(itemIndex)?.item;
+      if (!item) return;
+      const { anchorCfi, focusCfi } = reader.cfi.generateCfiFromSelection({ item, selection });
+      const highlight = new Highlight({ anchorCfi, focusCfi, itemIndex, id: window.crypto.randomUUID(), ...rest });
+      consolidate(highlight, reader);
+      highlightsSubject.next([...highlightsSubject.getValue(), highlight]);
     })
   );
   const add$ = commands.add$.pipe(
     tap(({ data }) => {
       const annotations = Array.isArray(data) ? data : [data];
-      highlightsSubject.next([...highlightsSubject.getValue(), ...annotations]);
+      highlightsSubject.next([
+        ...highlightsSubject.getValue(),
+        ...annotations.map((annotation) => {
+          const { itemIndex } = reader.cfi.parseCfi(annotation.anchorCfi ?? "");
+          const highlight = new Highlight({ ...annotation, itemIndex });
+          consolidate(highlight, reader);
+          return highlight;
+        })
+      ]);
     })
   );
   const delete$ = commands.delete$.pipe(
@@ -283,7 +361,7 @@ const annotationsEnhancer = (next) => (options) => {
   const update$ = commands.update$.pipe(
     tap(({ id, data }) => {
       highlightsSubject.next(
-        highlightsSubject.getValue().map((highlight) => highlight.id === id ? { ...highlight, ...data } : highlight)
+        highlightsSubject.getValue().map((highlight) => highlight.id === id ? new Highlight({ ...highlight, ...data }) : highlight)
       );
     })
   );
@@ -292,16 +370,27 @@ const annotationsEnhancer = (next) => (options) => {
       selectedHighlightSubject.next(id);
     })
   );
-  const annotations$ = highlightsSubject.asObservable();
+  const highlights$ = highlightsSubject.asObservable();
+  const highlightsConsolidation$ = reader.layout$.pipe(
+    debounceTime(50),
+    waitForSwitch(reader.viewportFree$),
+    withLatestFrom(highlights$),
+    tap(([, highlights]) => {
+      highlights.forEach((highlight) => consolidate(highlight, reader));
+      highlightsSubject.next(highlights);
+      readerHighlights.layout();
+    })
+  );
   merge(
     highlight$,
     add$,
     delete$,
     update$,
     select$,
-    annotations$.pipe(
+    highlightsConsolidation$,
+    highlights$.pipe(
       tap((annotations) => {
-        report.debug("annotations", annotations);
+        report.debug("highlights", annotations);
       })
     )
   ).pipe(takeUntil(reader.$.destroy$)).subscribe();
@@ -314,7 +403,7 @@ const annotationsEnhancer = (next) => (options) => {
       reader.destroy();
     },
     annotations: {
-      annotations$,
+      highlights$,
       highlightTap$: readerHighlights.tap$,
       isTargetWithinHighlight: readerHighlights.isTargetWithinHighlight,
       highlight: commands.highlight,
@@ -326,5 +415,5 @@ const annotationsEnhancer = (next) => (options) => {
   };
 };
 
-export { annotationsEnhancer };
+export { Highlight, annotationsEnhancer };
 //# sourceMappingURL=index.js.map