Merge pull request #11 from mblink/legacy-refactor

add zoom select, fix pixelation

README.md

@@ -6,24 +6,54 @@
 ![npm](https://img.shields.io/npm/v/document-viewer-ts)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/document-viewer-ts)
 
-Note: this viewer has been stripped to essentially a wrapper around a few separate third-party applications, for the original version that used a custom integration of the pdf.js library use version 0.3.2-legacy or below.
-
 ### Installation
+Requires peer dependency `pdfjs-dist` at version `2.14.0` or higher:
+
+```
+npm install pdfjs-dist
+```
+
 Install the package:
 
 ```
 npm install document-viewer-ts
 ```
 ### Example Usage
+If using webpack, copy `PATH/TO/NODE_MODULES/pdfjs-dist/build/pdf.worker.min.js` to a local directory:
+
+`webpack.config.ts`
+```
+import CopyPlugin from "copy-webpack-plugin";
+
+...
+
+const config = {
+  ...
+  plugins: [
+    ...
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "PATH/TO/NODE_MODULES/document-viewer/dist/worker/pdf.worker.min.js",
+          to: "PATH/TO/WORKER/FILE"
+        }
+      ]
+    }
+  ]
+}
+
+...
+
+```
 #### With HTML and Vanilla JS
 
-Call the init script in the root of your JS application.
+Call the init script in the root of your JS application using the path to your worker file.
 
 `index.js`
 ```
 import { init } from 'document-viewer'
 
-init();
+init("PATH/TO/WORKER/FILE");
 ```
 
 Wherever you want to include a document viewer in the HTML, include a `<div />` with `class="viewer-container"` and `id` being some unique key (on the page) and `data-document-url` being the url of the document you want to display. Also make sure you're importing `styles.css` from the package in your HTML head.
@@ -45,7 +75,7 @@ Wherever you want to include a document viewer in the HTML, include a `<div />`
 
 ### With React
 
-Import the `Viewer` component and call it with the proper `documentId` and `documentUrl` props. Also make sure to import `styles.css` in your app.
+Import the `Viewer` component and call it with the proper `documentId`, `documentUrl`, and `workerSrc` props. Also make sure to import `styles.css` in your app.
 
 `index.jsx`
 ```
@@ -55,6 +85,7 @@ export default () =>
   <Viewer
     documentId="doc-1"
     documentUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+    workerSrc="PATH/TO/WORKER/FILE"
   />
 ```
 

example/example.ts

@@ -1,3 +1,3 @@
 import { init } from '../dist/es2015';
 
-init();
+init('../node_modules/pdfjs-dist/build/pdf.worker.min.js');