Merge pull request #4 from PDFTron/react-sample-update

Updated React sample to use latest WebViewer npm module and React Hooks

Author: mparizeau-pdftron

.gitignore

@@ -1,9 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # WebViewer
-public/lib
-public/license-key.js
-WebViewer.zip
+public/webviewer
 
 # dependencies
 /node_modules

package.json

@@ -5,10 +5,10 @@
  "dependencies": {
  "react": "^16.6.0",
  "react-dom": "^16.6.0",
- "react-scripts": "2.1.1"
+ "react-scripts": "2.1.1",
+ "@pdftron/webviewer": "^6.2.3"
  },
  "devDependencies": {
- "@pdftron/webviewer-downloader": "^1.0.7",
  "btoa": "^1.2.1",
  "download": "^7.1.0",
  "fs-extra": "^7.0.1"
@@ -18,8 +18,7 @@
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
- "postinstall": "npm run download-webviewer",
- "download-webviewer": "npx @pdftron/webviewer-downloader"
+ "postinstall": "node tools/copy-webviewer-files.js"
  },
  "eslintConfig": {
  "extends": "react-app"

public/files/PDFTRON_about.pdf

@@ -1,74 +1,45 @@
-import React, { Component } from 'react';
+import React, { useRef, useEffect } from 'react';
+import WebViewer from '@pdftron/webviewer';
 import './App.css';
 
-
-class App extends Component {
- constructor() {
- super();
- this.viewer = React.createRef();
- this.docViewer = null;
- this.annotManager = null;
- this.instance = null;
- }
-
- componentDidMount() {
- window.WebViewer({
- path: '/lib',
- initialDoc: '/files/webviewer-demo-annotated.pdf'
- }, this.viewer.current).then(instance => {
- // at this point, the viewer is 'ready'
- // call methods from instance, docViewer and annotManager as needed
- this.instance = instance;
- this.docViewer = instance.docViewer;
- this.annotManager = instance.annotManager;
-
- // you can also access major namespaces from the instance as follows:
- // var Tools = instance.Tools;
- // var Annotations = instance.Annotations;
-
- // now you can access APIs through `this.instance`
- this.instance.openElement('notesPanel')
-
- // or listen to events from the viewer element
- this.viewer.current.addEventListener('pageChanged', (e) => {
- const [ pageNumber ] = e.detail;
- console.log(`Current page is ${pageNumber}`);
+const App = () => {
+ const viewer = useRef(null);
+
+ // if using a class, equivalent of componentDidMount 
+ useEffect(() => {
+ WebViewer(
+ {
+ path: '/webviewer/lib',
+ initialDoc: '/files/pdftron_about.pdf',
+ },
+ viewer.current,
+ ).then((instance) => {
+ const { docViewer, Annotations } = instance;
+ const annotManager = docViewer.getAnnotationManager();
+
+ docViewer.on('documentLoaded', () => {
+ const rectangleAnnot = new Annotations.RectangleAnnotation();
+ rectangleAnnot.PageNumber = 1;
+ // values are in page coordinates with (0, 0) in the top left
+ rectangleAnnot.X = 100;
+ rectangleAnnot.Y = 150;
+ rectangleAnnot.Width = 200;
+ rectangleAnnot.Height = 50;
+ rectangleAnnot.Author = annotManager.getCurrentUser();
+
+ annotManager.addAnnotation(rectangleAnnot);
+ // need to draw the annotation otherwise it won't show up until the page is refreshed
+ annotManager.redrawAnnotation(rectangleAnnot);
  });
-
- // or from the docViewer instance
- this.docViewer.on('annotationsLoaded', () => {
- console.log('annotations loaded');
- });
-
- this.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
- })
- }
-
-
- wvDocumentLoadedHandler = () => {
- // call methods relating to the loaded document
- const { Annotations } = this.instance;
- const rectangle = new Annotations.RectangleAnnotation();
- rectangle.PageNumber = 1;
- rectangle.X = 100;
- rectangle.Y = 100;
- rectangle.Width = 250;
- rectangle.Height = 250;
- rectangle.StrokeThickness = 5;
- rectangle.Author = this.annotManager.getCurrentUser();
- this.annotManager.addAnnotation(rectangle);
- this.annotManager.drawAnnotations(rectangle.PageNumber);
- // see https://www.pdftron.com/api/web/WebViewer.html for the full list of low-level APIs
- }
-
- render() {
- return (
- <div className="App">
- <div className="header">React sample</div>
- <div className="webviewer" ref={this.viewer}></div>
- </div>
- );
- }
-}
+ });
+ }, []);
+
+ return (
+ <div className="App">
+ <div className="header">React sample</div>
+ <div className="webviewer" ref={viewer}></div>
+ </div>
+ );
+};
 
 export default App;

public/files/webviewer-demo-annotated.pdf

@@ -0,0 +1,12 @@
+const fs = require('fs-extra');
+
+const copyFiles = async () => {
+ try {
+ await fs.copy('./node_modules/@pdftron/webviewer/public', './public/webviewer/lib');
+ console.log('WebViewer files copied over successfully');
+ } catch (err) {
+ console.error(err);
+ }
+};
+
+copyFiles();