enhanced web worker and output support for milmove

transcom · Nov 13, 2024 · 0db75e6 · 0db75e6
1 parent d7a069a
commit 0db75e6
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 61 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,18 @@
+Html Webpack Plugin:
+<pre>
+  Error: The loader "/Users/cameron.jewell_cn/Projects/react-file-viewer/node_modules/html-webpack-plugin/lib/loader.js!/Users/cameron.jewell_cn/Projects/react-file-viewer/node_modules/html-webpack-plugin/default_index.ejs" didn't return html.
+
+  - index.js:323 HtmlWebpackPlugin.evaluateCompilationResult
+    [react-file-viewer]/[html-webpack-plugin]/index.js:323:24
+
+  - index.js:230 
+    [react-file-viewer]/[html-webpack-plugin]/index.js:230:22
+
+  - task_queues:95 process.processTicksAndRejections
+    node:internal/process/task_queues:95:5
+
+  - async Promise.all
+
+  - async Promise.all
+
+</pre>
diff --git a/dist/index.js b/dist/index.js
diff --git a/src/components/drivers/pdf-viewer.jsx b/src/components/drivers/pdf-viewer.jsx
@@ -1,98 +1,98 @@
 // Copyright (c) 2017 PlanGrid, Inc.
 
 import React from 'react'
-import VisibilitySensor from 'react-visibility-sensor'
 
 const INCREASE_PERCENTAGE = 0.2
 const DEFAULT_SCALE = 1.1
 
 export class PDFPage extends React.Component {
   constructor(props) {
-    super(props)
-    this.state = {}
-    this.onChange = this.onChange.bind(this)
+    super(props);
+    this.canvas = React.createRef();
+    this.state = {
+      isVisible: true,
+    };
   }
 
   componentDidMount() {
-    if (this.props.disableVisibilityCheck) this.fetchAndRenderPage()
+    if (!this.props.disableVisibilityCheck) {
+      this.observer = new IntersectionObserver(([entry]) => {
+        if (entry.target === this.canvas.current) {
+          this.setState({ isVisible: entry.isIntersecting });
+        }
+      });
+      if (this.canvas.current) this.observer.observe(this.canvas.current);
+    }
+    this.fetchAndRenderPage();
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.disableVisibilityCheck) {
-      if (prevProps.zoom !== this.props.zoom) this.fetchAndRenderPage()
-      return
+      if (prevProps.zoom !== this.props.zoom) {
+        this.fetchAndRenderPage();
+      }
+      return;
     }
 
-    // we want to render/re-render in two scenarias
-    // user scrolls to the pdf
-    // user zooms in
     if (
-      prevState.isVisible === this.state.isVisible &&
-      prevProps.zoom === this.props.zoom
-    )
-      return
-    if (this.state.isVisible) this.fetchAndRenderPage()
+      prevProps.zoom !== this.props.zoom ||
+      prevProps.index !== this.props.index ||
+      prevProps.isVisible !== this.state.isVisible
+    ) {
+      this.fetchAndRenderPage();
+    }
   }
 
-  onChange(isVisible) {
-    if (isVisible) this.setState({ isVisible })
+  componentWillUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   fetchAndRenderPage() {
-    const { pdf, index } = this.props
-    pdf
-      .getPage(index)
-      .then(this.renderPage.bind(this))
-      .catch((error) => {
-        console.error(`Error fetching page ${index}:`, error)
-      })
+    if (this.props.disableVisibilityCheck || this.state.isVisible) {
+      const { pdf, index } = this.props;
+      pdf
+        .getPage(index)
+        .then(this.renderPage.bind(this))
+        .catch((error) => {
+          console.error(`Error fetching page ${index}:`, error);
+        });
+    }
   }
 
   renderPage(page) {
     try {
-      const { containerWidth, zoom } = this.props
-      const initialViewport = page.getViewport({ scale: DEFAULT_SCALE })
-      const calculatedScale = containerWidth / initialViewport.width
+      const { containerWidth, zoom } = this.props;
+      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 })
-      const { width, height } = viewport
+        zoom * INCREASE_PERCENTAGE;
+      const viewport = page.getViewport({ scale });
+      const { width, height } = viewport;
 
-      const context = this.canvas.getContext('2d')
-      this.canvas.width = width
-      this.canvas.height = height
+      const canvas = this.canvas.current;
+      const context = canvas.getContext('2d');
+      canvas.width = width;
+      canvas.height = height;
 
       page.render({
         canvasContext: context,
         viewport,
-      })
+      });
     } catch (error) {
-      console.error(`Error rendering page ${this.props.index}:`, error)
+      console.error(`Error rendering page ${this.props.index}:`, error);
     }
   }
 
   render() {
-    const { index } = this.props
+    const { index } = this.props;
     return (
       <div key={`page-${index}`} className="pdf-canvas">
-        {this.props.disableVisibilityCheck ? (
-          <canvas
-            ref={(node) => (this.canvas = node)}
-            width="670"
-            height="870"
-          />
-        ) : (
-          <VisibilitySensor onChange={this.onChange} partialVisibility>
-            <canvas
-              ref={(node) => (this.canvas = node)}
-              width="670"
-              height="870"
-            />
-          </VisibilitySensor>
-        )}
+        <canvas ref={this.canvas} width="670" height="870" />
       </div>
-    )
+    );
   }
 }
 
@@ -141,13 +141,14 @@ export default class PDFDriver extends React.Component {
   }
 
   componentWillUnmount() {
-    const { pdf } = this.state
-    if (pdf) {
-      pdf.destroy()
-      this.setState({ pdf: null })
+    if (this.state.pdf) {
+      this.state.pdf.destroy().then(() => {
+        this.setState({ pdf: null });
+      });
     }
   }
 
+
   setZoom(zoom) {
     this.setState({
       zoom,

diff --git a/webpack.config.js b/webpack.config.js
@@ -6,8 +6,8 @@ const path = require('path')
 const BUILD_DIR = path.resolve(__dirname, './dist')
 const APP_DIR = path.resolve(__dirname, './src')
 
-const BundleAnalyzerPlugin =
-  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin
 
 const config = {
   entry: `${APP_DIR}/components`,
@@ -18,7 +18,7 @@ const config = {
     filename: 'index.js',
     library: ['FileViewer'],
     libraryTarget: 'umd',
-    publicPath: '/',
+    publicPath: '/static/react-file-viewer/',
     chunkFilename: '[name].chunk.js',
   },
   resolve: {