clean up a bit.

4 files changed, 24 insertions, 49 deletions

diff --git a/src/client/Server.ts b/src/client/Server.ts
index 76f182e41..3e61729ab 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -60,21 +60,7 @@ export class Server {
         });
     }
 
-    static times = 0; // hack for testing
     public static GetDocumentField(doc: Document, key: Key) {
-        // let keyId: string = element[0]
-        // let valueId: string = element[1]
-        // Server.GetField(keyId, (key: Field) => {
-        //     if (key instanceof Key) {
-        //         Server.GetField(valueId, (field: Field) => {
-        //             console.log(field)
-        //             doc.Set(key as Key, field)
-        //         })
-        //     }
-        //     else {
-        //         console.log("how did you get a key that isnt a key wtf")
-        //     }
-        // })
         let field = doc._proxies.get(key.Id);
         if (field) {
             this.GetField(field,
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 41fad9dac..abba0a6ae 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,7 +1,7 @@
 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, computed, observable, reaction, trace } from "mobx";
 import { DragManager } from "../../util/DragManager";
 import { DocumentView } from "../nodes/DocumentView";
 import { Document } from "../../../fields/Document";
@@ -43,6 +43,8 @@ export class CollectionDockingView extends CollectionViewBase {
     private _containerRef = React.createRef<HTMLDivElement>();
     private _makeFullScreen: boolean = false;
     private _maximizedStack: any = null;
+    private _pointerIsDown = false; // used to defer updating the document's layout state Data
+    private _deferredLayoutChange = ""; // the last deferred state change made that needs to be flushed on pointer up
 
     constructor(props: CollectionViewProps) {
         super(props);
@@ -131,13 +133,9 @@ export class CollectionDockingView extends CollectionViewBase {
     }
     componentDidMount: () => void = () => {
         if (this._containerRef.current) {
-            reaction(() => {
-                if (this.props.Document.Get(KeyStore.Data) as TextField) {
-                    return [(this.props.Document.Get(KeyStore.Data) as TextField).Data];
-                }
-                return [this.props.Document.Get(KeyStore.Data)];
-            }, () => this.setupGoldenLayout()); // should only react once when the Data field is retrieved from the sever .. after that, changes to the Data field will not trigger this reaction.
-            this.setupGoldenLayout();
+            reaction(
+                () => this.props.Document.GetText(KeyStore.Data, ""),
+                () => this.setupGoldenLayout(), { fireImmediately: true });
 
             window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
         }
@@ -147,14 +145,21 @@ export class CollectionDockingView extends CollectionViewBase {
     }
     @action
     onResize = (event: any) => {
-        var cur = this.props.ContainingDocumentView!.MainContent.current;
+        var cur = this._containerRef.current;
 
         // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
         this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
     }
 
     @action
+    onPointerUp = (e: PointerEvent): void => {
+        window.removeEventListener("pointerup", this.onPointerUp)
+        this._pointerIsDown = false;
+    }
+    @action
     onPointerDown = (e: React.PointerEvent): void => {
+        window.addEventListener("pointerup", this.onPointerUp)
+        this._pointerIsDown = true;
         if (e.button === 2 && this.active) {
             e.stopPropagation();
             e.preventDefault();
@@ -166,8 +171,10 @@ export class CollectionDockingView extends CollectionViewBase {
     }
 
     stateChanged = () => {
-        var json = JSON.stringify(this._goldenLayout.toConfig());
-        this.props.Document.SetText(KeyStore.Data, json)
+        if (!this._pointerIsDown) {
+            var json = JSON.stringify(this._goldenLayout.toConfig());
+            this.props.Document.SetText(KeyStore.Data, json)
+        }
     }
 
     tabCreated = (tab: any) => {
@@ -202,13 +209,8 @@ export class CollectionDockingView extends CollectionViewBase {
 
 
     render() {
-        const { fieldKey: fieldKey, Document: Document } = this.props;
-        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.
-        // tfs: we should be able to use this.props.ScreenToLocalTransform to get s right?
-        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;
+        this.props.Document.GetNumber(KeyStore.Width, 0); // bcz: needed to force render when window size changes
+        this.props.Document.GetNumber(KeyStore.Height, 0);
         return (
             <div className="collectiondockingview-container" id="menuContainer"
                 onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ee1a835f8..0ef8856b7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -237,20 +237,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-    // 
-    // returns the cumulative scaling between the document and the screen
-    // tfs: I don't think this should be necessary
-    //
-    @computed
-    public get ScalingToScreenSpace(): number {
-        if (this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1);
-            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
-        }
-        return 1;
-    }
-
     isSelected = () => {
         return SelectionManager.IsSelected(this);
     }
@@ -298,8 +284,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var strwidth = width > 0 ? width.toString() + "px" : "100%";
         var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var strheight = height > 0 ? height.toString() + "px" : "100%";
+        var scaling = this.props.Scaling;// this.props.ScreenToLocalTransform().Scale;
         return (
-            <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+            <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${scaling},${scaling})` }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown} >
                 <JsxParser
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index fcc8adbcf..0c2ad0fdb 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -49,7 +49,7 @@ export class Document extends Field {
                 if (this.fields.has(key.Id)) {
                     field = this.fields.get(key.Id)!.field;
                 } else {
-                    field = "<Waiting>";
+                    field = FieldWaiting;
                 }
             }
         } else {
@@ -68,7 +68,7 @@ export class Document extends Field {
                         if (this.fields.has(key.Id)) {
                             field = this.fields.get(key.Id)!.field;
                         } else {
-                            field = "<Waiting>";
+                            field = FieldWaiting;
                         }
                         break;
                     }