fixed render size of pdfs & changed note backrounds contextually.

7 files changed, 111 insertions, 53 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d2183c90f..47b8ea844 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -99,7 +99,7 @@ export namespace Documents {
     function GetPdfPrototype(): Document {
         if (!pdfProto) {
             pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionView.LayoutString("AnnotationsKey"),
-                { x: 0, y: 0, nativeWidth: 300, nativeHeight: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
+                { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
             pdfProto.SetText(KeyStore.BackgroundLayout, PDFNode.LayoutString());
         }
         return pdfProto;
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index f432e8cc3..fb9394d59 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,9 +1,35 @@
 .collectionfreeformview-container {
 
+    .collectionfreeformview  > .jsx-parser{
+        position:absolute;
+        height: 100%;
+    }
+        
+    border-style: solid;
+    box-sizing: border-box;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .collectionfreeformview {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width:100%;
+        height: 100%;
+    }
+}
+.collectionfreeformview-overlay {
+
     .collectionfreeformview > .jsx-parser{
         position:absolute;
         height: 100%;
     }
+    .formattedTextBox-cont {
+        background:yellow;
+    }
         
     border-style: solid;
     box-sizing: border-box;
@@ -18,7 +44,7 @@
         top: 0;
         left: 0;
         width:100%;
-        height: 100%
+        height: 100%;
     }
 }
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 285d515cd..be5784b32 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -67,8 +67,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if ((e.button === 2 && this.props.active()) ||
-            !e.defaultPrevented) {
+        if (((e.button === 2 && this.props.active()) ||
+            !e.defaultPrevented) && (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
@@ -292,7 +292,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
 
         return (
-            <div className="collectionfreeformview-container"
+            <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
                 onPointerDown={this.onPointerDown}
                 onKeyPress={this.onKeyDown}
                 onWheel={this.onPointerWheel}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 31824763d..8d175ee35 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -126,7 +126,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 subView = <div></div>
                 break;
         }
-        return (<div onContextMenu={this.specificContextMenu}>
+        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
             {subView}
         </div>)
     }
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 >
         );
     }