From 945c09db538bf6bedfe4740be14bdeb872b275bf Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Thu, 21 Nov 2024 12:29:26 +0100 Subject: [PATCH] Refactoring + removed unused API args --- .../TextAnnotationPopup/TextAnnotationPopup.tsx | 16 ++++++++++------ .../src/state/TextAnnotationStore.ts | 2 +- .../src/state/TextAnnotatorState.ts | 11 +---------- .../text-annotator/src/state/spatialTree.ts | 17 ++++++----------- .../text-annotator/src/utils/normalizeRects.ts | 9 --------- 5 files changed, 18 insertions(+), 37 deletions(-) delete mode 100644 packages/text-annotator/src/utils/normalizeRects.ts diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx index 6372624c..f0493149 100644 --- a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx +++ b/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(); @@ -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 { diff --git a/packages/text-annotator/src/state/TextAnnotationStore.ts b/packages/text-annotator/src/state/TextAnnotationStore.ts index da5b5fdc..185f0154 100644 --- a/packages/text-annotator/src/state/TextAnnotationStore.ts +++ b/packages/text-annotator/src/state/TextAnnotationStore.ts @@ -13,7 +13,7 @@ export interface TextAnnotationStore getAnnotationRects(id: string): DOMRect[]; - getAnnotationBounds(id: string, hintX?: number, hintY?: number, buffer?: number): DOMRect | undefined; + getAnnotationBounds(id: string): DOMRect | undefined; getAnnotationRects(id: string): DOMRect[]; diff --git a/packages/text-annotator/src/state/TextAnnotatorState.ts b/packages/text-annotator/src/state/TextAnnotatorState.ts index e4b74775..90301c21 100644 --- a/packages/text-annotator/src/state/TextAnnotatorState.ts +++ b/packages/text-annotator/src/state/TextAnnotatorState.ts @@ -114,18 +114,9 @@ export const createTextAnnotatorState = { + 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); } diff --git a/packages/text-annotator/src/state/spatialTree.ts b/packages/text-annotator/src/state/spatialTree.ts index 8ee3fb46..55676044 100644 --- a/packages/text-annotator/src/state/spatialTree.ts +++ b/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 = (store: Store, 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; diff --git a/packages/text-annotator/src/utils/normalizeRects.ts b/packages/text-annotator/src/utils/normalizeRects.ts deleted file mode 100644 index 461f222f..00000000 --- a/packages/text-annotator/src/utils/normalizeRects.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const normalizeRectWithOffset = (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 denormalizeRectWithOffset = (rect: DOMRect, offset: DOMRect): DOMRect => { - const { left, top, right, bottom } = rect; - return new DOMRect(left + offset.left, top + offset.top, right - left, bottom - top); -}