From 30986620c34c93e12509b2875e90cf5876838403 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Mon, 18 Feb 2019 18:52:30 -0500
Subject: transforms

---
 src/client/views/collections/CollectionDockingView.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index c870a9cf0..310933275 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -229,6 +229,7 @@ export class CollectionDockingView extends CollectionViewBase {
                 .off('click') //unbind the current click handler
                 .click(function () {
                     //if (confirm('really close this?')) {
+                    console.log("closing!")
                     stack.remove();
                     //}
                 });
-- 
cgit v1.2.3-70-g09d2


From 953a11d8f5c46d8900032f16867660401673cc73 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Mon, 18 Feb 2019 19:04:08 -0500
Subject: transforms update 2

---
 .../views/collections/CollectionDockingView.tsx    | 117 ++++++++++-----------
 1 file changed, 58 insertions(+), 59 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 472f8a4d2..c870a9cf0 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -4,17 +4,18 @@ import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import { action, computed, reaction, observable } from "mobx";
 import { observer } from "mobx-react";
+import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/Key";
 import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
 import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import React = require("react");
-import * as ReactDOM from 'react-dom';
-import Measure from "react-measure";
+import { changeDependenciesStateTo0 } from "mobx/lib/internal";
 import { Utils } from "../../../Utils";
 
 @observer
@@ -67,6 +68,7 @@ export class CollectionDockingView extends CollectionViewBase {
     }
     private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
 
+
     @action
     onResize = (event: any) => {
         var cur = this.props.ContainingDocumentView!.MainContent.current;
@@ -98,7 +100,7 @@ export class CollectionDockingView extends CollectionViewBase {
             if (value[i].Id === component) {
                 return (<DocumentView key={value[i].Id} Document={value[i]}
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                    ScreenToLocalTransform={() => Transform.Identity}
+                    GetTransform={() => Transform.Identity}
                     isTopMost={true}
                     Scaling={1}
                     ContainingCollectionView={this} DocumentView={undefined} />);
@@ -111,6 +113,7 @@ export class CollectionDockingView extends CollectionViewBase {
 
     public static myLayout: any = null;
 
+    public rcs: Array<RenderClass> = new Array();
     private static _dragDiv: any = null;
     private static _dragParent: HTMLElement | null = null;
     private static _dragElement: HTMLDivElement;
@@ -226,7 +229,6 @@ export class CollectionDockingView extends CollectionViewBase {
                 .off('click') //unbind the current click handler
                 .click(function () {
                     //if (confirm('really close this?')) {
-                    console.log("closing!")
                     stack.remove();
                     //}
                 });
@@ -241,19 +243,10 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
-                let divContainer = document.getElementById(containingDiv) as HTMLDivElement;
-                if (divContainer) {
-                    let props: DockingProps = {
-                        ContainingDiv: containingDiv,
-                        Document: state.doc,
-                        Container: container,
-                        CollectionDockingView: me,
-                        HtmlElement: divContainer,
-                    }
-                    ReactDOM.render((<RenderClass {...props} />), divContainer);
-                    if (CollectionDockingView.myLayout._maxstack) {
-                        CollectionDockingView.myLayout._maxstack.click();
-                    }
+                state.rc = new RenderClass(containingDiv, state.doc, me, container);
+                me.rcs.push(state.rc);
+                if (CollectionDockingView.myLayout._maxstack != null) {
+                    CollectionDockingView.myLayout._maxstack.click();
                 }
             }, 0);
         });
@@ -267,8 +260,8 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
         var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
-        var w = Document.GetNumber(KeyStore.Width, 0) / s;
-        var h = Document.GetNumber(KeyStore.Height, 0) / s;
+        var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s;
+        var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s;
 
         var chooseLayout = () => {
             if (!CollectionDockingView.UseGoldenLayout)
@@ -276,54 +269,60 @@ export class CollectionDockingView extends CollectionViewBase {
         }
 
         return (
-            <div className="collectiondockingview-container" id="menuContainer"
-                onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
-                style={{
-                    width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
-                    height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH,
-                    borderStyle: "solid",
-                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-                }} >
-                {chooseLayout()}
+            <div className="border" style={{
+                borderStyle: "solid",
+                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+            }}>
+                <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                    style={{
+                        width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
+                        height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH
+                    }} >
+                    {chooseLayout()}
+                </div>
             </div>
         );
     }
 }
 
-interface DockingProps {
-    ContainingDiv: string,
-    Document: Document,
-    Container: any,
-    HtmlElement: HTMLElement,
-    CollectionDockingView: CollectionDockingView,
-}
-@observer
-export class RenderClass extends React.Component<DockingProps> {
-    @observable
-    private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+class RenderClass {
+
+    @observable _resizeCount: number = 0;
 
+    _collectionDockingView: CollectionDockingView;
+    _htmlElement: any;
+    _document: Document;
+    constructor(containingDiv: string, doc: Document, me: CollectionDockingView, container: any) {
+        this._collectionDockingView = me;
+        this._htmlElement = document.getElementById(containingDiv);
+        this._document = doc;
+        container.on('resize', action((e: any) => {
+            var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+            if (this._htmlElement != null && this._htmlElement.childElementCount > 0 && nativeWidth > 0) {
+                let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
+                (this._htmlElement!.children[0] as any).style.transformOrigin = "0px 0px";
+                (this._htmlElement!.children[0] as any).style.transform = `translate(0px,0px)  scale(${scaling}, ${scaling}) `;
+                (this._htmlElement!.children[0] as any).style.width = nativeWidth.toString() + "px";
+            }
+        }));
+
+        this.render();
+    }
     render() {
-        let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-        var layout = this.props.Document.GetText(KeyStore.Layout, "");
-        var content =
-            <DocumentView key={this.props.Document.Id} Document={this.props.Document}
-                AddDocument={this.props.CollectionDockingView.addDocument}
-                RemoveDocument={this.props.CollectionDockingView.removeDocument}
-                Scaling={this._parentScaling}
-                ScreenToLocalTransform={() => {
-                    let { scale, translateX, translateY } = Utils.GetScreenTransform(this.props.HtmlElement);
-                    return this.props.CollectionDockingView.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale)
+        let nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0);
+        let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
+        ReactDOM.render((
+            <DocumentView key={this._document.Id} Document={this._document}
+                AddDocument={this._collectionDockingView.addDocument} RemoveDocument={this._collectionDockingView.removeDocument}
+                GetTransform={() => {
+                    let { scale, translateX, translateY } = Utils.GetScreenTransform(this._htmlElement);
+                    return this._collectionDockingView.props.GetTransform().scale(scale).translate(-translateX, -translateY)
                 }}
                 isTopMost={true}
-                ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} />
-
-        if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) {
-            return <Measure onResize={
-                action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}
-            >
-                {({ measureRef }) => <div ref={measureRef}> {content} </div>}
-            </Measure>
-        }
-        return <div> {content} </div>
+                Scaling={scaling}
+                ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} />
+        ),
+            this._htmlElement
+        );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 0ac7f12d00273003b0d0ca87df7bf553fa2e93c0 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 19 Feb 2019 16:08:16 -0500
Subject: centering update 2/19

---
 src/client/views/DocumentManager.tsx               | 30 +++++++++++++++-------
 .../views/collections/CollectionDockingView.tsx    |  6 ++---
 2 files changed, 24 insertions(+), 12 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx
index 4d8756107..81231bf13 100644
--- a/src/client/views/DocumentManager.tsx
+++ b/src/client/views/DocumentManager.tsx
@@ -102,9 +102,9 @@ export class DocumentManager {
                 // XView = (-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2);
                 // YView = (-node.Y * scale) + (window.innerHeight / 2) - (node.Height * scale / 2);
                 // RootStore.Instance.MainNodeCollection.SetViewportXY(XView, YView);
-                scale = docView.props.GetTransform().Scale
-                XView = (-docView.props.GetTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2)
-                YView = (-docView.props.GetTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2)
+                scale = docView.props.ScreenToLocalTransform().Scale
+                XView = (-docView.props.ScreenToLocalTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2)
+                YView = (-docView.props.ScreenToLocalTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2)
                 //set x and y view of parent
             }
             //parent is not main, parent is centered and calls itself
@@ -118,19 +118,31 @@ export class DocumentManager {
 
                     let tempView = this.getDocumentView(docView.props.ContainingCollectionView.props.DocumentForCollection)
 
-                    console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0))
+                    //console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0))
+
+                    // let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0)
+                    // let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0)
 
                     let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0)
                     let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0)
+                    //_htmlElement!.clientWidth
 
-                    console.log("parent width: " + parentWidth + ", parent height: " + parentHeight)
+                    // console.log("window width: " + window.innerWidth + ", window height: " + window.innerHeight)
+                    // console.log("parent width: " + parentWidth + ", parent height: " + parentHeight)
 
 
                     if (tempView != null) {
                         console.log("View is NOT null")
-                        scale = tempView.props.GetTransform().Scale
-                        XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2);
-                        YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2);
+                        scale = tempView.props.ScreenToLocalTransform().Scale
+
+                        parentWidth *= scale
+                        parentHeight *= scale
+
+                        console.log("window width: " + window.innerWidth + ", window height: " + window.innerHeight)
+                        console.log("parent width: " + parentWidth + ", parent height: " + parentHeight)
+
+                        XView = (-docView.props.ScreenToLocalTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2);
+                        YView = (-docView.props.ScreenToLocalTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2);
                         //node.Parent.setViewportXY(XView, YView);
                         this.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
 
@@ -143,7 +155,7 @@ export class DocumentManager {
 
     private setViewportXY(collection: CollectionViewBase, x: number, y: number) {
         if (collection.props.BackgroundView != null) {
-            collection.props.BackgroundView.props.GetTransform().center(x, y)
+            collection.props.ScreenToLocalTransform().center(x, y)
         }
     }
 
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index c870a9cf0..6a0a1de78 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -100,7 +100,7 @@ export class CollectionDockingView extends CollectionViewBase {
             if (value[i].Id === component) {
                 return (<DocumentView key={value[i].Id} Document={value[i]}
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                    GetTransform={() => Transform.Identity}
+                    ScreenToLocalTransform={() => Transform.Identity}
                     isTopMost={true}
                     Scaling={1}
                     ContainingCollectionView={this} DocumentView={undefined} />);
@@ -314,9 +314,9 @@ class RenderClass {
         ReactDOM.render((
             <DocumentView key={this._document.Id} Document={this._document}
                 AddDocument={this._collectionDockingView.addDocument} RemoveDocument={this._collectionDockingView.removeDocument}
-                GetTransform={() => {
+                ScreenToLocalTransform={() => {
                     let { scale, translateX, translateY } = Utils.GetScreenTransform(this._htmlElement);
-                    return this._collectionDockingView.props.GetTransform().scale(scale).translate(-translateX, -translateY)
+                    return this._collectionDockingView.props.ScreenToLocalTransform().scale(scale).translate(-translateX, -translateY)
                 }}
                 isTopMost={true}
                 Scaling={scaling}
-- 
cgit v1.2.3-70-g09d2


From e57c8ed3944bf737afdb2f564d159a53f8a6b1c6 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 25 Feb 2019 01:56:29 -0500
Subject: more css cleanup

---
 src/client/documents/Documents.ts                  |  4 +-
 src/client/views/EditableView.tsx                  |  2 +-
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.scss  |  6 ++
 .../views/collections/CollectionFreeFormView.tsx   |  6 --
 .../views/collections/CollectionSchemaView.scss    | 73 ++++++++++------------
 .../views/collections/CollectionSchemaView.tsx     |  7 ++-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 src/client/views/nodes/FormattedTextBox.scss       |  4 ++
 src/client/views/nodes/FormattedTextBox.tsx        |  6 +-
 src/client/views/nodes/ImageBox.scss               |  6 +-
 11 files changed, 58 insertions(+), 60 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 4c5f26fbd..2dfff6235 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -128,8 +128,8 @@ export namespace Documents {
 
     // example of custom display string for an image that shows a caption.
     function EmbeddedCaption() {
-        return `<div style="position:absolute; height:100%">
-            <div style="position:relative; margin:auto; width:85%; margin:auto" >`
+        return `<div style="height:100%">
+            <div style="position:relative; margin:auto; height:85%;" >`
             + ImageBox.LayoutString() +
             `</div>
             <div style="position:relative; overflow:auto; height:15%; text-align:center; ">`
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 3d1c2ebf4..8d9a47eaa 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -30,7 +30,7 @@ export class EditableView extends React.Component<EditableProps> {
                 style={{ width: "100%" }}></input>
         } else {
             return (
-                <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
+                <div className="editableView-container-editing" style={{ display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
                     onClick={action(() => this.editing = true)}
                 >
                     {this.props.contents}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 86dc66e39..2230ec14f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -285,7 +285,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         if (!this._document)
             return (null);
         var content =
-            <div ref={this._mainCont}>
+            <div className="collectionDockingView-content" ref={this._mainCont}>
                 <DocumentView key={this._document.Id} Document={this._document}
                     AddDocument={undefined}
                     RemoveDocument={undefined}
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index e682b9815..d583a8218 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -8,6 +8,12 @@
         border-radius: 5px;
         background-color: rgba(0,0,0,.5);
     }
+    
+    .collectionfreeformview > .jsx-parser{
+        position:absolute;
+        height: 100%;
+    }
+        
     border-style: solid;
     box-sizing: border-box;
     position: relative;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index cb6668634..c40da6eaa 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -217,12 +217,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     render() {
         const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
-        var overlay = this.overlayView ?
-            <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-                {this.overlayView}
-            </div>
-            :
-            (null);
         return (
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index ba9afee62..3bf84f3cd 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -14,16 +14,6 @@
         background-color: rgba(0,0,0,.5);
     }
 
-    .collectionfreeformview-container {
-        border-width: 0px;
-        .collectionfreeformview > .jsx-parser{
-            position:absolute
-        }
-    }
-    .imageBox-cont {
-        position:relative;
-        max-height:100%;
-    }
     .ReactTable {
         position: absolute;
        // display: inline-block;
@@ -32,23 +22,40 @@
         height: 100%;
         background: white;
         box-sizing: border-box;
-    }
-    .ReactTable .rt-table {
-        overflow-y: auto;
-        overflow-x: auto;
-        height: 100%;
+        .rt-table {
+            overflow-y: auto;
+            overflow-x: auto;
+            height: 100%;
 
-        display: -webkit-inline-box;
-        direction: ltr;
-        // direction:rtl;
-        // display:block;
-    }
-    .ReactTable .rt-tbody {
-        //direction: ltr;
-        direction: rtl;
-    }
-    .ReactTable .rt-tr-group {
-        direction: ltr;
+            display: -webkit-inline-box;
+            direction: ltr;
+            // direction:rtl;
+            // display:block;
+        }
+        .rt-tbody {
+            //direction: ltr;
+            direction: rtl;
+        }
+        .rt-tr-group {
+            direction: ltr;
+        }
+        .rt-td {
+            border-width: 1;
+            border-right-color: #aaa;
+            .imageBox-cont {
+                position:relative;
+                max-height:100%;
+            }
+            .imageBox-cont img {
+                object-fit: contain;
+                max-width: 100%;
+                height: 100%
+            }
+        }
+        .rt-tr-group {
+            border-width: 1;
+            border-bottom-color: #aaa
+        }
     }
     .ReactTable .rt-thead.-header {
             background:grey;
@@ -61,24 +68,10 @@
         border-bottom-style: solid;
         border-bottom-width: 1;
     }
-    .ReactTable .rt-td {
-        border-width: 1;
-        border-right-color: #aaa
-    }
-    .ReactTable .rt-tr-group {
-        border-width: 1;
-        border-bottom-color: #aaa
-    }
-    .imageBox-cont img {
-        object-fit: contain;
-        height: 100%
-    }
     .documentView-node:first-child {
         background: grey;
         .imageBox-cont img {
             object-fit: contain;
-            max-width: 100%;
-            height: 100%
         }
     }
 }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index d2db93120..dc952ef82 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -16,6 +16,8 @@ import "./CollectionSchemaView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 
+// bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
+
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -140,7 +142,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         let content = this._selectedIndex == -1 || !selected ? (null) : (
             <Measure onResize={this.setScaling}>
                 {({ measureRef }) =>
-                    <div ref={measureRef}>
+                    <div className="collectionSchemaView-content" ref={measureRef}>
                         <DocumentView Document={selected}
                             AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
                             isTopMost={false}
@@ -173,7 +175,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                                 }))}
                                 column={{
                                     ...ReactTableDefaults.column,
-                                    Cell: this.renderCell
+                                    Cell: this.renderCell,
+
                                 }}
                                 getTrProps={this.getTrProps}
                             />
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 17123bf52..d7243421a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -88,7 +88,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
 
     render() {
         return (
-            <div ref={this._mainCont} style={{
+            <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
                 transformOrigin: "left top",
                 transform: this.transform,
                 width: this.width,
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 226456fab..0389a3f85 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -11,4 +11,8 @@
 .formattedTextBox-cont {
     background: beige;
     padding: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    color: initial;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index c0969a8c3..60ee0b5e1 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -112,12 +112,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         }
     }
     render() {
+        var val = this.props.doc.Get(this.props.fieldKey);
         return (<div className="formattedTextBox-cont"
-            style={{
-                color: "initial",
-                whiteSpace: "initial",
-                height: "auto"
-            }}
             onPointerDown={this.onPointerDown}
             ref={this._ref} />)
     }
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 5b15b3329..ea459b911 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -4,12 +4,14 @@
     position: relative;
     text-align: center;
     width: 100%;
+    height: auto;
     max-width: 100%;
     max-height: 100%
 }
+
 .imageBox-cont img {
-    max-width: 100%;
-    max-height: 100%
+    object-fit: contain;
+    height: 100%;
 }
 
 .imageBox-button {
-- 
cgit v1.2.3-70-g09d2


From ad1aab1e757a2f0d8acc6038c19c54caa5b1ec48 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 13:47:59 -0500
Subject: fixed so that docs are centered in middle of window.

---
 .../views/collections/CollectionDockingView.scss   |  4 ++++
 .../views/collections/CollectionDockingView.tsx    |  7 ++++---
 .../views/collections/CollectionFreeFormView.tsx   | 23 +++++++++++-----------
 src/client/views/collections/CollectionView.tsx    |  2 +-
 .../views/collections/CollectionViewBase.tsx       |  2 ++
 5 files changed, 22 insertions(+), 16 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 7c0b512a7..2706c3272 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,3 +1,7 @@
+.collectiondockingview-content {
+    height: 100%;
+}
+
 .collectiondockingview-container {
     position: relative;
     top: 0;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2230ec14f..a0f457ef2 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -265,6 +265,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
     @observable private _mainCont = React.createRef<HTMLDivElement>();
     @observable private _panelWidth = 0;
+    @observable private _panelHeight = 0;
     @observable private _document: Opt<Document>;
 
     constructor(props: any) {
@@ -272,8 +273,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
     }
 
-    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
-    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
+    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); }
+    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); }
     private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
 
     ScreenToLocalTransform = () => {
@@ -297,7 +298,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     ContainingCollectionView={undefined} />
             </div>
 
-        return <Measure onResize={action((r: any) => this._panelWidth = r.entry.width)}>
+        return <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
             {({ measureRef }) => <div ref={measureRef}>  {content} </div>}
         </Measure>
     }
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 7cad2cc03..90eb8a44e 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -20,7 +20,6 @@ import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import React = require("react");
-import { Documents } from "../../documents/Documents";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
@@ -31,7 +30,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private _downX: number = 0;
     private _downY: number = 0;
 
-
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
     @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
@@ -39,6 +37,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
     @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
     @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this.props.panelWidth() / 2 : 0; }  // shift so pan position is at center of window for non-overlay collections
+    @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
 
     @undoBatch
     @action
@@ -118,6 +118,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             let transform = this.getTransform();
 
             let deltaScale = (1 - (e.deltaY / coefficient));
+            if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay)
+                deltaScale = 1 / this.zoomScaling;
             let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
             let localTransform = this.getLocalTransform();
@@ -132,17 +134,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private SetPan(panX: number, panY: number) {
         const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
         const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
-        this.props.Document.SetNumber(KeyStore.PanX, false && this.isAnnotationOverlay ? newPanX : panX);
-        this.props.Document.SetNumber(KeyStore.PanY, false && this.isAnnotationOverlay ? newPanY : panY);
+        this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
+        this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
 
     @action
     onDrop = (e: React.DragEvent): void => {
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
-        let transform = this.getTransform();
-
-        var pt = transform.transformPoint(e.pageX, e.pageY);
+        var pt = this.getTransform().transformPoint(e.pageX, e.pageY);
         super.onDrop(e, { x: pt[0], y: pt[1] });
     }
 
@@ -222,13 +220,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 onError={(test: any) => console.log(test)}
             />);
     }
-    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
+
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform())
     getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
     noScaling = () => 1;
 
     render() {
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
+        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
+        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
         return (
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 88c15da07..6d30cf365 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -29,7 +29,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
 
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<CollectionView Document={Document}
-                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} bindings={bindings}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
                     isTopMost={isTopMost} BackgroundView={BackgroundView} />`;
     }
     public active = () => {
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index f64a48c18..e53485183 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -20,6 +20,8 @@ export interface CollectionViewProps {
     isTopMost: boolean;
     select: (ctrlPressed: boolean) => void;
     bindings: any;
+    panelWidth: () => number;
+    panelHeight: () => number;
 }
 export interface SubCollectionViewProps extends CollectionViewProps {
     active: () => boolean;
-- 
cgit v1.2.3-70-g09d2


From bb418216efa9cc2e191b970e4cbe5080f4fd2b87 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 17:00:31 -0500
Subject: drag and drop of main buttons.

---
 src/client/util/DragManager.ts                     |   2 +
 src/client/views/Main.tsx                          | 116 +++++++++------------
 .../views/collections/CollectionDockingView.tsx    |   8 +-
 .../views/collections/CollectionSchemaView.scss    |   1 +
 4 files changed, 58 insertions(+), 69 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index fd026992b..aab23f91c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -75,6 +75,8 @@ export namespace DragManager {
         let dragElement = ele.cloneNode(true) as HTMLElement;
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
+        dragElement.style.bottom = "";
+        dragElement.style.left = "";
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.zIndex = "1000";
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 661a2ac20..61ad66c72 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -17,6 +17,7 @@ import { Transform } from '../util/Transform';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { FieldWaiting } from '../../fields/Field';
 import { UndoManager } from '../util/UndoManager';
+import { DragManager } from '../util/DragManager';
 
 
 configure({
@@ -77,31 +78,47 @@ Documents.initProtos(() => {
             }, 0);
         }
 
-        let addImageNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addTextNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addColNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.FreeformDocument([], {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addSchemaNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.SchemaDocument([Documents.TextDocument()], {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
+        let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
+        let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+        let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" }));
+        let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+        let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+            width: 200, height: 200, title: "an image of a cat"
+        }));
 
-        let clearDatabase = action(() => {
-            Utils.Emit(Server.Socket, MessageStore.DeleteAll, {});
-        })
+        let addClick = (creator: any) => action(() => {
+            var img = creator();
+            img.SetNumber(KeyStore.X, 0);
+            img.SetNumber(KeyStore.Y, 0);
+            mainfreeform.GetList<Document>(KeyStore.Data, []).push(img);
+        });
 
+        let imgRef = React.createRef<HTMLDivElement>();
+        let textRef = React.createRef<HTMLDivElement>();
+        let schemaRef = React.createRef<HTMLDivElement>();
+        let colRef = React.createRef<HTMLDivElement>();
+        let curMoveListener: any = null
+        let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => {
+            e.stopPropagation();
+            e.preventDefault();
+
+            document.removeEventListener("pointermove", curMoveListener);
+            document.removeEventListener('pointerup', onRowUp);
+            DragManager.StartDrag(dragRef.current!, { document: creator() });
+        });
+        let onRowUp = action((e: PointerEvent): void => {
+            document.removeEventListener("pointermove", curMoveListener);
+            document.removeEventListener('pointerup', onRowUp);
+        });
+        let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => {
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator());
+                e.stopPropagation();
+            } else {
+                document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef));
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
         ReactDOM.render((
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
@@ -113,48 +130,17 @@ Documents.initProtos(() => {
                     ContainingCollectionView={undefined} />
                 <DocumentDecorations />
                 <ContextMenu />
-                <button style={{
-                    position: 'absolute',
-                    bottom: '0px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addImageNode}>Add Image</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '25px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addTextNode}>Add Text</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '50px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addColNode}>Add Collection</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '100',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addSchemaNode}>Add Schema</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '75px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={clearDatabase}>Clear Database</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '25',
-                    right: '0px',
-                    width: '150px'
-                }} onClick={() => UndoManager.Undo()}>Undo</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '0',
-                    right: '0px',
-                    width: '150px'
-                }} onClick={() => UndoManager.Redo()}>Redo</button>
+                <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
+                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
+                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
+                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
+                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
+                <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+                <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
             </div>),
             document.getElementById('root'));
     })
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a0f457ef2..8926f4aca 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -36,8 +36,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     private _goldenLayout: any = null;
     private _dragDiv: any = null;
     private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLDivElement | undefined;
-    private _dragFakeElement: HTMLDivElement | undefined;
+    private _dragElement: HTMLElement | undefined;
+    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -48,7 +48,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).ReactDOM = ReactDOM;
     }
 
-    public StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
         this._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
         // bcz: we want to copy this document into the header, not move it there.
@@ -65,7 +65,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
         //   - add a duplicate of our document to the original document's container 
         //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement;
+        this._dragFakeElement = dragElement.cloneNode(true) as HTMLElement;
         this._dragParent!.appendChild(this._dragFakeElement);
 
         // all of this must be undone when the document has been dropped (see tabCreated)
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 3bf84f3cd..74aa20e8b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -67,6 +67,7 @@
         border-bottom: grey;
         border-bottom-style: solid;
         border-bottom-width: 1;
+        height: auto;
     }
     .documentView-node:first-child {
         background: grey;
-- 
cgit v1.2.3-70-g09d2


From de0d0a38fbd30719e381f4f560c19257f0308f0e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 25 Feb 2019 18:01:01 -0500
Subject: Fixed docking thing

---
 src/client/views/collections/CollectionDockingView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a0f457ef2..45e283db5 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -235,11 +235,11 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         //stack.header.controlsContainer.find('.lm_popout').hide();
         stack.header.controlsContainer.find('.lm_close') //get the close icon
             .off('click') //unbind the current click handler
-            .click(function () {
+            .click(action(function () {
                 //if (confirm('really close this?')) {
                 stack.remove();
                 //}
-            });
+            }));
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From bd54526065428de2e931d7254776352199f6e55a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 26 Feb 2019 16:56:04 -0500
Subject: fixed shift-dragging!!

---
 src/client/util/DragManager.ts                     |  8 ++--
 src/client/views/Main.tsx                          | 33 +++--------------
 .../views/collections/CollectionDockingView.tsx    | 43 ++++------------------
 .../views/collections/CollectionSchemaView.tsx     |  4 +-
 .../views/collections/CollectionTreeView.tsx       |  2 +-
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 6 files changed, 21 insertions(+), 71 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 8adadee0f..0d76d2640 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -3,14 +3,14 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
 import { Document } from "../../fields/Document"
 import { action } from "mobx";
 
-export function setupDrag(_reference: React.RefObject<HTMLDivElement>, _dragDocument: Document) {
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
     let onRowMove = action((e: PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
 
         document.removeEventListener("pointermove", onRowMove);
         document.removeEventListener('pointerup', onRowUp);
-        DragManager.StartDrag(_reference.current!, { document: _dragDocument });
+        DragManager.StartDrag(_reference.current!, { document: docFunc() });
     });
     let onRowUp = action((e: PointerEvent): void => {
         document.removeEventListener("pointermove", onRowMove);
@@ -20,10 +20,10 @@ export function setupDrag(_reference: React.RefObject<HTMLDivElement>, _dragDocu
         // if (this.props.isSelected() || this.props.isTopMost) {
         if (e.button == 0) {
             e.stopPropagation();
-            e.preventDefault();
             if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument);
+                CollectionDockingView.Instance.StartOtherDrag(docFunc(), e);
             } else {
+                e.preventDefault();
                 document.addEventListener("pointermove", onRowMove);
                 document.addEventListener('pointerup', onRowUp);
             }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 17dda899d..7ef4b6132 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -15,9 +15,8 @@ import { ServerUtils } from '../../server/ServerUtil';
 import { MessageStore, DocumentTransfer } from '../../server/Message';
 import { Transform } from '../util/Transform';
 import { CollectionDockingView } from './collections/CollectionDockingView';
-import { FieldWaiting } from '../../fields/Field';
 import { UndoManager } from '../util/UndoManager';
-import { DragManager } from '../util/DragManager';
+import { setupDrag } from '../util/DragManager';
 
 
 configure({
@@ -30,7 +29,6 @@ window.addEventListener("dragover", function (e) {
     e.preventDefault();
 }, false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    console.log(ContextMenu);
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
     }
@@ -98,28 +96,7 @@ Documents.initProtos(() => {
         let textRef = React.createRef<HTMLDivElement>();
         let schemaRef = React.createRef<HTMLDivElement>();
         let colRef = React.createRef<HTMLDivElement>();
-        let curMoveListener: any = null
-        let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
 
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(dragRef.current!, { document: creator() });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => {
-            if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator());
-                e.stopPropagation();
-            } else {
-                document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef));
-                document.addEventListener('pointerup', onRowUp);
-            }
-        }
         ReactDOM.render((
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
@@ -132,13 +109,13 @@ Documents.initProtos(() => {
                 <DocumentDecorations />
                 <ContextMenu />
                 <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
-                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
                 <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
-                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
                 <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
-                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
                 <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
-                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
                 <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
                 <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
                 <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5fb632469..3d7e46a01 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -10,7 +10,6 @@ import { FieldId, Opt, Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { Utils } from "../../../Utils";
 import { Server } from "../../Server";
-import { DragManager } from "../../util/DragManager";
 import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
@@ -34,10 +33,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
 
     private _goldenLayout: any = null;
-    private _dragDiv: any = null;
-    private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLElement | undefined;
-    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -47,28 +42,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).React = React;
         (window as any).ReactDOM = ReactDOM;
     }
-
-    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
-        this._dragElement = dragElement;
-        this._dragParent = dragElement.parentElement;
-        // bcz: we want to copy this document into the header, not move it there.
-        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
-
-        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
-        this._dragDiv = document.createElement("div");
-        this._dragDiv.style.opacity = 0;
-        DragManager.Root().appendChild(this._dragDiv);
-        this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc));
-
-        //   - add our document to that div so that GoldenLayout will get the move events its listening for
-        this._dragDiv.appendChild(this._dragElement);
-
-        //   - add a duplicate of our document to the original document's container 
-        //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
     }
 
     @action
@@ -98,7 +73,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
     @action
-    public AddRightSplit(document: Document) {
+    public AddRightSplit(document: Document, minimize: boolean = false) {
         this._goldenLayout.emit('stateChanged');
         let newItemStackConfig = {
             type: 'stack',
@@ -121,10 +96,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             collayout.config["width"] = 50;
             newContentItem.config["width"] = 50;
         }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
         newContentItem.callDownwards('_$init');
         this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
         this._goldenLayout.emit('stateChanged');
         this.stateChanged();
+        return newContentItem;
     }
 
     setupGoldenLayout() {
@@ -218,13 +198,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        if (this._dragDiv) {
-            this._dragDiv.removeChild(this._dragElement);
-            this._dragParent!.removeChild(this._dragFakeElement!);
-            this._dragParent!.appendChild(this._dragElement!);
-            DragManager.Root().removeChild(this._dragDiv);
-            this._dragDiv = null;
-        }
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 106a5c4f5..03110a9c7 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -45,9 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase {
             <FieldView {...props} />
         )
         let reference = React.createRef<HTMLDivElement>();
-        let onItemDown = setupDrag(reference, props.doc);
+        let onItemDown = setupDrag(reference, () => props.doc);
         return (
-            <div onPointerDown={onItemDown} ref={reference}>
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
                 <EditableView contents={contents}
                     height={36} GetValue={() => {
                         let field = props.doc.Get(props.fieldKey);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 64f4c0970..55c804337 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -33,7 +33,7 @@ class TreeView extends React.Component<TreeViewProps> {
 
         var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
         let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
-        let onItemDown = setupDrag(reference, childDocument);
+        let onItemDown = setupDrag(reference, () => childDocument);
 
         if (title && title != FieldWaiting) {
             let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c579b7142..feecde921 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -96,7 +96,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downX = e.clientX;
         this._downY = e.clientY;
         if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
             e.stopPropagation();
         } else {
             this._contextMenuCanOpen = true;
-- 
cgit v1.2.3-70-g09d2


From 98ade639c6ffa6cc704cc310af506973d83e494b Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 26 Feb 2019 20:44:32 -0500
Subject: what is going ON

---
 src/client/views/DocumentManager.tsx               | 267 ++++++++++++++-------
 src/client/views/Main.tsx                          |   4 +-
 src/client/views/TempTreeView.tsx                  |   5 +-
 .../views/collections/CollectionDockingView.tsx    |   4 +-
 .../views/collections/CollectionFreeFormView.tsx   |  10 +-
 .../views/collections/CollectionSchemaView.tsx     |   4 +-
 src/client/views/collections/CollectionView.tsx    |   2 +-
 .../views/collections/CollectionViewBase.tsx       |   1 +
 src/client/views/nodes/DocumentView.tsx            |   6 +-
 9 files changed, 210 insertions(+), 93 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx
index bd3c4abfd..750b7aecf 100644
--- a/src/client/views/DocumentManager.tsx
+++ b/src/client/views/DocumentManager.tsx
@@ -53,7 +53,27 @@ export class DocumentManager {
         return (toReturn);
     }
 
-    public getDocumentViewFreeform(toFind: Document): DocumentView | null {
+    // public getDocumentViewFreeform2(toFind: Document): DocumentView | null {
+
+    //     let toReturn: DocumentView | null;
+    //     toReturn = null;
+
+    //     //gets document view that is in a freeform canvas collection
+    //     DocumentManager.Instance.DocumentViews.map(view => {
+    //         let doc = view.props.Document;
+    //         if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
+    //             if (Object.is(doc, toFind)) {
+    //                 console.log("finding view")
+    //                 toReturn = view;
+    //                 return;
+    //             }
+    //         }
+    //     })
+
+    //     return (toReturn);
+    // }
+
+    public getCollectionView(toFind: Document): DocumentView | null {
 
         let toReturn: DocumentView | null;
         toReturn = null;
@@ -61,7 +81,8 @@ export class DocumentManager {
         //gets document view that is in a freeform canvas collection
         DocumentManager.Instance.DocumentViews.map(view => {
             let doc = view.props.Document;
-            if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
+            if (view instanceof CollectionView) {
+                console.log("finding view")
                 if (Object.is(doc, toFind)) {
                     toReturn = view;
                     return;
@@ -72,113 +93,189 @@ export class DocumentManager {
         return (toReturn);
     }
 
-    @action
-    public centerNode2(doc: Document | DocumentView): any {
-        //console.log(doc.Title)
-        //gets document view that is in freeform collection
-
-        let docView: DocumentView | null;
-
-        if (doc instanceof Document) {
-            docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
-        }
-        else {
-            docView = doc
-        }
-
-        let scale: number;
-        let XView: number;
-        let YView: number;
-
-        //if the view exists in a freeform collection
-        if (docView) {
-            let { width, height } = docView.size();
-
-            //base case: parent of parent does not exist
-            if (!docView.props.ContainingCollectionView) {
-                scale = docView.props.ScreenToLocalTransform().Scale
-                let doc = docView.props.Document;
-                console.log("hello")
-                XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2)
-                YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2)
-                //set x and y view of parent
-                if (docView instanceof CollectionView) {
-                    console.log("here")
-                    DocumentManager.Instance.setViewportXY(docView, XView, YView)
-                }
-            }
-            //parent is not main, parent is centered and calls itself
-            else {
-                if (true) {
-                    //view of parent
-                    let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
-                    let doc = docView.props.Document
-
-                    //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level
-                    if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
-                        //scale of parent
-                        console.log("scale: " + scale)
-                        XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2);
-                        YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2);
-                        // //node.Parent.setViewportXY(XView, YView);
-                        DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
-                        return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document)
-                    }
-                    else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) }
-                }
-                else {
-                    // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document)
-                }
-            }
-        }
-    }
+    // @action
+    // public centerNode2(doc: Document | DocumentView): any {
+    //     //console.log(doc.Title)
+    //     //gets document view that is in freeform collection
+
+    //     let docView: DocumentView | null;
+
+    //     if (doc instanceof Document) {
+    //         docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
+    //     }
+    //     else {
+    //         docView = doc
+    //     }
+
+    //     let scale: number;
+    //     let XView: number;
+    //     let YView: number;
+
+    //     //if the view exists in a freeform collection
+    //     if (docView) {
+    //         let { width, height } = docView.size();
+
+    //         //base case: parent of parent does not exist
+    //         if (!docView.props.ContainingCollectionView) {
+    //             scale = docView.props.ScreenToLocalTransform().Scale
+    //             let doc = docView.props.Document;
+    //             console.log("hello")
+    //             XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2)
+    //             YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2)
+    //             //set x and y view of parent
+    //             if (docView instanceof CollectionView) {
+    //                 console.log("here")
+    //                 DocumentManager.Instance.setViewportXY(docView, XView, YView)
+    //             }
+    //         }
+    //         //parent is not main, parent is centered and calls itself
+    //         else {
+    //             if (true) {
+    //                 //view of parent
+    //                 let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
+    //                 let doc = docView.props.Document
+
+    //                 //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level
+    //                 if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
+    //                     //scale of parent
+    //                     console.log("scale: " + scale)
+    //                     XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2);
+    //                     YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2);
+    //                     // //node.Parent.setViewportXY(XView, YView);
+    //                     DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
+    //                     return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document)
+    //                 }
+    //                 else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) }
+    //             }
+    //             else {
+    //                 // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document)
+    //             }
+    //         }
+    //     }
+    // }
+
+    // @action
+    // public centerNode4(doc: Document | DocumentView): any {
+    //     //console.log(doc.Title)
+    //     //gets document view that is in freeform collection
+
+    //     console.log("things are happening")
+
+    //     let docView: DocumentView | null;
+
+    //     if (doc instanceof Document) {
+    //         console.log(doc.Title)
+    //         docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
+    //     }
+    //     else {
+    //         docView = doc
+    //         console.log(docView.props.Document.Title)
+    //     }
+
+    //     let scale: number;
+    //     let XView: number;
+    //     let YView: number;
+
+    //     //if the view exists in a freeform collection
+    //     if (docView) {
+    //         let { width, height } = docView.size();
+
+    //         if (docView.props.ContainingCollectionView) {
+    //             //view of parent
+    //             let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
+    //             let doc = docView.props.Document
+
+    //             if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
+    //                 //scale of parent
+    //                 XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2);
+    //                 YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2);
+    //                 DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
+    //                 return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document)
+    //             }
+    //             else { return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) }
+    //         }
+    //     }
+    // }
 
     @action
-    public centerNode(doc: Document | DocumentView): any {
+    public centerNode(doc: Document | DocumentView, x: number, y: number): any {
         //console.log(doc.Title)
-        //gets document view that is in freeform collection
-
+        //gets document view that is in freeform collection 
         let docView: DocumentView | null;
 
         if (doc instanceof Document) {
-            docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
+            console.log(doc.Title)
+            docView = DocumentManager.Instance.getDocumentView(doc)
         }
         else {
             docView = doc
+            console.log(docView.props.Document.Title)
         }
 
         let scale: number;
         let XView: number;
         let YView: number;
 
-        //if the view exists in a freeform collection
         if (docView) {
             let { width, height } = docView.size();
+            let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1)
+            let doc = docView.props.Document
 
-            //parent is not main, parent is centered and calls itself
-            if (docView.props.ContainingCollectionView) {
-                //view of parent
-                let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
-                let doc = docView.props.Document
-
-                if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
-                    //scale of parent
-                    XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2);
-                    YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2);
-                    DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
-                    return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document)
-                }
-                else { return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) }
+            if (x && y) {
+                XView = (-x * scale) - (width * scale / 2);
+                YView = (-y * scale) - (height * scale / 2);
+                DocumentManager.Instance.setViewportXY(docView, XView, YView)
             }
+
         }
     }
 
+    // @action
+    // public centerNode3(doc: Document | DocumentView): any {
+    //     //console.log(doc.Title)
+    //     //gets document view that is in freeform collection
+
+    //     let docView: DocumentView | null;
+
+    //     if (doc instanceof Document) {
+    //         docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
+    //     }
+    //     else {
+    //         docView = doc
+    //     }
+
+    //     let scale: number;
+    //     let XView: number;
+    //     let YView: number;
+
+    //     //if the view exists in a freeform collection
+    //     if (docView) {
+    //         let { width, height } = docView.size();
+
+    //         //parent is not main, parent is centered and calls itself
+    //         if (docView.props.ContainingCollectionView) {
+    //             //view of parent
+    //             let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
+    //             let doc = docView.props.Document
+
+    //             if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
+    //                 //scale of parent
+    //                 XView = doc.GetNumber(KeyStore.X, 0) - width / 2
+    //                 YView = doc.GetNumber(KeyStore.Y, 0) - height / 2
+    //                 // console.log("X location: " + XView)
+    //                 // console.log("Y location: " + YView)
+    //                 DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
+    //                 return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document)
+    //             }
+    //             else { return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) }
+    //         }
+    //     }
+    // }
+
 
     @action
-    private setViewportXY(collection: CollectionView, x: number, y: number) {
-        if (collection.collectionViewType !== CollectionViewType.Freeform) {
-            return
-        }
+    private setViewportXY(collection: DocumentView, x: number, y: number) {
+        console.log("setting")
         let doc = collection.props.Document;
         doc.SetNumber(KeyStore.PanX, x);
         doc.SetNumber(KeyStore.PanY, y);
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 64bcbc24f..da78dcfba 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -131,7 +131,9 @@ Documents.initProtos(() => {
                     PanelWidth={() => 0}
                     PanelHeight={() => 0}
                     isTopMost={true}
-                    ContainingCollectionView={undefined} />
+                    ContainingCollectionView={undefined}
+                    focus={(doc, x, y) => { }}
+                />
                 <DocumentDecorations />
                 <TempTreeView />
                 <ContextMenu />
diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx
index f852224e9..bd73ef887 100644
--- a/src/client/views/TempTreeView.tsx
+++ b/src/client/views/TempTreeView.tsx
@@ -5,6 +5,7 @@ import { Document } from "../../fields/Document";
 import { ListField } from "../../fields/ListField";
 import "./TempTreeView.scss"
 import { DocumentManager } from "./DocumentManager";
+import { KeyStore } from "../../fields/KeyStore";
 
 
 @observer
@@ -15,7 +16,9 @@ export class TempTreeView extends React.Component {
 
         let view = DocumentManager.Instance.getDocumentView(doc);
         if (view != null) {
-            DocumentManager.Instance.centerNode(view);
+            // DocumentManager.Instance.centerNode(view);
+            doc = view.props.Document
+            view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0))
         }
     }
 
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5393ac06e..9c1f1a56d 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -298,7 +298,9 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     PanelHeight={this._nativeHeight}
                     ScreenToLocalTransform={this.ScreenToLocalTransform}
                     isTopMost={true}
-                    ContainingCollectionView={undefined} />
+                    ContainingCollectionView={undefined}
+                    focus={(doc: Document, x: number, y: number) => { }}
+                />
             </div>
 
         return <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index ac14811a5..fe2fc42ad 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -21,6 +21,7 @@ import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import React = require("react");
+import { DocumentManager } from "../DocumentManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
@@ -191,7 +192,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     ContentScaling={this.noScaling}
                     PanelWidth={doc.Width}
                     PanelHeight={doc.Height}
-                    ContainingCollectionView={this.props.CollectionView} />);
+                    ContainingCollectionView={this.props.CollectionView}
+                    focus={(doc: Document, x: number, y: number) => {
+                        //set pan of colleciton freeform and then call parent
+                        console.log("calling...")
+                        DocumentManager.Instance.centerNode(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0))
+                        this.props.focus(this.props.Document, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0))
+                    }}
+                />);
             })
         }
         return null;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 38217d7c4..4eaf585ce 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -211,7 +211,9 @@ export class CollectionSchemaView extends CollectionViewBase {
                             ContentScaling={this.getContentScaling}
                             PanelWidth={this.getPanelWidth}
                             PanelHeight={this.getPanelHeight}
-                            ContainingCollectionView={this.props.CollectionView} />
+                            ContainingCollectionView={this.props.CollectionView}
+                            focus={(doc, x, y) => this.props.focus(this.props.Document, x, y)}
+                        />
                     </div>
                 }
             </Measure>
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 03e1f1fa4..e6a8d2448 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -30,7 +30,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<CollectionView Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
-                    isTopMost={isTopMost} BackgroundView={BackgroundView} />`;
+                    isTopMost={isTopMost} BackgroundView={BackgroundView} focus={focus}/>`;
     }
     public active = () => {
         var isSelected = this.props.isSelected();
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index e38258e0b..d9e43c0dc 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -23,6 +23,7 @@ export interface CollectionViewProps {
     bindings: any;
     panelWidth: () => number;
     panelHeight: () => number;
+    focus: (doc: Document, x: number, y: number) => void;
 }
 export interface SubCollectionViewProps extends CollectionViewProps {
     active: () => boolean;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 21f64ef35..90699cd2e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -36,6 +36,7 @@ export interface DocumentViewProps {
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    focus: (doc: Document, x: number, y: number) => void;
 }
 export interface JsxArgs extends DocumentViewProps {
     Keys: { [name: string]: Key }
@@ -184,7 +185,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     //TODO Monika
     @action
     Center = (e: React.MouseEvent): void => {
-        DocumentManager.Instance.centerNode(this)
+        this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0))
     }
 
     @action
@@ -265,7 +266,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             ...this.props,
             isSelected: this.isSelected,
             select: this.select,
-            documentSize: this.size
+            documentSize: this.size,
+            focus: this.props.focus
         };
         for (const key of this.layoutKeys) {
             this._documentBindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
-- 
cgit v1.2.3-70-g09d2


From 09f0bebe4ac64250769297ccf64c33217b8db66a Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 27 Feb 2019 15:33:32 -0500
Subject: Fixes for context menu stuff

---
 deploy/debug/test.html                             | 13 ++++++
 package-lock.json                                  |  8 +++-
 src/client/views/Main.tsx                          |  1 -
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.tsx   |  2 -
 src/client/views/nodes/DocumentView.tsx            | 17 +++-----
 src/debug/Test.tsx                                 | 46 ++++++++++++++++++++++
 webpack.config.js                                  |  1 +
 8 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 deploy/debug/test.html
 create mode 100644 src/debug/Test.tsx

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/deploy/debug/test.html b/deploy/debug/test.html
new file mode 100644
index 000000000..58febbc81
--- /dev/null
+++ b/deploy/debug/test.html
@@ -0,0 +1,13 @@
+<html>
+
+<head>
+    <title>Test view</title>
+    <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="../test.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d74c77819..ecfa3d6d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3389,11 +3389,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3410,7 +3412,8 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -3539,6 +3542,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 17dda899d..61ad66c72 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -30,7 +30,6 @@ window.addEventListener("dragover", function (e) {
     e.preventDefault();
 }, false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    console.log(ContextMenu);
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5fb632469..cb978c1ba 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -245,7 +245,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     render() {
         return (
             <div className="collectiondockingview-container" id="menuContainer"
-                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
                 style={{
                     width: "100%",
                     height: "100%",
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 12909c151..1f8d76432 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -83,7 +83,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble && this.props.active()) {
-            e.preventDefault();
             e.stopPropagation();
             let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
             let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
@@ -230,7 +229,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
                 onWheel={this.onPointerWheel}
-                onContextMenu={(e) => e.preventDefault()}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c579b7142..6e14df229 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -80,7 +80,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     private _mainCont = React.createRef<HTMLDivElement>();
     private _documentBindings: any = null;
-    private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
 
@@ -99,7 +98,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
             e.stopPropagation();
         } else {
-            this._contextMenuCanOpen = true;
             if (this.active && !e.isDefaultPrevented()) {
                 e.stopPropagation();
                 if (e.buttons === 2) {
@@ -115,13 +113,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
                 const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
                 let dragData: { [id: string]: any } = {};
                 dragData["documentView"] = this;
@@ -129,7 +124,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 dragData["yOffset"] = e.y - top;
                 DragManager.StartDrag(this._mainCont.current, dragData, {
                     handlers: {
-                        dragComplete: action((e: DragManager.DragCompleteEvent) => { }),
+                        dragComplete: action(() => { }),
                     },
                     hideSource: true
                 })
@@ -148,7 +143,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-    deleteClicked = (e: React.MouseEvent): void => {
+    deleteClicked = (): void => {
         if (this.props.RemoveDocument) {
             this.props.RemoveDocument(this.props.Document);
         }
@@ -168,13 +163,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @action
     onContextMenu = (e: React.MouseEvent): void => {
-        e.preventDefault()
         e.stopPropagation();
-        if (!SelectionManager.IsSelected(this) || !this._contextMenuCanOpen) {
+        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault()
             return;
         }
+        e.preventDefault()
 
-        ContextMenu.Instance.clearItems()
         ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
@@ -193,7 +189,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @computed get mainContent() {
-        var val = this.props.Document.Id;
         return <JsxParser
             components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
             bindings={this._documentBindings}
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
new file mode 100644
index 000000000..7bc70615f
--- /dev/null
+++ b/src/debug/Test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+class TestInternal extends React.Component {
+    onContextMenu = (e: React.MouseEvent) => {
+        console.log("Internal");
+        e.stopPropagation();
+    }
+
+    onPointerDown = (e: React.MouseEvent) => {
+        console.log("pointer down")
+        e.preventDefault();
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}
+            onPointerUp={this.onPointerDown}>Hello world</div>
+    }
+}
+
+class TestChild extends React.Component {
+    onContextMenu = () => {
+        console.log("Child");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestInternal /></div>
+    }
+}
+
+class TestParent extends React.Component {
+    onContextMenu = () => {
+        console.log("Parent");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestChild /></div>
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <TestParent />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 2a29844e8..900802d7d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
   entry: {
     bundle: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'],
     viewer: ["./src/debug/Viewer.tsx", 'webpack-hot-middleware/client?reload=true'],
+    test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'],
   },
   devtool: "source-map",
   node: {
-- 
cgit v1.2.3-70-g09d2


From a793e29e99d15ac0fe39c0ac838b10d8311eec03 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 28 Feb 2019 10:34:33 -0500
Subject: Started fixing transforms

---
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.tsx   | 26 ++++++++++++++--------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  1 +
 src/client/views/nodes/DocumentView.tsx            |  9 ++++++++
 4 files changed, 28 insertions(+), 10 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 915e33533..ad7164e33 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -236,7 +236,7 @@ interface DockedFrameProps {
 @observer
 export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
-    @observable private _mainCont = React.createRef<HTMLDivElement>();
+    private _mainCont = React.createRef<HTMLDivElement>();
     @observable private _panelWidth = 0;
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Document>;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 63255dd90..dee4651df 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -100,9 +100,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
             e.stopPropagation();
             let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
             let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
-            let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+            let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             this._previewCursorVisible = false;
-            this.SetPan(x + dx, y + dy);
+            this.SetPan(x - dx, y - dy);
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -134,10 +134,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
             let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
             let localTransform = this.getLocalTransform();
-            localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+            console.log("test")
+            console.log(localTransform.inverse())
+            console.log([x, y])
+            localTransform = localTransform.inverse().preTranslate(-this.centeringShiftX, -this.centeringShiftY).scaleAbout(deltaScale, x, y)
+            console.log(localTransform)
 
             this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
-            this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
+            this.SetPan(-localTransform.TranslateX, -localTransform.TranslateY);
         }
     }
 
@@ -250,8 +254,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             />);
     }
 
-    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform())
-    getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
+    getLocalTransform = (): Transform => Transform.Identity.translate(-this.centeringShiftX, -this.centeringShiftY).scale(1 / this.scale).translate(this.panX, this.panY);
     noScaling = () => 1;
 
     //when focus is lost, this will remove the preview cursor
@@ -270,8 +274,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
             cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
         }
 
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
+        let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
+
+        const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
+        const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
+        // const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
+        // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
 
         return (
             <div className="collectionfreeformview-container"
@@ -285,7 +293,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 tabIndex={0}
                 ref={this.createDropTarget}>
                 <div className="collectionfreeformview"
-                    style={{ transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
+                    style={{ transformOrigin: "left top", transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}
                     ref={this._canvasRef}>
                     {this.backgroundView}
                     {cursor}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 50dc5a619..9edad1f64 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -69,6 +69,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
     }
 
     render() {
+        console.log(this.transform);
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
                 transformOrigin: "left top",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d5b4a723d..221ded21b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -179,6 +179,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
         ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
         ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
+        ContextMenu.Instance.addItem({
+            description: "center", event: () => {
+                if (this.props.ContainingCollectionView) {
+                    let doc = this.props.ContainingCollectionView.props.Document;
+                    doc.SetNumber(KeyStore.PanX, this.props.Document.GetNumber(KeyStore.X, 0) + (this.props.Document.GetNumber(KeyStore.Width, 0) / 2))
+                    doc.SetNumber(KeyStore.PanY, this.props.Document.GetNumber(KeyStore.Y, 0) + (this.props.Document.GetNumber(KeyStore.Height, 0) / 2))
+                }
+            }
+        })
         //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         if (!this.topMost) {
-- 
cgit v1.2.3-70-g09d2


From e058c3261b63530f30998ad61e6fb023fcc480af Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Sat, 2 Mar 2019 17:15:10 -0500
Subject: focus

---
 src/client/views/DocumentManager.tsx               | 283 ---------------------
 src/client/views/Main.tsx                          |   2 -
 src/client/views/TempTreeView.scss                 |  13 -
 src/client/views/TempTreeView.tsx                  |  41 ---
 .../views/collections/CollectionDockingView.tsx    |   2 +-
 .../views/collections/CollectionFreeFormView.tsx   |   8 +-
 .../views/collections/CollectionSchemaView.tsx     |   4 +-
 src/client/views/nodes/DocumentView.tsx            |  37 +--
 8 files changed, 8 insertions(+), 382 deletions(-)
 delete mode 100644 src/client/views/DocumentManager.tsx
 delete mode 100644 src/client/views/TempTreeView.scss
 delete mode 100644 src/client/views/TempTreeView.tsx

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx
deleted file mode 100644
index a53ed4a91..000000000
--- a/src/client/views/DocumentManager.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import React = require('react')
-import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
-import { DocumentView } from './nodes/DocumentView';
-import { Document } from "../../fields/Document"
-import { CollectionFreeFormView } from './collections/CollectionFreeFormView';
-import { KeyStore } from '../../fields/KeyStore';
-import { CollectionViewBase } from './collections/CollectionViewBase';
-import { CollectionViewType, CollectionView } from './collections/CollectionView';
-
-
-export class DocumentManager {
-
-    //global holds all of the nodes (regardless of which collection they're in)
-    @observable
-    public DocumentViews: DocumentView[] = [];
-
-    // singleton instance
-    private static _instance: DocumentManager;
-
-    // create one and only one instance of NodeManager
-    public static get Instance(): DocumentManager {
-        return this._instance || (this._instance = new this());
-    }
-
-    //private constructor so no other class can create a nodemanager
-    private constructor() {
-        // this.DocumentViews = new Array<DocumentView>();
-    }
-
-    public getDocumentView(toFind: Document): DocumentView | null {
-
-        let toReturn: DocumentView | null;
-        toReturn = null;
-
-        //gets document view that is in a freeform canvas collection
-        DocumentManager.Instance.DocumentViews.map(view => {
-            let doc = view.props.Document;
-            // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            //     if (Object.is(doc, toFind)) {
-            //         toReturn = view;
-            //         return;
-            //     }
-            // }
-
-            if (Object.is(doc, toFind)) {
-                toReturn = view;
-                return;
-            }
-
-        })
-
-        return (toReturn);
-    }
-
-    // public getDocumentViewFreeform2(toFind: Document): DocumentView | null {
-
-    //     let toReturn: DocumentView | null;
-    //     toReturn = null;
-
-    //     //gets document view that is in a freeform canvas collection
-    //     DocumentManager.Instance.DocumentViews.map(view => {
-    //         let doc = view.props.Document;
-    //         if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
-    //             if (Object.is(doc, toFind)) {
-    //                 console.log("finding view")
-    //                 toReturn = view;
-    //                 return;
-    //             }
-    //         }
-    //     })
-
-    //     return (toReturn);
-    // }
-
-    public getCollectionView(toFind: Document): DocumentView | null {
-
-        let toReturn: DocumentView | null;
-        toReturn = null;
-
-        //gets document view that is in a freeform canvas collection
-        DocumentManager.Instance.DocumentViews.map(view => {
-            let doc = view.props.Document;
-            if (view instanceof CollectionView) {
-                console.log("finding view")
-                if (Object.is(doc, toFind)) {
-                    toReturn = view;
-                    return;
-                }
-            }
-        })
-
-        return (toReturn);
-    }
-
-    // @action
-    // public centerNode2(doc: Document | DocumentView): any {
-    //     //console.log(doc.Title)
-    //     //gets document view that is in freeform collection
-
-    //     let docView: DocumentView | null;
-
-    //     if (doc instanceof Document) {
-    //         docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
-    //     }
-    //     else {
-    //         docView = doc
-    //     }
-
-    //     let scale: number;
-    //     let XView: number;
-    //     let YView: number;
-
-    //     //if the view exists in a freeform collection
-    //     if (docView) {
-    //         let { width, height } = docView.size();
-
-    //         //base case: parent of parent does not exist
-    //         if (!docView.props.ContainingCollectionView) {
-    //             scale = docView.props.ScreenToLocalTransform().Scale
-    //             let doc = docView.props.Document;
-    //             console.log("hello")
-    //             XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2)
-    //             YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2)
-    //             //set x and y view of parent
-    //             if (docView instanceof CollectionView) {
-    //                 console.log("here")
-    //                 DocumentManager.Instance.setViewportXY(docView, XView, YView)
-    //             }
-    //         }
-    //         //parent is not main, parent is centered and calls itself
-    //         else {
-    //             if (true) {
-    //                 //view of parent
-    //                 let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
-    //                 let doc = docView.props.Document
-
-    //                 //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level
-    //                 if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
-    //                     //scale of parent
-    //                     console.log("scale: " + scale)
-    //                     XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2);
-    //                     YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2);
-    //                     // //node.Parent.setViewportXY(XView, YView);
-    //                     DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
-    //                     return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document)
-    //                 }
-    //                 else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) }
-    //             }
-    //             else {
-    //                 // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document)
-    //             }
-    //         }
-    //     }
-    // }
-
-    // @action
-    // public centerNode4(doc: Document | DocumentView): any {
-    //     //console.log(doc.Title)
-    //     //gets document view that is in freeform collection
-
-    //     console.log("things are happening")
-
-    //     let docView: DocumentView | null;
-
-    //     if (doc instanceof Document) {
-    //         console.log(doc.Title)
-    //         docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
-    //     }
-    //     else {
-    //         docView = doc
-    //         console.log(docView.props.Document.Title)
-    //     }
-
-    //     let scale: number;
-    //     let XView: number;
-    //     let YView: number;
-
-    //     //if the view exists in a freeform collection
-    //     if (docView) {
-    //         let { width, height } = docView.size();
-
-    //         if (docView.props.ContainingCollectionView) {
-    //             //view of parent
-    //             let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
-    //             let doc = docView.props.Document
-
-    //             if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
-    //                 //scale of parent
-    //                 XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2);
-    //                 YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2);
-    //                 DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
-    //                 return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document)
-    //             }
-    //             else { return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) }
-    //         }
-    //     }
-    // }
-
-    @action
-    public centerNode(doc: Document | DocumentView, collection: Document): void {
-        //console.log(doc.Title)
-        //gets document view that is in freeform collection 
-        let docView: DocumentView | null;
-
-        if (doc instanceof Document) {
-            console.log(doc.Title)
-            docView = DocumentManager.Instance.getDocumentView(doc)
-        }
-        else {
-            docView = doc
-            console.log(docView.props.Document.Title)
-        }
-
-        let scale: number;
-        let XView: number;
-        let YView: number;
-
-        if (docView) {
-            let { width, height } = docView.size();
-            let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1);
-            let doc = docView.props.Document;
-            let x = doc.GetNumber(KeyStore.X, 0);
-            let y = doc.GetNumber(KeyStore.X, 0);
-
-            if (x && y) {
-                XView = (-x * scale) - (width * scale / 2);
-                YView = (-y * scale) - (height * scale / 2);
-                DocumentManager.Instance.setViewportXY(collection, XView, YView)
-            }
-
-        }
-    }
-
-    // @action
-    // public centerNode3(doc: Document | DocumentView): any {
-    //     //console.log(doc.Title)
-    //     //gets document view that is in freeform collection
-
-    //     let docView: DocumentView | null;
-
-    //     if (doc instanceof Document) {
-    //         docView = DocumentManager.Instance.getDocumentViewFreeform(doc)
-    //     }
-    //     else {
-    //         docView = doc
-    //     }
-
-    //     let scale: number;
-    //     let XView: number;
-    //     let YView: number;
-
-    //     //if the view exists in a freeform collection
-    //     if (docView) {
-    //         let { width, height } = docView.size();
-
-    //         //parent is not main, parent is centered and calls itself
-    //         if (docView.props.ContainingCollectionView) {
-    //             //view of parent
-    //             let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1)
-    //             let doc = docView.props.Document
-
-    //             if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) {
-    //                 //scale of parent
-    //                 XView = doc.GetNumber(KeyStore.X, 0) - width / 2
-    //                 YView = doc.GetNumber(KeyStore.Y, 0) - height / 2
-    //                 // console.log("X location: " + XView)
-    //                 // console.log("Y location: " + YView)
-    //                 DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
-    //                 return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document)
-    //             }
-    //             else { return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) }
-    //         }
-    //     }
-    // }
-
-
-    @action
-    private setViewportXY(collection: Document, x: number, y: number) {
-        collection.SetNumber(KeyStore.PanX, x);
-        collection.SetNumber(KeyStore.PanY, y);
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 2e1deebd1..ce23d9ffb 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -5,7 +5,6 @@ import * as ReactDOM from 'react-dom';
 import { Document } from '../../fields/Document';
 import { KeyStore } from '../../fields/KeyStore';
 import "./Main.scss";
-import { TempTreeView } from './../views/TempTreeView';
 import { MessageStore } from '../../server/Message';
 import { Utils } from '../../Utils';
 import { Documents } from '../documents/Documents';
@@ -81,7 +80,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
                 focus={() => { }}
                 ContainingCollectionView={undefined} />
             <DocumentDecorations />
-            <TempTreeView />
             <ContextMenu />
             <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
                 <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss
deleted file mode 100644
index 0a6342ca6..000000000
--- a/src/client/views/TempTreeView.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.temptree {
-    background: #ADD8E6;
-    width: 300px;
-    height: 200px;
-    z-index: 100;
-    position: fixed;
-    bottom: 0px;
-    right: 0px;
-    .list {
-        padding: 5px;
-        color: #1e5162;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx
deleted file mode 100644
index bd73ef887..000000000
--- a/src/client/views/TempTreeView.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { action, observable, computed } from "mobx";
-import React = require("react");
-import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { ListField } from "../../fields/ListField";
-import "./TempTreeView.scss"
-import { DocumentManager } from "./DocumentManager";
-import { KeyStore } from "../../fields/KeyStore";
-
-
-@observer
-export class TempTreeView extends React.Component {
-
-    @action
-    onClick(doc: Document) {
-
-        let view = DocumentManager.Instance.getDocumentView(doc);
-        if (view != null) {
-            // DocumentManager.Instance.centerNode(view);
-            doc = view.props.Document
-            view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0))
-        }
-    }
-
-    render() {
-        return (
-            <div className="tempTree">
-                <div className="list">
-                    {DocumentManager.Instance.DocumentViews.map(doc => {
-                        return (
-                            <div key={doc.Id} onClick={() => { this.onClick(doc.props.Document) }}>
-                                {doc.props.Document.Title}
-                            </div>
-                        )
-                    }
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d5b888e28..6b7c2a191 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -272,7 +272,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     ScreenToLocalTransform={this.ScreenToLocalTransform}
                     isTopMost={true}
                     SelectOnLoad={false}
-                    focus={(doc: Document, x: number, y: number) => { }}
+                    focus={(doc: Document) => { }}
                     ContainingCollectionView={undefined} />
             </div>
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index fc6021a6e..1b39dcae5 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -22,7 +22,6 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import { Documents } from "../../documents/Documents";
 import React = require("react");
-import { DocumentManager } from "../DocumentManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
@@ -224,7 +223,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
         if (lvalue && lvalue != FieldWaiting) {
             return lvalue.Data.map(doc => {
-                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc} ref={focus}//tfs: why are we setting ref={focus}?
+                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
                     AddDocument={this.props.addDocument}
                     RemoveDocument={this.props.removeDocument}
                     ScreenToLocalTransform={this.getTransform}
@@ -270,7 +269,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     //when focus is lost, this will remove the preview cursor
     @action
-    onBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
+    onBlur = (e: React.FocusEvent<HTMLDivElement>): void => {
         this._previewCursorVisible = false;
     }
 
@@ -288,9 +287,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
         const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
-        // const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
-        // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
-        console.log("center:", this.getLocalTransform().transformPoint(this.centeringShiftX, this.centeringShiftY));
 
         return (
             <div className="collectionfreeformview-container"
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index cdbd472b9..bf06dd5e9 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -175,6 +175,8 @@ export class CollectionSchemaView extends CollectionViewBase {
         return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
     }
 
+    focusDocument = (doc: Document) => { }
+
     render() {
         const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
         const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
@@ -192,7 +194,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                             PanelWidth={this.getPanelWidth}
                             PanelHeight={this.getPanelHeight}
                             ContainingCollectionView={this.props.CollectionView}
-                            focus={(doc) => this.props.focus(this.props.Document)}
+                            focus={this.focusDocument}
                         />
                     </div>
                 }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a624c1d7f..9244ca08d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -21,7 +21,6 @@ import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
-import { DocumentManager } from "../DocumentManager";
 import { TextField } from "../../../fields/TextField";
 import { Utils } from "../../../Utils";
 import { CollectionViewProps } from "../collections/CollectionViewBase";
@@ -40,7 +39,7 @@ export interface DocumentViewProps {
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
-    focus: (doc: Document, x: number, y: number) => void;
+    focus: (doc: Document) => void;
     SelectOnLoad: boolean;
 }
 export interface JsxArgs extends DocumentViewProps {
@@ -191,12 +190,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
 
-    //TODO Monika
-    @action
-    Center = (e: React.MouseEvent): void => {
-        this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0))
-    }
-
     @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
@@ -209,20 +202,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
         ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
-        ContextMenu.Instance.addItem({ description: "Center", event: this.Center })
+        ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
         ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
         ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
-        ContextMenu.Instance.addItem({
-            description: "center", event: () => {
-                if (this.props.ContainingCollectionView) {
-                    let doc = this.props.ContainingCollectionView.props.Document;
-                    doc.SetNumber(KeyStore.PanX, this.props.Document.GetNumber(KeyStore.X, 0) + (this.props.Document.GetNumber(KeyStore.Width, 0) / 2))
-                    doc.SetNumber(KeyStore.PanY, this.props.Document.GetNumber(KeyStore.Y, 0) + (this.props.Document.GetNumber(KeyStore.Height, 0) / 2))
-                }
-            }
-        })
         //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         if (!this.topMost) {
@@ -245,23 +229,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         />
     }
 
-    //adds doc to global list
-    componentDidMount: () => void = () => {
-        runInAction(() => {
-            DocumentManager.Instance.DocumentViews.push(this);
-        })
-    }
-
-    //removes doc from global list
-    componentWillUnmount: () => void = () => {
-        runInAction(() => {
-            for (let node of DocumentManager.Instance.DocumentViews) {
-                if (Object.is(node, this)) {
-                    DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1);
-                }
-            }
-        })
-    }
     isSelected = () => {
         return SelectionManager.IsSelected(this);
     }
-- 
cgit v1.2.3-70-g09d2


From 60f2458ca0faaa8bc5f5d333034cea5fdd513bf6 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Sat, 2 Mar 2019 17:30:01 -0500
Subject: cleaning pt2

---
 src/client/views/ContextMenuItem.tsx                   | 1 -
 src/client/views/DocumentDecorations.tsx               | 2 +-
 src/client/views/collections/CollectionDockingView.tsx | 5 +----
 src/client/views/collections/CollectionSchemaView.tsx  | 4 ++--
 src/client/views/collections/CollectionView.tsx        | 2 +-
 src/client/views/collections/CollectionViewBase.tsx    | 6 +++---
 src/client/views/nodes/DocumentView.tsx                | 6 +-----
 src/client/views/nodes/FieldView.tsx                   | 2 +-
 8 files changed, 10 insertions(+), 18 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 8f00f8b3d..91fc96c19 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,5 +1,4 @@
 import React = require("react");
-import { ContextMenu } from "./ContextMenu";
 
 export interface ContextMenuProps {
     description: string;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 975a125f7..9fd73a33b 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,4 +1,4 @@
-import { observable, computed, action } from "mobx";
+import { observable, computed } from "mobx";
 import React = require("react");
 import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6b7c2a191..c51fba908 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,13 +1,11 @@
 import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed, observable, reaction } from "mobx";
+import { action, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
 import Measure from "react-measure";
 import { FieldId, Opt, Field } from "../../../fields/Field";
 import { Utils } from "../../../Utils";
@@ -17,7 +15,6 @@ import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import React = require("react");
-import { changeDependenciesStateTo0 } from "mobx/lib/internal";
 import { SubCollectionViewProps } from "./CollectionViewBase";
 
 @observer
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index bf06dd5e9..8c4a1bf2e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,11 +1,11 @@
 import React = require("react")
-import { action, observable, trace } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
 import "react-table/react-table.css";
 import { Document } from "../../../fields/Document";
-import { Field, FieldWaiting } from "../../../fields/Field";
+import { Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { CompileScript, ToField } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 948f97889..eb502f611 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 51dd50d39..73d7acefb 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,12 +1,12 @@
-import { action, computed } from "mobx";
+import { action } from "mobx";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import React = require("react");
 import { KeyStore } from "../../../fields/KeyStore";
-import { Opt, FieldWaiting } from "../../../fields/Field";
+import { FieldWaiting } from "../../../fields/Field";
 import { undoBatch } from "../../util/UndoManager";
 import { DragManager } from "../../util/DragManager";
-import { DocumentView, JsxArgs } from "../nodes/DocumentView";
+import { DocumentView } from "../nodes/DocumentView";
 import { Documents, DocumentOptions } from "../../documents/Documents";
 import { Key } from "../../../fields/Key";
 import { Transform } from "../../util/Transform";
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6ee313522..2fc00f15d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,6 +1,5 @@
-import { action, computed, runInAction } from "mobx";
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { observable } from "mobx";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
@@ -21,9 +20,6 @@ import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
-import { TextField } from "../../../fields/TextField";
-import { Utils } from "../../../Utils";
-import { CollectionViewProps } from "../collections/CollectionViewBase";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index f372258f8..9e63006d1 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,7 +1,7 @@
 import React = require("react")
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Field, FieldWaiting, FieldValue } from "../../../fields/Field";
 import { Document } from "../../../fields/Document";
 import { TextField } from "../../../fields/TextField";
 import { NumberField } from "../../../fields/NumberField";
-- 
cgit v1.2.3-70-g09d2


From 22d7f22a60a17373a6e453e09cc616f651c11a9e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 7 Mar 2019 14:37:25 -0500
Subject: fixed flicker when activating a PDF

---
 .../views/collections/CollectionDockingView.tsx    |   2 +-
 .../views/collections/CollectionFreeFormView.scss  |   1 +
 src/client/views/nodes/KeyValueBox.tsx             |  23 +---
 src/client/views/nodes/PDFNode.scss                |  10 +-
 src/client/views/nodes/PDFNode.tsx                 | 151 +++++++++++----------
 src/fields/ListField.ts                            |   1 +
 6 files changed, 91 insertions(+), 97 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

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();
     }
 
-- 
cgit v1.2.3-70-g09d2

