@anaralabs/lector 3.12.3 → 3.12.4

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 = "";
@@ -3036,18 +3057,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 +3095,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 +3113,15 @@ var useVisiblePage = ({ items }) => {
         setCurrentPage?.(page);
       }
     }
-  }, [items, isPinching, calculateVisiblePageIndex, setCurrentPage]);
+  }, [
+    items,
+    isPinching,
+    calculateVisiblePageIndex,
+    setCurrentPage,
+    viewportHeight,
+    scrollOffset,
+    scrollElement
+  ]);
   return null;
 };
 
@@ -5267,7 +5317,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.4",
   "description": "A headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",