@anaralabs/lector 3.12.4 → 3.12.6

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

@@ -326,6 +326,8 @@ declare interface PDFState {
     zoomFitWidth: () => void;
     isPinching: boolean;
     setIsPinching: (isPinching: boolean) => void;
+    isResizing: boolean;
+    setIsResizing: (isResizing: boolean) => void;
     currentPage: number;
     setCurrentPage: (pageNumber: number) => void;
     viewports: Array<PageViewport>;

package/dist/index.js

@@ -86,6 +86,12 @@ var PDFStore = createZustandContext(
           isPinching: val
         });
       },
+      isResizing: false,
+      setIsResizing: (val) => {
+        set({
+          isResizing: val
+        });
+      },
       virtualizer: null,
       setVirtualizer: (val) => {
         set({
@@ -1244,9 +1250,11 @@ function setCachedBitmap(docId, proxy, scale, background, bitmap) {
 }
 var useCanvasLayer = ({ background }) => {
   const canvasRef = useRef(null);
+  const hasContentRef = useRef(false);
   const pageNumber = usePDFPageNumber();
   const dpr = useDpr();
   const bouncyZoom = usePdf((state) => state.zoom);
+  const isResizing = usePdf((state) => state.isResizing);
   const docId = usePdf((state) => state.pdfDocumentProxy.fingerprints[0] ?? "");
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const markPageRendered = usePdf((state) => state.markPageRendered);
@@ -1258,6 +1266,13 @@ var useCanvasLayer = ({ background }) => {
     const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
     const pageWidth = baseViewport.width;
     const pageHeight = baseViewport.height;
+    if (isResizing && hasContentRef.current) {
+      baseCanvas.style.visibility = "";
+      baseCanvas.style.width = `${pageWidth}px`;
+      baseCanvas.style.height = `${pageHeight}px`;
+      return;
+    }
+    hasContentRef.current = false;
     const targetBaseScale = dpr * Math.min(zoom, 1);
     const baseScale = clampScaleForPage(targetBaseScale, pageWidth, pageHeight);
     baseCanvas.width = Math.floor(pageWidth * baseScale);
@@ -1278,6 +1293,7 @@ var useCanvasLayer = ({ background }) => {
     if (cached) {
       context.drawImage(cached, 0, 0);
       markPageRendered(pageNumber);
+      hasContentRef.current = true;
       return;
     }
     context.setTransform(1, 0, 0, 1, 0, 0);
@@ -1313,6 +1329,7 @@ var useCanvasLayer = ({ background }) => {
       }
       baseCanvas.style.visibility = "";
       markPageRendered(pageNumber);
+      hasContentRef.current = true;
       if (typeof createImageBitmap !== "undefined") {
         createImageBitmap(renderCanvas).then((bitmap) => {
           if (cancelled) {
@@ -1347,6 +1364,7 @@ var useCanvasLayer = ({ background }) => {
     background,
     dpr,
     zoom,
+    isResizing,
     pageNumber,
     markPageRendered,
     docId
@@ -1439,6 +1457,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 +1492,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 +1535,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 +1628,8 @@ var useDetailCanvasLayer = ({
     background,
     dpr,
     viewportRef,
-    baseCanvasRef
+    baseCanvasRef,
+    store
   ]);
   useEffect(() => {
     const canvas = detailCanvasRef.current;
@@ -2633,51 +2662,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 +2733,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,
         ...{
@@ -2972,32 +3005,57 @@ var TotalPages = ({ ...props }) => {
   const pages = usePdf((state) => state.pdfDocumentProxy.numPages);
   return /* @__PURE__ */ jsx("div", { ...props, children: pages });
 };
+var RESIZE_QUIET_MS = 200;
 var useFitWidth = ({ viewportRef }) => {
   const viewports = usePdf((state) => state.viewports);
   const zoomOptions = usePdf((state) => state.zoomOptions);
   const updateZoom = usePdf((state) => state.updateZoom);
+  const setIsResizing = usePdf((state) => state.setIsResizing);
   const store = PDFStore.useContext();
+  const pendingFrameRef = useRef(null);
+  const latestWidthRef = useRef(null);
   useLayoutEffect(() => {
     if (viewportRef.current === null) return;
+    let quietTimer = null;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const isFitWidth = store.getState().isZoomFitWidth;
-        if (entry.target === viewportRef.current && isFitWidth) {
-          const containerWidth = entry.contentRect.width;
+        if (entry.target !== viewportRef.current) continue;
+        const prevWidth = latestWidthRef.current;
+        latestWidthRef.current = entry.contentRect.width;
+        if (store.getState().isZoomFitWidth && prevWidth !== null && prevWidth !== entry.contentRect.width) {
+          if (!store.getState().isResizing) setIsResizing(true);
+          if (quietTimer) clearTimeout(quietTimer);
+          quietTimer = setTimeout(() => {
+            setIsResizing(false);
+            quietTimer = null;
+          }, RESIZE_QUIET_MS);
+        }
+        if (pendingFrameRef.current !== null) continue;
+        pendingFrameRef.current = requestAnimationFrame(() => {
+          pendingFrameRef.current = null;
+          const containerWidth = latestWidthRef.current;
+          if (containerWidth === null) return;
+          if (!store.getState().isZoomFitWidth) return;
           const newZoom = getFitWidthZoom(
             containerWidth,
             viewports,
             zoomOptions
           );
           updateZoom(newZoom, true);
-        }
+        });
       }
     });
     resizeObserver.observe(viewportRef.current);
     return () => {
+      if (quietTimer) clearTimeout(quietTimer);
       resizeObserver.disconnect();
+      if (pendingFrameRef.current !== null) {
+        cancelAnimationFrame(pendingFrameRef.current);
+        pendingFrameRef.current = null;
+      }
+      if (store.getState().isResizing) setIsResizing(false);
     };
-  }, [store, updateZoom, viewportRef, viewports, zoomOptions]);
+  }, [store, updateZoom, setIsResizing, viewportRef, viewports, zoomOptions]);
   return null;
 };
 var supportsScrollend = typeof window === "undefined" ? true : "onscrollend" in window;

package/package.json

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