Merge pull request #31 from wojtekmaj/feature/rotation

Feature/rotation

README.md

@@ -81,6 +81,7 @@ Check the sample directory of this repository for a full working example.
 |error|Defines what the component should display in case of an error. Defaults to "Failed to load PDF file.".|<ul><li>String:<br />`error="An error occurred!"`</li><li>React element:<Br />`error={<div>An error occurred!</div>}`</li><li>Function:<Br />`error={this.renderError()}`</li></ul>|
 |noData|Defines what the component should display in case of no data. Defaults to "No PDF file specified.".|<ul><li>String:<br />`noData="Please select a file."`</li><li>React element:<Br />`noData={<div>Please select a file.</div>}`</li><li>Function:<Br />`noData={this.renderNoData()}`</li></ul>|
 |pageIndex|Defines which page from PDF file should be displayed. Defaults to 0.|`pageIndex={2}`|
+|rotate|Defines the rotation of the document in degrees. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. Defaults to 0.|`rotate={90}`|
 |scale|Defines the scale in which PDF file should be rendered. Defaults to 1.0.|`scale={0.5}`|
 |width|Defines the width of the page. If not defined, canvas will be rendered at the width defined in PDF. If you define `width` and `scale` at the same time, the width will be multiplied by a given factor.|`width={300}`|
 |onDocumentLoad|Function called when the document is successfully loaded to the memory.|`onDocumentLoad={({ total }) => alert('Loaded a file with ' + total + ' pages!')}`|

build/react-pdf.js

@@ -55,7 +55,7 @@ var ReactPDF = function (_Component) {
   }, {
     key: 'shouldComponentUpdate',
     value: function shouldComponentUpdate(nextProps, nextState) {
-      return nextState.pdf !== this.state.pdf || nextState.page !== this.state.page || nextProps.width !== this.props.width || nextProps.scale !== this.props.scale;
+      return nextState.pdf !== this.state.pdf || nextState.page !== this.state.page || nextProps.rotate % 360 !== this.props.rotate % 360 || nextProps.width !== this.props.width || nextProps.scale !== this.props.scale;
     }
 
     /**
@@ -87,6 +87,7 @@ var ReactPDF = function (_Component) {
     value: function getPageScale() {
       var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.page;
       var _props = this.props,
+          rotate = _props.rotate,
           scale = _props.scale,
           width = _props.width;
 
@@ -96,7 +97,7 @@ var ReactPDF = function (_Component) {
 
       // If width is defined, calculate the scale of the page so it could be of desired width.
       if (width) {
-        pageScale = width / page.getViewport(scale).width;
+        pageScale = width / page.getViewport(scale, rotate).width;
       }
 
       return scale * pageScale;
@@ -255,14 +256,17 @@ var ReactPDF = function (_Component) {
         return this.renderLoader();
       }
 
+      var rotate = this.props.rotate;
+
+
       return React.createElement('canvas', {
         ref: function ref(_ref2) {
           if (!_ref2) return;
 
           var canvas = _ref2;
 
           var pixelRatio = window.devicePixelRatio || 1;
-          var viewport = page.getViewport(_this3.getPageScale() * pixelRatio);
+          var viewport = page.getViewport(_this3.getPageScale() * pixelRatio, rotate);
 
           canvas.height = viewport.height;
           canvas.width = viewport.width;
@@ -431,6 +435,7 @@ ReactPDF.propTypes = {
   onPageLoad: PropTypes.func,
   onPageRender: PropTypes.func,
   pageIndex: PropTypes.number,
+  rotate: PropTypes.number,
   scale: PropTypes.number,
   width: PropTypes.number
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Easily display PDF files in your React application.",
   "main": "build/react-pdf.entry.js",
   "es6": "src/react-pdf.entry.js",

src/react-pdf.jsx

@@ -42,6 +42,7 @@ export default class ReactPDF extends Component {
     return (
       nextState.pdf !== this.state.pdf ||
       nextState.page !== this.state.page ||
+      nextProps.rotate % 360 !== this.props.rotate % 360 ||
       nextProps.width !== this.props.width ||
       nextProps.scale !== this.props.scale
     );
@@ -119,14 +120,14 @@ export default class ReactPDF extends Component {
   }
 
   getPageScale(page = this.state.page) {
-    const { scale, width } = this.props;
+    const { rotate, scale, width } = this.props;
 
     // Be default, we'll render page at 100% * scale width.
     let pageScale = 1;
 
     // If width is defined, calculate the scale of the page so it could be of desired width.
     if (width) {
-      pageScale = width / page.getViewport(scale).width;
+      pageScale = width / page.getViewport(scale, rotate).width;
     }
 
     return scale * pageScale;
@@ -309,6 +310,8 @@ export default class ReactPDF extends Component {
       return this.renderLoader();
     }
 
+    const { rotate } = this.props;
+
     return (
       <canvas
         ref={(ref) => {
@@ -317,7 +320,7 @@ export default class ReactPDF extends Component {
           const canvas = ref;
 
           const pixelRatio = window.devicePixelRatio || 1;
-          const viewport = page.getViewport(this.getPageScale() * pixelRatio);
+          const viewport = page.getViewport(this.getPageScale() * pixelRatio, rotate);
 
           canvas.height = viewport.height;
           canvas.width = viewport.width;
@@ -396,6 +399,7 @@ ReactPDF.propTypes = {
   onPageLoad: PropTypes.func,
   onPageRender: PropTypes.func,
   pageIndex: PropTypes.number,
+  rotate: PropTypes.number,
   scale: PropTypes.number,
   width: PropTypes.number,
 };

test/test.jsx

@@ -33,6 +33,7 @@ class Test extends Component {
     pageRenderCount: 0,
     pageWidth: 300,
     total: null,
+    rotate: 0,
   }
 
   onFileChange = (event) => {
@@ -143,7 +144,7 @@ class Test extends Component {
   }
 
   render() {
-    const { pageIndex, pageNumber, pageRenderCount, pageWidth, total } = this.state;
+    const { pageIndex, pageNumber, pageRenderCount, pageWidth, rotate, total } = this.state;
 
     return (
       <div className="Example">
@@ -189,6 +190,20 @@ class Test extends Component {
               />
             </form>
             <br />
+            <button
+              onClick={() =>
+                this.setState(prevState => ({ rotate: (prevState.rotate - 90) % 360 }))
+              }
+            >
+              Rotate left
+            </button>&nbsp;
+            <button
+              onClick={() =>
+                this.setState(prevState => ({ rotate: (prevState.rotate + 90) % 360 }))
+              }
+            >
+              Rotate right
+            </button>
           </div>
           <div className="Example__container__preview">
             <div className="Example__container__preview__out">
@@ -198,6 +213,7 @@ class Test extends Component {
                 onPageLoad={this.onPageLoad}
                 onPageRender={this.onPageRender}
                 pageIndex={pageIndex}
+                rotate={rotate}
                 width={pageWidth}
               />
             </div>