From c785c2471e2f30d493a7e70334b0f588a593a33e Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Tue, 25 Jun 2019 18:10:18 -0400
Subject: basic text searching

---
 src/client/views/pdf/PDFViewer.scss | 53 +++++++++++++++++++----
 src/client/views/pdf/PDFViewer.tsx  | 83 +++++++++++++++++++++++++++++++++++--
 2 files changed, 125 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 53c33ce0b..2f705781f 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -1,9 +1,3 @@
-.textLayer {
-    div {
-        user-select: text;
-    }
-}
-
 .viewer-button-cont {
     position: absolute;
     display: flex;
@@ -20,8 +14,51 @@
     border-radius: 5px;
 }
 
-.textLayer {
-    user-select: auto;
+.viewer {
+    // position: absolute;
+    // top: 0;
+}
+
+.pdfViewer-text {
+
+    .page {
+        .canvasWrapper {
+            display: none;
+        }
+
+        .textLayer {
+            position: relative;
+            user-select: none;
+        }
+    }
+}
+
+.page-cont {
+    .textLayer {
+        user-select: auto;
+
+        div {
+            user-select: text;
+        }
+    }
+}
+
+.pdfViewer-overlayCont {
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    background: #121721;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+
+    .pdfViewer-overlaySearchBar {
+        width: 20%;
+        height: 100%;
+        font-size: 30px;
+    }
 }
 
 .pdfViewer-annotationBox {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 3df7dd77b..d0e0c3749 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -22,6 +22,8 @@ import PDFMenu from "./PDFMenu";
 import { UndoManager } from "../../util/UndoManager";
 import { CompileScript, CompiledScript, CompileResult } from "../../util/Scripting";
 import { ScriptField } from "../../../new_fields/ScriptField";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer");
 
 export const scale = 2;
 interface IPDFViewerProps {
@@ -76,6 +78,7 @@ class Viewer extends React.Component<IViewerProps> {
     @observable private _annotations: Doc[] = [];
     @observable private _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
     @observable private _script: CompileResult | undefined;
+    @observable private _searching: boolean = false;
 
     private _pageBuffer: number = 1;
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
@@ -86,6 +89,8 @@ class Viewer extends React.Component<IViewerProps> {
     private _viewer: React.RefObject<HTMLDivElement>;
     private _mainCont: React.RefObject<HTMLDivElement>;
     private _textContent: Pdfjs.TextContent[] = [];
+    private _pdfFindController: any;
+    private _searchString: string = "";
 
     constructor(props: IViewerProps) {
         super(props);
@@ -164,8 +169,13 @@ class Viewer extends React.Component<IViewerProps> {
                     // pageSizes[i] = { width: page.view[2] * scale, height: page.view[3] * scale };
                     let x = page.getViewport(scale);
                     page.getTextContent().then((text: Pdfjs.TextContent) => {
+                        // let tc = new Pdfjs.TextContentItem()
+                        // let tc = {str: }
                         this._textContent[i] = text;
-                    })
+                        // text.items.forEach(t => {
+                        //     tcStr += t.str;
+                        // })
+                    });
                     pageSizes[i] = { width: x.width, height: x.height };
                 }));
             }
@@ -391,18 +401,81 @@ class Viewer extends React.Component<IViewerProps> {
         return res;
     }
 
+    @action
     pointerDown = () => {
+        this._searching = false;
+        this._pdfFindController = null;
+        if (this._viewer.current) {
+            let cns = this._viewer.current.childNodes;
+            for (let i = cns.length - 1; i >= 0; i--) {
+                cns.item(i).remove();
+            }
+        }
+    }
+
+    @action
+    search = (searchString: string) => {
+        if (searchString.length === 0) {
+            return;
+        }
+        this._searching = true;
+
+        let container = this._mainCont.current;
+        let viewer = this._viewer.current;
+
+        if (!this._pdfFindController) {
+            if (container && viewer) {
+                let simpleLinkService = new PDFJSViewer.SimpleLinkService();
+                let pdfViewer = new PDFJSViewer.PDFViewer({
+                    container: container,
+                    viewer: viewer,
+                    linkService: simpleLinkService
+                });
+                simpleLinkService.setPdf(this.props.pdf);
+                container.addEventListener("pagesinit", () => {
+                    pdfViewer.currentScaleValue = 1;
+                });
+                container.addEventListener("pagerendered", () => {
+                    console.log("rendered");
+                    this._pdfFindController.executeCommand('find',
+                        {
+                            caseSensitive: false,
+                            findPrevious: undefined,
+                            highlightAll: true,
+                            phraseSearch: true,
+                            query: searchString
+                        });
+                });
+                pdfViewer.setDocument(this.props.pdf);
+                this._pdfFindController = new PDFJSViewer.PDFFindController(pdfViewer);
+                // this._pdfFindController._linkService = pdfLinkService;
+                pdfViewer.findController = this._pdfFindController;
+            }
+        }
+        else {
+            this._pdfFindController.executeCommand('find',
+                {
+                    caseSensitive: false,
+                    findPrevious: undefined,
+                    highlightAll: true,
+                    phraseSearch: true,
+                    query: searchString
+                });
+        }
+    }
 
-        let x = this._textContent;
+    searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._searchString = e.currentTarget.value;
     }
 
     render() {
         let compiled = this._script;
         return (
             <div ref={this._mainCont} style={{ pointerEvents: "all" }} onPointerDown={this.pointerDown}>
-                <div className="viewer" ref={this._viewer}>
+                <div className="viewer" style={this._searching ? { position: "absolute", top: 0 } : {}}>
                     {this._visibleElements}
                 </div>
+                <div className="pdfViewer-text" ref={this._viewer} style={{ transform: "scale(1.5)", transformOrigin: "top left" }} />
                 <div className="pdfViewer-annotationLayer"
                     style={{
                         height: this.props.parent.Document.nativeHeight, width: `100%`,
@@ -420,6 +493,10 @@ class Viewer extends React.Component<IViewerProps> {
                         }).map(anno => this.renderAnnotation(anno))}
                     </div>
                 </div>
+                <div className="pdfViewer-overlayCont" onPointerDown={(e) => e.stopPropagation()}>
+                    <input placeholder="Search" className="pdfViewer-overlaySearchBar" onChange={this.searchStringChanged} />
+                    <button title="Search" onClick={() => this.search(this._searchString)}><FontAwesomeIcon icon="search" size="3x" color="white" /></button>
+                </div>
             </div >
         );
     }
-- 
cgit v1.2.3-70-g09d2