fix scrolling fit to height zoom issue

Author: jackiequach

example/index.tsx

@@ -136,12 +136,14 @@ const PdfReaders = () => {
             instead of taking over the full page. It is fixed height, which
             means it will not grow to fit content in scrolling mode.
           </Text>
-          <WebReader
-            webpubManifestUrl={`${origin}/samples/pdf/single-resource-long.json`}
-            proxyUrl={pdfProxyUrl}
-            pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.mjs`}
-            growWhenScrolling={false}
-          />
+          <Box margin="0 auto" width="50%">
+            <WebReader
+              webpubManifestUrl={`${origin}/samples/pdf/single-resource-short.json`}
+              proxyUrl={pdfProxyUrl}
+              pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.mjs`}
+              growWhenScrolling={false}
+            />
+          </Box>
           <Heading>The page continues...</Heading>
           <Text as="p">Here is some more content below the reader</Text>
         </Box>

src/PdfReader/ChakraPage.tsx

@@ -1,8 +1,7 @@
 import { chakra, shouldForwardProp } from '@chakra-ui/react';
 import React from 'react';
 import { Page, PageProps } from 'react-pdf';
-
-type FitMode = 'width' | 'height';
+import { FitMode } from '../types';
 
 interface ChakraPageProps extends Omit<PageProps, 'width' | 'height'> {
   width?: number;

src/PdfReader/index.tsx

@@ -12,6 +12,7 @@ import {
   DEFAULT_HEIGHT,
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   MAIN_CONTENT_ID,
+  READER_MARGIN,
 } from '../constants';
 import LoadingSkeleton from '../ui/LoadingSkeleton';
 import { fetchAsUint8Array, getResourceUrl, SCALE_STEP } from './lib';
@@ -128,48 +129,49 @@ export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
   }, [state.resourceIndex, manifest, proxyUrl, getContent]);
 
   /**
-   * calculate the height or width of the pdf page in paginated mode.
+   * calculate the height or width of the pdf page to fit to dimensions.
    *  - if the page's aspect ratio is taller than the container's, we will constrain
    *    the page to the height of the container.
    *  - if the page's aspect ratio is wider than the container's, we will constrain
    *    the page to the width of the container
    */
   const resizePage = React.useCallback(
-    (containerSize: { width: number; height: number }, fitMode: FitMode) => {
+    (
+      containerSize: { width: number; height: number },
+      fitMode: FitMode,
+      scale: number
+    ) => {
       let width, height;
       if (fitMode === 'width') {
-        width = Math.round(containerSize.width);
+        width = Math.round((containerSize.width - READER_MARGIN) * scale);
         height = undefined;
+      } else if (fitMode === 'height' && state.pdfWidth && state.pdfHeight) {
+        const aspectRatio = state.pdfHeight / state.pdfWidth;
+        width = Math.round(
+          ((containerSize.height - READER_MARGIN) / aspectRatio) * scale
+        );
+        height = Math.round((containerSize.height - READER_MARGIN) * scale);
       } else {
         width = undefined;
-        height = Math.round(containerSize.height);
+        height = undefined;
       }
       dispatch({ type: 'RESIZE_PAGE', width, height });
     },
-    []
+    [state.pdfWidth, state.pdfHeight]
   );
 
   React.useEffect(() => {
-    resizePage(containerSize, state.fitMode);
-  }, [containerSize, resizePage, state.fitMode]);
+    resizePage(containerSize, state.fitMode, state.scale);
+  }, [containerSize, resizePage, state.fitMode, state.scale]);
 
-  const setInitialPageHeight = React.useCallback(() => {
-    if (
-      pageHeight === 0 &&
-      state.pdfWidth &&
-      state.pdfHeight &&
-      containerSize.width
-    ) {
-      const margin = 16;
+  React.useEffect(() => {
+    if (state.pdfWidth && state.pdfHeight && pageHeight === 0) {
       const aspectRatio = state.pdfHeight / state.pdfWidth;
-      const initialPageHeight = (containerSize.width - margin) * aspectRatio;
-      setPageHeight(initialPageHeight);
+      const initialPageHeight =
+        (containerSize.width - READER_MARGIN) * aspectRatio;
+      setPageHeight(Math.round(initialPageHeight));
     }
-  }, [pageHeight, state.pdfWidth, state.pdfHeight, containerSize.width]);
-
-  React.useEffect(() => {
-    setInitialPageHeight();
-  }, [setInitialPageHeight]);
+  }, [state.pdfWidth, state.pdfHeight, containerSize.width, pageHeight]);
 
   /**
    * Update the atStart/atEnd state to tell the UI whether to show the prev/next buttons
@@ -376,7 +378,7 @@ export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
         width: Math.round(page.width),
       });
 
-      resizePage(containerSize, state.fitMode);
+      resizePage(containerSize, state.fitMode, state.scale);
     }
   }
 
@@ -401,6 +403,11 @@ export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
             overflowX: 'hidden',
             overflowY: 'auto',
           },
+          '.react-pdf__Page': {
+            width: `${
+              containerSize.width ? containerSize.width - READER_MARGIN : 0
+            }px`,
+          },
         }}
       >
         <Document
@@ -414,7 +421,7 @@ export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
                 Array.from(new Array(state.numPages), (_, index) => (
                   <ScrollPage
                     key={`page_${index + 1}`}
-                    width={containerSize.width - 16}
+                    width={state.pageWidth}
                     height={state.pageHeight}
                     placeholderHeight={state.pdfHeight}
                     placeholderWidth={state.pdfWidth}

src/PdfReader/pdfReader.css

@@ -11,13 +11,12 @@
 }
 
 .react-pdf__Page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
+  display: block;
   background: #252525 !important;
 }
 
-.react-pdf__Page__canvas {
-  background: #fff !important;
+.react-pdf__Page canvas,
+.react-pdf__Page .textLayer {
+  display: block;
+  margin: 0 auto;
 }

src/PdfReader/reducer.ts

@@ -193,6 +193,7 @@ export function makePdfReducer(
         return {
           ...state,
           scale: action.scale,
+          fitMode: undefined,
         };
 
       case 'RESET_SETTINGS':
@@ -224,7 +225,7 @@ export function makePdfReducer(
         };
 
       case 'SET_FIT_MODE':
-        return { ...state, fitMode: action.fitMode };
+        return { ...state, fitMode: action.fitMode, scale: 1 };
 
       case 'BOOK_BOUNDARY_CHANGED':
         return {

src/constants.ts

@@ -11,6 +11,8 @@ export const CHROME_HEIGHT = HEADER_HEIGHT;
 export const DEFAULT_HEIGHT = `calc(100vh - ${CHROME_HEIGHT}px)`;
 export const DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
 
+export const READER_MARGIN = 16;
+
 export const DEFAULT_SETTINGS: ReaderSettings = {
   colorMode: 'day',
   isScrolling: true,

src/types.ts

@@ -13,7 +13,7 @@ export type ColorMode = 'night' | 'sepia' | 'day';
 
 export type FontFamily = 'publisher' | 'serif' | 'sans-serif' | 'open-dyslexic';
 
-export type FitMode = 'width' | 'height';
+export type FitMode = 'width' | 'height' | undefined;
 
 export type Navigator = {
   goForward: () => void;