@anaralabs/lector 3.12.4 → 3.12.5

package/dist/index.js

@@ -1439,6 +1439,7 @@ var useDetailCanvasLayer = ({
   const detailCanvasRef = useRef(null);
   const pageNumber = usePDFPageNumber();
   const dpr = useDpr();
+  const store = PDFStore.useContext();
   const bouncyZoom = usePdf((state) => state.zoom);
   const isPinching = usePdf((state) => state.isPinching);
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
@@ -1473,12 +1474,29 @@ var useDetailCanvasLayer = ({
       container.style.cssText = "";
     };
     const renderDetailCanvas = () => {
+      const virtualizer = store.getState().virtualizer;
+      if (virtualizer?.isScrolling) {
+        scheduleRender(160);
+        return;
+      }
       const pageContainer = baseCanvasRef.current?.parentElement ?? null;
       if (!pageContainer) {
         hideDetailCanvas();
         return;
       }
       const { width: pageWidth, height: pageHeight } = pageDimsRef.current;
+      const targetDetailScale = dpr * zoom * 1.3;
+      const baseTargetScale = dpr * Math.min(zoom, 1);
+      const baseScale = clampScaleForPage(
+        baseTargetScale,
+        pageWidth,
+        pageHeight
+      );
+      const needsDetail = zoom > 1 && targetDetailScale - baseScale > 1e-3;
+      if (isPinching || !needsDetail) {
+        hideDetailCanvas();
+        return;
+      }
       const scrollX = scrollContainer.scrollLeft / zoom;
       const scrollY = scrollContainer.scrollTop / zoom;
       const viewportWidth = scrollContainer.clientWidth / zoom;
@@ -1499,15 +1517,7 @@ var useDetailCanvasLayer = ({
       );
       const visibleWidth = Math.max(0, visibleRight - visibleLeft);
       const visibleHeight = Math.max(0, visibleBottom - visibleTop);
-      const targetDetailScale = dpr * zoom * 1.3;
-      const baseTargetScale = dpr * Math.min(zoom, 1);
-      const baseScale = clampScaleForPage(
-        baseTargetScale,
-        pageWidth,
-        pageHeight
-      );
-      const needsDetail = zoom > 1 && targetDetailScale - baseScale > 1e-3;
-      if (isPinching || !needsDetail || visibleWidth <= 0 || visibleHeight <= 0) {
+      if (visibleWidth <= 0 || visibleHeight <= 0) {
         hideDetailCanvas();
         return;
       }
@@ -1600,7 +1610,8 @@ var useDetailCanvasLayer = ({
     background,
     dpr,
     viewportRef,
-    baseCanvasRef
+    baseCanvasRef,
+    store
   ]);
   useEffect(() => {
     const canvas = detailCanvasRef.current;
@@ -2633,51 +2644,51 @@ var createTextSelectionManager = () => {
   return bindMouseEvents2;
 };
 var bindMouseEvents = createTextSelectionManager();
+var TEXT_BUILD_IDLE_MS = 300;
 var useTextLayer = () => {
   const textContainerRef = useRef(null);
   const textLayerRef = useRef(null);
-  const isRenderingRef = useRef(false);
   const pageNumber = usePDFPageNumber();
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   useEffect(() => {
     const textContainer = textContainerRef.current;
-    if (!textContainer || isRenderingRef.current) {
+    if (!textContainer) {
       return;
     }
     let isCancelled = false;
-    isRenderingRef.current = true;
-    textContainer.innerHTML = "";
-    if (textLayerRef.current) {
-      textLayerRef.current.cancel();
-      textLayerRef.current = null;
-    }
-    void import('pdfjs-dist/legacy/build/pdf.mjs').then(({ TextLayer: TextLayer2 }) => {
+    const buildTimer = setTimeout(() => {
       if (isCancelled || textContainerRef.current !== textContainer) return;
-      const textLayer = new TextLayer2({
-        textContentSource: pdfPageProxy.streamTextContent(),
-        container: textContainer,
-        viewport: pdfPageProxy.getViewport({ scale: 1 })
-      });
-      textLayerRef.current = textLayer;
-      return textLayer.render();
-    }).then(() => {
-      if (isCancelled || textContainerRef.current !== textContainer) {
-        return;
-      }
-      const endOfContent = document.createElement("div");
-      endOfContent.className = "endOfContent";
-      textContainer.appendChild(endOfContent);
-      bindMouseEvents(textContainer, endOfContent);
-    }).catch((error) => {
-      if (error instanceof Error && error.name !== "AbortException") {
-        console.error("TextLayer rendering error:", error);
+      textContainer.innerHTML = "";
+      if (textLayerRef.current) {
+        textLayerRef.current.cancel();
+        textLayerRef.current = null;
       }
-    }).finally(() => {
-      isRenderingRef.current = false;
-    });
+      void import('pdfjs-dist/legacy/build/pdf.mjs').then(({ TextLayer: TextLayer2 }) => {
+        if (isCancelled || textContainerRef.current !== textContainer) return;
+        const textLayer = new TextLayer2({
+          textContentSource: pdfPageProxy.streamTextContent(),
+          container: textContainer,
+          viewport: pdfPageProxy.getViewport({ scale: 1 })
+        });
+        textLayerRef.current = textLayer;
+        return textLayer.render();
+      }).then(() => {
+        if (isCancelled || textContainerRef.current !== textContainer) {
+          return;
+        }
+        const endOfContent = document.createElement("div");
+        endOfContent.className = "endOfContent";
+        textContainer.appendChild(endOfContent);
+        bindMouseEvents(textContainer, endOfContent);
+      }).catch((error) => {
+        if (error instanceof Error && error.name !== "AbortException") {
+          console.error("TextLayer rendering error:", error);
+        }
+      });
+    }, TEXT_BUILD_IDLE_MS);
     return () => {
       isCancelled = true;
-      isRenderingRef.current = false;
+      clearTimeout(buildTimer);
       if (textLayerRef.current) {
         textLayerRef.current.cancel();
         textLayerRef.current = null;
@@ -2704,7 +2715,11 @@ var TextLayer = memo(
           ...style,
           position: "absolute",
           top: 0,
-          left: 0
+          left: 0,
+          // Isolate the span subtree's layout so a getBoundingClientRect on
+          // an ancestor (e.g. renderDetailCanvas) doesn't reflow every text
+          // span on this page during scroll.
+          contain: "layout style"
         },
         ...props,
         ...{

package/package.json

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