Merge pull request #17 from PDFTron/upgrade-to-WebViewer-8

Upgrade to use web viewer 8.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdftron/webviewer-react-toolkit",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "A React component library for integrating with PDFTron WebViewer API.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -59,16 +59,17 @@
     "tslib": "^1.11.0"
   },
   "peerDependencies": {
-    "@pdftron/webviewer": ">=7.0.0",
+    "@pdftron/webviewer": ">=8.1.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
+    "@babel/preset-env": "7.9.0",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@commitlint/prompt-cli": "^8.3.5",
-    "@pdftron/webviewer": "^7.2.0",
+    "@pdftron/webviewer": "^8.1.0",
     "@storybook/addon-actions": "6.0.0-alpha.26",
     "@storybook/addon-docs": "6.0.0-alpha.26",
     "@storybook/addon-google-analytics": "6.0.0-alpha.26",
@@ -80,17 +81,20 @@
     "@storybook/preset-typescript": "^1.0.0",
     "@storybook/react": "6.0.0-alpha.26",
     "@storybook/storybook-deployer": "^2.8.1",
+    "@types/anymatch": "^3.0.0",
+    "@types/cheerio": "^0.22.30",
     "@types/classnames": "^2.2.9",
     "@types/copy-webpack-plugin": "^5.0.0",
-    "@types/enzyme": "^3.10.3",
+    "@types/enzyme": "^3.10.7",
     "@types/jest": "^25.1.2",
-    "@types/mini-css-extract-plugin": "^0.9.0",
+    "@types/mini-css-extract-plugin": "^1.2.1",
     "@types/node": "13.11.1",
     "@types/optimize-css-assets-webpack-plugin": "^5.0.1",
     "@types/react": "^16.9.23",
     "@types/react-dnd-multi-backend": "^6.0.0",
     "@types/react-dom": "^16.9.4",
     "@types/react-motion": "^0.0.29",
+    "@types/react-redux": "^4.4.47",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.1",
     "@types/sinon": "^9.0.4",

src/components/FileOrganizer/FileOrganizer.stories.tsx

@@ -154,6 +154,7 @@ export const WithGridRef = () => {
 };
 
 export const UseManagedFilesHook = () => {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   const { fileOrganizerProps, getThumbnailSelectionProps, draggingIds } = useManagedFiles({
     initialFiles: Array.from({ length: 1000 }, (_, index) => createFile(index)),
     preventMultiDrag: boolean('preventMultiDrag', false, 'useManagedFiles options'),

src/components/FileOrganizer/FileOrganizer.tsx

@@ -293,8 +293,8 @@ export function FileOrganizer<F extends ObjectWithId>({
           style={
             style && {
               ...style,
-              top: typeof style.top === 'number' ? style.top + pad : style.top,
-              left: typeof style.left === 'number' ? style.left + pad : style.left,
+              top: typeof style.top === 'number' ? (style.top as number) + pad : style.top,
+              left: typeof style.left === 'number' ? (style.left as number) + pad : style.left,
             }
           }
           ref={draggableRef}

src/data/file.ts

@@ -1,4 +1,4 @@
-import { CoreControls } from '@pdftron/webviewer';
+import { Core } from '@pdftron/webviewer';
 import {
   blobToDocument,
   documentToBlob,
@@ -39,7 +39,7 @@ export interface FileDetails {
    * Document object, or function to get it. One of `fileObj` or `documentObj`
    * must be given.
    */
-  documentObj?: MemoizedPromise<CoreControls.Document> | FuturableOrLazy<CoreControls.Document>;
+  documentObj?: MemoizedPromise<Core.Document | undefined> | FuturableOrLazy<Core.Document | undefined>;
   /**
    * Thumbnail data URL string, or function to get it.
    */
@@ -55,7 +55,7 @@ export interface FileDetails {
    * as an optimization where applicable. If passed, `pageNumber` must also be
    * passed.
    */
-  fullDocumentObj?: CoreControls.Document;
+  fullDocumentObj?: Core.Document;
   /**
    * Used in conjunction with `fullDocumentObj`. Represents the page number of
    * `fullDocumentObj` that this file belongs too.
@@ -70,9 +70,9 @@ export interface FileLike {
   extension: string;
   thumbnail: MemoizedPromise<string>;
   fileObj: MemoizedPromise<Blob>;
-  documentObj: MemoizedPromise<CoreControls.Document>;
+  documentObj: MemoizedPromise<Core.Document | undefined>;
   subscribe: (...args: any) => () => void;
-  fullDocumentObj?: CoreControls.Document;
+  fullDocumentObj?: Core.Document;
   pageNumber?: number;
 }
 
@@ -105,12 +105,12 @@ export class File implements FileLike {
   private _originalName: string;
   private _extension: string;
   private _fileObj: MemoizedPromise<Blob>;
-  private _documentObj: MemoizedPromise<CoreControls.Document>;
+  private _documentObj: MemoizedPromise<Core.Document | undefined>;
   private _thumbnail: MemoizedPromise<string>;
   private _freezeThumbnail: boolean;
   private _subscribers: FileEventListenersObj;
   private _license?: string;
-  private _fullDocumentObj?: CoreControls.Document;
+  private _fullDocumentObj?: Core.Document;
   private _pageNumber?: number;
 
   /**
@@ -119,18 +119,8 @@ export class File implements FileLike {
    * this `File` with.
    */
   constructor(fileDetails: FileDetails) {
-    const {
-      name,
-      id,
-      originalName,
-      extension,
-      fileObj,
-      documentObj,
-      thumbnail,
-      license,
-      fullDocumentObj,
-      pageNumber,
-    } = fileDetails;
+    const { name, id, originalName, extension, fileObj, documentObj, thumbnail, license, fullDocumentObj, pageNumber } =
+      fileDetails;
 
     if (!fileObj && !documentObj) {
       throw new Error('One of `fileObj` or `documentObj` is required to initialize File.');
@@ -256,7 +246,7 @@ export class File implements FileLike {
    * Set the documentObj or give a futurable or getter.
    * @param documentObj The documentObj, promise, or getter for the documentObj.
    */
-  setDocumentObj(documentObj?: FuturableOrLazy<CoreControls.Document>) {
+  setDocumentObj(documentObj?: FuturableOrLazy<Core.Document | undefined>) {
     this._documentObj = new MemoizedPromise(documentObj ?? this._generateDocumentObj);
     // Only update fileObj if documentObj was given, not generated.
     if (documentObj) this.setFileObj();
@@ -269,7 +259,7 @@ export class File implements FileLike {
    * `fileObj` and `thumbnail`. Since mutations directly to `documentObj` will
    * not be detected, using this function tells `File` to trigger an update.
    */
-  async updateDocumentObj(updater: (documentObj: CoreControls.Document) => Promise<void>) {
+  async updateDocumentObj(updater: (documentObj: Core.Document | undefined) => Promise<void>) {
     const documentObj = await this.documentObj.get();
     await updater(documentObj);
     this.setDocumentObj(documentObj);

src/hooks/useFile.ts

@@ -1,4 +1,4 @@
-import { CoreControls } from '@pdftron/webviewer';
+import { Core } from '@pdftron/webviewer';
 import { useMemo } from 'react';
 import { FileLike } from '../data';
 import { useFileSubscribe } from './useFileSubscribe';
@@ -20,7 +20,7 @@ interface FileHook<F> {
   /** The resolved file fileObj or undefined until it is resolved. */
   fileObj?: Blob;
   /** The resolved file documentObj or undefined until it is resolved. */
-  documentObj?: CoreControls.Document;
+  documentObj?: Core.Document;
   errors: {
     name?: any;
     thumbnail?: any;

src/storybook-helpers/data/files.ts

@@ -1,4 +1,4 @@
-import { CoreControls } from '@pdftron/webviewer';
+import { Core } from '@pdftron/webviewer';
 import { FileLike } from '../../data/file';
 import { FuturableOrLazy } from '../../data/futurable';
 import { MemoizedPromise } from '../../data/memoizedPromise';
@@ -21,8 +21,8 @@ export class FakeFile implements FileLike {
   extension: string;
   thumbnail: MemoizedPromise<string>;
   fileObj: MemoizedPromise<Blob>;
-  documentObj: MemoizedPromise<CoreControls.Document>;
-  fullDocumentObj: CoreControls.Document | undefined;
+  documentObj: MemoizedPromise<Core.Document>;
+  fullDocumentObj: Core.Document | undefined;
   pageNumber: number | undefined;
 
   constructor(index: number, options: CreateFileOptions = {}) {
@@ -32,7 +32,7 @@ export class FakeFile implements FileLike {
     this.extension = 'pdf';
     this.thumbnail = this._getParameter(index % 2 ? testPdfThumbnailRotated : testPdfThumbnail, options);
     this.fileObj = new MemoizedPromise(new Blob());
-    this.documentObj = new MemoizedPromise<CoreControls.Document>(('' as unknown) as CoreControls.Document);
+    this.documentObj = new MemoizedPromise<Core.Document>('' as unknown as Core.Document);
   }
 
   private _getParameter<T>(parameter: T, options: CreateFileOptions) {

src/types.d.ts

@@ -1,9 +1,9 @@
-import { CoreControls } from '@pdftron/webviewer';
+import { Core } from '@pdftron/webviewer';
 
 export {}; // Required to indicate that the file is a module.
 
 declare global {
   interface Window {
-    CoreControls: typeof CoreControls;
+    Core: typeof Core;
   }
 }

src/utils/webviewerUtils.ts

@@ -1,4 +1,4 @@
-import { CoreControls } from '@pdftron/webviewer';
+import type { Core } from '@pdftron/webviewer';
 import { Futurable } from '../data';
 
 export const globalLicense = (() => {
@@ -15,18 +15,18 @@ export const globalLicense = (() => {
 })();
 
 /**
- * Convert a CoreControls Document into a Blob.
- * @param documentObj A CoreControls Document, or promise to get it.
+ * Convert a WebViewer Core Document into a Blob.
+ * @param documentObj A WebViewer Core Document, or promise to get it.
  */
-export async function documentToBlob(documentObj: Futurable<CoreControls.Document>): Promise<Blob> {
-  const fetchedDocument = await documentObj;
+export async function documentToBlob(documentObj: Futurable<Core.Document | undefined>): Promise<Blob> {
+  const fetchedDocument = (await documentObj) as Core.Document;
   const data = await fetchedDocument.getFileData();
   const arr = new Uint8Array(data);
   return new Blob([arr], { type: 'application/pdf' });
 }
 
 /**
- * Convert a Blob and extension into a CoreControls Document.
+ * Convert a Blob and extension into a WebViewer Core Document.
  * @param blob A Blob, or promise to get it.
  * @param extension The file extension of the provided Blob.
  * @param l License key. If not provided, will try to use global license.
@@ -35,31 +35,40 @@ export async function blobToDocument(
   blob: Futurable<Blob>,
   extension: string,
   l?: string,
-): Promise<CoreControls.Document> {
-  const coreControls = window.CoreControls;
+): Promise<Core.Document | undefined> {
+  const coreControls = window.Core;
   const fetchedBlob = await blob;
-  return await coreControls.createDocument(fetchedBlob, { extension, l: l || globalLicense.get() });
+  try {
+    const document = await coreControls.createDocument(fetchedBlob, { extension, l: l || globalLicense.get() });
+    return document;
+  } catch (e) {
+    console.warn(e);
+    return undefined;
+  }
 }
 
 /**
  * Rotate a document 90 degrees.
- * @param documentObj A CoreControls Document, or promise to get it.
+ * @param documentObj A WebViewer Core Document, or promise to get it.
  * @param counterclockwise If provided, will rotate counterclockwise instead of
  * the default clockwise.
  */
 export async function getRotatedDocument(
-  documentObj: Futurable<CoreControls.Document>,
+  documentObj: Futurable<Core.Document | undefined>,
   counterclockwise?: boolean,
-): Promise<CoreControls.Document> {
-  const coreControls = window.CoreControls;
-  const fetchedDocument = await documentObj;
+): Promise<Core.Document | undefined> {
+  const coreControls = window.Core;
+  if (documentObj) {
+    const fetchedDocument = (await documentObj) as Core.Document;
 
-  const pageNumbers = Array.from({ length: fetchedDocument.getPageCount() }, (_, k) => k + 1);
+    const pageNumbers = Array.from({ length: fetchedDocument.getPageCount() }, (_, k) => k + 1);
 
-  const rotation = counterclockwise ? coreControls.PageRotation.E_270 : coreControls.PageRotation.E_90;
+    const rotation = counterclockwise ? coreControls.PageRotation.E_270 : coreControls.PageRotation.E_90;
 
-  await fetchedDocument.rotatePages(pageNumbers, rotation);
-  return fetchedDocument;
+    await fetchedDocument.rotatePages(pageNumbers, rotation);
+    return fetchedDocument;
+  }
+  return undefined;
 }
 
 type GetThumbnailOptions = {
@@ -68,22 +77,24 @@ type GetThumbnailOptions = {
 };
 /**
  * Gets the thumbnail for a document.
- * @param documentObj A CoreControls Document, or promise to get it.
+ * @param documentObj A WebViewer Core Document, or promise to get it.
  * @param options Additional options for the function.
  */
 export async function getThumbnail(
-  documentObj: Futurable<CoreControls.Document>,
+  documentObj: Futurable<Core.Document | undefined>,
   options: GetThumbnailOptions = {},
 ): Promise<string> {
   const { extension, pageNumber = 1 } = options;
 
   if (extension) {
-    const supportedFiles = window.CoreControls?.SupportedFileFormats.CLIENT;
-    if (supportedFiles && !supportedFiles.includes(extension)) throw new Error('Unsupported file type.');
+    const supportedFiles = window.Core?.SupportedFileFormats.CLIENT;
+    if (supportedFiles && !supportedFiles.includes(extension)) {
+      throw new Error(`Unsupported file type. Unable to get thumbnail for file extension ${extension}`);
+    }
   }
 
   const url = async () => {
-    const fetchedDocument = await documentObj;
+    const fetchedDocument = (await documentObj) as Core.Document;
     const canvas: HTMLCanvasElement = await new Promise((resolve, reject) => {
       const callback = (result: HTMLCanvasElement | undefined) => {
         if (!result) return reject(result);