pdf rendering is working, I think. Annotation documents aren't aligned at all.

1 files changed, 23 insertions, 38 deletions

diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index f57ec406c..e27bc0ca0 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -47,7 +47,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     componentDidMount() {
         this.props.setPdfBox && this.props.setPdfBox(this);
 
-        this.props.Document.curPage = 1; //  ComputedField.MakeFunction("Math.floor(Number(this.panY) / Number(this.nativeHeight) + 1)");
 
         const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
         if (pdfUrl instanceof PdfField) {
@@ -74,31 +73,25 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
 
     public GetPage() {
-        return Math.floor((this.Document.panY || 0) / (this.Document.nativeHeight || 0)) + 1;
+        return this._pdfViewer!._pdfViewer.currentPageNumber;
     }
 
     @action
     public BackPage() {
-        let cp = Math.ceil((this.Document.panY || 0) / (this.Document.nativeHeight || 0)) + 1;
-        cp = cp - 1;
-        if (cp > 0) {
-            this.Document.panY = (cp - 1) * (this.Document.nativeHeight || 0);
-        }
+        this._pdfViewer!._pdfViewer.scrollPageIntoView({ pageNumber: Math.max(1, this.GetPage() - 1) });
+        this.props.Document.curPage = this.GetPage();
     }
 
     @action
     public GotoPage = (p: number) => {
-        if (p > 0 && p <= NumCast(this.dataDoc.numPages)) {
-            this.Document.panY = (p - 1) * (this.Document.nativeHeight || 0);
-        }
+        this._pdfViewer!._pdfViewer.scrollPageIntoView(p);
+        this.props.Document.curPage = this.GetPage();
     }
 
     @action
     public ForwardPage() {
-        let cp = this.GetPage() + 1;
-        if (cp <= NumCast(this.dataDoc.numPages)) {
-            this.Document.panY = (cp - 1) * (this.Document.nativeHeight || 0);
-        }
+        this._pdfViewer!._pdfViewer.scrollPageIntoView({ pageNumber: Math.min(this._pdfViewer!._pdfViewer.pagesCount, this.GetPage() + 1) });
+        this.props.Document.curPage = this.GetPage();
     }
 
     @action
@@ -133,39 +126,39 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     settingsPanel() {
         return !this.props.active() ? (null) :
             (<>
-                <div className="pdfViewer-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()}
+                <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()}
                     style={{ bottom: 0, left: `${this._searching ? 0 : 100}%` }}>
-                    <button className="pdfViewer-overlayButton" title="Open Search Bar" />
-                    <input className="pdfViewer-overlaySearchBar" placeholder="Search" onChange={this.searchStringChanged}
+                    <button className="pdfBox-overlayButton" title="Open Search Bar" />
+                    <input className="pdfBox-overlaySearchBar" placeholder="Search" onChange={this.searchStringChanged}
                         onKeyDown={(e: React.KeyboardEvent) => e.keyCode === KeyCodes.ENTER ? this.search(this._searchString) : e.keyCode === KeyCodes.BACKSPACE ? e.stopPropagation() : true} />
                     <button title="Search" onClick={() => this.search(this._searchString)}>
-                        <FontAwesomeIcon icon="search" size="3x" color="white" /></button>
+                        <FontAwesomeIcon icon="search" size="sm" color="white" /></button>
                 </div>
-                <button className="pdfViewer-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar"
-                    style={{ bottom: 10, right: 0, display: this.props.active() ? "flex" : "none" }}>
-                    <div className="pdfViewer-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
-                    <div className="pdfViewer-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
-                        <FontAwesomeIcon style={{ color: "white" }} icon={this._searching ? "times" : "search"} size="3x" /></div>
+                <button className="pdfBox-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar"
+                    style={{ bottom: 8, right: 0, display: this.props.active() ? "flex" : "none" }}>
+                    <div className="pdfBox-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
+                    <div className="pdfBox-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
+                        <FontAwesomeIcon style={{ color: "white", padding: 5 }} icon={this._searching ? "times" : "search"} size="3x" /></div>
                 </button>
-                <button className="pdfViewer-overlayButton-iconCont" title="Previous Annotation"
+                <button className="pdfBox-overlayButton-iconCont" title="Previous Annotation"
                     onClick={e => { e.stopPropagation(); this.prevAnnotation(); }}
                     onPointerDown={(e) => e.stopPropagation()}
                     style={{ left: 110, top: 5, height: "30px", position: "absolute", display: this.props.active() ? "flex" : "none" }}>
                     <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="sm" />
                 </button>
-                <button className="pdfViewer-overlayButton-iconCont" title="Next Annotation"
+                <button className="pdfBox-overlayButton-iconCont" title="Next Annotation"
                     onClick={e => { e.stopPropagation(); this.nextAnnotation(); }}
                     onPointerDown={(e) => e.stopPropagation()}
                     style={{ left: 80, top: 5, height: "30px", position: "absolute", display: this.props.active() ? "flex" : "none" }}>
                     <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="sm" />
                 </button>
-                <button className="pdfViewer-overlayButton-iconCont" key="back" title="Page Back"
+                <button className="pdfBox-overlayButton-iconCont" key="back" title="Page Back"
                     onPointerDown={(e) => { e.stopPropagation() }}
                     onClick={() => this.BackPage()}
                     style={{ left: 20, top: 5, height: "30px", position: "absolute", pointerEvents: "all", display: this.props.active() ? "flex" : "none" }}>
                     <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-left"} size="sm" />
                 </button>
-                <button className="pdfViewer-overlayButton-iconCont" key="fwd" title="Page Forward"
+                <button className="pdfBox-overlayButton-iconCont" key="fwd" title="Page Forward"
                     onPointerDown={(e) => e.stopPropagation()}
                     onClick={() => this.ForwardPage()}
                     style={{ left: 50, top: 5, height: "30px", position: "absolute", pointerEvents: "all", display: this.props.active() ? "flex" : "none" }}>
@@ -173,18 +166,12 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
                 </button>
                 <div className="pdfBox-settingsCont" key="settings" onPointerDown={(e) => e.stopPropagation()}>
                     <button className="pdfBox-settingsButton" onClick={action(() => this._flyout = !this._flyout)} title="Open Annotation Settings" >
-                        <div className="pdfBox-settingsButton-arrow"
-                            style={{
-                                borderTop: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
-                                borderBottom: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
-                                borderRight: `25px solid ${this._flyout ? "transparent" : "#121721"}`,
-                                transform: `scaleX(${this._flyout ? -1 : 1})`
-                            }} />
+                        <div className="pdfBox-settingsButton-arrow" style={{ transform: `scaleX(${this._flyout ? -1 : 1})` }} />
                         <div className="pdfBox-settingsButton-iconCont">
-                            <FontAwesomeIcon style={{ color: "white" }} icon="cog" size="3x" />
+                            <FontAwesomeIcon style={{ color: "white", padding: 5 }} icon="cog" size="3x" />
                         </div>
                     </button>
-                    <div className="pdfBox-settingsFlyout" style={{ left: `${this._flyout ? -600 : 100}px` }} >
+                    <div className="pdfBox-settingsFlyout" style={{ right: `${this._flyout ? 20 : -600}px` }} >
                         <div className="pdfBox-settingsFlyout-title">
                             Annotation View Settings
                         </div>
@@ -213,8 +200,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
 
     loaded = (nw: number, nh: number, np: number) => {
-        // nh *= .33.33333;
-        // nw *= 1.33333;
         this.dataDoc.numPages = np;
         if (!this.Document.nativeWidth || !this.Document.nativeHeight || !this.Document.scrollHeight) {
             let oldaspect = (this.Document.nativeHeight || 0) / (this.Document.nativeWidth || 1);