Fix zoom again (#27)

* wip

* remove scale

* wip

* fix: Improve scroll anchor offset calculation

* refactor: Extract getOffsetForIndexEager logic

Co-authored-by: aider (vertex_ai/gemini-2.5-pro) <aider@aider.chat>

* fix: zoom offset calc dont use cached value

---------

Co-authored-by: aider (vertex_ai/gemini-2.5-pro) <aider@aider.chat>

Author: jkgenser

demo/App.tsx

@@ -27,7 +27,7 @@ function App() {
   const [zoomMode, setZoomMode] = useState<ZoomMode>("default");
   const [pageNum, setPageNum] = useState<number | null>(null);
   const [scale, setScale] = useState<number | null>(0.75);
-  const [file, setFile] = useState<string>("pdf-open-parameters.pdf");
+  const [file, setFile] = useState<string>("rai.pdf");
   const [wantPage, setWantPage] = useState<number | null>(null);
   const [readerAPI, setReaderAPI] = useState<ReaderAPI | null>(null);
   const [offset, setOffset] = useState<number | null>(null);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-headless",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "files": [
     "src",

src/Page.tsx

@@ -7,7 +7,6 @@ export const EXTRA_WIDTH = 5;
 const Page = ({
   virtualItem,
   viewports,
-  scale = 1,
   rotation,
   pageObserver,
   shouldRender,
@@ -22,13 +21,7 @@ const Page = ({
   }, [pageObserver]);
 
   const defaultPageRenderer: RenderPage = (props: RenderPageProps) => {
-    return (
-      <ReactPdfPage
-        pageIndex={props.pageIndex}
-        scale={props.scale}
-        rotate={props.rotate}
-      />
-    );
+    return <ReactPdfPage pageIndex={props.pageIndex} rotate={props.rotate} />;
   };
 
   const renderPageLayer = renderPage || defaultPageRenderer;
@@ -79,7 +72,6 @@ const Page = ({
           >
             {renderPageLayer({
               pageIndex: virtualItem.index,
-              scale,
               rotate: rotation,
               rotationAdjustment,
             })}

src/Reader.tsx

@@ -1,4 +1,5 @@
 import {
+  Virtualizer,
   VirtualizerOptions,
   elementScroll,
   useVirtualizer,
@@ -29,6 +30,18 @@ const determineScale = (parentElement: HTMLElement, width: number): number => {
   return scaleWidth;
 };
 
+const getOffsetForIndexEager = (
+  index: number,
+  virtualizer: Virtualizer<any, any>,
+  estimateSize: (i: number) => number,
+) => {
+  let offset = virtualizer.options.paddingStart;
+  for (let i = 0; i < index; i++) {
+    offset += estimateSize(i) + virtualizer.options.gap;
+  }
+  return offset;
+};
+
 export interface ZoomState {
   currentScale: number | null;
   nextScale: number | null;
@@ -309,10 +322,12 @@ const Reader = ({
     onViewportsMeasured && onViewportsMeasured();
 
     if (scrollAnchor) {
-      const startOffset = virtualizer.getOffsetForIndex(
+      // manually calculate offset here in case it was cached from an earlier render
+      const startOffset = getOffsetForIndexEager(
         scrollAnchor.index,
-        "start",
-      )?.[0];
+        virtualizer,
+        estimateSize,
+      );
 
       if (startOffset != null) {
         const itemHeight = estimateSize(scrollAnchor.index);
@@ -439,6 +454,7 @@ const Reader = ({
         {...reactPDFDocumentProps}
         file={file}
         onLoadSuccess={onDocumentLoadSuccess}
+        scale={scale}
       >
         <div
           id="pages-container"
@@ -457,7 +473,6 @@ const Reader = ({
                   key={virtualItem.key}
                   virtualItem={virtualItem}
                   viewports={viewports}
-                  scale={scale}
                   rotationAdjustment={getRotationAdjustment(virtualItem.index)}
                   rotation={rotation + getRotationAdjustment(virtualItem.index)}
                   pageObserver={pageObserver}

src/types.ts

@@ -78,7 +78,6 @@ export interface HighlightArea {
 
 export interface RenderPageProps {
   pageIndex: number;
-  scale: number;
   rotate: number;
   rotationAdjustment: number;
 }
@@ -88,7 +87,6 @@ export type RenderPage = (props: RenderPageProps) => React.ReactNode;
 export interface ReaderPageProps {
   virtualItem: VirtualItem;
   viewports: Array<PageViewport> | null;
-  scale: number | undefined;
   rotation: number;
   pageObserver: IntersectionObserver | undefined;
   shouldRender: boolean;