Annotations

README.md

@@ -137,6 +137,7 @@ Displays a page. Must be placed inside `<Document />` or have `pdf` prop passed,
 |onRenderSuccess|Function called when the page is successfully rendered on the screen.|`() => alert('Rendered the page!')`|
 |pageIndex|Defines which page from PDF file should be displayed. Defaults to 0.|`0`|
 |pageNumber|Defines which page from PDF file should be displayed. If provided, `pageIndex` prop will be ignored. Defaults to 1.|`1`|
+|renderAnnotations|Defined whether annotations (e.g. links) should be rendered. Defaults to true.|`false`|
 |renderTextLayer|Defines whether a text layer should be rendered. Defaults to true.|`false`|
 |rotate|Defines the rotation of the page in degrees. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. Defaults to page's default setting, usually 0.|`90`|
 |scale|Defines the scale in which PDF file should be rendered. Defaults to 1.0.|`0.5`|

package.json

@@ -32,6 +32,10 @@
       "name": "Bart Van Houtte",
       "email": "bart.van.houtte@ading.be"
     },
+    {
+      "name": "Felipe Lacerda",
+      "email": "fegolac@gmail.com"
+    },
     {
       "name": "Niklas Närhinen",
       "email": "niklas@narhinen.net"

sample/webpack.config.js

@@ -24,6 +24,13 @@ module.exports = {
           'less-loader',
         ],
       },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+        ],
+      },
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,

src/Page.jsx

@@ -4,6 +4,7 @@ import mergeClassNames from 'merge-class-names';
 
 import PageCanvas from './PageCanvas';
 import PageTextContent from './PageTextContent';
+import PageAnnotations from './PageAnnotations';
 
 import {
   callIfDefined,
@@ -190,6 +191,7 @@ export default class Page extends Component {
       onGetTextSuccess,
       onRenderError,
       onRenderSuccess,
+      renderAnnotations,
       renderTextLayer,
     } = this.props;
     const { rotate, scale } = this;
@@ -211,21 +213,31 @@ export default class Page extends Component {
         {
           renderTextLayer &&
             <PageTextContent
-              key={`${page.pageIndex}@${rotate}_text`}
+              key={`${page.pageIndex}@${scale}/${rotate}_text`}
               onGetTextError={onGetTextError}
               onGetTextSuccess={onGetTextSuccess}
               page={page}
               rotate={rotate}
               scale={scale}
             />
         }
+        {
+          renderAnnotations &&
+            <PageAnnotations
+              key={`${page.pageIndex}@${scale}/${rotate}_annotations`}
+              page={page}
+              rotate={rotate}
+              scale={scale}
+            />
+        }
         {children}
       </div>
     );
   }
 }
 
 Page.defaultProps = {
+  renderAnnotations: true,
   renderTextLayer: true,
   scale: 1.0,
 };
@@ -248,6 +260,7 @@ Page.propTypes = {
     getPage: PropTypes.func.isRequired,
     numPages: PropTypes.number.isRequired,
   }),
+  renderAnnotations: PropTypes.bool,
   renderTextLayer: PropTypes.bool,
   rotate: PropTypes.number,
   scale: PropTypes.number,

src/PageAnnotations.jsx

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './annotation_layer_builder.css';
+
+import {
+  makeCancellable,
+} from './shared/util';
+
+export default class PageAnnotations extends Component {
+  componentDidMount() {
+    this.getAnnotations();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.page !== this.props.page) {
+      this.getAnnotations(nextProps);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.runningTask && this.runningTask.cancel) {
+      this.runningTask.cancel();
+    }
+  }
+
+  get unrotatedViewport() {
+    const { page, scale } = this.props;
+
+    return page.getViewport(scale);
+  }
+
+  getAnnotations(props = this.props) {
+    this.runningTask = makeCancellable(props.page.getAnnotations());
+
+    return this.runningTask.promise.then((annotations) => {
+      this.renderAnnotations(annotations);
+    });
+  }
+
+  renderAnnotations(annotations) {
+    const { page, scale } = this.props;
+    const viewport = page.getViewport(scale).clone({ dontFlip: true });
+
+    const parameters = {
+      annotations,
+      div: this.annotationLayer,
+      page,
+      viewport,
+    };
+
+    PDFJS.AnnotationLayer.render(parameters);
+  }
+
+  render() {
+    const { rotate } = this.props;
+    const { unrotatedViewport: viewport } = this;
+
+    return (
+      <div
+        className="ReactPDF__Page__annotations annotationLayer"
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          width: `${viewport.width}px`,
+          height: `${viewport.height}px`,
+          transform: `translate(-50%, -50%) rotate(${rotate}deg)`,
+        }}
+        ref={(ref) => { this.annotationLayer = ref; }}
+      />
+    );
+  }
+}
+
+PageAnnotations.propTypes = {
+  page: PropTypes.shape({
+    getAnnotations: PropTypes.func.isRequired,
+    getViewport: PropTypes.func.isRequired,
+  }).isRequired,
+  rotate: PropTypes.number,
+  scale: PropTypes.number,
+};

src/annotation_layer_builder.css

@@ -0,0 +1,198 @@
+/* Copyright 2014 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .annotationLayer section {
+  position: absolute;
+}
+
+.annotationLayer .linkAnnotation > a {
+  position: absolute;
+  font-size: 1em;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.annotationLayer .linkAnnotation > a /* -ms-a */  {
+  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
+}
+
+.annotationLayer .linkAnnotation > a:hover {
+  opacity: 0.2;
+  background: #ff0;
+}
+
+.annotationLayer .textAnnotation img {
+  position: absolute;
+  cursor: pointer;
+}
+
+.annotationLayer .textWidgetAnnotation input,
+.annotationLayer .textWidgetAnnotation textarea,
+.annotationLayer .choiceWidgetAnnotation select,
+.annotationLayer .buttonWidgetAnnotation.checkBox input,
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+  background-color: rgba(0, 54, 255, 0.13);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  font-size: 9px;
+  height: 100%;
+  margin: 0;
+  padding: 0 3px;
+  vertical-align: top;
+  width: 100%;
+}
+
+.annotationLayer .choiceWidgetAnnotation select option {
+  padding: 0;
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+  border-radius: 50%;
+}
+
+.annotationLayer .textWidgetAnnotation textarea {
+  font: message-box;
+  font-size: 9px;
+  resize: none;
+}
+
+.annotationLayer .textWidgetAnnotation input[disabled],
+.annotationLayer .textWidgetAnnotation textarea[disabled],
+.annotationLayer .choiceWidgetAnnotation select[disabled],
+.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
+.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
+  background: none;
+  border: 1px solid transparent;
+  cursor: not-allowed;
+}
+
+.annotationLayer .textWidgetAnnotation input:hover,
+.annotationLayer .textWidgetAnnotation textarea:hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
+  border: 1px solid #000;
+}
+
+.annotationLayer .textWidgetAnnotation input:focus,
+.annotationLayer .textWidgetAnnotation textarea:focus,
+.annotationLayer .choiceWidgetAnnotation select:focus {
+  background: none;
+  border: 1px solid transparent;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
+  background-color: #000;
+  content: '';
+  display: block;
+  position: absolute;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
+  height: 80%;
+  left: 45%;
+  width: 1px;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
+  transform: rotate(45deg);
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
+  transform: rotate(-45deg);
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
+  border-radius: 50%;
+  height: 50%;
+  left: 30%;
+  top: 20%;
+  width: 50%;
+}
+
+.annotationLayer .textWidgetAnnotation input.comb {
+  font-family: monospace;
+  padding-left: 2px;
+  padding-right: 0;
+}
+
+.annotationLayer .textWidgetAnnotation input.comb:focus {
+  /*
+   * Letter spacing is placed on the right side of each character. Hence, the
+   * letter spacing of the last character may be placed outside the visible
+   * area, causing horizontal scrolling. We avoid this by extending the width
+   * when the element has focus and revert this when it loses focus.
+   */
+  width: 115%;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input,
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+}
+
+.annotationLayer .popupWrapper {
+  position: absolute;
+  width: 20em;
+}
+
+.annotationLayer .popup {
+  position: absolute;
+  z-index: 200;
+  max-width: 20em;
+  background-color: #FFFF99;
+  box-shadow: 0px 2px 5px #333;
+  border-radius: 2px;
+  padding: 0.6em;
+  margin-left: 5px;
+  cursor: pointer;
+  font: message-box;
+  word-wrap: break-word;
+}
+
+.annotationLayer .popup h1 {
+  font-size: 1em;
+  border-bottom: 1px solid #000000;
+  margin: 0;
+  padding-bottom: 0.2em;
+}
+
+.annotationLayer .popup p {
+  margin: 0;
+  padding-top: 0.2em;
+}
+
+.annotationLayer .highlightAnnotation,
+.annotationLayer .underlineAnnotation,
+.annotationLayer .squigglyAnnotation,
+.annotationLayer .strikeoutAnnotation,
+.annotationLayer .lineAnnotation svg line,
+.annotationLayer .squareAnnotation svg rect,
+.annotationLayer .circleAnnotation svg ellipse,
+.annotationLayer .polylineAnnotation svg polyline,
+.annotationLayer .polygonAnnotation svg polygon,
+.annotationLayer .stampAnnotation,
+.annotationLayer .fileAttachmentAnnotation {
+  cursor: pointer;
+}