transition from ImageBox to PDFNode. Annotations also now indexable per page, similar to stickies/area selection

1 files changed, 3 insertions, 383 deletions

diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index c145280a1..566e5716e 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -8,393 +8,13 @@ import 'react-pdf/dist/Page/AnnotationLayer.css'
 //@ts-ignore
 import { Document, Page, PDFPageProxy, PageAnnotation} from "react-pdf";
 import { Utils } from '../../Utils';
-import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
+import { Sticky } from './Sticky'; 
 import { Annotation } from './Annotation';
 
-/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
- * 
- * Ok, so I know I built PDFNode on a ImageBox, but this method works... maybe make a duplicate
- * and call it PDFNode. 
- * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
- * area selection (I call it stickies), embedded ink node for directly annotating using a pen or 
- * mouse, and pagination. 
- * 
- * Clearly, everything works perfectly. No bugs. Might as well publish it.
- * 
- * ps watch out for some bugs. When highlighting, just highlight a section of one line... do not multiline highlight... plz
- * 
- * 
- * 
- * 
- * 
- * HOW TO USE: 
- * AREA selection: 
- *          1) Click on Area button. 
- *          2) click on any part of the PDF, and drag to get desired sized area shape
- *          3) You can write on the area (hence the reason why it's called sticky)
- *          4) to make another area, you need to click on area button AGAIN. 
- * 
- * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...)
- *          1) just click and drag on a text
- *          2) click highlight
- *          3) for annotation, just pull your cursor over to that text
- *          4) another method: click on highlight first and then drag on your desired text
- *          5) To make another highlight, you need to reclick on the button 
- * 
- * Draw:
- *          1) click draw and select color. then just draw like there's no tomorrow.
- *          2) once you finish drawing your masterpiece, just reclick on the draw button to end your drawing session. 
- * 
- * Pagination:
- *          1) click on arrows. You'll notice that stickies will stay in those page. But... highlights won't. 
- *          2) to test this out, make few area/stickies and then click on next page then come back. You'll see that they are all saved. 
- *
- * 
- * written by: Andrew Kim 
+/** PDF has been moved to PDFNode now. This is now a dummy ImageBox that should be replaced with current
+ * ImageBox. 
  */
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
     public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
-
-    private _mainDiv = React.createRef<HTMLDivElement>()
-    private _pdf = React.createRef<HTMLCanvasElement>();
-    
-    //very useful for keeping track of X and y position throughout the PDF Canvas
-    private initX:number = 0; 
-    private initY:number = 0; 
-
-    //checks if tool is on
-    private _toolOn:boolean = false; //checks if tool is on
-    private _pdfContext:any = null; //gets pdf context
-    private bool:Boolean = false; //general boolean debounce
-    private currSpan:any;//keeps track of current span (for highlighting)
-   
-    private _currTool: any; //keeps track of current tool button reference
-    private _drawToolOn:boolean = false; //boolean that keeps track of the drawing tool 
-    private _drawTool = React.createRef<HTMLButtonElement>()//drawing tool button reference
-    
-    private _colorTool = React.createRef<HTMLButtonElement>(); //color button reference
-    private _currColor:string = "black"; //current color that user selected (for ink/pen)
-     
-    private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference
-    private _highlightToolOn:boolean = false; 
-
-    @observable private stickies:any[] = [] //for storing CURRENT stickies
-    @observable private page:number = 1; //default is the first page. 
-    @observable private numPage:number = 1; //default number of pages
-    @observable private stickiesPerPage: any = null; //for indexing stickies for EVERY PAGE
-    @observable private annotations:any[] = []; //keeps track of annotations
-
-    /**
-     * for pagination backwards
-     */
-    @action
-    onPageBack = () => {
-        if (this.page > 1){
-            this.page -= 1; 
-            this.stickiesPerPage[this.page] = this.stickies; //stores previous sticky and indexes to stickiesPerPage
-            this.stickies = []; //sets stickies to null array
-            if (this.stickies){//checks stickies is null or not
-                this.stickies = this.stickiesPerPage[this.page - 1]; //pulls up stickies for this page
-            }
-            
-        }
-    }
-
-    /**
-     * for pagination forwards
-     */
-    @action
-    onPageForward = () => {
-        if (this.page < this.numPage){
-            this.page += 1; 
-            this.stickiesPerPage[this.page - 2] = this.stickies; //stores previous sticky and indexes to stickiesPerPage
-            this.stickies = []; //sets stickies to null array
-            if (this.stickiesPerPage[this.page - 1]){ 
-                   this.stickies = this.stickiesPerPage[this.page - 1];  //pulls up sticky for this page
-            }
-        }
-    }
-   
-    /**
-     * selection tool used for area highlighting (stickies). Kinda temporary
-     */
-    selectionTool = () => {
-        this._toolOn = true; 
-    }
-    /**
-     * when user draws on the canvas. When mouse pointer is down 
-     */
-    drawDown = (e:PointerEvent) => {
-            this.initX = e.offsetX; 
-            this.initY = e.offsetY; 
-            this._pdfContext.beginPath();
-            this._pdfContext.lineTo(this.initX, this.initY); 
-            this._pdfContext.strokeStyle = this._currColor; 
-            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._pdfContext.lineTo(x, y); 
-        this._pdfContext.stroke(); 
-    }
-
-    drawUp = (e:PointerEvent) => {
-        this._pdfContext.closePath();  
-        document.removeEventListener("pointermove", this.drawMove);
-        document.removeEventListener("pointerdown", this.drawDown);
-        document.addEventListener("pointerdown", this.drawDown); 
-    }
-
-    
-    /**
-     * highlighting helper function
-     */
-    makeEditableAndHighlight = (colour:string) => {
-        var range, sel = window.getSelection();
-        if (sel.rangeCount && sel.getRangeAt) {
-            range = sel.getRangeAt(0);
-        }
-        document.designMode = "on";
-        if (!document.execCommand("HiliteColor", false, colour)) {
-            document.execCommand("HiliteColor", false, colour);
-        }
-        
-        if (range) {
-            sel.removeAllRanges();
-            sel.addRange(range);
-            let element = range.commonAncestorContainer.parentElement
-            if (element){
-                let childNodes = element.childNodes; 
-                childNodes.forEach((e) => {
-                    if (e.nodeName == "SPAN"){ 
-                        let span = e; 
-                        span.addEventListener("mouseover", this.onEnter); 
-                    }
-                })
-            }
-        }
-        document.designMode = "off";
-    }
-    
-    /**
-     * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
-     */
-    @action
-    onEnter = (e:any) => {
-        let span:HTMLSpanElement = e.toElement;
-        this.currSpan = span;  
-        if (e.toElement instanceof HTMLSpanElement){   
-            this.bool = true; 
-            this.currSpan = span; 
-            if(span.children.length == 0){ //this is why it only works for one div text lines... needs fix
-               if(span.offsetParent){
-                   let div = span.offsetParent;  
-                   //@ts-ignore
-                   let divX = div.style.left  
-                   //@ts-ignore
-                   let divY = div.style.top
-                   //slicing "px" from the end
-                   divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
-                   divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
-                   let annotation = <Annotation key ={Utils.GenerateGuid()} Span = {this.currSpan} X = {divX} Y = {divY - 300} />
-                   this.annotations.push(annotation); 
-               } 
-            }
-        }
-    }
-
-    /**
-     * highlight function for highlighting actual text. This works fine. 
-     */
-    highlight = (color:string) => {
-        if (window.getSelection()) {
-            try {
-                if (!document.execCommand("hiliteColor", false, color)) {
-                    this.makeEditableAndHighlight(color);
-                }
-                //when the color is not the highlight color
-            } catch (ex) {
-                this.makeEditableAndHighlight(color)
-            }
-        } 
-    }
-
-    /**
-     * controls the area highlighting (stickies) Kinda temporary
-     */
-    onPointerDown = (e: React.PointerEvent) => {    
-        if (this._toolOn){
-            let mouse = e.nativeEvent; 
-            this.initX = mouse.offsetX; 
-            this.initY = mouse.offsetY; 
-            
-        }
-    }
-
-    /**
-     * controls area highlighting and partially highlighting. Kinda temporary
-     */
-    @action
-    onPointerUp = (e:React.PointerEvent) => {
-      if (this._highlightToolOn){
-           this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. 
-           this._highlightToolOn = false; 
-       }
-        if (this._toolOn){
-            let mouse = e.nativeEvent; 
-            let finalX = mouse.offsetX; 
-            let finalY = mouse.offsetY;
-            let width = Math.abs(finalX - this.initX); //width
-            let height = Math.abs(finalY - this.initY); //height
-        
-            //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky
-            if (finalX < this.initX){
-                this.initX = finalX; 
-            }
-            if (finalY < this.initY){
-                this.initY = finalY; 
-            }
-
-            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._toolOn = false; 
-        }
-        
-    }
-   
-    /**
-     * starts drawing the line when user presses down. 
-     */
-    onDraw = () => {
-        if (this._currTool != null){
-            this._currTool.style.backgroundColor = "grey";
-        }
-        this._highlightToolOn = false; 
-        if (this._drawTool.current){
-            this._currTool = this._drawTool.current; 
-            if (this._drawToolOn){
-                this._drawToolOn = false; 
-                document.removeEventListener("pointerdown", this.drawDown);
-                document.removeEventListener("pointerup", this.drawUp);
-                document.removeEventListener("pointermove", this.drawMove);
-                this._drawTool.current.style.backgroundColor = "grey";
-            } else {
-                this._drawToolOn = true; 
-                document.addEventListener("pointerdown", this.drawDown);
-                this._drawTool.current.style.backgroundColor = "cyan";
-            }
-        }
-    }
-
-   
-    /**
-     * for changing color (for ink/pen)
-     */
-    onColorChange = (e:React.PointerEvent) => {
-        if (e.currentTarget.innerHTML == "Red"){
-            this._currColor = "red"; 
-        } else if (e.currentTarget.innerHTML == "Blue"){
-            this._currColor = "blue"; 
-        } else if (e.currentTarget.innerHTML == "Green"){
-            this._currColor = "green"; 
-        } else if (e.currentTarget.innerHTML == "Black"){
-            this._currColor = "black"; 
-        }
-      
-    }
-
-   
-    /**
-     * For highlighting (text drag highlighting)
-     */
-    onHighlight = () => {
-        this._drawToolOn = false; 
-        if (this._currTool != null){
-            this._currTool.style.backgroundColor = "grey";
-        }
-            if (this._highlightTool.current){
-                this._currTool = this._drawTool.current;
-                if (this._highlightToolOn){
-                    this._highlightToolOn = false; 
-                    this._highlightTool.current.style.backgroundColor = "grey";
-                } else {
-                    this._highlightToolOn = true; 
-                    this.highlight("rgba(76, 175, 80, 0.3)"); 
-                    this._highlightTool.current.style.backgroundColor = "orange";
-                }
-        }
-    }
-
-
-    /**
-     * renders whole lot of shets, including pdf, stickies, and annotations. 
-     */
-
-    render() {
-        return (
-            <div ref = {this._mainDiv}
-            onPointerDown ={this.onPointerDown}
-            onPointerUp = {this.onPointerUp}
-            >
-                {this.stickies.filter( () => { //for loading stickies (area)
-                        return this.stickies[this.stickies.length - 1]
-                    }).map( (element: any) => {
-                        return element
-                    }) 
-                }     
-                {this.annotations.filter( () => { //for loading annotations
-                        return this.annotations[this.annotations.length - 1]
-                    }).map( (element: any) => {
-                        return element
-                    }) 
-                }                    
-               
-                <button onClick = {this.onPageBack}>{"<"}</button>
-                <button onClick = {this.onPageForward}>{">"}</button>
-                <button onClick ={this.selectionTool}>{"Area"}</button>
-                <button style ={{color: "white", backgroundColor: "grey"}} onClick = {this.onHighlight} ref = {this._highlightTool}>Highlight</button>
-                <button style ={{color: "white", backgroundColor: "grey"}} ref = {this._drawTool} onClick = {this.onDraw}>{"Draw"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Red"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Blue"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Green"}</button>
-                <button ref = {this._colorTool} onPointerDown = {this.onColorChange}>{"Black"}</button>
-            
-                <Document  file={Utils.pdf_example}>
-                    <Page
-                        pageNumber={this.page}
-                        onLoadSuccess={
-                            (page:any) => {
-                                if (this._mainDiv.current){
-                                    this._mainDiv.current.childNodes.forEach((element) => {
-                                        if (element.nodeName == "DIV"){
-                                            element.childNodes[0].childNodes.forEach((e) => {
-                                               if (e.nodeName == "CANVAS"){
-                                                   //@ts-ignore
-                                                   this._pdfContext = e.getContext("2d")
-                                               }
-                                            })
-                                        }
-                                    })
-                                }
-                                this.numPage = page.transport.numPages
-                                if (this.stickiesPerPage == null){ //only runs once, when stickiesPerPage is null
-                                    this.stickiesPerPage = [...Array(this.numPage)].map(() => Array(1)); 
-                                }
-                            }
-                        }
-                    />  
-                </Document>
-            </div>
-        );
-    }
 }
\ No newline at end of file