@anaralabs/lector 3.12.3 → 3.12.5

package/dist/index.js

@@ -1285,18 +1285,36 @@ var useCanvasLayer = ({ background }) => {
     baseCanvas.style.visibility = "hidden";
     let cancelled = false;
     const viewport = pdfPageProxy.getViewport({ scale: baseScale });
+    const buffer = document.createElement("canvas");
+    buffer.width = baseCanvas.width;
+    buffer.height = baseCanvas.height;
+    const bufferCtx = buffer.getContext("2d");
+    const useBuffer = bufferCtx !== null;
+    const renderCanvas = useBuffer ? buffer : baseCanvas;
+    const renderCtx = bufferCtx ?? context;
     const renderingTask = pdfPageProxy.render({
-      canvas: baseCanvas,
-      canvasContext: context,
+      canvas: renderCanvas,
+      canvasContext: renderCtx,
       viewport,
       background
     });
+    const releaseBuffer = () => {
+      buffer.width = 0;
+      buffer.height = 0;
+    };
     renderingTask.promise.then(() => {
-      if (cancelled) return;
+      if (cancelled) {
+        releaseBuffer();
+        return;
+      }
+      if (useBuffer) {
+        context.clearRect(0, 0, baseCanvas.width, baseCanvas.height);
+        context.drawImage(buffer, 0, 0);
+      }
       baseCanvas.style.visibility = "";
       markPageRendered(pageNumber);
       if (typeof createImageBitmap !== "undefined") {
-        createImageBitmap(baseCanvas).then((bitmap) => {
+        createImageBitmap(renderCanvas).then((bitmap) => {
           if (cancelled) {
             bitmap.close();
             return;
@@ -1309,9 +1327,12 @@ var useCanvasLayer = ({ background }) => {
             bitmap
           );
         }).catch(() => {
-        });
+        }).finally(releaseBuffer);
+      } else {
+        releaseBuffer();
       }
     }).catch((error) => {
+      releaseBuffer();
       if (cancelled) return;
       if (error?.name === "RenderingCancelledException") return;
       baseCanvas.style.visibility = "";
@@ -1418,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));
@@ -1452,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;
@@ -1478,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;
       }
@@ -1579,7 +1610,8 @@ var useDetailCanvasLayer = ({
     background,
     dpr,
     viewportRef,
-    baseCanvasRef
+    baseCanvasRef,
+    store
   ]);
   useEffect(() => {
     const canvas = detailCanvasRef.current;
@@ -2612,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;
@@ -2683,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,
         ...{
@@ -3036,18 +3072,32 @@ var useScrollFn = () => {
   );
   return { scrollToFn };
 };
-var useVisiblePage = ({ items }) => {
+var useVisiblePage = ({
+  items,
+  scrollOffset
+}) => {
   const zoomLevel = usePdf((state) => state.zoom);
   const isPinching = usePdf((state) => state.isPinching);
   const setCurrentPage = usePdf((state) => state.setCurrentPage);
   const scrollElement = usePdf((state) => state.viewportRef?.current);
   const lastPageRef = useRef(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  useEffect(() => {
+    if (!scrollElement) return;
+    const measure = () => setViewportHeight(scrollElement.clientHeight);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(scrollElement);
+    return () => observer.disconnect();
+  }, [scrollElement]);
   const calculateVisiblePageIndex = useCallback(
     (virtualItems) => {
-      if (!scrollElement || virtualItems.length === 0) return 0;
-      const scrollTop = scrollElement.scrollTop / zoomLevel;
-      const viewportHeight = scrollElement.clientHeight / zoomLevel;
-      const viewportCenter = scrollTop + viewportHeight / 2;
+      if (virtualItems.length === 0 || scrollOffset == null) return 0;
+      const viewportCenter = scrollOffset + viewportHeight / zoomLevel / 2;
       let closestIndex = 0;
       let smallestDistance = Infinity;
       for (const item of virtualItems) {
@@ -3060,10 +3110,17 @@ var useVisiblePage = ({ items }) => {
       }
       return closestIndex;
     },
-    [scrollElement, zoomLevel]
+    [scrollOffset, zoomLevel, viewportHeight]
   );
   useEffect(() => {
-    if (!isPinching && items.length > 0) {
+    if (viewportHeight === 0 && scrollElement) {
+      const h = scrollElement.clientHeight;
+      if (h > 0) {
+        setViewportHeight(h);
+        return;
+      }
+    }
+    if (!isPinching && items.length > 0 && viewportHeight > 0 && scrollOffset != null) {
       const mostVisibleIndex = calculateVisiblePageIndex(items);
       const page = mostVisibleIndex + 1;
       if (page !== lastPageRef.current) {
@@ -3071,7 +3128,15 @@ var useVisiblePage = ({ items }) => {
         setCurrentPage?.(page);
       }
     }
-  }, [items, isPinching, calculateVisiblePageIndex, setCurrentPage]);
+  }, [
+    items,
+    isPinching,
+    calculateVisiblePageIndex,
+    setCurrentPage,
+    viewportHeight,
+    scrollOffset,
+    scrollElement
+  ]);
   return null;
 };
 
@@ -5267,7 +5332,11 @@ var Pages = ({
   const virtualizerItems = virtualizer?.getVirtualItems() ?? [];
   const items = tempItems.length ? tempItems : virtualizerItems;
   useVisiblePage({
-    items
+    items,
+    // Pass through nullish (pre-measure) rather than coercing to 0, so the
+    // hook doesn't publish a top-of-document page before the real offset
+    // (incl. a restored/deep-linked one) arrives.
+    scrollOffset: virtualizer.scrollOffset ?? null
   });
   useFitWidth({ viewportRef: containerRef });
   const largestPageWidth = usePdf(selectLargestPageWidth);

package/package.json

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