Merge pull request #102 from him0/add-rotate-option

Add component rotation property.
mikecousins · May 3, 2019 · 9c03fd7 · 9c03fd7
2 parents bac1a7b + 2629a6a
commit 9c03fd7
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Pdf from 'react-pdf-js';
 
 export default class App extends Component {
-  state = { page: 1 };
+  state = { page: 1, rotate: 0 };
 
   onDocumentComplete = (pages) => {
     this.setState({ page: 1, pages });
@@ -66,8 +66,43 @@ export default class App extends Component {
     }
     return (
       <div>
-        <Pdf file="test.pdf" onDocumentComplete={this.onDocumentComplete} page={this.state.page} />
+        <div className="pdf-preview">
+          <Pdf
+            file="test.pdf"
+            onDocumentComplete={this.onDocumentComplete}
+            page={this.state.page}
+            scale={0.5}
+            rotate={this.state.rotate}
+          />
+        </div>
         {pagination}
+        <nav>
+          <span>rotate</span>
+          <button
+            onClick={
+              (e) => { this.setState({ rotate: 0 }); }
+            }
+            disabled={this.state.rotate === 0}
+          >0</button>
+          <button
+            onClick={
+              (e) => { this.setState({ rotate: 90 }); }
+            }
+            disabled={this.state.rotate === 90}
+          >90</button>
+          <button
+            onClick={
+              (e) => { this.setState({ rotate: 180 }); }
+            }
+            disabled={this.state.rotate === 180}
+          >180</button>
+          <button
+            onClick={
+              (e) => { this.setState({ rotate: 270 }); }
+            }
+            disabled={this.state.rotate === 270}
+          >270</button>
+        </nav>
       </div>
     );
   }

diff --git a/example/src/index.css b/example/src/index.css
@@ -3,3 +3,8 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+.pdf-preview {
+  min-height: 400px;
+  min-height: 400px;
+}
diff --git a/src/index.js b/src/index.js
@@ -14,6 +14,7 @@ export default class ReactPdfJs extends Component {
     page: PropTypes.number,
     onDocumentComplete: PropTypes.func,
     scale: PropTypes.number,
+    rotate: PropTypes.oneOf([0, 90, 180, 270]),
     cMapUrl: PropTypes.string,
     cMapPacked: PropTypes.bool,
     className: PropTypes.string,
@@ -23,6 +24,7 @@ export default class ReactPdfJs extends Component {
     page: 1,
     onDocumentComplete: null,
     scale: 1,
+    rotate: 0,
     cMapUrl: '../node_modules/pdfjs-dist/cmaps/',
     cMapPacked: false,
   }
@@ -50,19 +52,19 @@ export default class ReactPdfJs extends Component {
   }
 
   componentWillReceiveProps(newProps) {
-    const { page, scale } = this.props;
+    const { page, scale, rotate } = this.props;
     const { pdf } = this.state;
-    if (newProps.page !== page) {
-      pdf.getPage(newProps.page).then(p => this.drawPDF(p));
-    }
-    if (newProps.scale !== scale) {
+    if (newProps.page !== page || newProps.scale !== scale || newProps.rotate !== rotate) {
       pdf.getPage(newProps.page).then(p => this.drawPDF(p));
     }
   }
 
   drawPDF = (page) => {
-    const { scale } = this.props;
-    const viewport = page.getViewport(scale);
+    const { scale, rotate } = this.props;
+    // Because this page's rotation option overwrites pdf default rotation value,
+    // calculating page rotation option value from pdf default and this component prop rotate.
+    const rotation = rotate === 0 ? page.rotate : page.rotate + rotate;
+    const viewport = page.getViewport(scale, rotation);
     const { canvas } = this;
     const canvasContext = canvas.getContext('2d');
     canvas.height = viewport.height;