feat: 🎸 increase zoom capability

xcarpentier · xcarpentier · commit 3ebbe1e8bc48 · 2020-07-10T17:08:09.000+02:00
diff --git a/react-pdf/Reader.tsx b/react-pdf/Reader.tsx
@@ -53,7 +53,7 @@ class Reader extends React.Component<Props, State> {
     error: undefined,
   }
 
-  MAX_SCALE = 2
+  MAX_SCALE = 4
   __zoomEvent = false
 
   onDocumentLoadSuccess = ({ numPages }) => {
diff --git a/src/bundleContainer.ts b/src/bundleContainer.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -52,6 +52,7 @@ export interface Props {
   useGoogleReader?: boolean
   withScroll?: boolean
   withPinchZoom?: boolean
+  maximumPinchZoomScale?: number
   onLoad?(event: WebViewNavigationEvent): void
   onLoadEnd?(event: WebViewNavigationEvent | WebViewErrorEvent): void
   onError?(event: WebViewErrorEvent | WebViewHttpErrorEvent | string): void
@@ -70,6 +71,7 @@ function viewerHtml(
   customStyle?: CustomStyle,
   withScroll: boolean = false,
   withPinchZoom: boolean = false,
+  maximumPinchZoomScale: number = 5,
 ): string {
   return `
 <!DOCTYPE html>
@@ -78,7 +80,7 @@ function viewerHtml(
     <title>PDF reader</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=${
-      withPinchZoom ? '4.0' : '1.0'
+      withPinchZoom ? `${maximumPinchZoomScale}.0` : '1.0'
     }, user-scalable=${withPinchZoom ? 'yes' : 'no'}" />
     <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/build/pdf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/web/pdf_viewer.min.js"></script>
@@ -129,6 +131,7 @@ async function writeWebViewReaderFileAsync(
   customStyle?: CustomStyle,
   withScroll?: boolean,
   withPinchZoom?: boolean,
+  maximumPinchZoomScale?: number,
 ): Promise<void> {
   const { exists, md5 } = await getInfoAsync(bundleJsPath, { md5: true })
   const bundleContainer = require('./bundleContainer')
@@ -137,7 +140,13 @@ async function writeWebViewReaderFileAsync(
   }
   await writeAsStringAsync(
     htmlPath,
-    viewerHtml(data, customStyle, withScroll, withPinchZoom),
+    viewerHtml(
+      data,
+      customStyle,
+      withScroll,
+      withPinchZoom,
+      maximumPinchZoomScale,
+    ),
   )
 }
 
@@ -276,7 +285,7 @@ class PdfReader extends React.Component<Props, State> {
 
   init = async () => {
     try {
-      const { source, customStyle, withScroll, withPinchZoom } = this.props
+      const { source, customStyle, withScroll, withPinchZoom,  } = this.props
       const { renderType } = this.state
       switch (renderType!) {
         case 'URL_TO_BASE64': {

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ class Reader extends React.Component<Props, State> {`
`53`	`53`	`error: undefined,`
`54`	`54`	`}`
`55`	`55`
`56`		`- MAX_SCALE = 2`
	`56`	`+ MAX_SCALE = 4`
`57`	`57`	`__zoomEvent = false`
`58`	`58`
`59`	`59`	`onDocumentLoadSuccess = ({ numPages }) => {`