Merge pull request #11 from transcom/B-21049

B-21049

dist/560.index.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/**
+ * @licstart The following is the entire license notice for the
+ * JavaScript code in this page
+ *
+ * Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @licend The above is the entire license notice for the
+ * JavaScript code in this page
+ */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcom/react-file-viewer",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Extendable file viewer for web",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/app.js

@@ -5,7 +5,7 @@ import 'styles/main.scss'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import FileViewer from './components/file-viewer'
-import 'path2d-polyfill';
+import 'path2d-polyfill'
 import sampleHouse from '../example_files/SampleHouse.wexbim'
 import solarImage from '../example_files/02-USVI-Solar.jpg'
 import docx from '../example_files/SampleSpec.docx'

src/components/drivers/pdf-viewer.jsx

@@ -51,12 +51,12 @@ export class PDFPage extends React.Component {
   renderPage(page) {
     try {
       const { containerWidth, zoom } = this.props
-      const initialViewport = page.getViewport({ scale: DEFAULT_SCALE });
-      const calculatedScale =
-        containerWidth / initialViewport.width
+      const initialViewport = page.getViewport({ scale: DEFAULT_SCALE })
+      const calculatedScale = containerWidth / initialViewport.width
       const scale =
-        (calculatedScale > DEFAULT_SCALE ? DEFAULT_SCALE : calculatedScale) + zoom * INCREASE_PERCENTAGE
-      const viewport = page.getViewport({scale})
+        (calculatedScale > DEFAULT_SCALE ? DEFAULT_SCALE : calculatedScale) +
+        zoom * INCREASE_PERCENTAGE
+      const viewport = page.getViewport({ scale })
       const { width, height } = viewport
 
       const context = this.canvas.getContext('2d')
@@ -128,7 +128,14 @@ export default class PDFDriver extends React.Component {
           this.setState({ pdf, containerWidth })
         })
         .catch((error) => {
-          console.error('Error loading PDF:', error)
+          if (
+            typeof this.props.onError != undefined &&
+            this.props.onError != null
+          ) {
+            this.props.onError(error)
+          } else {
+            console.error('Error loading PDF:', error)
+          }
         })
     })()
   }
@@ -167,7 +174,7 @@ export default class PDFDriver extends React.Component {
 
   renderPages() {
     const { pdf, containerWidth, zoom } = this.state
-    if (!pdf) return null;
+    if (!pdf) return null
     const pages = [...Array(pdf.numPages).keys()].map((i) => i + 1)
     return pages.map((_, i) => (
       <PDFPage

src/components/drivers/photo-viewer-wrapper.jsx

@@ -1,65 +1,72 @@
 // Copyright (c) 2017 PlanGrid, Inc.
 
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
-import * as ThreeLib from 'three';
-import PhotoViewer from './photo-viewer';
-import Photo360Viewer from './photo360-viewer';
-import Loading from '../loading';
+import * as ThreeLib from 'three'
+import PhotoViewer from './photo-viewer'
+import Photo360Viewer from './photo360-viewer'
+import Loading from '../loading'
 
 function getPhotoDriver(width, height, fileType) {
-  if (fileType === 'jpg' && window.Math.abs((width / height) - 2) <= 0.01) {
-    return Photo360Viewer;
+  if (fileType === 'jpg' && window.Math.abs(width / height - 2) <= 0.01) {
+    return Photo360Viewer
   }
-  return PhotoViewer;
+  return PhotoViewer
 }
 
 export default class PhotoViewerWrapper extends Component {
   constructor(props) {
-    super(props);
+    super(props)
 
     this.state = {
       originalWidth: 0,
       originalHeight: 0,
       imageLoaded: false,
-    };
+    }
   }
 
   componentDidMount() {
     // spike on using promises and a different loader or adding three js loading manager
-    const loader = new ThreeLib.TextureLoader();
-    loader.crossOrigin = '';
+    const loader = new ThreeLib.TextureLoader()
+    loader.crossOrigin = ''
+    // get error handler
+    var onError = this.props.onError
+    if (typeof onError == 'undefined' || onError == null) {
+      onError = (xhr) => {
+        console.log('An error happened', xhr)
+      }
+    }
     // load a resource
     loader.load(
       // resource URL
       this.props.filePath,
-      // Function when resource is   loaded
+      // Function when resource is loaded
       (texture) => {
         this.setState({
           originalWidth: texture.image.width,
           originalHeight: texture.image.height,
           imageLoaded: true,
           texture,
-        });
-      },
-      (xhr) => {
-        console.log(`${xhr.loaded / xhr.total * 100}% loaded`);
+        })
       },
       (xhr) => {
-        console.log('An error happened', xhr);
+        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`)
       },
-    );
+      onError
+    )
   }
 
   render() {
     if (!this.state.imageLoaded) {
-      return <Loading />;
+      return <Loading />
     }
-    const { originalWidth, originalHeight } = this.state;
-    const PhotoDriver = getPhotoDriver(originalWidth, originalHeight, this.props.fileType);
+    const { originalWidth, originalHeight } = this.state
+    const PhotoDriver = getPhotoDriver(
+      originalWidth,
+      originalHeight,
+      this.props.fileType
+    )
 
-    return (
-      <PhotoDriver {...this.state} {...this.props} />
-    );
+    return <PhotoDriver {...this.state} {...this.props} />
   }
 }

src/components/drivers/photo360-viewer.jsx

@@ -97,11 +97,11 @@ class Photo360Viewer extends Component {
     // moving the camera according to current latitude (vertical movement)
     // and longitude (horizontal movement)
     this.camera.target.x =
-      500 *
-      Math.sin(ThreeLib.MathUtils.degToRad(90 - latitude))
-      Math.cos(ThreeLib.MathUtils.degToRad(this.state.longitude))
+      500 * Math.sin(ThreeLib.MathUtils.degToRad(90 - latitude))
+    Math.cos(ThreeLib.MathUtils.degToRad(this.state.longitude))
 
-    this.camera.target.y = 500 * Math.cos(ThreeLib.MathUtils.degToRad(90 - latitude))
+    this.camera.target.y =
+      500 * Math.cos(ThreeLib.MathUtils.degToRad(90 - latitude))
     this.camera.target.z =
       500 *
       Math.sin(ThreeLib.MathUtils.degToRad(90 - latitude)) *

tests/components/pdf-viewer.test.js

@@ -2,20 +2,22 @@
 import { readFileSync } from 'fs'
 
 import React from 'react';
+import { PDFJS } from 'pdfjs-dist/build/pdf.combined'
 import { mount } from 'enzyme';
 import { createWaitForElement } from 'enzyme-wait';
 import { PDFPage } from 'components/drivers/pdf-viewer';
 import PDFDriver from '../../src/components/drivers/pdf-viewer'
 
 describe('pdf-viewer', () => {
-  let spy;
+  let spyFetchAndRender, spyPdfjsGetDocument;
   beforeEach(() => {
-    spy = jest.spyOn(PDFPage.prototype, 'fetchAndRenderPage').mockImplementation(() => {})
+    spyFetchAndRender = jest.spyOn(PDFPage.prototype, 'fetchAndRenderPage').mockImplementation(() => {});
+    spyPdfjsGetDocument = jest.spyOn(PDFJS, 'getDocument');
   })
 
   afterEach(() => {
-    spy.mockReset();
-    spy.mockRestore();
+    spyFetchAndRender.mockRestore();
+    spyPdfjsGetDocument.mockRestore();
   })
 
   it('renders without crashing', () => {
@@ -28,13 +30,35 @@ describe('pdf-viewer', () => {
    mount(
       <PDFPage fileType='fake' filePath='fake/path' disableVisibilityCheck />
     );
-    expect(spy).toHaveBeenCalled();
+    expect(spyFetchAndRender).toHaveBeenCalled();
   });
 
   it('does not call fetchAndRenderPage on mount with visibility check enabled', () => {
     mount(
       <PDFPage fileType='fake' filePath='fake/path' disableVisibilityCheck={false} />
     );
-    expect(spy).not.toHaveBeenCalled();
+    expect(spyFetchAndRender).not.toHaveBeenCalled();
   });
+
+  it('does not call onError for a successful file', async () => {
+    function onError(error) {
+      throw Error('onError should not be called');
+    };
+    const fileContents = readFileSync('./example_files/sample.pdf');
+    mount(
+      <PDFDriver fileType='pdf' filePath={fileContents} onError={onError} />
+    );
+  });
+
+  it('does call onError for a missing file', async () => {
+    function mockGetDocument(path) {
+      return Promise.reject(Error('the world is not enough'));
+    }
+    spyPdfjsGetDocument.mockImplementation(mockGetDocument);
+    const mockErrorHandler = jest.fn();
+    mount(
+      <PDFDriver fileType='pdf' filePath='./example_files/missing_file.pdf' onError={mockErrorHandler} />
+    );
+  });
+
 });