@anaralabs/lector 3.5.0 → 3.5.1

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

@@ -44,7 +44,7 @@ export declare const AnnotationHighlightLayer: ({ className, style, renderToolti
 declare interface AnnotationHighlightLayerProps {
     className?: string;
     style?: React.CSSProperties;
-    renderTooltipContent?: (props: {
+    renderTooltipContent: (props: {
         annotation: Annotation;
         onClose: () => void;
     }) => React.ReactNode;
@@ -328,8 +328,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 +360,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 +438,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

@@ -200,6 +200,7 @@ var useAnnotationTooltip = ({
     });
   }, [annotation.highlights, annotation.pageNumber, refs, viewportRef]);
   useEffect(() => {
+    const viewport = viewportRef.current;
     updateTooltipPosition();
     const handleScroll = () => {
       requestAnimationFrame(updateTooltipPosition);
@@ -207,15 +208,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);
     };
@@ -310,116 +311,6 @@ 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,
@@ -442,18 +333,11 @@ var AnnotationHighlightLayer = ({
           onAnnotationClick(annotation);
         }
       },
-      tooltipContent: renderTooltipContent ? renderTooltipContent({
+      tooltipContent: renderTooltipContent({
         annotation,
         onClose: () => {
         }
-      }) : /* @__PURE__ */ jsx(
-        DefaultAnnotationTooltipContent,
-        {
-          annotation,
-          onClose: () => {
-          }
-        }
-      ),
+      }),
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -469,10 +353,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 +905,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 +922,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 +1272,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.1",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",