From 2629a6a0414ad4eea7a062f63fd3a6baaa16b865 Mon Sep 17 00:00:00 2001
From: him0 <hiroki-nakashima@c-fo.com>
Date: Sun, 14 Apr 2019 00:24:55 +0900
Subject: [PATCH] Add component rotation property.

---
 example/src/App.js    | 39 +++++++++++++++++++++++++++++++++++++--
 example/src/index.css |  5 +++++
 src/index.js          | 16 +++++++++-------
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 8803fc86..4f18cbaa 100644
--- 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
index b4cc7250..2ef0e414 100644
--- 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
index 049a15f0..c825b895 100755
--- 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;