Merge branch 'revert-normalize-removal' into staging-merge-candidate

oleksandr-danylchenko · Dec 16, 2024 · 83bb739 · 83bb739
2 parents 3eea77d + 98532a3
commit 83bb739
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 19 deletions.
diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
@@ -3,6 +3,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnnotator, useSelection } from '@annotorious/react';
 import {
   NOT_ANNOTATABLE_CLASS,
+  toViewportBounds,
   toDomRectList,
   type TextAnnotation,
   type TextAnnotator,
@@ -51,12 +52,6 @@ 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>();
@@ -110,16 +105,17 @@ 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
-            ? toViewportBounds(bounds, r.element)
+            ? toViewportBounds(bounds, r.element.getBoundingClientRect())
             : new DOMRect();
         },
         getClientRects: () => {
           const rects = r.state.store.getAnnotationRects(annotation.id);
-          const viewportRects = rects.map(rect => toViewportBounds(rect, r.element));
-          return toDomRectList(viewportRects);
+          const denormalizedRects = rects.map((rect) =>
+            toViewportBounds(rect, r.element.getBoundingClientRect())
+          );
+          return toDomRectList(denormalizedRects);
         }
       });
     } else {

diff --git a/packages/text-annotator/src/state/TextAnnotatorState.ts b/packages/text-annotator/src/state/TextAnnotatorState.ts
@@ -116,8 +116,7 @@ export const createTextAnnotatorState = <I extends TextAnnotation = TextAnnotati
 
   const getAnnotationBounds = (id: string): DOMRect | undefined => {
     const rects = tree.getAnnotationRects(id);
-    if (rects.length === 0) return;
-    return tree.getAnnotationBounds(id);
+    return rects.length > 0 ? tree.getAnnotationBounds(id) : undefined;
   }
 
   const getIntersecting = (

diff --git a/packages/text-annotator/src/state/spatialTree.ts b/packages/text-annotator/src/state/spatialTree.ts
@@ -3,7 +3,12 @@ import type { Store } from '@annotorious/core';
 import { createNanoEvents, type Unsubscribe } from 'nanoevents';
 
 import type { TextAnnotation, TextAnnotationTarget } from '../model';
-import { isRevived, reviveSelector, mergeClientRects } from '../utils';
+import {
+  isRevived,
+  reviveSelector,
+  mergeClientRects,
+  toParentBounds
+} from '../utils';
 import type { AnnotationRects } from './TextAnnotationStore';
 
 interface IndexedHighlightRect {
@@ -47,11 +52,11 @@ export const createSpatialTree = <T extends TextAnnotation>(store: Store<T>, con
       return Array.from(revivedRange.getClientRects());
     });
 
-    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));
+    /**
+     * Offset the merged client rects so that coords
+     * are relative to the parent container
+     */
+    const merged = mergeClientRects(rects).map(rect => toParentBounds(rect, offset));
 
     return merged.map(rect => {
       const { x, y, width, height } = rect;

diff --git a/packages/text-annotator/src/utils/index.ts b/packages/text-annotator/src/utils/index.ts
@@ -14,4 +14,4 @@ export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
 export * from './trimRangeToContainer';
-
+export * from './rectsToBounds';
diff --git a/packages/text-annotator/src/utils/rectsToBounds.ts b/packages/text-annotator/src/utils/rectsToBounds.ts
@@ -0,0 +1,9 @@
+export const toParentBounds = (rect: DOMRect, offset: DOMRect): DOMRect => {
+  const { left, top, right, bottom } = rect;
+  return new DOMRect(left - offset.left, top - offset.top, right - left, bottom - top);
+};
+
+export const toViewportBounds = (rect: DOMRect, offset: DOMRect): DOMRect => {
+  const { left, top, right, bottom } = rect;
+  return new DOMRect(left + offset.left, top + offset.top, right - left, bottom - top);
+}