From 20599dce380b63af37433614d74778fb4f3e20b6 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 7 Mar 2019 01:45:20 -0500 Subject: cleaned up PDF render and fixed dragging to show annotations. --- src/client/util/DragManager.ts | 34 ++++----- src/client/views/nodes/PDFNode.tsx | 144 ++++++++++++++++++------------------- 2 files changed, 87 insertions(+), 91 deletions(-) (limited to 'src') 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 { }); }, 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 { 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 ( -
- -
); + makeUIButtons() { + return ( +
+ + + + + + + + + +
); + } + 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(), +
+ + + {({ measureRef }) => +
+ +
+ } + + +
+ ]; + } + 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 ; } + return (null); + } + render() { return (
- - {this.pageInfo.area.filter(() => { - return this.pageInfo.area - }).map((element: any) => { - return element - }) - } - {this.currAnno.map((element: any) => { - return element - })} - -
- - - - - - - - - -
- -
- - - {({ measureRef }) => -
- { - 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)] - } - } - } - /> -
- } - - -
+ {this.makePdfRenderer()}
); } -- cgit v1.2.3-70-g09d2