more pdf tweaks

1 files changed, 24 insertions, 28 deletions

diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 5594254b3..722492e8d 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -11,7 +11,7 @@ import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction } from '../../../Utils';
+import { emptyFunction, numberRange } from '../../../Utils';
 import { DocUtils } from '../../documents/DocUtils';
 import { SnappingManager } from '../../util/SnappingManager';
 import { MarqueeOptionsMenu } from '../collections/collectionFreeForm';
@@ -146,35 +146,33 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         }
     };
 
-    @observable _scrollHeight = 0;
+    @computed get _scrollHeight() {
+        return this._pageSizes.reduce((size, page) => size + page.height, 0) * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
 
-    @action
-    initialLoad = async () => {
+    initialLoad = () => {
         if (this._pageSizes.length === 0) {
-            this._pageSizes = Array<{ width: number; height: number }>(this._props.pdf.numPages);
             const devicePixelRatio = window.devicePixelRatio;
-            document.documentElement?.style.setProperty('--devicePixelRatio', devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs
-            await Promise.all(
-                this._pageSizes.map((val, i) =>
-                    this._props.pdf.getPage(i + 1).then(
-                        action((page: Pdfjs.PDFPageProxy) => {
-                            const page0or180 = page.rotate === 0 || page.rotate === 180;
-                            this._pageSizes.splice(i, 1, {
-                                width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio,
-                                height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio,
-                            });
-                            if (i === this._props.pdf.numPages - 1) {
-                                const lastPage = this._pageSizes.lastElement();
-                                this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages);
-                            }
-                        })
-                    )
+            document.documentElement?.style.setProperty('--devicePixelRatio', window.devicePixelRatio.toString()); // set so that css can use this to adjust various PDFJs divs
+            Promise.all(
+                numberRange(this._props.pdf.numPages).map(i =>
+                    this._props.pdf.getPage(i + 1).then(page => {
+                        const page0or180 = page.rotate === 0 || page.rotate === 180;
+                        return {
+                            width: page.view[page0or180 ? 2 : 3] * devicePixelRatio - page.view[page0or180 ? 0 : 1] * devicePixelRatio,
+                            height: page.view[page0or180 ? 3 : 2] * devicePixelRatio - page.view[page0or180 ? 1 : 0] * devicePixelRatio,
+                        };
+                    })
                 )
+            ).then(
+                action(pages => {
+                    this._pageSizes = pages;
+                    const lastPage = pages.lastElement();
+                    this._props.loaded?.(lastPage.width, lastPage.height, this._props.pdf.numPages);
+                    this.createPdfViewer();
+                })
             );
         }
-        runInAction(() => {
-            this._scrollHeight = this._pageSizes.reduce((size, page) => size + page.height, 0) * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS;
-        });
     };
 
     _scrollStopper: undefined | (() => void);
@@ -200,14 +198,12 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
     crop = (region: Doc | undefined, addCrop?: boolean) => this._props.crop(region, addCrop);
 
     @action
-    setupPdfJsViewer = async () => {
+    setupPdfJsViewer = () => {
         if (this._viewerIsSetup) return;
         this._viewerIsSetup = true;
         this._showWaiting = true;
         this._props.setPdfViewer(this);
-        await this.initialLoad();
-
-        this.createPdfViewer();
+        this.initialLoad();
     };
 
     pagesinit = () => {