fix: adjust positioning calculations for annotations

Author: cristianrdu

packages/lector/size.json

@@ -2,7 +2,7 @@
   {
     "name": "Client",
     "passed": true,
-    "size": 70354,
+    "size": 70348,
     "sizeLimit": 150000
   }
 ]

packages/lector/src/components/annotation-tooltip.tsx

@@ -48,6 +48,7 @@ export const AnnotationTooltip = ({
   } = useAnnotationTooltip({
     annotation,
     onOpenChange,
+    isOpen: controlledIsOpen,
   });
 
   const {
@@ -61,6 +62,7 @@ export const AnnotationTooltip = ({
   } = useAnnotationTooltip({
     position: "bottom",
     annotation,
+    isOpen: controlledHoverIsOpen,
   });
 
   const isOpen = controlledIsOpen ?? uncontrolledIsOpen;

packages/lector/src/hooks/useAnnotationTooltip.ts

@@ -17,6 +17,7 @@ interface UseAnnotationTooltipProps {
   annotation: Annotation;
   onOpenChange?: (open: boolean) => void;
   position?: "top" | "bottom" | "left" | "right";
+  isOpen?: boolean;
 }
 
 interface UseAnnotationTooltipReturn {
@@ -43,20 +44,25 @@ export const useAnnotationTooltip = ({
   annotation,
   onOpenChange,
   position = "top",
+  isOpen: controlledIsOpen,
 }: UseAnnotationTooltipProps): UseAnnotationTooltipReturn => {
   // Show tooltip immediately if it's a new annotation
   const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1000;
-  const [isOpen, setIsOpen] = useState(isNewAnnotation);
+  const [isPositionCalculated, setIsPositionCalculated] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const viewportRef = usePdf((state) => state.viewportRef);
   const scale = usePdf((state) => state.zoom);
 
+  // Only show if position is calculated or externally controlled
+  const effectiveIsOpen = ((isOpen && isPositionCalculated) || controlledIsOpen) ?? false;
+
   const {
     refs,
     floatingStyles,
     context,
   } = useFloating({
     placement: position,
-    open: isOpen,
+    open: effectiveIsOpen,
     onOpenChange: (open) => {
       setIsOpen(open);
       onOpenChange?.(open);
@@ -77,22 +83,31 @@ export const useAnnotationTooltip = ({
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
 
   const updateTooltipPosition = useCallback(() => {
-    if (!annotation.highlights.length) return;
+    if (!annotation.highlights.length) {
+      setIsPositionCalculated(false);
+      return;
+    }
 
     const highlightRects = annotation.highlights;
     let minLeft = Infinity;
     let maxRight = -Infinity;
     let minTop = Infinity;
     let maxBottom = -Infinity;
 
-    refs.setReference({
-      getBoundingClientRect() {
-        const viewportElement = viewportRef.current;
-        if (!viewportElement) return defaultRect;
+    const viewportElement = viewportRef.current;
+    if (!viewportElement) {
+      setIsPositionCalculated(false);
+      return;
+    }
 
-        const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
-        if (!pageElement) return defaultRect;
+    const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
+    if (!pageElement) {
+      setIsPositionCalculated(false);
+      return;
+    }
 
+    refs.setReference({
+      getBoundingClientRect() {
         const pageRect = pageElement.getBoundingClientRect();
 
         // Calculate the bounding box in viewport coordinates using the PDF scale
@@ -136,11 +151,25 @@ export const useAnnotationTooltip = ({
       },
       contextElement: viewportRef.current || undefined,
     });
-  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef, scale]);
+
+    setIsPositionCalculated(true);
+
+    // If it's a new annotation, show it once position is calculated
+    if (isNewAnnotation) {
+      setIsOpen(true);
+    }
+  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef, scale, isNewAnnotation]);
 
   useEffect(() => {
     const viewport = viewportRef.current;
-    updateTooltipPosition();
+
+    // Reset position calculated state when scale changes
+    setIsPositionCalculated(false);
+
+    // Update position with RAF to ensure DOM is ready
+    requestAnimationFrame(() => {
+      updateTooltipPosition();
+    });
 
     const handleScroll = () => {
       requestAnimationFrame(updateTooltipPosition);
@@ -164,10 +193,10 @@ export const useAnnotationTooltip = ({
       }
       window.removeEventListener("resize", handleResize);
     };
-  }, [updateTooltipPosition, viewportRef]);
+  }, [updateTooltipPosition, viewportRef, scale, controlledIsOpen]);
 
   return {
-    isOpen,
+    isOpen: effectiveIsOpen,
     setIsOpen,
     refs,
     floatingStyles,