PDFNode

4 files changed, 387 insertions, 39 deletions

diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 123c76d19..2f7cbbcc4 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -10,15 +10,29 @@ import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView
 import { FieldWaiting } from '../../fields/Field';
 import { observer } from "mobx-react"
 import { observable, action } from 'mobx';
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+//@ts-ignore
+import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
+import { Utils } from '../../Utils';
+import { any } from 'prop-types';
+import { Sticky } from './Sticky';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
+    
     private _ref: React.RefObject<HTMLDivElement>;
+    
+    private _mainDiv = React.createRef<HTMLDivElement>()
+
     private _downX: number = 0;
     private _downY: number = 0;
     private _lastTap: number = 0;
+
+    @observable
+    private stickies:any[] = []
+
     @observable private _photoIndex: number = 0;
     @observable private _isOpen: boolean = false;
 
@@ -38,55 +52,197 @@ export class ImageBox extends React.Component<FieldViewProps> {
     componentWillUnmount() {
     }
 
-    onPointerDown = (e: React.PointerEvent): void => {
-        if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
-                e.stopPropagation();
-                this._downX = e.clientX;
-                this._downY = e.clientY;
-                document.removeEventListener("pointerup", this.onPointerUp);
-                document.addEventListener("pointerup", this.onPointerUp);
-            }
-        } else {
-            this._lastTap = Date.now();
+   
+
+    @action
+    onPageBack = () => {
+        if (this.page > 1){
+            this.page -= 1;  
+            this.stickies = this.stickiesPerPage[this.page - 1];  
         }
     }
+
     @action
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointerup", this.onPointerUp);
-        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
-            this._isOpen = true;
+    onPageForward = () => {
+        if (this.page < this.numPage){
+            this.page += 1; 
+            this.stickies = this.stickiesPerPage[this.page - 1];  
         }
-        e.stopPropagation();
     }
 
-    lightbox = (path: string) => {
-        const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
-        if (this._isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
-            return (<Lightbox
-                mainSrc={images[this._photoIndex]}
-                nextSrc={images[(this._photoIndex + 1) % images.length]}
-                prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
-                onCloseRequest={() => this.setState({ isOpen: false })}
-                onMovePrevRequest={action(() =>
-                    this._photoIndex = (this._photoIndex + images.length - 1) % images.length
-                )}
-                onMoveNextRequest={action(() =>
-                    this._photoIndex = (this._photoIndex + 1) % images.length
-                )}
-            />)
+    
+    @observable
+    searchText:string =  ''; 
+
+    @observable
+    page:number = 1; //default is the first page. 
+
+    @observable
+    numPage:number = 1; //default number of pages
+
+    @observable 
+    stickiesPerPage: any = [...Array(this.numPage)].map(() => Array(1)); //makes 2d array for storage
+
+    private textContent:any = null; 
+    
+    private initX:number = 0; 
+    private initY:number = 0; 
+
+    private _toolOn:boolean = false; 
+
+
+    selectionTool = () => {
+        this._toolOn = true; 
+    }
+
+    private _highlighter:boolean = false; 
+
+
+    onPointerDown = (e: React.PointerEvent) => {   
+  
+        if (this._toolOn){
+            let mouse = e.nativeEvent; 
+            this.initX = mouse.offsetX; 
+            this.initY = mouse.offsetY; 
+        }
+        if (this._highlighter){
+
         }
     }
 
-    render() {
-        let field = this.props.doc.Get(this.props.fieldKey);
-        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
-            field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
 
+     makeEditableAndHighlight = (colour:string) => {
+        var range, sel = window.getSelection();
+        if (sel.rangeCount && sel.getRangeAt) {
+            range = sel.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (range) {
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        if (!document.execCommand("HiliteColor", false, colour)) {
+            document.execCommand("HIliteColor", false, colour);
+        }
+        document.designMode = "off";
+    }
+    
+
+    highlight = (colour:string) => {
+        var range, sel;
+        if (window.getSelection()) {
+            try {
+                console.log(document.getSelection())
+
+                
+                if (!document.execCommand("HiliteColor", false, colour)) {
+                    this.makeEditableAndHighlight(colour);
+                } else if (document.execCommand("HiliteColor", false, "rgba(76, 175, 80, 0.3)")) {
+                    this.makeEditableAndHighlight("black"); 
+                }
+            } catch (ex) {
+                this.makeEditableAndHighlight(colour)
+            }
+        
+        } 
+    }
+
+    @action
+    onPointerUp = (e:React.PointerEvent) => {
+        this.highlight("rgba(76, 175, 80, 0.3)"); 
+       
+        if (this._toolOn){
+           
+            let mouse = e.nativeEvent; 
+            let finalX = mouse.offsetX; 
+            let finalY = mouse.offsetY;
+            let width = Math.abs(finalX - this.initX); 
+            let height = Math.abs(finalY - this.initY); 
+            
+            if (this._mainDiv.current){
+                let sticky = <Sticky key ={Utils.GenerateGuid()}Height = {height} Width = {width} X = {this.initX} Y = {this.initY}/>
+                this.stickies.push(sticky); 
+                //this.stickiesPerPage[this.page - 1].push(sticky); 
+            } 
+
+            this._toolOn = false; 
+        }
+        
+    }
+
+
+    displaySticky = () => {
+        try{
+            this.stickies.filter( () => {
+                            return this.stickies[this.stickies.length - 1]
+                        }).map( (element: any) => {
+                            return element
+            })
+        } catch (ex) {
+            console.log(ex); //should be null
+        }
+    }
+    render() {
         return (
-            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width="100%" alt="Image not found" />
-                {this.lightbox(path)}
-            </div>)
+            <div ref = {this._mainDiv}
+            onPointerDown ={this.onPointerDown}
+            onPointerUp = {this.onPointerUp}
+            >
+                { this.stickies.filter( () => {
+                        return this.stickies[this.stickies.length - 1]
+                    }).map( (element: any) => {
+                        return element
+                    }) 
+                }
+                    
+                    
+                    
+                }
+                }
+            
+                
+                <button onClick = {this.onPageBack}>{"<"}</button>
+                <button onClick = {this.onPageForward}>{">"}</button>
+                <button onClick ={this.selectionTool}>{"Area"}</button>
+                <Document
+                    file={Utils.pdf_example}
+
+                    onLoadError={
+                        (error: any) => {
+                            console.log(error);
+                        }
+                    }
+                >
+                    <Page
+                        pageNumber={this.page}
+                      
+                        onLoadSuccess={
+                            (page: PDFPageProxy) => {
+                                page.getTextContent().then((obj:any) => {
+                                    this.textContent = obj
+                                });
+                                this.numPage = page.transport.numPages
+                                
+                            }
+                        }
+
+                        onGetAnnotationSuccess = {
+                            (anno: any) => {
+                                console.log(anno)
+                            }
+                        }
+
+                       
+                        
+                    />
+
+
+
+
+                </Document>
+
+
+            </div>
+        );
     }
 }
\ No newline at end of file
diff --git a/src/views/nodes/PDFBox.scss b/src/views/nodes/PDFBox.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/views/nodes/PDFBox.scss
diff --git a/src/views/nodes/PDFBox.tsx b/src/views/nodes/PDFBox.tsx
new file mode 100644
index 000000000..6d881d530
--- /dev/null
+++ b/src/views/nodes/PDFBox.tsx
@@ -0,0 +1,102 @@
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { SelectionManager } from "../../util/SelectionManager";
+import "./ImageBox.scss";
+import React = require("react")
+import { PDFField } from '../../fields/PDFField';
+import { FieldViewProps, FieldView } from './FieldView';
+import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
+import { FieldWaiting } from '../../fields/Field';
+import { observer } from "mobx-react"
+
+const {PdfLoader,
+    PdfHighlighter,
+    Tip,
+    Highlight,
+    Popup,
+    Spinner,
+    AreaHighlight} = require( "react-pdf-highlighter" )
+
+import { observable, action } from 'mobx';
+
+@observer
+export class PDFBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    private _lastTap: number = 0;
+    @observable private _photoIndex: number = 0;
+    @observable private _isOpen: boolean = false;
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+        this.state = {
+            photoIndex: 0,
+            isOpen: false,
+            
+        };
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (Date.now() - this._lastTap < 300) {
+            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+                e.stopPropagation();
+                this._downX = e.clientX;
+                
+                this._downY = e.clientY;
+                document.removeEventListener("pointerup", this.onPointerUp);
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        } else {
+            this._lastTap = Date.now();
+        }
+    }
+    @action
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointerup", this.onPointerUp);
+        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+            this._isOpen = true;
+        }
+        e.stopPropagation();
+    }
+
+    lightbox = (path: string) => {
+        const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
+        if (this._isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+            return (<Lightbox
+                mainSrc={images[this._photoIndex]}
+                nextSrc={images[(this._photoIndex + 1) % images.length]}
+                prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
+                onCloseRequest={() => this.setState({ isOpen: false })}
+                onMovePrevRequest={action(() =>
+                    this._photoIndex = (this._photoIndex + images.length - 1) % images.length
+                )}
+                onMoveNextRequest={action(() =>
+                    this._photoIndex = (this._photoIndex + 1) % images.length
+                )}
+            />)
+        }
+    }
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey);
+        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+            field instanceof PDFField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+
+        return (
+            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+                <PdfLoader url={"https://arxiv.org/pdf/1708.08021.pdf"}/> 
+                
+            </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/Sticky.tsx b/src/views/nodes/Sticky.tsx
new file mode 100644
index 000000000..254c410c2
--- /dev/null
+++ b/src/views/nodes/Sticky.tsx
@@ -0,0 +1,90 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { SelectionManager } from "../../util/SelectionManager";
+import "./ImageBox.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+//@ts-ignore
+import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
+import { Utils } from '../../Utils';
+
+
+interface IProps{
+    Height:number; 
+    Width:number; 
+    X:number;
+    Y:number;
+}
+
+
+
+@observer
+export class Sticky extends React.Component<IProps> {
+
+    
+    private initX:number = 0; 
+    private initY:number = 0; 
+
+    private _ref = React.createRef<HTMLCanvasElement>(); 
+    private ctx:any;
+  
+
+
+    drawDown = (e:React.PointerEvent) => {
+        if (this._ref.current){
+            this.ctx = this._ref.current.getContext("2d");
+            let mouse = e.nativeEvent; 
+            this.initX = mouse.offsetX; 
+            this.initY = mouse.offsetY; 
+
+            //do thiiissss
+            this.ctx.lineWidth; 
+
+            this.ctx.beginPath();
+            this.ctx.lineTo(this.initX, this.initY); 
+            this.ctx.strokeStyle = "black"; 
+
+            document.addEventListener("pointermove", this.drawMove); 
+            document.addEventListener("pointerup", this.drawUp); 
+        }
+    }
+
+    //when user drags 
+    drawMove = (e: PointerEvent):void =>{
+        //x and y mouse movement
+        let x = this.initX += e.movementX, 
+            y = this.initY += e.movementY; 
+        //connects the point 
+        this.ctx.lineTo(x, y); 
+        this.ctx.stroke(); 
+    }
+
+    drawUp = (e:PointerEvent) => {
+        this.ctx.closePath();  
+        document.removeEventListener("pointermove", this.drawMove);
+    }
+
+    
+
+    render() {
+        return (
+            <div onPointerDown = {this.drawDown}>
+                <canvas ref = {this._ref} height = {this.props.Height} width = {this.props.Width}
+                
+                style = {{position:"absolute",
+                    top: "20px", 
+                    left: "0px",  
+                    zIndex: 1, 
+                    background: "yellow", 
+                    transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+                    opacity: 0.4
+                }}
+            
+                /> 
+
+            </div>
+        );
+    }
+}
\ No newline at end of file