From f2d02089b6b749929b7fc3d522ac176b7f6027fd Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 6 Mar 2019 17:59:15 -0500
Subject: fixed render size of pdfs & changed note backrounds contextually.

---
 src/client/views/nodes/FormattedTextBox.scss |   8 +-
 src/client/views/nodes/PDFNode.scss          |   9 +++
 src/client/views/nodes/PDFNode.tsx           | 109 ++++++++++++++++-----------
 3 files changed, 79 insertions(+), 47 deletions(-)
 create mode 100644 src/client/views/nodes/PDFNode.scss

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 21bd43b6e..3e21f34de 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -11,8 +11,12 @@
 .formattedTextBox-cont {
     background: white;
     padding: 1;
-    border: black;
-    border-width: 10;
+    border-width: 1px;
+    border-radius: 2px;
+    border-color:black;
+    box-sizing: border-box;
+    background: white;
+    border-style:solid;
     overflow-y: scroll;
     overflow-x: hidden;
     color: initial;
diff --git a/src/client/views/nodes/PDFNode.scss b/src/client/views/nodes/PDFNode.scss
new file mode 100644
index 000000000..f4935cba9
--- /dev/null
+++ b/src/client/views/nodes/PDFNode.scss
@@ -0,0 +1,9 @@
+.react-pdf__Page {
+    transform-origin: left top;
+    //transform: scale(0.2, 0.2);
+    position: absolute;
+}
+.pdfButton-Tray {
+    position:absolute;
+    z-index: 25;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
index 16afdccd8..b80283065 100644
--- a/src/client/views/nodes/PDFNode.tsx
+++ b/src/client/views/nodes/PDFNode.tsx
@@ -12,6 +12,9 @@ import "./ImageBox.scss";
 import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
 import React = require("react")
 import { KeyStore } from '../../../fields/KeyStore';
+import "./PDFNode.scss";
+import { PDFField } from '../../../fields/PDFField';
+import { FieldWaiting } from '../../../fields/Field';
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -392,10 +395,21 @@ export class PDFNode extends React.Component<FieldViewProps> {
 
     @action
     setScaling = (r: any) => {
-        this.props.doc.SetNumber(KeyStore.NativeWidth, r.entry.width);
-        this.props.doc.SetNumber(KeyStore.NativeHeight, r.entry.height);
+        // bcz: the nativeHeight should really be set when the document is imported.
+        //      also, the native dimensions could be different for different pages of the PDF
+        //      so this design is flawed.
+        var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0);
+        if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) {
+            this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width);
+        }
     }
     render() {
+        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 (
             <div className="pdfNode-cont" ref={this._mainDiv}
                 onPointerDown={this.onPointerDown}
@@ -412,51 +426,56 @@ export class PDFNode extends React.Component<FieldViewProps> {
                     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={window.origin + "/corsProxy/https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"}>
-                    <Measure onResize={this.setScaling}>
-                        {({ measureRef }) =>
-                            <div className="pdfNode-content" ref={measureRef}>
-                                <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 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 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>
+                                    />
+                                </div>
+                            }
+                        </Measure>
+                    </Document>
+                </div >
+            </div >
         );
     }
 
-- 
cgit v1.2.3-70-g09d2