feat(file): pageNumber prop replaces pageIndex to match WebViewer API

BREAKING CHANGE: file now takes pageNumber instead of pageIndex, since WebViewer API has changed in version 7 to take 1-indexed page number values

src/data/file.ts

@@ -1,3 +1,4 @@
+import { CoreControls } from '@pdftron/webviewer';
 import {
   blobToDocument,
   documentToBlob,
@@ -50,15 +51,16 @@ export interface FileDetails {
    */
   license?: string;
   /**
-   * A reference to the document that was used to create this File class. Used as an optimization
-   * where applicable. If passed, 'pageIndex' must also be passed
+   * A reference to the document that was used to create this File class. Used
+   * as an optimization where applicable. If passed, `pageNumber` must also be
+   * passed.
    */
   fullDocumentObj?: CoreControls.Document;
   /**
-   * Used in conjunction with 'fullDocumentObj'. Represents the pageIndex of 'fullDocumentObj' that this
-   * file belongs too
+   * Used in conjunction with `fullDocumentObj`. Represents the page number of
+   * `fullDocumentObj` that this file belongs too.
    */
-  pageIndex?: number;
+  pageNumber?: number;
 }
 
 export interface FileLike {
@@ -71,7 +73,7 @@ export interface FileLike {
   documentObj: MemoizedPromise<CoreControls.Document>;
   subscribe: (...args: any) => () => void;
   fullDocumentObj?: CoreControls.Document;
-  pageIndex?: number;
+  pageNumber?: number;
 }
 
 export type FileEventType =
@@ -109,7 +111,7 @@ export class File implements FileLike {
   private _subscribers: FileEventListenersObj;
   private _license?: string;
   private _fullDocumentObj?: CoreControls.Document;
-  private _pageIndex?: number;
+  private _pageNumber?: number;
 
   /**
    * Initialize the `File`.
@@ -127,19 +129,19 @@ export class File implements FileLike {
       thumbnail,
       license,
       fullDocumentObj,
-      pageIndex,
+      pageNumber,
     } = fileDetails;
 
     if (!fileObj && !documentObj) {
       throw new Error('One of `fileObj` or `documentObj` is required to initialize File.');
     }
 
     if (fullDocumentObj) {
-      if (typeof pageIndex !== 'number') {
-        throw new Error('"pageIndex" must be passed if using "fullDocumentObj"');
+      if (typeof pageNumber !== 'number') {
+        throw new Error('"pageNumber" must be passed if using "fullDocumentObj"');
       }
       this._fullDocumentObj = fullDocumentObj;
-      this._pageIndex = pageIndex;
+      this._pageNumber = pageNumber;
     }
 
     this._id = id || getStringId('file');
@@ -203,8 +205,8 @@ export class File implements FileLike {
   }
 
   /** Gets the page index if provided during initialization. */
-  get pageIndex() {
-    return this._pageIndex;
+  get pageNumber() {
+    return this._pageNumber;
   }
 
   /** The name of the file. */
@@ -344,7 +346,7 @@ export class File implements FileLike {
   private _generateThumbnail = () => {
     return getThumbnail(this.fullDocumentObj || this.documentObj.get(), {
       extension: this.extension,
-      pageIndex: this.pageIndex,
+      pageNumber: this.pageNumber,
     });
   };
 

src/hooks/useFile.ts

@@ -1,3 +1,4 @@
+import { CoreControls } from '@pdftron/webviewer';
 import { useMemo } from 'react';
 import { FileLike } from '../data';
 import { useFileSubscribe } from './useFileSubscribe';

src/storybook-helpers/data/files.ts

@@ -1,3 +1,4 @@
+import { CoreControls } from '@pdftron/webviewer';
 import { FileLike } from '../../data/file';
 import { FuturableOrLazy } from '../../data/futurable';
 import { MemoizedPromise } from '../../data/memoizedPromise';
@@ -22,7 +23,7 @@ export class FakeFile implements FileLike {
   fileObj: MemoizedPromise<Blob>;
   documentObj: MemoizedPromise<CoreControls.Document>;
   fullDocumentObj: CoreControls.Document | undefined;
-  pageIndex: number | undefined;
+  pageNumber: number | undefined;
 
   constructor(index: number, options: CreateFileOptions = {}) {
     this.id = `file_${index + 1}`;

src/utils/webviewerUtils.ts

@@ -1,3 +1,4 @@
+import { CoreControls } from '@pdftron/webviewer';
 import { Futurable } from '../data';
 
 export const globalLicense = (() => {
@@ -55,30 +56,29 @@ export async function getRotatedDocument(
 
   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;
 }
 
 type GetThumbnailOptions = {
   extension?: string;
-  pageIndex?: number;
+  pageNumber?: number;
 };
 /**
  * Gets the thumbnail for a document.
  * @param documentObj A CoreControls Document, or promise to get it.
- * @param extension If provided, will exit early if extension is not supported.
+ * @param options Additional options for the function.
  */
 export async function getThumbnail(
   documentObj: Futurable<CoreControls.Document>,
   options: GetThumbnailOptions = {},
 ): Promise<string> {
-  const { extension, pageIndex = 0 } = options;
+  const { extension, pageNumber = 1 } = options;
 
   if (extension) {
-    // TODO(types): once types are supported, remove `as unknown`
-    const supportedFiles = (window.CoreControls?.SupportedFileFormats?.CLIENT as unknown) as string[] | undefined;
+    const supportedFiles = window.CoreControls?.SupportedFileFormats.CLIENT;
     if (supportedFiles && !supportedFiles.includes(extension)) throw new Error('Unsupported file type.');
   }
 
@@ -89,7 +89,7 @@ export async function getThumbnail(
         if (!result) return reject(result);
         resolve(result);
       };
-      fetchedDocument.loadThumbnailAsync(pageIndex, callback);
+      fetchedDocument.loadThumbnailAsync(pageNumber, callback);
     });
 
     const url = canvas.toDataURL();