@anaralabs/lector 3.10.4 → 3.10.5

package/dist/index.js

@@ -476,7 +476,9 @@ var AnnotationHighlightLayer = ({
   const pageNumber = usePDFPageNumber();
   const isPageRendered = usePdf((state) => !!state.renderedPages[pageNumber]);
   const pageAnnotations = useMemo(
-    () => annotations.filter((a) => a.pageNumber === pageNumber),
+    () => annotations.filter(
+      (a) => a.pageNumber === pageNumber || a.highlights.some((h) => h.pageNumber === pageNumber) || a.underlines?.some((u) => u.pageNumber === pageNumber)
+    ),
     [annotations, pageNumber]
   );
   if (!isPageRendered) return null;
@@ -524,6 +526,92 @@ var AnnotationHighlightLayer = ({
     };
   };
   return /* @__PURE__ */ jsx("div", { className, style, children: pageAnnotations.map((annotation) => {
+    const pageHighlights = annotation.highlights.filter(
+      (h) => h.pageNumber === pageNumber
+    );
+    const pageUnderlines = annotation.underlines?.filter(
+      (u) => u.pageNumber === pageNumber
+    );
+    if (pageHighlights.length === 0 && (!pageUnderlines || pageUnderlines.length === 0)) {
+      return null;
+    }
+    const minPage = (rects) => rects?.reduce(
+      (m, r2) => m === null || r2.pageNumber < m ? r2.pageNumber : m,
+      null
+    ) ?? null;
+    const minHighlightPage = minPage(annotation.highlights);
+    const minUnderlinePage = minPage(annotation.underlines);
+    const firstPageWithRects = minHighlightPage === null ? minUnderlinePage : minUnderlinePage === null ? minHighlightPage : Math.min(minHighlightPage, minUnderlinePage);
+    const isPrimaryPage = firstPageWithRects === pageNumber;
+    const showCommentIcon = isPrimaryPage;
+    const rectsContent = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: { cursor: "pointer" },
+        onClick: () => onAnnotationClick?.(annotation),
+        children: [
+          pageHighlights.map((highlight, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: highlightClassName,
+              style: {
+                position: "absolute",
+                top: highlight.top,
+                left: highlight.left,
+                width: highlight.width,
+                height: highlight.height,
+                backgroundColor: annotation.color
+              },
+              "data-highlight-id": annotation.id
+            },
+            `highlight-${// biome-ignore lint/suspicious/noArrayIndexKey: <index>
+            index}`
+          )),
+          annotation.comment && pageUnderlines?.map((rect, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: underlineClassName,
+              style: {
+                position: "absolute",
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: 1.1,
+                backgroundColor: annotation.borderColor
+              },
+              "data-comment-id": annotation.id
+            },
+            `underline-${// biome-ignore lint/suspicious/noArrayIndexKey: <index>
+            index}`
+          )),
+          (() => {
+            if (!annotation.comment || !commmentIcon || !showCommentIcon) {
+              return null;
+            }
+            const anchorRects = pageHighlights.length > 0 ? pageHighlights : pageUnderlines;
+            if (!anchorRects || anchorRects.length === 0) return null;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: commentIconClassName,
+                style: {
+                  position: "absolute",
+                  ...getCommentIconPosition(anchorRects),
+                  color: "gray",
+                  cursor: "pointer",
+                  zIndex: 10
+                },
+                "data-comment-icon-id": annotation.id,
+                children: commmentIcon
+              }
+            );
+          })()
+        ]
+      }
+    );
+    if (!isPrimaryPage) {
+      return /* @__PURE__ */ jsx("div", { children: rectsContent }, annotation.id);
+    }
     return /* @__PURE__ */ jsx(
       AnnotationTooltip,
       {
@@ -547,64 +635,7 @@ var AnnotationHighlightLayer = ({
           onClose: () => {
           }
         }),
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: { cursor: "pointer" },
-            onClick: () => onAnnotationClick?.(annotation),
-            children: [
-              annotation.highlights.map((highlight, index) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: highlightClassName,
-                  style: {
-                    position: "absolute",
-                    top: highlight.top,
-                    left: highlight.left,
-                    width: highlight.width,
-                    height: highlight.height,
-                    backgroundColor: annotation.color
-                  },
-                  "data-highlight-id": annotation.id
-                },
-                `highlight-${// biome-ignore lint/suspicious/noArrayIndexKey: <index>
-                index}`
-              )),
-              annotation.comment && annotation.underlines?.map((rect, index) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: underlineClassName,
-                  style: {
-                    position: "absolute",
-                    top: rect.top,
-                    left: rect.left,
-                    width: rect.width,
-                    height: 1.1,
-                    backgroundColor: annotation.borderColor
-                  },
-                  "data-comment-id": annotation.id
-                },
-                `underline-${// biome-ignore lint/suspicious/noArrayIndexKey: <index>
-                index}`
-              )),
-              annotation.comment && commmentIcon && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: commentIconClassName,
-                  style: {
-                    position: "absolute",
-                    ...getCommentIconPosition(annotation.highlights),
-                    color: "gray",
-                    cursor: "pointer",
-                    zIndex: 10
-                  },
-                  "data-comment-icon-id": annotation.id,
-                  children: commmentIcon
-                }
-              )
-            ]
-          }
-        )
+        children: rectsContent
       },
       annotation.id
     );
@@ -1573,6 +1604,100 @@ CanvasLayer.displayName = "CanvasLayer";
 
 // src/hooks/useSelectionDimensions.tsx
 var MERGE_THRESHOLD = 2;
+var getTextNodeClientRects = (range) => {
+  const root = range.commonAncestorContainer;
+  const ownerDoc = root.ownerDocument ?? document;
+  if (root.nodeType === Node.TEXT_NODE) {
+    const parentElement = root.parentElement;
+    return Array.from(range.getClientRects()).map((rect) => ({
+      rect,
+      element: parentElement
+    }));
+  }
+  const walker = ownerDoc.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode(node) {
+      if (!node.nodeValue || node.nodeValue.length === 0) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      try {
+        return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      } catch {
+        return NodeFilter.FILTER_REJECT;
+      }
+    }
+  });
+  const results = [];
+  let current = walker.nextNode();
+  while (current) {
+    const textNode = current;
+    const parentElement = textNode.parentElement;
+    const length = textNode.nodeValue?.length ?? 0;
+    const isStartNode = textNode === range.startContainer;
+    const isEndNode = textNode === range.endContainer;
+    const start = isStartNode ? range.startOffset : 0;
+    const end = isEndNode ? range.endOffset : length;
+    if (end > start) {
+      const sub = ownerDoc.createRange();
+      try {
+        sub.setStart(textNode, start);
+        sub.setEnd(textNode, end);
+        const subRects = sub.getClientRects();
+        for (let i = 0; i < subRects.length; i++) {
+          const r2 = subRects[i];
+          if (r2) results.push({ rect: r2, element: parentElement });
+        }
+      } catch {
+      } finally {
+        sub.detach?.();
+      }
+    }
+    current = walker.nextNode();
+  }
+  return results;
+};
+var mapSelectionRectsToLayers = (range) => {
+  const clientRects = getTextNodeClientRects(range).filter(
+    ({ rect }) => rect.width > 2 && rect.height > 2
+  );
+  const textLayerEntries = Array.from(
+    document.querySelectorAll(".textLayer")
+  ).map((el) => ({ el, rect: el.getBoundingClientRect() }));
+  const layerForRect = (rect) => {
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const geomMatch = textLayerEntries.find(
+      ({ rect: lr }) => cx >= lr.left - 1 && cx <= lr.right + 1 && cy >= lr.top - 1 && cy <= lr.bottom + 1
+    );
+    if (geomMatch) return geomMatch.el;
+    const points = [
+      [rect.left + 1, cy],
+      [cx, cy],
+      [rect.right - 1, cy],
+      [cx, rect.top + 1],
+      [cx, rect.bottom - 1]
+    ];
+    for (const [px, py] of points) {
+      const el = document.elementFromPoint(px, py);
+      const layer = el?.closest(".textLayer");
+      if (layer) return layer;
+    }
+    return null;
+  };
+  const result = [];
+  for (const { rect: clientRect, element: sourceElement } of clientRects) {
+    const layer = layerForRect(clientRect);
+    if (!layer) continue;
+    const layerRect = layer.getBoundingClientRect();
+    const fitsInLayer = clientRect.top >= layerRect.top - 1 && clientRect.bottom <= layerRect.bottom + 1 && clientRect.left >= layerRect.left - 1 && clientRect.right <= layerRect.right + 1;
+    if (!fitsInLayer) continue;
+    const pageNumber = parseInt(
+      layer.getAttribute("data-page-number") || "1",
+      10
+    );
+    result.push({ clientRect, sourceElement, layer, layerRect, pageNumber });
+  }
+  return result;
+};
 var shouldMergeRects = (rect1, rect2) => {
   const verticalOverlap = !(rect1.top > rect2.top + rect2.height || rect2.top > rect1.top + rect1.height);
   const horizontallyConnected = 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;
@@ -1699,40 +1824,10 @@ var useSelectionDimensions = () => {
     const underlineRects = [];
     const textLayerMapHighlight = /* @__PURE__ */ new Map();
     const textLayerMapUnderline = /* @__PURE__ */ new Map();
-    const clientRects = Array.from(range.getClientRects()).filter(
-      (rect) => rect.width > 2 && rect.height > 2
-    );
-    clientRects.forEach((clientRect) => {
-      let element = document.elementFromPoint(
-        clientRect.left + 1,
-        clientRect.top + clientRect.height / 2
-      );
-      if (!element) {
-        element = document.elementFromPoint(
-          clientRect.left + clientRect.width / 2,
-          clientRect.top + clientRect.height / 2
-        );
-      }
-      if (!element) {
-        element = document.elementFromPoint(
-          clientRect.right - 1,
-          clientRect.top + clientRect.height / 2
-        );
-      }
-      if (!element) {
-        element = document.elementFromPoint(
-          clientRect.left + clientRect.width / 2,
-          clientRect.top + 1
-        );
-      }
-      if (!element) {
-        element = document.elementFromPoint(
-          clientRect.left + clientRect.width / 2,
-          clientRect.bottom - 1
-        );
-      }
-      const textLayer = element?.closest(".textLayer");
-      if (!textLayer) return;
+    const mapped = mapSelectionRectsToLayers(range);
+    const zoom = store.getState().zoom;
+    mapped.forEach(({ clientRect, sourceElement, layerRect, pageNumber }) => {
+      const element = sourceElement;
       const isSuperOrSubScript = (el) => {
         if (!el) return false;
         if (el.tagName.toLowerCase() === "sup" || el.tagName.toLowerCase() === "sub") {
@@ -1762,17 +1857,11 @@ var useSelectionDimensions = () => {
         }
         return false;
       };
-      const pageNumber = parseInt(
-        textLayer.getAttribute("data-page-number") || "1",
-        10
-      );
-      const textLayerRect = textLayer.getBoundingClientRect();
-      const zoom = store.getState().zoom;
       const highlightRect = {
         width: clientRect.width / zoom,
         height: clientRect.height / zoom,
-        top: (clientRect.top - textLayerRect.top) / zoom,
-        left: (clientRect.left - textLayerRect.left) / zoom,
+        top: (clientRect.top - layerRect.top) / zoom,
+        left: (clientRect.left - layerRect.left) / zoom,
         pageNumber
       };
       if (!textLayerMapHighlight.has(pageNumber)) {
@@ -1786,8 +1875,8 @@ var useSelectionDimensions = () => {
         const underlineRect = {
           width: clientRect.width / zoom,
           height: underlineHeight / zoom,
-          top: (clientRect.top - textLayerRect.top + baselineOffset) / zoom,
-          left: (clientRect.left - textLayerRect.left) / zoom,
+          top: (clientRect.top - layerRect.top + baselineOffset) / zoom,
+          left: (clientRect.left - layerRect.left) / zoom,
           pageNumber
         };
         if (!textLayerMapUnderline.has(pageNumber)) {
@@ -1934,27 +2023,14 @@ var useSelectionDimensions = () => {
     const range = selection.getRangeAt(0);
     const highlights = [];
     const textLayerMap = /* @__PURE__ */ new Map();
-    const clientRects = Array.from(range.getClientRects()).filter(
-      (rect) => rect.width > 2 && rect.height > 2
-    );
-    clientRects.forEach((clientRect) => {
-      const element = document.elementFromPoint(
-        clientRect.left + 1,
-        clientRect.top + clientRect.height / 2
-      );
-      const textLayer = element?.closest(".textLayer");
-      if (!textLayer) return;
-      const pageNumber = parseInt(
-        textLayer.getAttribute("data-page-number") || "1",
-        10
-      );
-      const textLayerRect = textLayer.getBoundingClientRect();
-      const zoom = store.getState().zoom;
+    const mapped = mapSelectionRectsToLayers(range);
+    const zoom = store.getState().zoom;
+    mapped.forEach(({ clientRect, layerRect, pageNumber }) => {
       const rect = {
         width: clientRect.width / zoom,
         height: clientRect.height / zoom,
-        top: (clientRect.top - textLayerRect.top) / zoom,
-        left: (clientRect.left - textLayerRect.left) / zoom,
+        top: (clientRect.top - layerRect.top) / zoom,
+        left: (clientRect.left - layerRect.left) / zoom,
         pageNumber
       };
       if (!textLayerMap.has(pageNumber)) {
@@ -2204,8 +2280,18 @@ var ColoredHighlightComponent = ({
     (state) => state.deleteColoredHighlight
   );
   const [showButton, setShowButton] = useState(false);
+  const pageNumber = usePDFPageNumber();
+  const pageRectangles = useMemo(
+    () => selection.rectangles.filter((r2) => r2.pageNumber === pageNumber),
+    [selection.rectangles, pageNumber]
+  );
+  if (pageRectangles.length === 0) return null;
+  const buttonAnchor = {
+    ...selection,
+    rectangles: pageRectangles
+  };
   return /* @__PURE__ */ jsxs("div", { className: "colored-highlight", children: [
-    selection.rectangles.map((rect, index) => /* @__PURE__ */ jsx(
+    pageRectangles.map((rect, index) => /* @__PURE__ */ jsx(
       "span",
       {
         onClick: () => setShowButton(!showButton),
@@ -2238,8 +2324,8 @@ var ColoredHighlightComponent = ({
           cursor: "pointer",
           boxShadow: "2px 2px 5px black",
           position: "absolute",
-          top: getMidHeightOfHighlightLine(selection),
-          left: getEndOfHighlight(selection),
+          top: getMidHeightOfHighlightLine(buttonAnchor),
+          left: getEndOfHighlight(buttonAnchor),
           zIndex: 30,
           transform: "translateY(-50%)"
         },
@@ -2280,7 +2366,9 @@ var ColoredHighlightLayer = ({
   );
   const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
   const pageHighlights = useMemo(
-    () => highlights.filter((s) => s.pageNumber === pageNumber),
+    () => highlights.filter(
+      (s) => s.pageNumber === pageNumber || s.rectangles.some((r2) => r2.pageNumber === pageNumber)
+    ),
     [highlights, pageNumber]
   );
   const handleHighlighting = useCallback(

package/package.json

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