From 6d01b67aab6a6169b189002fc9c00477d55ca113 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 25 Sep 2019 14:26:26 -0400
Subject: pdf rendering is working, I think.  Annotation documents aren't
 aligned at all.

---
 src/client/views/nodes/PDFBox.scss | 69 ++++++++++++--------------------------
 src/client/views/nodes/PDFBox.tsx  | 61 +++++++++++++--------------------
 2 files changed, 44 insertions(+), 86 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 4ceda1986..3fd01c2c1 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -47,29 +47,29 @@
 .pdfBox-settingsCont {
     position: absolute;
     right: 0;
-    top: 0;
+    top: 3;
 
     .pdfBox-settingsButton {
         border-bottom-left-radius: 50%;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
-        height: 70px;
+        height: 30px;
         background: none;
         padding: 0;
 
         .pdfBox-settingsButton-arrow {
             width: 0;
             height: 0;
-            border-top: 25px solid transparent;
-            border-bottom: 25px solid transparent;
-            border-right: 25px solid #121721;
+            border-top: 15px solid transparent;
+            border-bottom: 15px solid transparent;
+            border-right: 15px solid #121721;
             transition: all 0.5s;
         }
 
         .pdfBox-settingsButton-iconCont {
             background: #121721;
-            height: 50px;
+            height: 30px;
             width: 70px;
             display: flex;
             justify-content: center;
@@ -84,16 +84,15 @@
     }
 
     .pdfBox-settingsFlyout {
-        width: 600px;
         position: absolute;
         background: #323232;
         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
-        left: -400px;
+        right: 20px;
         border-radius: 7px;
         padding: 20px;
         display: flex;
         flex-direction: column;
-        font-size: 30px;
+        font-size: 14px;
         transition: all 0.5s;
 
         .pdfBox-settingsFlyout-title {
@@ -108,10 +107,10 @@
     }
 }
 
-.pdfViewer-overlayCont {
+.pdfBox-overlayCont {
     position: absolute;
     width: 100%;
-    height: 100px;
+    height: 40px;
     background: #121721;
     bottom: 0;
     display: flex;
@@ -121,36 +120,34 @@
     overflow: hidden;
     transition: left .5s;
 
-    .pdfViewer-overlaySearchBar {
+    .pdfBox-overlaySearchBar {
         width: 70%;
-        height: 100%;
-        font-size: 30px;
-        padding: 5px;
+        font-size: 14px;
     }
 }
 
-.pdfViewer-overlayButton {
+.pdfBox-overlayButton {
     border-bottom-left-radius: 50%;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    height: 70px;
+    height: 30px;
     background: none;
     padding: 0;
     position: absolute;
 
-    .pdfViewer-overlayButton-arrow {
+    .pdfBox-overlayButton-arrow {
         width: 0;
         height: 0;
-        border-top: 25px solid transparent;
-        border-bottom: 25px solid transparent;
-        border-right: 25px solid #121721;
+        border-top: 15px solid transparent;
+        border-bottom: 15px solid transparent;
+        border-right: 15px solid #121721;
         transition: all 0.5s;
     }
 
-    .pdfViewer-overlayButton-iconCont {
+    .pdfBox-overlayButton-iconCont {
         background: #121721;
-        height: 50px;
+        height: 30px;
         width: 70px;
         display: flex;
         justify-content: center;
@@ -160,32 +157,8 @@
     }
 }
 
-.pdfViewer-overlayButton:hover {
+.pdfBox-overlayButton:hover {
     background: none;
 }
-.collectionPdfView-buttonTray {
-    top: 15px;
-    left: 20px;
-    position: relative;
-    transform-origin: left top;
-    position: absolute;
-}
-.collectionPdfView-backward {
-    color: white;
-    font-size: 24px;
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    background-color: rgba(50, 50, 50, 0.2);
-}
-
-.collectionPdfView-forward {
-    color: white;
-    font-size: 24px;
-    top: 0px;
-    left: 45px;
-    position: absolute;
-    background-color: rgba(50, 50, 50, 0.2);
-}
 
 
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);
-- 
cgit v1.2.3-70-g09d2