@anaralabs/lector 3.5.0 → 3.5.2

package/README.md

@@ -1,5 +1,4 @@
 <p align="center">
-  <!-- <h1 align="center"><img src="https://www.anara.ai/icons/logo.png" width="196" /></h1> -->
   <p align="center">
     <i>Simple primitives to compose powerful PDF viewing experiences.<br>powered by <code><a href="https://mozilla.github.io/pdf.js/">PDF.js</a></code> and <code><a href="https://reactjs.org/">React</a></code></i>
   </p>

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

@@ -39,17 +39,18 @@ 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;
     style?: React.CSSProperties;
-    renderTooltipContent?: (props: {
+    renderTooltipContent: (props: {
         annotation: Annotation;
         onClose: () => void;
     }) => 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;
 }
 
 /**
@@ -328,8 +330,6 @@ export declare interface SearchResults {
     hasMoreResults: boolean;
 }
 
-declare type Selection_2 = Omit<CollapsibleSelection, "isCollapsed">;
-
 export declare const SelectionTooltip: ({ children }: SelectionTooltipProps) => JSX.Element;
 
 declare interface SelectionTooltipProps {
@@ -362,24 +362,6 @@ export declare const Thumbnails: ({ children, ...props }: HTMLProps<HTMLDivEleme
 
 export declare const TotalPages: ({ ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
 
-export declare const useAnnotationActions: ({ annotation, onClose, }: UseAnnotationActionsProps) => UseAnnotationActionsReturn;
-
-declare interface UseAnnotationActionsProps {
-    annotation: Annotation;
-    onClose?: () => void;
-}
-
-declare interface UseAnnotationActionsReturn {
-    comment: string;
-    isEditing: boolean;
-    setComment: (comment: string) => void;
-    setIsEditing: (isEditing: boolean) => void;
-    handleSaveComment: () => void;
-    handleColorChange: (color: string) => void;
-    handleCancelEdit: () => void;
-    colors: string[];
-}
-
 declare const useAnnotations: UseBoundStore<StoreApi<AnnotationState>>;
 export { useAnnotations }
 export { useAnnotations as useAnnotations_alias_1 }
@@ -458,8 +440,12 @@ export declare const useSearch: () => {
 };
 
 export declare const useSelectionDimensions: () => {
-    getDimension: () => CollapsibleSelection | undefined;
-    getSelection: () => Selection_2;
+    getDimension: () => {
+        highlights: HighlightRect[];
+        text: string;
+        isCollapsed: boolean;
+    } | undefined;
+    getSelection: () => CollapsibleSelection;
 };
 
 export declare const ZoomIn: ({ ...props }: HTMLProps<HTMLButtonElement>) => JSX.Element;

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,32 +178,56 @@ 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();
     const handleScroll = () => {
       requestAnimationFrame(updateTooltipPosition);
@@ -207,15 +235,15 @@ var useAnnotationTooltip = ({
     const handleResize = () => {
       requestAnimationFrame(updateTooltipPosition);
     };
-    if (viewportRef.current) {
-      viewportRef.current.addEventListener("scroll", handleScroll, {
+    if (viewport) {
+      viewport.addEventListener("scroll", handleScroll, {
         passive: true
       });
     }
     window.addEventListener("resize", handleResize, { passive: true });
     return () => {
-      if (viewportRef.current) {
-        viewportRef.current.removeEventListener("scroll", handleScroll);
+      if (viewport) {
+        viewport.removeEventListener("scroll", handleScroll);
       }
       window.removeEventListener("resize", handleResize);
     };
@@ -234,8 +262,10 @@ var AnnotationTooltip = ({
   children,
   tooltipContent,
   onOpenChange,
+  className,
   isOpen: controlledIsOpen
 }) => {
+  const viewportRef = usePdf((state) => state.viewportRef);
   const {
     isOpen: uncontrolledIsOpen,
     setIsOpen,
@@ -263,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
     )
   ] });
 };
@@ -310,120 +343,11 @@ var PDFPageNumberContext = createContext(0);
 var usePDFPageNumber = () => {
   return useContext(PDFPageNumberContext);
 };
-var useAnnotationActions = ({
-  annotation,
-  onClose
-}) => {
-  const { updateAnnotation } = useAnnotations();
-  const [comment, setComment] = useState(annotation.comment || "");
-  const [isEditing, setIsEditing] = useState(false);
-  const handleSaveComment = useCallback(() => {
-    updateAnnotation(annotation.id, { comment });
-    setIsEditing(false);
-    onClose?.();
-  }, [annotation.id, comment, updateAnnotation, onClose]);
-  const handleColorChange = useCallback(
-    (color) => {
-      updateAnnotation(annotation.id, { color });
-      onClose?.();
-    },
-    [annotation.id, updateAnnotation, onClose]
-  );
-  const handleCancelEdit = useCallback(() => {
-    setIsEditing(false);
-    onClose?.();
-  }, [onClose]);
-  const colors = [
-    "rgba(255, 255, 0, 0.3)",
-    // Yellow
-    "rgba(0, 255, 0, 0.3)",
-    // Green
-    "rgba(255, 182, 193, 0.3)",
-    // Pink
-    "rgba(135, 206, 235, 0.3)"
-    // Sky Blue
-  ];
-  return {
-    comment,
-    isEditing,
-    setComment,
-    setIsEditing,
-    handleSaveComment,
-    handleColorChange,
-    handleCancelEdit,
-    colors
-  };
-};
-var DefaultAnnotationTooltipContent = ({
-  annotation,
-  onClose
-}) => {
-  const {
-    comment,
-    isEditing,
-    setComment,
-    setIsEditing,
-    handleSaveComment,
-    handleColorChange,
-    handleCancelEdit,
-    colors
-  } = useAnnotationActions({
-    annotation,
-    onClose
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: colors.map((color) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "w-6 h-6 rounded",
-        style: { backgroundColor: color },
-        onClick: () => handleColorChange(color)
-      },
-      color
-    )) }),
-    isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          value: comment,
-          onChange: (e) => setComment(e.target.value),
-          className: "border rounded p-2 text-sm",
-          placeholder: "Add a comment...",
-          rows: 3
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleCancelEdit,
-            className: "px-2 py-1 text-sm text-gray-600 hover:text-gray-800",
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleSaveComment,
-            className: "px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",
-            children: "Save"
-          }
-        )
-      ] })
-    ] }) : /* @__PURE__ */ jsx("div", { children: annotation.comment ? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: annotation.comment }) : /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => setIsEditing(true),
-        className: "text-sm text-blue-500 hover:text-blue-600",
-        children: "Add comment"
-      }
-    ) })
-  ] });
-};
 var AnnotationHighlightLayer = ({
   className,
   style,
   renderTooltipContent,
+  tooltipClassName,
   focusedAnnotationId,
   onAnnotationClick
 }) => {
@@ -436,24 +360,18 @@ var AnnotationHighlightLayer = ({
     AnnotationTooltip,
     {
       annotation,
+      className: tooltipClassName,
       isOpen: focusedAnnotationId === annotation.id,
       onOpenChange: (open) => {
         if (open && onAnnotationClick) {
           onAnnotationClick(annotation);
         }
       },
-      tooltipContent: renderTooltipContent ? renderTooltipContent({
+      tooltipContent: renderTooltipContent({
         annotation,
         onClose: () => {
         }
-      }) : /* @__PURE__ */ jsx(
-        DefaultAnnotationTooltipContent,
-        {
-          annotation,
-          onClose: () => {
-          }
-        }
-      ),
+      }),
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -469,10 +387,11 @@ var AnnotationHighlightLayer = ({
                 width: highlight.width,
                 height: highlight.height,
                 backgroundColor: annotation.color || "rgba(255, 255, 0, 0.3)",
-                transition: "background-color 0.2s ease",
-                cursor: "pointer",
-                opacity: focusedAnnotationId === annotation.id ? 1 : 0.5
-              }
+                mixBlendMode: "multiply",
+                transition: "all 0.2s ease",
+                cursor: "pointer"
+              },
+              "data-highlight-id": annotation.id
             },
             index
           ))
@@ -1020,13 +939,13 @@ var CanvasLayer = ({
 };
 
 // src/hooks/useSelectionDimensions.tsx
-var MERGE_THRESHOLD = 20;
-var shouldMergeRectangles = (rect1, rect2) => {
+var MERGE_THRESHOLD = 5;
+var shouldMergeRects = (rect1, rect2) => {
   const verticalOverlap = !(rect1.top > rect2.top + rect2.height || rect2.top > rect1.top + rect1.height);
   const horizontallyClose = Math.abs(rect1.left + rect1.width - rect2.left) < MERGE_THRESHOLD || Math.abs(rect2.left + rect2.width - rect1.left) < MERGE_THRESHOLD || rect1.left < rect2.left + rect2.width && rect2.left < rect1.left + rect1.width;
   return verticalOverlap && horizontallyClose;
 };
-var mergeRectangles = (rect1, rect2) => {
+var mergeRects = (rect1, rect2) => {
   return {
     left: Math.min(rect1.left, rect2.left),
     top: Math.min(rect1.top, rect2.top),
@@ -1037,38 +956,28 @@ var mergeRectangles = (rect1, rect2) => {
 };
 var consolidateRects = (rects) => {
   if (rects.length <= 1) return rects;
-  const sortedRectangles = rects.toSorted((a, b) => a.top - b.top);
-  let withinThresholdMergedRectangles = sortedRectangles[0];
-  const allMergedRectangles = [];
-  const blowUpMergedRectangles = (rect) => {
-    return {
-      ...rect,
-      left: rect.left - 2,
-      top: rect.top - 2,
-      width: rect.width + 4,
-      height: rect.height + 2
-    };
-  };
-  for (const [index, currentRectangle] of sortedRectangles.entries()) {
-    withinThresholdMergedRectangles = mergeRectangles(
-      withinThresholdMergedRectangles,
-      currentRectangle
-    );
-    const nextRectangle = sortedRectangles[index + 1];
-    if (!nextRectangle) {
-      allMergedRectangles.push(
-        blowUpMergedRectangles(withinThresholdMergedRectangles)
-      );
-      break;
-    }
-    if (!shouldMergeRectangles(withinThresholdMergedRectangles, nextRectangle)) {
-      allMergedRectangles.push(
-        blowUpMergedRectangles(withinThresholdMergedRectangles)
-      );
-      withinThresholdMergedRectangles = nextRectangle;
+  const sortedRects = [...rects].sort((a, b) => a.top - b.top);
+  let hasChanges;
+  do {
+    hasChanges = false;
+    let currentRect = sortedRects[0];
+    const tempResult = [];
+    for (let i = 1; i < sortedRects.length; i++) {
+      const sorted = sortedRects[i];
+      if (!currentRect || !sorted) continue;
+      if (shouldMergeRects(currentRect, sorted)) {
+        currentRect = mergeRects(currentRect, sorted);
+        hasChanges = true;
+      } else {
+        tempResult.push(currentRect);
+        currentRect = sorted;
+      }
     }
-  }
-  return allMergedRectangles;
+    if (currentRect) tempResult.push(currentRect);
+    sortedRects.length = 0;
+    sortedRects.push(...tempResult);
+  } while (hasChanges);
+  return sortedRects;
 };
 var useSelectionDimensions = () => {
   const store = PDFStore.useContext();
@@ -1397,13 +1306,15 @@ var ColoredHighlightLayer = ({
   onHighlight
 }) => {
   const pageNumber = usePDFPageNumber();
-  const { getSelection } = useSelectionDimensions();
+  const { getDimension } = useSelectionDimensions();
   const highlights = usePdf(
     (state) => state.coloredHighlights
   );
   const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
   const handleHighlighting = useCallback((color) => {
-    const { highlights: highlights2, text } = getSelection();
+    const dimension = getDimension();
+    if (!dimension) return;
+    const { highlights: highlights2, text } = dimension;
     if (highlights2[0]) {
       const highlight = {
         uuid: v4(),

package/package.json

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