@anaralabs/lector 3.10.1 → 3.10.2

package/dist/index.js

@@ -1143,7 +1143,7 @@ var RenderCache = class {
   // Tracks invalidated documents so in-flight createImageBitmap calls
   // don't insert orphaned entries after invalidateDocument() runs.
   invalidatedDocs = /* @__PURE__ */ new Set();
-  constructor(maxEntries = 30) {
+  constructor(maxEntries = 60) {
     this.maxEntries = maxEntries;
   }
   key(documentId, pageNumber, scale, background) {
@@ -1292,6 +1292,15 @@ var useCanvasLayer = ({ background }) => {
   const lastRenderedScaleRef = useRef(0);
   const lastBackgroundRef = useRef(background);
   const lastPageProxyRef = useRef(pdfPageProxy);
+  const pageDimsRef = useRef(null);
+  if (!pageDimsRef.current || pageDimsRef.current.proxy !== pdfPageProxy) {
+    const vp = pdfPageProxy.getViewport({ scale: 1 });
+    pageDimsRef.current = {
+      width: vp.width,
+      height: vp.height,
+      proxy: pdfPageProxy
+    };
+  }
   useLayoutEffect(() => {
     if (!canvasRef.current) {
       return;
@@ -1301,9 +1310,7 @@ var useCanvasLayer = ({ background }) => {
       lastBackgroundRef.current = background;
       lastRenderedScaleRef.current = 0;
     }
-    const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
-    const pageWidth = baseViewport.width;
-    const pageHeight = baseViewport.height;
+    const { width: pageWidth, height: pageHeight } = pageDimsRef.current;
     const bgColor = background ?? "white";
     const targetBaseScale = dpr * Math.min(zoom, 1);
     const baseScale = clampScaleForPage(targetBaseScale, pageWidth, pageHeight);
@@ -1490,6 +1497,15 @@ var useDetailCanvasLayer = ({
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const viewportRef = usePdf((state) => state.viewportRef);
   const [zoom] = useDebounce(bouncyZoom, 200);
+  const pageDimsRef = useRef(null);
+  if (!pageDimsRef.current || pageDimsRef.current.proxy !== pdfPageProxy) {
+    const vp = pdfPageProxy.getViewport({ scale: 1 });
+    pageDimsRef.current = {
+      width: vp.width,
+      height: vp.height,
+      proxy: pdfPageProxy
+    };
+  }
   useLayoutEffect(() => {
     const scrollContainer = viewportRef?.current;
     if (!scrollContainer) {
@@ -1515,9 +1531,7 @@ var useDetailCanvasLayer = ({
         hideDetailCanvas();
         return;
       }
-      const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
-      const pageWidth = baseViewport.width;
-      const pageHeight = baseViewport.height;
+      const { width: pageWidth, height: pageHeight } = pageDimsRef.current;
       const scrollX = scrollContainer.scrollLeft / zoom;
       const scrollY = scrollContainer.scrollTop / zoom;
       const viewportWidth = scrollContainer.clientWidth / zoom;
@@ -4930,7 +4944,7 @@ var useViewportContainer = ({
   elementWrapperRef,
   elementRef
 }) => {
-  const [origin, setOrigin] = useState([0, 0]);
+  const originRef = useRef([0, 0]);
   const wheelInertia = useRef({
     active: false,
     lastTime: 0,
@@ -4950,28 +4964,46 @@ var useViewportContainer = ({
     translateY: 0,
     zoom
   });
+  const zoomRafRef = useRef(null);
+  const lastPushedZoomRef = useRef(zoom);
   const updateTransform = useCallback(
     (zoomUpdate) => {
       if (!elementRef.current || !containerRef.current || !elementWrapperRef.current) {
         return;
       }
       const { zoom: zoom2, translateX, translateY } = transformations.current;
+      const naturalWidth = parseFloat(elementRef.current.style.width) || elementRef.current.offsetWidth;
+      const naturalHeight = parseFloat(elementRef.current.style.height) || elementRef.current.offsetHeight;
       elementRef.current.style.transform = `scale3d(${zoom2}, ${zoom2}, 1)`;
-      elementRef.current.style.willChange = "scale3d";
-      const elementBoundingBox = elementRef.current.getBoundingClientRect();
-      const width = elementBoundingBox.width;
-      elementWrapperRef.current.style.width = `${width}px`;
-      elementWrapperRef.current.style.height = `${elementBoundingBox.height}px`;
+      elementWrapperRef.current.style.width = `${naturalWidth * zoom2}px`;
+      elementWrapperRef.current.style.height = `${naturalHeight * zoom2}px`;
       containerRef.current.scrollTop = translateY;
       containerRef.current.scrollLeft = translateX;
-      if (zoomUpdate) updateZoom(() => transformations.current.zoom);
+      if (zoomUpdate && zoomRafRef.current === null) {
+        zoomRafRef.current = requestAnimationFrame(() => {
+          zoomRafRef.current = null;
+          const z = transformations.current.zoom;
+          lastPushedZoomRef.current = z;
+          updateZoom(() => z);
+        });
+      }
     },
     [containerRef, elementRef, elementWrapperRef, updateZoom]
   );
+  useEffect(() => {
+    return () => {
+      if (zoomRafRef.current !== null) {
+        cancelAnimationFrame(zoomRafRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (transformations.current.zoom === zoom || !containerRef.current) {
       return;
     }
+    if (zoom === lastPushedZoomRef.current) {
+      return;
+    }
     const prevZoom = transformations.current.zoom;
     if (!prevZoom || !Number.isFinite(prevZoom)) {
       transformations.current = {
@@ -5050,7 +5082,7 @@ var useViewportContainer = ({
   useGesture(
     {
       onPinch: (state) => {
-        const { origin: origin2, first, movement, delta, event, memo: memo7 } = state;
+        const { origin, first, movement, delta, event, memo: memo7 } = state;
         const [ms] = movement;
         const [deltaScale] = delta;
         const currentElement = elementRef.current;
@@ -5061,17 +5093,17 @@ var useViewportContainer = ({
           const containerRect = currentContainer.getBoundingClientRect();
           const currentZoom = transformations.current.zoom;
           const contentPosition = [
-            origin2[0] - elementRect.left,
-            origin2[1] - elementRect.top
+            origin[0] - elementRect.left,
+            origin[1] - elementRect.top
           ];
           const containerPosition = [
-            origin2[0] - containerRect.left,
-            origin2[1] - containerRect.top
+            origin[0] - containerRect.left,
+            origin[1] - containerRect.top
           ];
-          setOrigin([
+          originRef.current = [
             contentPosition[0] / currentZoom,
             contentPosition[1] / currentZoom
-          ]);
+          ];
           return {
             contentPosition,
             containerPosition,
@@ -5120,7 +5152,7 @@ var useViewportContainer = ({
     }
   );
   return {
-    origin
+    origin: originRef.current
   };
 };
 var selectLargestPageWidth = (state) => state.viewports.reduce((max, vp) => Math.max(max, vp.width), 0);
@@ -5280,6 +5312,7 @@ var Pages = ({
                 alignItems: "center",
                 flexDirection: "column",
                 transformOrigin: "0 0",
+                willChange: "transform",
                 // width: "max-content",
                 width: largestPageWidth,
                 margin: "0 auto"

package/package.json

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