@anaralabs/lector 3.12.5 → 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
@@ -2987,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.5",
+  "version": "3.12.6",
   "description": "A headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",