fixed flicker when activating a PDF

6 files changed, 91 insertions, 97 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index c51fba908..f01c538e6 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -35,6 +35,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     private _goldenLayout: any = null;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
+    private _flush: boolean = false;
 
     constructor(props: SubCollectionViewProps) {
         super(props);
@@ -164,7 +165,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
     }
 
-    _flush: boolean = false;
     @action
     onPointerUp = (e: React.PointerEvent): void => {
         if (this._flush) {
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index fb9394d59..f496517f5 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -3,6 +3,7 @@
     .collectionfreeformview  > .jsx-parser{
         position:absolute;
         height: 100%;
+        width: 100%;
     }
         
     border-style: solid;
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index e8ebd50be..ac8c949a9 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -1,37 +1,18 @@
 
-import { IReactionDisposer } from 'mobx';
 import { observer } from "mobx-react";
-import { EditorView } from 'prosemirror-view';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { Opt, FieldWaiting } from '../../../fields/Field';
+import { FieldWaiting } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
-import { KeyValuePair } from "./KeyValuePair";
 import "./KeyValueBox.scss";
+import { KeyValuePair } from "./KeyValuePair";
 import React = require("react")
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
-    private _ref: React.RefObject<HTMLDivElement>;
-    private _editorView: Opt<EditorView>;
-    private _reactionDisposer: Opt<IReactionDisposer>;
-
-
-    constructor(props: FieldViewProps) {
-        super(props);
-
-        this._ref = React.createRef();
-    }
-
-
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
diff --git a/src/client/views/nodes/PDFNode.scss b/src/client/views/nodes/PDFNode.scss
index f4935cba9..18ebca952 100644
--- a/src/client/views/nodes/PDFNode.scss
+++ b/src/client/views/nodes/PDFNode.scss
@@ -1,9 +1,15 @@
 .react-pdf__Page {
     transform-origin: left top;
-    //transform: scale(0.2, 0.2);
     position: absolute;
 }
-.pdfButton-Tray {
+.react-pdf__Document {
+    position: absolute;
+}
+.pdfNode-buttonTray {
     position:absolute;
     z-index: 25;
+}
+.pdfNode-contentContainer {
+    position: absolute;
+    transform-origin: "left top";
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
index b6829f086..648bd3e62 100644
--- a/src/client/views/nodes/PDFNode.tsx
+++ b/src/client/views/nodes/PDFNode.tsx
@@ -1,4 +1,4 @@
-import { action, observable, _interceptReads } from 'mobx';
+import { action, observable, _interceptReads, computed } from 'mobx';
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import 'react-image-lightbox/style.css';
@@ -76,26 +76,29 @@ export class PDFNode extends React.Component<FieldViewProps> {
 
     private _highlightTool = React.createRef<HTMLButtonElement>(); //highlighter button reference
     private _highlightToolOn: boolean = false;
+    private _pdfCanvas: any;
 
-    @observable perPage: Object[] = []; //stores pageInfo
-    @observable pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
+    @observable private _perPageInfo: Object[] = []; //stores pageInfo
+    @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
 
-    @observable private page: number = 1; //default is the first page. 
-    @observable private numPage: number = 1; //default number of pages
-    private _pdfCanvas: any;
+    @observable private _currAnno: any = []
+    @observable private _page: number = 1; //default is the first page. 
+    @observable private _numPages: number = 1; //default number of pages
+    @observable private _interactive: boolean = false;
+    @observable private _loaded: boolean = false;
 
     /**
      * for pagination backwards
      */
     @action
     onPageBack = () => {
-        if (this.page > 1) {
-            this.page -= 1;
-            this.currAnno = [];
-            this.perPage[this.page] = this.pageInfo
-            this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
-            if (this.perPage[this.page - 1]) {
-                this.pageInfo = this.perPage[this.page - 1];
+        if (this._page > 1) {
+            this._page -= 1;
+            this._currAnno = [];
+            this._perPageInfo[this._page] = this._pageInfo
+            this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
+            if (this._perPageInfo[this._page - 1]) {
+                this._pageInfo = this._perPageInfo[this._page - 1];
             }
             this.saveThumbnail();
         }
@@ -106,13 +109,13 @@ export class PDFNode extends React.Component<FieldViewProps> {
      */
     @action
     onPageForward = () => {
-        if (this.page < this.numPage) {
-            this.page += 1;
-            this.currAnno = [];
-            this.perPage[this.page - 2] = this.pageInfo;
-            this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
-            if (this.perPage[this.page - 1]) {
-                this.pageInfo = this.perPage[this.page - 1];
+        if (this._page < this._numPages) {
+            this._page += 1;
+            this._currAnno = [];
+            this._perPageInfo[this._page - 2] = this._pageInfo;
+            this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default
+            if (this._perPageInfo[this._page - 1]) {
+                this._pageInfo = this._perPageInfo[this._page - 1];
             }
             this.saveThumbnail();
         }
@@ -196,7 +199,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
                     }
                 }
             }
-            this.pageInfo.divs.push(obj);
+            this._pageInfo.divs.push(obj);
 
         }
         document.designMode = "off";
@@ -224,27 +227,26 @@ export class PDFNode extends React.Component<FieldViewProps> {
     /**
      * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
      */
-    @observable private currAnno: any = []
     @action
     onEnter = (e: any) => {
         let span: HTMLSpanElement = e.toElement;
         let index: any;
-        this.pageInfo.divs.forEach((obj: any) => {
+        this._pageInfo.divs.forEach((obj: any) => {
             obj.spans.forEach((element: any) => {
                 if (element == span) {
                     if (!index) {
-                        index = this.pageInfo.divs.indexOf(obj);
+                        index = this._pageInfo.divs.indexOf(obj);
                     }
                 }
             })
         })
 
-        if (this.pageInfo.anno.length >= index + 1) {
-            if (this.currAnno.length == 0) {
-                this.currAnno.push(this.pageInfo.anno[index]);
+        if (this._pageInfo.anno.length >= index + 1) {
+            if (this._currAnno.length == 0) {
+                this._currAnno.push(this._pageInfo.anno[index]);
             }
         } else {
-            if (this.currAnno.length == 0) { //if there are no current annotation
+            if (this._currAnno.length == 0) { //if there are no current annotation
                 let div = span.offsetParent;
                 //@ts-ignore
                 let divX = div.style.left
@@ -253,9 +255,9 @@ export class PDFNode extends React.Component<FieldViewProps> {
                 //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={span} X={divX} Y={divY - 300} Highlights={this.pageInfo.divs} Annotations={this.pageInfo.anno} CurrAnno={this.currAnno} />
-                this.pageInfo.anno.push(annotation);
-                this.currAnno.push(annotation);
+                let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} />
+                this._pageInfo.anno.push(annotation);
+                this._currAnno.push(annotation);
             }
         }
 
@@ -314,7 +316,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
 
             if (this._mainDiv.current) {
                 let sticky = <Sticky key={Utils.GenerateGuid()} Height={height} Width={width} X={this.initX} Y={this.initY} />
-                this.pageInfo.area.push(sticky);
+                this._pageInfo.area.push(sticky);
             }
             this._toolOn = false;
         }
@@ -384,19 +386,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
     }
 
 
-    /**
-     * renders whole lot of shets, including pdf, stickies, and annotations. 
-     */
-
-    reHighlight = () => {
-        let div = document.getElementsByClassName("react-pdf__Page__textContent");
-        if (div) {
-
-        }
-
-    }
 
-    @observable _interactive: boolean = false;
 
     @action
     saveThumbnail = () => {
@@ -413,6 +403,7 @@ export class PDFNode extends React.Component<FieldViewProps> {
         }, 1000);
     }
 
+    @action
     onLoaded = (page: any) => {
         if (this._mainDiv.current) {
             this._mainDiv.current.childNodes.forEach((element) => {
@@ -429,10 +420,11 @@ export class PDFNode extends React.Component<FieldViewProps> {
                 }
             })
         }
-        this.numPage = page.transport.numPages
-        if (this.perPage.length == 0) { //Makes sure it only runs once
-            this.perPage = [...Array(this.numPage)]
+        this._numPages = page.transport.numPages
+        if (this._perPageInfo.length == 0) { //Makes sure it only runs once
+            this._perPageInfo = [...Array(this._numPages)]
         }
+        this._loaded = true;
     }
 
     @action
@@ -448,9 +440,11 @@ export class PDFNode extends React.Component<FieldViewProps> {
             this.saveThumbnail();
         }
     }
-    makeUIButtons() {
+
+    @computed
+    get uIButtons() {
         return (
-            <div className="pdfButton-tray" key="tray">
+            <div className="pdfNode-buttonTray" key="tray">
                 <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button>
                 <button className="pdfButton" onClick={this.onPageForward}>{">"}</button>
                 <button className="pdfButton" onClick={this.selectionTool}>{"Area"}</button>
@@ -462,32 +456,45 @@ export class PDFNode extends React.Component<FieldViewProps> {
                 <button className="pdfButton" ref={this._colorTool} onPointerDown={this.onColorChange}>{"Black"}</button>
             </div>);
     }
-    makePdfRenderer() {
-        let proxy = this.makeImageProxyRenderer();
+
+    @computed
+    get pdfContent() {
+        const renderHeight = 2400;
+        let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField);
+        let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight;
+        return <div className="pdfNode-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
+            <Document file={window.origin + "/corsProxy/" + `${pdfUrl}`}>
+                <Measure onResize={this.setScaling}>
+                    {({ measureRef }) =>
+                        <div className="pdfNode-page" ref={measureRef}>
+                            <Page height={renderHeight} pageNumber={this._page} onLoadSuccess={this.onLoaded} />
+                        </div>
+                    }
+                </Measure>
+            </Document>
+        </div >;
+    }
+
+    @computed
+    get pdfRenderer() {
+        let proxy = this._loaded ? (null) : this.imageProxyRenderer;
         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;
         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 >
+            this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
+            this._currAnno.map((element: any) => element),
+            this.uIButtons,
+            <div key="pdfNode-contentShell">
+                {this.pdfContent}
+                {proxy}
+            </div>
         ];
     }
-    makeImageProxyRenderer() {
+
+    @computed
+    get imageProxyRenderer() {
         let field = this.props.doc.Get(KeyStore.Thumbnail);
         if (field) {
             let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
@@ -496,13 +503,11 @@ export class PDFNode extends React.Component<FieldViewProps> {
         }
         return (null);
     }
+
     render() {
         return (
-            <div className="pdfNode-cont" ref={this._mainDiv}
-                onPointerDown={this.onPointerDown}
-                onPointerUp={this.onPointerUp}
-            >
-                {this.makePdfRenderer()}
+            <div className="pdfNode-cont" ref={this._mainDiv} onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} >
+                {this.pdfRenderer}
             </div >
         );
     }
diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index 700600804..a71325a65 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -40,6 +40,7 @@ export class ListField<T extends Field> extends BasicField<T[]> {
             this.observeDisposer()
         }
         this.data = observable(value);
+        this.updateProxies();
         this.observeList();
     }