@anaralabs/lector 3.5.1 → 3.5.2

package/dist/_tsup-dts-rollup.d.ts

@@ -39,7 +39,7 @@ declare interface Annotation {
 export { Annotation }
 export { Annotation as Annotation_alias_1 }
 
-export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, focusedAnnotationId, onAnnotationClick, }: AnnotationHighlightLayerProps) => JSX.Element;
+export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, tooltipClassName, focusedAnnotationId, onAnnotationClick, }: AnnotationHighlightLayerProps) => JSX.Element;
 
 declare interface AnnotationHighlightLayerProps {
     className?: string;
@@ -50,6 +50,7 @@ declare interface AnnotationHighlightLayerProps {
     }) => React.ReactNode;
     focusedAnnotationId?: string;
     onAnnotationClick?: (annotation: Annotation) => void;
+    tooltipClassName?: string;
 }
 
 /**
@@ -89,7 +90,7 @@ declare interface AnnotationState {
     setAnnotations: (annotations: Annotation[]) => void;
 }
 
-export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, onOpenChange, isOpen: controlledIsOpen, }: AnnotationTooltipProps) => JSX.Element;
+export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, onOpenChange, className, isOpen: controlledIsOpen, }: AnnotationTooltipProps) => JSX.Element;
 
 declare interface AnnotationTooltipProps {
     annotation: Annotation;
@@ -97,6 +98,7 @@ declare interface AnnotationTooltipProps {
     tooltipContent: React.ReactNode;
     onOpenChange?: (open: boolean) => void;
     isOpen?: boolean;
+    className?: string;
 }
 
 /**

package/dist/index.js

@@ -1,7 +1,8 @@
 'use client';
 
 import React, { createContext, forwardRef, useCallback, useContext, useState, useRef, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
-import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, flip } from '@floating-ui/react';
+import { createPortal } from 'react-dom';
+import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, inline, flip } from '@floating-ui/react';
 import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
 import { create, useStore, createStore } from 'zustand';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -150,6 +151,7 @@ var useAnnotationTooltip = ({
   const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1e3;
   const [isOpen, setIsOpen] = useState(isNewAnnotation);
   const viewportRef = usePdf((state) => state.viewportRef);
+  const scale = usePdf((state) => state.zoom);
   const {
     refs,
     floatingStyles,
@@ -163,9 +165,11 @@ var useAnnotationTooltip = ({
     },
     whileElementsMounted: autoUpdate,
     middleware: [
+      inline(),
       offset(10),
       flip({
-        crossAxis: false
+        crossAxis: false,
+        fallbackAxisSideDirection: "end"
       }),
       shift({ padding: 8 })
     ]
@@ -174,31 +178,54 @@ var useAnnotationTooltip = ({
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
   const updateTooltipPosition = useCallback(() => {
     if (!annotation.highlights.length) return;
-    const lastHighlight = annotation.highlights[annotation.highlights.length - 1];
+    const highlightRects = annotation.highlights;
+    let minLeft = Infinity;
+    let maxRight = -Infinity;
+    let minTop = Infinity;
+    let maxBottom = -Infinity;
     refs.setReference({
-      getBoundingClientRect: () => {
+      getBoundingClientRect() {
         const viewportElement = viewportRef.current;
-        if (!viewportElement || !lastHighlight) return defaultRect;
+        if (!viewportElement) return defaultRect;
         const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
         if (!pageElement) return defaultRect;
         const pageRect = pageElement.getBoundingClientRect();
-        const left = pageRect.left + lastHighlight.left;
-        const top = pageRect.top + lastHighlight.top;
-        const width = lastHighlight.width;
-        const height = lastHighlight.height;
-        return {
+        highlightRects.forEach((highlight) => {
+          const scaledLeft = highlight.left * scale;
+          const scaledWidth = highlight.width * scale;
+          const scaledTop = highlight.top * scale;
+          const scaledHeight = highlight.height * scale;
+          const left = pageRect.left + scaledLeft;
+          const right = left + scaledWidth;
+          const top = pageRect.top + scaledTop;
+          const bottom = top + scaledHeight;
+          minLeft = Math.min(minLeft, left);
+          maxRight = Math.max(maxRight, right);
+          minTop = Math.min(minTop, top);
+          maxBottom = Math.max(maxBottom, bottom);
+        });
+        const width = maxRight - minLeft;
+        const height = maxBottom - minTop;
+        const centerX = minLeft + width / 2;
+        const centerY = minTop + height / 2;
+        const rect = {
           width,
           height,
-          x: left,
-          y: top,
-          top,
-          right: left + width,
-          bottom: top + height,
-          left
+          x: centerX - width / 2,
+          y: centerY - height / 2,
+          top: centerY - height / 2,
+          right: centerX + width / 2,
+          bottom: centerY + height / 2,
+          left: centerX - width / 2
         };
-      }
+        return rect;
+      },
+      getClientRects() {
+        return [this.getBoundingClientRect()];
+      },
+      contextElement: viewportRef.current || void 0
     });
-  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef]);
+  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef, scale]);
   useEffect(() => {
     const viewport = viewportRef.current;
     updateTooltipPosition();
@@ -235,8 +262,10 @@ var AnnotationTooltip = ({
   children,
   tooltipContent,
   onOpenChange,
+  className,
   isOpen: controlledIsOpen
 }) => {
+  const viewportRef = usePdf((state) => state.viewportRef);
   const {
     isOpen: uncontrolledIsOpen,
     setIsOpen,
@@ -264,19 +293,22 @@ var AnnotationTooltip = ({
         children
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: refs.setFloating,
-        className: "bg-white shadow-lg rounded-lg p-3 z-50 min-w-[200px]",
-        style: {
-          ...floatingStyles,
-          position: "fixed",
-          zIndex: 9999
-        },
-        ...getFloatingProps(),
-        children: tooltipContent
-      }
+    isOpen && viewportRef.current && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: refs.setFloating,
+          className,
+          style: {
+            ...floatingStyles,
+            position: "absolute",
+            pointerEvents: "auto"
+          },
+          ...getFloatingProps(),
+          children: tooltipContent
+        }
+      ),
+      viewportRef.current
     )
   ] });
 };
@@ -315,6 +347,7 @@ var AnnotationHighlightLayer = ({
   className,
   style,
   renderTooltipContent,
+  tooltipClassName,
   focusedAnnotationId,
   onAnnotationClick
 }) => {
@@ -327,6 +360,7 @@ var AnnotationHighlightLayer = ({
     AnnotationTooltip,
     {
       annotation,
+      className: tooltipClassName,
       isOpen: focusedAnnotationId === annotation.id,
       onOpenChange: (open) => {
         if (open && onAnnotationClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anaralabs/lector",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",