chore: improve annotated texts (#68)

Author: cristianrdu

packages/docs/app/(home)/_components/anara.tsx

@@ -44,7 +44,7 @@ const PDFContent = ({
   onAnnotationClick,
 }: PDFContentProps) => {
   const { addAnnotation, annotations } = useAnnotations();
-  const { getSelection } = useSelectionDimensions();
+  const { getDimension } = useSelectionDimensions();
   const { jumpToHighlightRects } = usePdfJump();
 
 
@@ -53,17 +53,17 @@ const PDFContent = ({
   }, [annotations, onAnnotationsChange]);
 
   const handleCreateAnnotation = useCallback(() => {
-    const selection = getSelection();
+    const selection = getDimension();
     if (!selection || !selection.highlights.length) return;
 
     const newAnnotation = {
       pageNumber: selection.highlights[0].pageNumber,
       highlights: selection.highlights,
       color: "rgba(255, 255, 0, 0.3)", 
+      text: selection.text,
     };
 
     addAnnotation(newAnnotation);
-
     window.getSelection()?.removeAllRanges();
   }, [addAnnotation, getSelection]);
 

packages/lector/src/components/default-annotation-tooltip.tsx renamed to packages/docs/app/(home)/_components/default-annotation-tooltip.tsx

@@ -1,5 +1,5 @@
-import { useAnnotationActions } from "../hooks/useAnnotationActions";
-import type { Annotation } from "../hooks/useAnnotations";
+import { useAnnotationActions } from "./useAnnotationActions";
+import type { Annotation } from "@anaralabs/lector";
 
 interface DefaultAnnotationTooltipContentProps {
   annotation: Annotation;

packages/lector/src/hooks/useAnnotationActions.ts renamed to packages/docs/app/(home)/_components/useAnnotationActions.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
-import type { Annotation } from "./useAnnotations";
-import { useAnnotations } from "./useAnnotations";
+import type { Annotation } from "@anaralabs/lector";
+import { useAnnotations } from "@anaralabs/lector";
 
 interface UseAnnotationActionsProps {
   annotation: Annotation;

packages/lector/size.json

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

packages/lector/src/components/layers/annotation-highlight-layer.tsx

@@ -2,12 +2,11 @@ import type { Annotation } from "../../hooks/useAnnotations";
 import { useAnnotations } from "../../hooks/useAnnotations";
 import { usePDFPageNumber } from "../../hooks/usePdfPageNumber";
 import { AnnotationTooltip } from "../annotation-tooltip";
-import { DefaultAnnotationTooltipContent } from "../default-annotation-tooltip";
 
 interface AnnotationHighlightLayerProps {
   className?: string;
   style?: React.CSSProperties;
-  renderTooltipContent?: (props: {
+  renderTooltipContent: (props: {
     annotation: Annotation;
     onClose: () => void;
   }) => React.ReactNode;
@@ -41,18 +40,12 @@ export const AnnotationHighlightLayer = ({
               onAnnotationClick(annotation);
             }
           }}
-          tooltipContent={
-            renderTooltipContent ? (
+          tooltipContent={(
               renderTooltipContent({
                 annotation,
                 onClose: () => {},
               })
-            ) : (
-              <DefaultAnnotationTooltipContent
-                annotation={annotation}
-                onClose={() => {}}
-              />
-            )
+            ) 
           }
         >
           <div 
@@ -69,10 +62,11 @@ export const AnnotationHighlightLayer = ({
                   width: highlight.width,
                   height: highlight.height,
                   backgroundColor: annotation.color || "rgba(255, 255, 0, 0.3)",
-                  transition: "background-color 0.2s ease",
+                  mixBlendMode: "multiply",
+                  transition: "all 0.2s ease",
                   cursor: "pointer",
-                  opacity: focusedAnnotationId === annotation.id ? 1 : 0.5,
                 }}
+                data-highlight-id={annotation.id}
               />
             ))}
           </div>

packages/lector/src/components/layers/colored-highlight/colored-highlight-layer.tsx

@@ -15,15 +15,18 @@ export const ColoredHighlightLayer = ({
   onHighlight,
 }: ColoredHighlightLayerProps) => {
   const pageNumber = usePDFPageNumber();
-  const { getSelection } = useSelectionDimensions();
+  const { getDimension } = useSelectionDimensions();
 
   const highlights: ColoredHighlight[] = usePdf(
     (state) => state.coloredHighlights,
   );
   const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
 
   const handleHighlighting = useCallback((color: string) => {
-    const { highlights, text } = getSelection();
+    const dimension = getDimension();
+    if (!dimension) return;
+
+    const { highlights, text } = dimension;
 
     if (highlights[0]) {
       const highlight: ColoredHighlight = {

packages/lector/src/hooks/useAnnotationTooltip.ts

@@ -107,6 +107,7 @@ export const useAnnotationTooltip = ({
   }, [annotation.highlights, annotation.pageNumber, refs, viewportRef]);
 
   useEffect(() => {
+    const viewport = viewportRef.current;
     updateTooltipPosition();
 
     const handleScroll = () => {
@@ -117,17 +118,17 @@ export const useAnnotationTooltip = ({
       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);
     };

packages/lector/src/hooks/useSelectionDimensions.tsx

@@ -1,16 +1,14 @@
 import { type HighlightRect, PDFStore } from "../internal";
 
-const MERGE_THRESHOLD = 20; // Increased threshold for more aggressive merging
+const MERGE_THRESHOLD = 5; // Increased threshold for more aggressive merging
 
 type CollapsibleSelection = {
   highlights: HighlightRect[];
   text: string;
   isCollapsed: boolean;
 };
 
-type Selection = Omit<CollapsibleSelection, "isCollapsed">;
-
-const shouldMergeRectangles = (
+const shouldMergeRects = (
   rect1: HighlightRect,
   rect2: HighlightRect,
 ): boolean => {
@@ -29,7 +27,7 @@ const shouldMergeRectangles = (
   return verticalOverlap && horizontallyClose;
 };
 
-const mergeRectangles = (
+const mergeRects = (
   rect1: HighlightRect,
   rect2: HighlightRect,
 ): HighlightRect => {
@@ -50,57 +48,40 @@ const consolidateRects = (rects: HighlightRect[]): HighlightRect[] => {
   if (rects.length <= 1) return rects;
 
   // Sort by vertical position primarily
-  const sortedRectangles = rects.toSorted((a, b) => a.top - b.top);
-
-  let withinThresholdMergedRectangles: HighlightRect =
-    sortedRectangles[0] as HighlightRect; // initialize with first rectangle to bootstrap the process
-  const allMergedRectangles: HighlightRect[] = [];
-
-  const blowUpMergedRectangles = (rect: HighlightRect): HighlightRect => {
-    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];
-
-    // establish the last merged rectangle if there are no more rectangles to merge
-    if (!nextRectangle) {
-      allMergedRectangles.push(
-        blowUpMergedRectangles(withinThresholdMergedRectangles),
-      );
-      break;
+  const sortedRects = [...rects].sort((a, b) => a.top - b.top);
+
+  // Keep merging until no more merges are possible
+  let hasChanges: boolean;
+  do {
+    hasChanges = false;
+    let currentRect = sortedRects[0];
+    const tempResult: HighlightRect[] = [];
+
+    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;
+      }
     }
+    if (currentRect) tempResult.push(currentRect);
 
-    // check if the next rectangle should be merged
-    if (
-      !shouldMergeRectangles(withinThresholdMergedRectangles, nextRectangle)
-    ) {
-      // establish already merged rectangles
-      allMergedRectangles.push(
-        blowUpMergedRectangles(withinThresholdMergedRectangles),
-      );
-      // reset merged rectangles with the next unmerged rectangle in the queue
-      withinThresholdMergedRectangles = nextRectangle;
-    }
-  }
-  return allMergedRectangles;
+    sortedRects.length = 0;
+    sortedRects.push(...tempResult);
+  } while (hasChanges);
+
+  return sortedRects;
 };
 
 export const useSelectionDimensions = () => {
   const store = PDFStore.useContext();
 
-  const getDimension = (): CollapsibleSelection | undefined => {
+  const getDimension = () => {
     const selection = window.getSelection();
     if (!selection || selection.isCollapsed) return;
 
@@ -155,8 +136,8 @@ export const useSelectionDimensions = () => {
       isCollapsed: false,
     };
   };
-
-  const getSelection = (): Selection => getDimension() as Selection;
+  const getSelection = (): CollapsibleSelection => getDimension() as CollapsibleSelection;
 
   return { getDimension, getSelection };
+
 };

packages/lector/tsconfig.json

@@ -12,15 +12,20 @@
     "resolveJsonModule": true,
     // Language & Environment
     "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["node"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "types": [
+      "node"
+    ],
     // Emit
     "noEmit": true,
     "declaration": true,
     "declarationMap": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
-
     "downlevelIteration": true,
     // Interop
     "allowJs": true,
@@ -33,6 +38,12 @@
     "incremental": true,
     "tsBuildInfoFile": ".tsbuildinfo"
   },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "dist"]
-}
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}