more pdf tweaks

2 files changed, 32 insertions, 34 deletions

diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 37807e818..1de4d2512 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -267,8 +267,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @action
     loaded = (nw: number, nh: number, np: number) => {
         this.dataDoc[this._props.fieldKey + '_numPages'] = np;
-        Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS));
-        Doc.SetNativeHeight(this.dataDoc, nh * Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS);
+        Doc.SetNativeWidth(this.dataDoc, Math.max(Doc.NativeWidth(this.dataDoc), nw));
+        Doc.SetNativeHeight(this.dataDoc, nh);
         this.layoutDoc._height = NumCast(this.layoutDoc._width) / (Doc.NativeAspect(this.dataDoc) || 1);
         !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw));
     };
@@ -584,7 +584,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get renderPdfView() {
         TraceMobx();
         const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
-        const scale = previewScale * (this._props.NativeDimScaling?.() || 1);
+        // PDFjs scales page renderings to be the render container size times the ratio of CSS/print pixels.
+        // So we have to scale the render container down by this ratio, so that the renderings will match the size of the container
+        const viewScale = (previewScale * (this._props.NativeDimScaling?.() || 1)) / Pdfjs.PixelsPerInch.PDF_TO_CSS_UNITS;
         return !this._pdf ? null : (
             <div
                 className="pdfBox"
@@ -595,9 +597,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 <div className="pdfBox-background" onPointerDown={e => this.sidebarBtnDown(e, false)} />
                 <div
                     style={{
-                        width: `calc(${100 / scale}% - ${(this.sidebarWidth() / scale) * (this._previewWidth ? scale : 1)}px)`,
-                        height: `${100 / scale}%`,
-                        transform: `scale(${scale})`,
+                        width: `calc(${100 / viewScale}% - ${(this.sidebarWidth() / viewScale) * (this._previewWidth ? viewScale : 1)}px)`,
+                        height: `${100 / viewScale}%`,
+                        transform: `scale(${viewScale})`,
                         position: 'absolute',
                         transformOrigin: 'top left',
                         top: 0,
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 = () => {