Refactoring + removed unused API args

Author: rsimon

packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx

@@ -2,7 +2,6 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnnotator, useSelection } from '@annotorious/react';
 import {
   NOT_ANNOTATABLE_CLASS,
-  denormalizeRectWithOffset,
   toDomRectList,
   type TextAnnotation,
   type TextAnnotator,
@@ -50,6 +49,12 @@ export interface TextAnnotationPopupContentProps {
 
 }
 
+const toViewportBounds = (annotationBounds: DOMRect, container: HTMLElement): DOMRect => {
+  const { left, top, right, bottom } = annotationBounds;
+  const containerBounds = container.getBoundingClientRect();
+  return new DOMRect(left + containerBounds.left, top + containerBounds.top, right - left, bottom - top);
+}
+
 export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
 
   const r = useAnnotator<TextAnnotator>();
@@ -102,17 +107,16 @@ export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
     if (isOpen && annotation?.id) {
       refs.setPositionReference({
         getBoundingClientRect: () => {
+          // Annotation bounds are relative to the document element
           const bounds = r.state.store.getAnnotationBounds(annotation.id);
           return bounds
-            ? denormalizeRectWithOffset(bounds, r.element.getBoundingClientRect())
+            ? toViewportBounds(bounds, r.element)
             : new DOMRect();
         },
         getClientRects: () => {
           const rects = r.state.store.getAnnotationRects(annotation.id);
-          const denormalizedRects = rects.map((rect) =>
-            denormalizeRectWithOffset(rect, r.element.getBoundingClientRect())
-          );
-          return toDomRectList(denormalizedRects);
+          const viewportRects = rects.map(rect => toViewportBounds(rect, r.element));
+          return toDomRectList(viewportRects);
         }
       });
     } else {

packages/text-annotator/src/state/TextAnnotationStore.ts

@@ -13,7 +13,7 @@ export interface TextAnnotationStore<T extends TextAnnotation = TextAnnotation>
 
   getAnnotationRects(id: string): DOMRect[];
 
-  getAnnotationBounds(id: string, hintX?: number, hintY?: number, buffer?: number): DOMRect | undefined;
+  getAnnotationBounds(id: string): DOMRect | undefined;
 
   getAnnotationRects(id: string): DOMRect[];
 

packages/text-annotator/src/state/TextAnnotatorState.ts

@@ -114,18 +114,9 @@ export const createTextAnnotatorState = <I extends TextAnnotation = TextAnnotati
     return all ? filtered : filtered[0];
   }
 
-  const getAnnotationBounds = (id: string, x?: number, y?: number, buffer = 5): DOMRect | undefined => {
+  const getAnnotationBounds = (id: string): DOMRect | undefined => {
     const rects = tree.getAnnotationRects(id);
     if (rects.length === 0) return;
-
-    if (x && y) {
-      const match = rects.find(({ top, right, bottom, left }) =>
-        x >= left - buffer && x <= right + buffer && y >= top - buffer && y <= bottom + buffer);
-
-      // Preferred bounds: the rectangle
-      if (match) return match;
-    }
-
     return tree.getAnnotationBounds(id);
   }
 

packages/text-annotator/src/state/spatialTree.ts

@@ -1,12 +1,7 @@
 import RBush from 'rbush';
 import type { Store } from '@annotorious/core';
 import type { TextAnnotation, TextAnnotationTarget } from '../model';
-import {
-  isRevived,
-  reviveSelector,
-  mergeClientRects,
-  normalizeRectWithOffset
-} from '../utils';
+import { isRevived, reviveSelector, mergeClientRects } from '../utils';
 import type { AnnotationRects } from './TextAnnotationStore';
 
 interface IndexedHighlightRect {
@@ -42,11 +37,11 @@ export const createSpatialTree = <T extends TextAnnotation>(store: Store<T>, con
       return Array.from(revivedRange.getClientRects());
     });
 
-    /**
-     * Offset the merged client rects so that coords
-     * are relative to the parent container
-     */
-    const merged = mergeClientRects(rects).map(rect => normalizeRectWithOffset(rect, offset));
+    const merged = mergeClientRects(rects)
+      // Offset the merged client rects so that coords
+      // are relative to the parent container
+      .map(({ left, top, right, bottom }) =>  
+        new DOMRect(left - offset.left, top - offset.top, right - left, bottom - top));
 
     return merged.map(rect => {
       const { x, y, width, height } = rect;