diff options
| -rw-r--r-- | src/client/util/DragManager.ts | 34 | ||||
| -rw-r--r-- | src/client/views/nodes/PDFNode.tsx | 144 |
2 files changed, 87 insertions, 91 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 63f5616a9..a7af399e2 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -108,18 +108,7 @@ export namespace DragManager { let x = rect.left, y = rect.top; // const offsetX = e.x - rect.left, offsetY = e.y - rect.top; - // bcz: PDFs don't show up if you clone them -- presumably because they contain a canvas. - // however, PDF's have a thumbnail field that contains an image of the current page. - // so we use this image instead of the cloned element if it's present. - const docView: DocumentView = dragData["documentView"]; - const doc: Document = docView ? docView.props.Document : dragData["document"]; - let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField); - let img = thumbnail ? new Image() : null; - if (thumbnail) { - img!.src = thumbnail.toString(); - } - let dragElement = img ? img : ele.cloneNode(true) as HTMLElement; - + let dragElement = ele.cloneNode(true) as HTMLElement; dragElement.style.opacity = "0.7"; dragElement.style.position = "absolute"; dragElement.style.bottom = ""; @@ -129,10 +118,23 @@ export namespace DragManager { dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; dragElement.style.width = `${rect.width / scaleX}px`; dragElement.style.height = `${rect.height / scaleY}px`; - // It seems like the above code should be able to just be this: - // dragElement.style.transform = `translate(${x}px, ${y}px)`; - // dragElement.style.width = `${rect.width}px`; - // dragElement.style.height = `${rect.height}px`; + + // bcz: PDFs don't show up if you clone them because they contain a canvas. + // however, PDF's have a thumbnail field that contains an image of their canvas. + // So we replace the pdf's canvas with the image thumbnail + const docView: DocumentView = dragData["documentView"]; + const doc: Document = docView ? docView.props.Document : dragData["document"]; + var pdfNode = dragElement.getElementsByClassName("pdfNode-cont")[0] as HTMLElement; + let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField); + if (pdfNode && pdfNode.childElementCount && thumbnail) { + let img = new Image(); + img!.src = thumbnail.toString(); + img!.style.position = "absolute"; + img!.style.width = `${rect.width / scaleX}px`; + img!.style.height = `${rect.height / scaleY}px`; + pdfNode.replaceChild(img!, pdfNode.children[0]) + } + dragDiv.appendChild(dragElement); let hideSource = false; diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx index 0390d5e0d..b6829f086 100644 --- a/src/client/views/nodes/PDFNode.tsx +++ b/src/client/views/nodes/PDFNode.tsx @@ -412,6 +412,29 @@ export class PDFNode extends React.Component<FieldViewProps> { }); }, 1000); } + + onLoaded = (page: any) => { + if (this._mainDiv.current) { + this._mainDiv.current.childNodes.forEach((element) => { + if (element.nodeName == "DIV") { + element.childNodes[0].childNodes.forEach((e) => { + + if (e instanceof HTMLCanvasElement) { + this._pdfCanvas = e; + this._pdfContext = e.getContext("2d") + + } + + }) + } + }) + } + this.numPage = page.transport.numPages + if (this.perPage.length == 0) { //Makes sure it only runs once + this.perPage = [...Array(this.numPage)] + } + } + @action setScaling = (r: any) => { // bcz: the nativeHeight should really be set when the document is imported. @@ -425,90 +448,61 @@ export class PDFNode extends React.Component<FieldViewProps> { this.saveThumbnail(); } } - render() { - let field = this.props.doc.Get(KeyStore.Thumbnail); - if (!this._interactive && field) { - let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : - field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; - return ( - <div className="pdfNode-cont" ref={this._mainDiv} - onPointerDown={this.onPointerDown} - onPointerUp={this.onPointerUp} - > - <img src={path} width="100%" /> - </div>); + makeUIButtons() { + return ( + <div className="pdfButton-tray" key="tray"> + <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button> + <button className="pdfButton" onClick={this.onPageForward}>{">"}</button> + <button className="pdfButton" onClick={this.selectionTool}>{"Area"}</button> + <button className="pdfButton" style={{ color: "white", backgroundColor: "grey" }} onClick={this.onHighlight} ref={this._highlightTool}>Highlight</button> + <button className="pdfButton" style={{ color: "white", backgroundColor: "grey" }} ref={this._drawTool} onClick={this.onDraw}>{"Draw"}</button> + <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Red"}</button> + <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Blue"}</button> + <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Green"}</button> + <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Black"}</button> + </div>); + } + makePdfRenderer() { + let proxy = this.makeImageProxyRenderer(); + let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); + if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { + return proxy; } const renderHeight = 2400; let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; - var pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); - if (!pdfUrl || pdfUrl == FieldWaiting) { - return (null); + return [ + this.pageInfo.area.filter(() => this.pageInfo.area).map((element: any) => element), + this.currAnno.map((element: any) => element), + this.makeUIButtons(), + <div className="pdfContainer" key="container" style={{ transform: `scale(${xf}, ${xf})`, transformOrigin: "left top" }}> + <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}> + <Measure onResize={this.setScaling}> + {({ measureRef }) => + <div className="pdfNode-content" ref={measureRef}> + <Page height={renderHeight} pageNumber={this.page} onLoadSuccess={this.onLoaded} /> + </div> + } + </Measure> + </Document> + </div > + ]; + } + makeImageProxyRenderer() { + let field = this.props.doc.Get(KeyStore.Thumbnail); + if (field) { + let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : + field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; + return <img src={path} width="100%" />; } + return (null); + } + render() { return ( <div className="pdfNode-cont" ref={this._mainDiv} onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} > - - {this.pageInfo.area.filter(() => { - return this.pageInfo.area - }).map((element: any) => { - return element - }) - } - {this.currAnno.map((element: any) => { - return element - })} - - <div className="pdfButton-tray"> - <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button> - <button className="pdfButton" onClick={this.onPageForward}>{">"}</button> - <button className="pdfButton" onClick={this.selectionTool}>{"Area"}</button> - <button className="pdfButton" style={{ color: "white", backgroundColor: "grey" }} onClick={this.onHighlight} ref={this._highlightTool}>Highlight</button> - <button className="pdfButton" style={{ color: "white", backgroundColor: "grey" }} ref={this._drawTool} onClick={this.onDraw}>{"Draw"}</button> - <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Red"}</button> - <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Blue"}</button> - <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Green"}</button> - <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Black"}</button> - </div> - - <div className="pdfContainer" style={{ transform: `scale(${xf}, ${xf})`, transformOrigin: "left top" }}> - <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}> - <Measure onResize={this.setScaling}> - {({ measureRef }) => - <div className="pdfNode-content" ref={measureRef}> - <Page - height={renderHeight} - 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 instanceof HTMLCanvasElement) { - this._pdfCanvas = e; - this._pdfContext = e.getContext("2d") - - } - - }) - } - }) - } - this.numPage = page.transport.numPages - if (this.perPage.length == 0) { //Makes sure it only runs once - this.perPage = [...Array(this.numPage)] - } - } - } - /> - </div> - } - </Measure> - </Document> - </div > + {this.makePdfRenderer()} </div > ); } |