@anaralabs/lector 3.14.11 → 3.14.12

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

@@ -267,6 +267,13 @@ export declare function createRecolorCanvasFactory(mapRef: RenderColorMapRef): {
     };
 };
 
+/** Paint native selection once per page; overlapping PDF spans must not
+ * composite their translucent backgrounds on top of each other. */
+export declare const createSelectionBackground: () => {
+    update: (selection: Selection | null, layers: Iterable<HTMLElement>) => void;
+    clear: (layer: HTMLElement) => void;
+};
+
 export declare const CurrentPage: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
 
 export declare const CurrentZoom: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
@@ -305,6 +312,13 @@ export declare const getFitWidthZoom: (containerWidth: number, viewports: PageVi
 
 export declare const getMidHeightOfHighlightLine: (selection: ColoredHighlight) => number;
 
+/**
+ * Per-text-node client rects for a selection. Avoids the block-level rects
+ * that `range.getClientRects()` returns for `.textLayer` / page wrappers,
+ * which would render as full-page highlights on multi-page selections.
+ */
+export declare const getTextNodeClientRects: (range: Range) => TextNodeRect[];
+
 export declare const HighlightLayer: ForwardRefExoticComponent<HighlightLayerProps & RefAttributes<HTMLDivElement>>;
 
 declare interface HighlightLayerProps extends ComponentPropsWithoutRef<"div"> {
@@ -384,6 +398,8 @@ export declare const MAX_CANVAS_DIMENSION = 32767;
 
 export declare const MAX_CANVAS_PIXELS = 16777216;
 
+export declare const mergeTextRuns: <T extends Rect>(rects: T[]) => T[];
+
 export declare const NextPage: () => void;
 
 export declare const Outline: ({ children, ...props }: HTMLProps<HTMLUListElement> & {
@@ -502,6 +518,13 @@ export declare interface RecolorContextOptions {
     pageArea?: number;
 }
 
+declare type Rect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+
 /**
  * Removes any recolor wrapper installed on the context. For long-lived
  * contexts (the visible canvas in the no-buffer fallback, thumbnails) that
@@ -654,6 +677,11 @@ declare type TextContent = {
 
 export declare const TextLayer: MemoExoticComponent<({ className, style, ...props }: HTMLProps<HTMLDivElement>) => JSX.Element>;
 
+declare type TextNodeRect = {
+    rect: DOMRect;
+    element: Element | null;
+};
+
 declare interface TextPosition {
     pageNumber: number;
     text: string;

package/dist/index.js

@@ -2894,9 +2894,7 @@ var CanvasLayer = memo(
 );
 CanvasLayer.displayName = "CanvasLayer";
 
-// src/hooks/useSelectionDimensions.tsx
-var MERGE_THRESHOLD = 2;
-var LAYER_ATTRIBUTION_TOLERANCE_PX = 4;
+// src/lib/selection-rects.ts
 var getTextNodeClientRects = (range) => {
   const root = range.commonAncestorContainer;
   const ownerDoc = root.ownerDocument ?? document;
@@ -2948,6 +2946,39 @@ var getTextNodeClientRects = (range) => {
   }
   return results;
 };
+var connected = (a, b) => {
+  const overlap = Math.min(a.top + a.height, b.top + b.height) - Math.max(a.top, b.top);
+  const gap = Math.max(a.left, b.left) - Math.min(a.left + a.width, b.left + b.width);
+  return overlap >= Math.min(a.height, b.height) / 2 && gap <= Math.min(a.height, b.height) * 0.5;
+};
+var mergeTextRuns = (rects) => {
+  const groups = [];
+  for (const rect of rects) {
+    const group = [rect];
+    for (let i = groups.length - 1; i >= 0; i--) {
+      if (groups[i].some((member) => connected(member, rect))) {
+        group.push(...groups[i]);
+        groups.splice(i, 1);
+      }
+    }
+    groups.push(group);
+  }
+  return groups.map((group) => {
+    const left = Math.min(...group.map((rect) => rect.left));
+    const top = Math.min(...group.map((rect) => rect.top));
+    return {
+      ...group[0],
+      left,
+      top,
+      width: Math.max(...group.map((rect) => rect.left + rect.width)) - left,
+      height: Math.max(...group.map((rect) => rect.top + rect.height)) - top
+    };
+  });
+};
+
+// src/hooks/useSelectionDimensions.tsx
+var MERGE_THRESHOLD = 2;
+var LAYER_ATTRIBUTION_TOLERANCE_PX = 4;
 var mapSelectionRectsToLayers = (range) => {
   const clientRects = getTextNodeClientRects(range).filter(
     ({ rect }) => rect.width > 2 && rect.height > 2
@@ -2990,122 +3021,6 @@ var mapSelectionRectsToLayers = (range) => {
   }
   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;
-  return verticalOverlap && horizontallyConnected;
-};
-var consolidateHighlightRects = (rects) => {
-  if (rects.length <= 1) return rects;
-  const consolidated = [];
-  const sorted = [...rects].sort((a, b) => {
-    const pageCompare = a.pageNumber - b.pageNumber;
-    if (pageCompare !== 0) return pageCompare;
-    const topDiff = a.top - b.top;
-    return Math.abs(topDiff) < 2 ? a.left - b.left : topDiff;
-  });
-  let current = sorted[0];
-  if (!current) return rects;
-  for (let i = 1; i < sorted.length; i++) {
-    const next = sorted[i];
-    if (!next) continue;
-    const samePageAndLine = current.pageNumber === next.pageNumber && Math.abs(current.top - next.top) < Math.max(current.height, next.height) * 0.5;
-    const horizontallyConnected = samePageAndLine && // Adjacent (touching or very close)
-    (Math.abs(current.left + current.width - next.left) <= MERGE_THRESHOLD || Math.abs(next.left + next.width - current.left) <= MERGE_THRESHOLD || // Overlapping
-    current.left < next.left + next.width && next.left < current.left + current.width || // Very close (small gap)
-    Math.abs(current.left + current.width - next.left) <= current.height * 0.2);
-    if (horizontallyConnected) {
-      const newLeft = Math.min(current.left, next.left);
-      const newRight = Math.max(
-        current.left + current.width,
-        next.left + next.width
-      );
-      const newTop = Math.min(current.top, next.top);
-      const newBottom = Math.max(
-        current.top + current.height,
-        next.top + next.height
-      );
-      current = {
-        left: newLeft,
-        top: newTop,
-        width: newRight - newLeft,
-        height: newBottom - newTop,
-        pageNumber: current.pageNumber
-      };
-    } else {
-      consolidated.push(current);
-      current = next;
-    }
-  }
-  if (current) {
-    consolidated.push(current);
-  }
-  return consolidated;
-};
-var consolidateRects = (rects) => {
-  if (rects.length <= 1) return rects;
-  const result = [];
-  const visited = /* @__PURE__ */ new Set();
-  for (let i = 0; i < rects.length; i++) {
-    if (visited.has(i)) continue;
-    const currentRect = rects[i];
-    if (!currentRect) continue;
-    const currentGroup = [currentRect];
-    visited.add(i);
-    let foundNew = true;
-    while (foundNew) {
-      foundNew = false;
-      for (let j = 0; j < rects.length; j++) {
-        if (visited.has(j)) continue;
-        const candidateRect = rects[j];
-        if (!candidateRect) continue;
-        const shouldMergeWithGroup = currentGroup.some(
-          (groupRect) => doRectsOverlap(groupRect, candidateRect)
-        );
-        if (shouldMergeWithGroup) {
-          currentGroup.push(candidateRect);
-          visited.add(j);
-          foundNew = true;
-        }
-      }
-    }
-    result.push(mergeRectGroup(currentGroup));
-  }
-  return result;
-};
-var doRectsOverlap = (rect1, rect2) => {
-  const horizontalOverlap = rect1.left < rect2.left + rect2.width && rect2.left < rect1.left + rect1.width;
-  const verticalOverlap = rect1.top < rect2.top + rect2.height && rect2.top < rect1.top + rect1.height;
-  const closeEnough = shouldMergeRects(rect1, rect2);
-  return horizontalOverlap && verticalOverlap || closeEnough;
-};
-var mergeRectGroup = (rects) => {
-  if (rects.length === 1) {
-    const rect = rects[0];
-    if (!rect) throw new Error("Invalid rect in group");
-    return rect;
-  }
-  const firstRect = rects[0];
-  if (!firstRect) throw new Error("Invalid first rect in group");
-  let minLeft = firstRect.left;
-  let minTop = firstRect.top;
-  let maxRight = firstRect.left + firstRect.width;
-  let maxBottom = firstRect.top + firstRect.height;
-  rects.forEach((rect) => {
-    if (!rect) return;
-    minLeft = Math.min(minLeft, rect.left);
-    minTop = Math.min(minTop, rect.top);
-    maxRight = Math.max(maxRight, rect.left + rect.width);
-    maxBottom = Math.max(maxBottom, rect.top + rect.height);
-  });
-  return {
-    left: minLeft,
-    top: minTop,
-    width: maxRight - minLeft,
-    height: maxBottom - minTop,
-    pageNumber: firstRect.pageNumber
-  };
-};
 var useSelectionDimensions = () => {
   const store = PDFStore.useContext();
   const getAnnotationDimension = () => {
@@ -3178,14 +3093,7 @@ var useSelectionDimensions = () => {
       }
     });
     textLayerMapHighlight.forEach((rects) => {
-      if (rects.length > 0) {
-        if (rects.length === 1) {
-          highlightRects.push(...rects);
-        } else {
-          const consolidated = consolidateHighlightRects(rects);
-          highlightRects.push(...consolidated);
-        }
-      }
+      highlightRects.push(...mergeTextRuns(rects));
     });
     textLayerMapUnderline.forEach((rects) => {
       if (rects.length > 0) {
@@ -3332,7 +3240,7 @@ var useSelectionDimensions = () => {
     });
     textLayerMap.forEach((rects) => {
       if (rects.length > 0) {
-        const consolidated = consolidateRects(rects);
+        const consolidated = mergeTextRuns(rects);
         highlights.push(...consolidated);
       }
     });
@@ -3777,13 +3685,110 @@ var HighlightLayer = forwardRef(({ asChild, className, style, ...props }, ref) =
   }) });
 });
 HighlightLayer.displayName = "HighlightLayer";
+
+// src/lib/selection-background.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var createSelectionBackground = () => {
+  const overlays = /* @__PURE__ */ new Map();
+  let style;
+  const clear = (layer) => {
+    overlays.get(layer)?.remove();
+    overlays.delete(layer);
+    layer.removeAttribute("data-lector-selection-active");
+    if (overlays.size === 0) {
+      style?.remove();
+      style = void 0;
+    }
+  };
+  const update = (selection, layers) => {
+    const registered = new Set(layers);
+    const byLayer = /* @__PURE__ */ new Map();
+    if (selection && !selection.isCollapsed) {
+      for (let i = 0; i < selection.rangeCount; i++) {
+        for (const { rect, element } of getTextNodeClientRects(
+          selection.getRangeAt(i)
+        )) {
+          const layer = element?.closest(".textLayer");
+          if (!layer || !element || !registered.has(layer) || rect.width <= 0 || rect.height <= 0)
+            continue;
+          let entry = byLayer.get(layer);
+          if (!entry) {
+            entry = { rects: [], element };
+            byLayer.set(layer, entry);
+          }
+          entry.rects.push(rect);
+        }
+      }
+    }
+    for (const layer of registered) {
+      const entry = byLayer.get(layer);
+      if (!entry) {
+        clear(layer);
+        continue;
+      }
+      layer.removeAttribute("data-lector-selection-active");
+      const color = getComputedStyle(
+        entry.element,
+        "::selection"
+      ).backgroundColor;
+      if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") {
+        clear(layer);
+        continue;
+      }
+      const bounds = layer.getBoundingClientRect();
+      if (!bounds.width || !bounds.height || !layer.clientWidth || !layer.clientHeight) {
+        clear(layer);
+        continue;
+      }
+      const scaleX = bounds.width / layer.clientWidth;
+      const scaleY = bounds.height / layer.clientHeight;
+      const rects = mergeTextRuns(
+        entry.rects.map((rect) => ({
+          left: (rect.left - bounds.left) / scaleX,
+          top: (rect.top - bounds.top) / scaleY,
+          width: rect.width / scaleX,
+          height: rect.height / scaleY
+        }))
+      );
+      let overlay = overlays.get(layer);
+      if (!overlay) {
+        overlay = document.createElementNS(SVG_NS, "svg");
+        overlay.dataset.lectorSelection = "";
+        overlay.setAttribute("aria-hidden", "true");
+        overlay.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;transform:none;z-index:0;overflow:visible";
+        overlay.append(document.createElementNS(SVG_NS, "path"));
+        layer.append(overlay);
+        overlays.set(layer, overlay);
+      }
+      const path = overlay.firstElementChild;
+      path.setAttribute(
+        "d",
+        rects.map(
+          (rect) => `M${rect.left} ${rect.top}h${rect.width}v${rect.height}h${-rect.width}Z`
+        ).join(" ")
+      );
+      path.setAttribute("fill", color);
+      if (!style) {
+        style = document.createElement("style");
+        style.textContent = ".textLayer[data-lector-selection-active] ::selection { background-color: transparent !important; }";
+        document.head.append(style);
+      }
+      layer.setAttribute("data-lector-selection-active", "");
+    }
+  };
+  return { update, clear };
+};
+
+// src/hooks/layers/useTextLayer.tsx
 var createTextSelectionManager = () => {
   const textLayers = /* @__PURE__ */ new Map();
+  const selectionBackground = createSelectionBackground();
   let selectionChangeAbortController = null;
   let isPointerDown = false;
   let prevRange = null;
   let isFirefox;
   const removeGlobalSelectionListener = (textLayerDiv) => {
+    selectionBackground.clear(textLayerDiv);
     textLayers.delete(textLayerDiv);
     if (textLayers.size === 0) {
       selectionChangeAbortController?.abort();
@@ -3840,6 +3845,7 @@ var createTextSelectionManager = () => {
       "selectionchange",
       () => {
         const selection = document.getSelection();
+        selectionBackground.update(selection, textLayers.keys());
         if (!selection || selection.rangeCount === 0) {
           textLayers.forEach(reset);
           return;

package/package.json

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