feat: add text layer support to PDF viewer

package.json

@@ -38,6 +38,7 @@
     "@types/lodash": "^4.14.141",
     "@types/mustache": "^0.8.32",
     "@types/node": "^12.7.3",
+    "@types/pdfjs-dist": "^2.7.5",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-resize-detector": "^4.2.0",

packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewer.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, radios, number } from '@storybook/addon-knobs';
+import { withKnobs, radios, number, boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 import PdfViewer from './PdfViewer';
 import { document as doc } from 'components/DocumentPreview/__fixtures__/Art Effects.pdf';
 
@@ -32,6 +33,19 @@ storiesOf('DocumentPreview/components/PdfViewer', module)
 
     const zoom = radios(zoomKnob.label, zoomKnob.options, zoomKnob.defaultValue);
     const scale = parseFloat(zoom);
+    const showTextLayer = boolean('Show text layer', false);
 
-    return <PdfViewer file={atob(doc)} page={page} scale={scale} setLoading={(): void => {}} />;
+    const setLoadingAction = action('setLoading');
+    const setTextLayerInfoAction = action('setTextLayerInfo');
+
+    return (
+      <PdfViewer
+        file={atob(doc)}
+        page={page}
+        scale={scale}
+        showTextLayer={showTextLayer}
+        setLoading={setLoadingAction}
+        setTextLayerInfo={setTextLayerInfoAction}
+      />
+    );
   });

packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewer.tsx

@@ -1,11 +1,22 @@
-import React, { SFC, useEffect, useRef, useState, useMemo } from 'react';
-import PdfjsLib from 'pdfjs-dist';
+import React, { FC, useEffect, useRef, useState, useMemo } from 'react';
+import cx from 'classnames';
+import PdfjsLib, {
+  PDFDocumentProxy,
+  PDFPageProxy,
+  PDFPageViewport,
+  PDFRenderTask
+} from 'pdfjs-dist';
 import PdfjsWorkerAsText from 'pdfjs-dist/build/pdf.worker.min.js';
 import { settings } from 'carbon-components';
+import PdfViewerTextLayer, { PdfTextLayerInfo } from './PdfViewerTextLayer';
+
+const { RenderingCancelledException } = PdfjsLib as any;
 
 setupPdfjs();
 
 interface Props {
+  className?: string;
+
   /**
    * PDF file data as base64-encoded string
    */
@@ -21,6 +32,16 @@ interface Props {
    */
   scale: number;
 
+  /**
+   * Render text layer
+   */
+  showTextLayer?: boolean;
+
+  /**
+   * Text layer class name. Only applicable when showTextLayer is true
+   */
+  textLayerClassName?: string;
+
   /**
    * Callback invoked with page count, once `file` has been parsed
    */
@@ -33,21 +54,30 @@ interface Props {
    * Callback which is invoked with whether to enable/disable toolbar controls
    */
   setHideToolbarControls?: (disabled: boolean) => void;
+  /**
+   * Callback for text layer info
+   */
+  setTextLayerInfo?: (info: PdfTextLayerInfo | null) => any;
 }
 
-const PdfViewer: SFC<Props> = ({
+const PdfViewer: FC<Props> = ({
+  className,
   file,
   page,
   scale,
+  showTextLayer,
+  textLayerClassName,
   setPageCount,
   setLoading,
-  setHideToolbarControls
+  setHideToolbarControls,
+  setTextLayerInfo,
+  children
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   // In order to prevent unnecessary re-loading, loaded file and page are stored in state
-  const [loadedFile, setLoadedFile] = useState<any>(null);
-  const [loadedPage, setLoadedPage] = useState<any>(null);
+  const [loadedFile, setLoadedFile] = useState<PDFDocumentProxy | null>(null);
+  const [loadedPage, setLoadedPage] = useState<PDFPageProxy | null>(null);
 
   useEffect(() => {
     let didCancel = false;
@@ -88,33 +118,74 @@ const PdfViewer: SFC<Props> = ({
     };
   }, [loadedFile, page]);
 
-  const [viewport, canvasInfo] = useMemo(() => {
-    const viewport = loadedPage?.getViewport({ scale });
-    const canvasInfo = viewport ? getCanvasInfo(viewport) : undefined;
-    return [viewport, canvasInfo];
-  }, [loadedPage, scale]);
+  const currentPage = useMemo(() => {
+    const isPageValid = !!loadedPage && loadedPage.pageNumber === page;
+    if (isPageValid) {
+      const viewport = loadedPage?.getViewport({ scale });
+      const canvasInfo = viewport ? getCanvasInfo(viewport) : undefined;
+      return { loadedPage, viewport, canvasInfo };
+    }
+    return null;
+  }, [loadedPage, page, scale]);
 
   useEffect(() => {
-    if (loadedPage && !loadedPage.then && viewport && canvasInfo) {
-      _renderPage(loadedPage, canvasRef.current!, viewport, canvasInfo);
-      setLoading(false);
+    let didCancel = false;
+    let task: PDFRenderTask | null = null;
+
+    const { loadedPage, viewport, canvasInfo } = currentPage || {};
+    if (loadedPage && !(loadedPage as any).then && viewport && canvasInfo) {
+      const render = async () => {
+        try {
+          task = _renderPage(loadedPage, canvasRef.current!, viewport, canvasInfo);
+          await task?.promise;
+        } catch (e) {
+          if (e instanceof RenderingCancelledException) {
+            // ignore
+          } else {
+            throw e; // rethrow unknown exception
+          }
+        } finally {
+          if (!didCancel) {
+            setLoading(false);
+          }
+        }
+      };
+      render();
     }
-  }, [loadedPage, viewport, canvasInfo, setLoading]);
+    return () => {
+      didCancel = true;
+      task?.cancel();
+    };
+  }, [loadedPage, currentPage, setLoading]);
 
   useEffect(() => {
     if (setHideToolbarControls) {
       setHideToolbarControls(false);
     }
   }, [setHideToolbarControls]);
 
+  const classNameBase = `${settings.prefix}--document-preview-pdf-viewer`;
+  const { loadedPage: currentLoadedPage, canvasInfo } = currentPage || {};
   return (
-    <canvas
-      ref={canvasRef}
-      className={`${settings.prefix}--document-preview-pdf-viewer`}
-      style={{ width: `${canvasInfo?.width ?? 0}px`, height: `${canvasInfo?.height ?? 0}px` }}
-      width={canvasInfo?.canvasWidth}
-      height={canvasInfo?.canvasHeight}
-    />
+    <div className={cx(classNameBase, className)}>
+      <canvas
+        ref={canvasRef}
+        className={`${classNameBase}--canvas`}
+        style={{ width: `${canvasInfo?.width ?? 0}px`, height: `${canvasInfo?.height ?? 0}px` }}
+        width={canvasInfo?.canvasWidth}
+        height={canvasInfo?.canvasHeight}
+      />
+      {showTextLayer && (
+        <PdfViewerTextLayer
+          className={cx(`${classNameBase}--text`, textLayerClassName)}
+          loadedPage={currentLoadedPage}
+          page={page}
+          scale={scale}
+          setTextLayerInfo={setTextLayerInfo}
+        />
+      )}
+      {children}
+    </div>
   );
 };
 
@@ -127,28 +198,31 @@ function _loadPdf(data: string): Promise<any> {
   return PdfjsLib.getDocument({ data }).promise;
 }
 
-function _loadPage(file: any, page: number): Promise<any> {
+function _loadPage(file: PDFDocumentProxy, page: number) {
   return file.getPage(page);
 }
 
 function _renderPage(
-  pdfPage: any,
+  pdfPage: PDFPageProxy,
   canvas: HTMLCanvasElement,
-  viewport: any,
+  viewport: PDFPageViewport,
   canvasInfo: CanvasInfo
-): void {
+): PDFRenderTask | null {
   const canvasContext = canvas.getContext('2d');
-  canvasContext?.resetTransform();
-  canvasContext?.scale(canvasInfo.canvasScale, canvasInfo.canvasScale);
-  pdfPage.render({ canvasContext, viewport });
+  if (canvasContext) {
+    canvasContext.resetTransform();
+    canvasContext.scale(canvasInfo.canvasScale, canvasInfo.canvasScale);
+    return pdfPage.render({ canvasContext, viewport });
+  }
+  return null;
 }
 
 // set up web worker for use by PDF.js library
 // @see https://stackoverflow.com/a/6454685/908343
 function setupPdfjs(): void {
   if (typeof Worker !== 'undefined') {
     const blob = new Blob([PdfjsWorkerAsText], { type: 'text/javascript' });
-    const pdfjsWorker = new Worker(URL.createObjectURL(blob));
+    const pdfjsWorker = new Worker(URL.createObjectURL(blob)) as any;
     PdfjsLib.GlobalWorkerOptions.workerPort = pdfjsWorker;
   } else {
     PdfjsLib.GlobalWorkerOptions.workerSrc = PdfjsWorkerAsText;