rendering adjustments for pdfs for speed/readability

5 files changed, 14 insertions, 6 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2d9faee6b..b6bc4b4ba 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -644,7 +644,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             return (null);
         }
         let resolvedDataDoc = this._document.layout instanceof Doc ? this._document : this._dataDoc;
-        console.log("Wid = " + this.panelWidth() + " " + this.panelHeight());
         return <DocumentView key={this._document[Id]}
             Document={this._document}
             DataDoc={resolvedDataDoc}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index d82bcf02f..69c4397aa 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -6,6 +6,7 @@
     width:100%;
     overflow: hidden;
     position:absolute;
+    z-index: -1;
 }
 
 .pdfBox-cont {
@@ -38,6 +39,7 @@
     position: absolute;
     right: 0;
     top: 3;
+    pointer-events: all;
 
     .pdfBox-settingsButton {
         border-bottom-left-radius: 50%;
@@ -109,6 +111,7 @@
     padding: 20px;
     overflow: hidden;
     transition: left .5s;
+    pointer-events: all;
 
     .pdfBox-searchBar {
         width: 70%;
@@ -125,6 +128,7 @@
     background: none;
     padding: 0;
     position: absolute;
+    pointer-events: all;
 
     .pdfBox-overlayButton-arrow {
         width: 0;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 9e8478ffa..cf56925ea 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -109,7 +109,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         </>
         return !this.props.active() ? (null) :
             (<div className="pdfBox-ui" onKeyDown={e => e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true}
-                onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none" }}>
+                onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none", position: "absolute", width: "100%", height: "100%", zIndex: 1, pointerEvents: "none" }}>
                 <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
                     <button className="pdfBox-overlayButton" title="Open Search Bar" />
                     <input className="pdfBox-searchBar" placeholder="Search" onChange={this.searchStringChanged} onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 4ec2118ee..0b74a8ad4 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -5,7 +5,7 @@
     position: absolute;
     overflow-y: scroll;
     overflow-x: hidden;
-
+    
     // .canvasWrapper {
     //     transform: scale(0.75);
     //     transform-origin: top left;
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index a72523969..7ffe19ff5 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
+import { action, computed, IReactionDisposer, observable, reaction, trace } from "mobx";
 import { observer } from "mobx-react";
 import * as Pdfjs from "pdfjs-dist";
 import "pdfjs-dist/web/pdf_viewer.css";
@@ -24,6 +24,9 @@ import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
 const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer");
+const pdfjsLib = require("pdfjs-dist");
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`;
 
 interface IViewerProps {
     pdf: Pdfjs.PDFDocumentProxy;
@@ -164,6 +167,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
         }
     }
 
+
     @action
     setupPdfJsViewer = () => {
         document.addEventListener("pagesinit", () => this.pdfViewer.currentScaleValue = 1);
@@ -177,7 +181,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
             viewer: this._viewer.current,
             linkService: pdfLinkService,
             findController: pdfFindController,
-            renderer: "svg"
+            renderer: "canvas",
         });
         pdfLinkService.setViewer(this.pdfViewer);
         pdfLinkService.setDocument(this.props.pdf, null);
@@ -584,8 +588,9 @@ export class PDFViewer extends React.Component<IViewerProps> {
         return this.props.isSelected() || this._isChildActive || this.props.renderDepth === 0;
     }
     render() {
+        trace();
         return (<div className="pdfViewer-viewer" onScroll={this.onScroll} onPointerDown={this.onPointerDown} onWheel={(e) => e.stopPropagation()} onClick={this.onClick} ref={this._mainCont}>
-            <div className="pdfViewer-text" ref={this._viewer} />
+            <div className="pdfViewer-text" ref={this._viewer} style={{ transformOrigin: "left top" }} />
             {!this._marqueeing ? (null) : <div className="pdfViewer-dragAnnotationBox" ref={this._marquee}
                 style={{
                     left: `${this._marqueeX}px`, top: `${this._marqueeY}px`,