From 090093a50397ddc2a8fc2c50f5097f4a4ea8a74c Mon Sep 17 00:00:00 2001
From: Hannah <hannah_chow@brown.edu>
Date: Thu, 7 Feb 2019 15:50:23 -0500
Subject: started adding editable schema cells

---
 src/fields/Document.ts                         |  4 +++
 src/fields/Field.ts                            |  2 ++
 src/fields/NumberField.ts                      |  4 +++
 src/views/EditableView.tsx                     | 35 ++++++++++++++++++++++++++
 src/views/collections/CollectionSchemaView.tsx | 29 +++++++++++++++++++--
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/views/EditableView.tsx

(limited to 'src')

diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 3d74c047c..53138eda9 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -141,6 +141,10 @@ export class Document extends Field {
         return delegate;
     }
 
+    ToScriptString(): string {
+        return "";
+    }
+
     TrySetValue(value: any): boolean {
         throw new Error("Method not implemented.");
     }
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 9880116c0..20d8bf5ed 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -47,6 +47,8 @@ export abstract class Field {
         return this.id === other.id;
     }
 
+    abstract ToScriptString(): string;
+
     abstract TrySetValue(value: any): boolean;
 
     abstract GetValue(): any;
diff --git a/src/fields/NumberField.ts b/src/fields/NumberField.ts
index c3444f644..03926d696 100644
--- a/src/fields/NumberField.ts
+++ b/src/fields/NumberField.ts
@@ -5,6 +5,10 @@ export class NumberField extends BasicField<number> {
         super(data);
     }
 
+    ToScriptString(): string {
+        return "new NumberField(this.Data)";
+    }
+
     Copy() {
         return new NumberField(this.Data);
     }
diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
new file mode 100644
index 000000000..5f8d6ebcd
--- /dev/null
+++ b/src/views/EditableView.tsx
@@ -0,0 +1,35 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
+
+export interface EditableProps {
+    GetValue(): string;
+    SetValue(value: string): boolean;
+    contents: any;
+}
+
+@observer
+export class EditableView extends React.Component<EditableProps> {
+    @observable
+    editing: boolean = false;
+
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key == "Enter" && !e.ctrlKey) {
+            this.props.SetValue(e.currentTarget.value);
+            this.editing = false;
+        }
+    }
+
+    render() {
+        if (this.editing) {
+            return <input value={this.props.GetValue()} onKeyDown={this.onKeyDown}></input>
+        } else {
+            return (
+                <div>
+                    {this.props.contents}
+                    <button onClick={() => this.editing = true}>Edit</button>
+                </div>
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
index 8817cb496..c7a3d81a4 100644
--- a/src/views/collections/CollectionSchemaView.tsx
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -11,6 +11,9 @@ import "./CollectionSchemaView.scss"
 import { ScrollBox } from "../../util/ScrollBox";
 import { CollectionViewBase } from "./CollectionViewBase";
 import { DocumentView } from "../nodes/DocumentView";
+import { EditableView } from "../EditableView";
+import { CompileScript } from "../../util/Scripting";
+import { Field } from "../../fields/Field";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -25,9 +28,29 @@ export class CollectionSchemaView extends CollectionViewBase {
             fieldKey: rowProps.value[1],
             DocumentViewForField: undefined
         }
-        return (
+        let contents = (
             <FieldView {...props} />
         )
+        return (
+            <EditableView contents={contents} GetValue={() => {
+                let field = props.doc.Get(props.fieldKey);
+                if (field && field instanceof Field) {
+                    return field.ToScriptString();
+                }
+                return field || "";
+            }} SetValue={(value: string) => {
+                let script = CompileScript(value);
+                if (!script.compiled) {
+                    return false;
+                }
+                let field = script();
+                if (field instanceof Field) {
+                    props.doc.Set(props.fieldKey, field);
+                    return true;
+                }
+                return false;
+            }}></EditableView>
+        )
     }
 
     private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
@@ -74,7 +97,9 @@ export class CollectionSchemaView extends CollectionViewBase {
             [KS.Title, KS.Data, KS.Author])
         let content;
         if (this.selectedIndex != -1) {
-            content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />)
+            content = (
+                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+            )
         } else {
             content = <div />
         }
-- 
cgit v1.2.3-70-g09d2


From ccee60f591cdb00b04c4e5db0483420b9db7b7c8 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 7 Feb 2019 16:04:32 -0500
Subject: simplified DB API and added a SocketStub class that should be
 replaced with an actual Socket-to-DB implementation.

---
 src/Server.tsx             | 117 +++++++++++++++------------------------------
 src/SocketStub.tsx         |  78 ++++++++++++++++++++++++++++++
 src/documents/Documents.ts |   5 +-
 3 files changed, 119 insertions(+), 81 deletions(-)
 create mode 100644 src/SocketStub.tsx

(limited to 'src')

diff --git a/src/Server.tsx b/src/Server.tsx
index 04473424a..83f0d0f43 100644
--- a/src/Server.tsx
+++ b/src/Server.tsx
@@ -1,66 +1,59 @@
 import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING } from "./fields/Field"
 import { Key, KeyStore } from "./fields/Key"
-import { ObservableMap, computed, action, observable } from "mobx";
+import { ObservableMap, action } from "mobx";
 import { Document } from "./fields/Document"
+import { SocketStub } from "./SocketStub";
 
 export class Server {
-    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
-    static DocumentStore: ObservableMap<DOC_ID, ObservableMap<Key, FIELD_ID>> = new ObservableMap();
-    public static ClientFieldsCached: ObservableMap<DOC_ID, Field | FIELD_WAITING> = new ObservableMap();
+    private static ClientFieldsCached: ObservableMap<DOC_ID, Field | FIELD_WAITING> = new ObservableMap();
 
-    // 'hack' is here temoporarily for simplicity when debugging things.
-    // normally, you can't assume this will return a document since the server responds asynchronously 
-    // and there might not actually be a matching document on the server.
-    // the right way to call this is from within a reaction where you test whether the return value is FieldWaiting.
-    public static GetDocument(docid: DOC_ID, hack: boolean = false) {
-        if (!this.ClientFieldsCached.has(docid)) {
-            this.SEND_DOCUMENT_REQUEST(docid, hack);
+    // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
+    // Call this is from within a reaction and test whether the return value is FieldWaiting.
+    // 'hackTimeout' is here temporarily for simplicity when debugging things.
+    public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
+        if (!this.ClientFieldsCached.has(fieldid)) {
+            this.ClientFieldsCached.set(fieldid, FieldWaiting);
+            //simulating a server call with a registered callback action
+            SocketStub.SEND_FIELD_REQUEST(fieldid,
+                action((field: Field) => {
+                    Server.cacheField(field);
+                    callback(field);
+                }), hackTimeout);
         }
-        return this.ClientFieldsCached.get(docid) as Document;
-    }
-    public static AddDocument(document: Document) {
-        // Replace with call to server
-        this.DocumentStore.set(document.Id, new ObservableMap());
-        document.fields.forEach((field, key) => {
-            this.FieldStore.set((field as Field).Id, (field as Field));
-            this.DocumentStore.get(document.Id)!.set(key, (field as Field).Id);
-        });
-    }
-    public static AddDocumentField(doc: Document, key: Key, value: Field) {
-        // Replace with call to server
-        if (this.DocumentStore.get(doc.Id))
-            this.DocumentStore.get(doc.Id)!.set(key, value.Id);
-    }
-    public static DeleteDocumentField(doc: Document, key: Key) {
-        // Replace with call to server
-        if (this.DocumentStore.get(doc.Id))
-            this.DocumentStore.get(doc.Id)!.delete(key);
-    }
-    public static SetFieldValue(field: Field, value: any) {
-        // Replace with call to server
-        if (this.FieldStore.get(field.Id))
-            this.FieldStore.get(field.Id)!.TrySetValue(value);
+        return this.ClientFieldsCached.get(fieldid);
     }
 
-
-    @action
+    static times = 0; // hack for testing
     public static GetDocumentField(doc: Document, key: Key) {
-        var fieldid = doc._proxies.get(key);
-        if (!this.ClientFieldsCached.has(fieldid)) {
-            this.ClientFieldsCached.set(fieldid, FieldWaiting);
-            this.SEND_DOCUMENT_FIELD_REQUEST(doc, key, fieldid);
-        }
+        var timeoutHack: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
 
-        var field = this.ClientFieldsCached.get(fieldid);
+        var field = this.GetField(doc._proxies.get(key),
+            action((fieldfromserver: Field) => {
+                doc._proxies.delete(key);
+                doc.fields.set(key, this.cacheField(fieldfromserver));
+            })
+            , timeoutHack);
         if (field != FieldWaiting) {
             doc._proxies.delete(key); // perhaps another document inquired the same field 
         }
         return field;
     }
-    static times = 0; // hack for testing
+
+    public static AddDocument(document: Document) {
+        SocketStub.SEND_ADD_DOCUMENT(document);
+    }
+    public static AddDocumentField(doc: Document, key: Key, value: Field) {
+        SocketStub.SEND_ADD_DOCUMENT_FIELD(doc, key, value);
+    }
+    public static DeleteDocumentField(doc: Document, key: Key) {
+        SocketStub.SEND_DELETE_DOCUMENT_FIELD(doc, key);
+    }
+    public static SetFieldValue(field: Field, value: any) {
+        SocketStub.SEND_SET_FIELD(field, value);
+    }
 
     @action
-    static cacheField(clientField: Field) {
+    private static cacheField(clientField: Field) {
         var cached = this.ClientFieldsCached.get(clientField.Id);
         if (!cached || cached == FieldWaiting) {
             this.ClientFieldsCached.set(clientField.Id, clientField);
@@ -69,38 +62,4 @@ export class Server {
         }
         return this.ClientFieldsCached.get(clientField.Id) as Field;
     }
-
-    public static SEND_DOCUMENT_FIELD_REQUEST(doc: Document, key: Key, fieldid: FIELD_ID) {
-        //simulating a server call with a registered callback action
-        setTimeout(() => this.receivedDocumentField(doc, key, fieldid, this.FieldStore.get(fieldid)),
-            key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500
-        )
-    }
-
-    public static SEND_DOCUMENT_REQUEST(docid: DOC_ID, hack: boolean = false) {
-        if (hack) { // temporary for debugging
-            this.receivedDocument(docid, this.DocumentStore.get(docid)!)
-        } else {
-            //simulating a server call with a registered callback action
-            setTimeout(() => this.receivedDocument(docid, this.DocumentStore.get(docid)!), 1500);
-        }
-    }
-
-    @action
-    static receivedDocument(docid: DOC_ID, fieldlist: ObservableMap<Key, FIELD_ID>) {
-        var cachedDoc = this.cacheField(new Document(docid));
-        fieldlist!.forEach((field: FIELD_ID, key: Key) => (cachedDoc as Document)._proxies.set(key, field));
-    }
-
-    @action
-    static receivedDocumentField(doc: Document, key: Key, fieldid: FIELD_ID, fieldfromserver: Field | undefined) {
-        doc._proxies.delete(key);
-        var cachedField = this.cacheField(fieldfromserver!);
-
-        // if the field is a document and it wasn't already cached, then we need to inquire all of its fields from the server...
-        if (cachedField instanceof Document && fieldfromserver! == cachedField) {
-            this.SEND_DOCUMENT_REQUEST(cachedField.Id);
-        }
-        doc.fields.set(key, cachedField);
-    }
 }
diff --git a/src/SocketStub.tsx b/src/SocketStub.tsx
new file mode 100644
index 000000000..49a847d34
--- /dev/null
+++ b/src/SocketStub.tsx
@@ -0,0 +1,78 @@
+import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING } from "./fields/Field"
+import { Key, KeyStore } from "./fields/Key"
+import { ObservableMap, action } from "mobx";
+import { Document } from "./fields/Document"
+
+export class SocketStub {
+
+    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
+    public static SEND_ADD_DOCUMENT(document: Document) {
+
+        // Send a serialized version of the document to the server
+        // ...SOCKET(ADD_DOCUMENT, serialied document)
+
+        // server stores each document field in its repository of stored fields
+        document.fields.forEach((f, key) => this.FieldStore.set((f as Field).Id, f as Field));
+
+        // server stores stripped down document (w/ only field id proxies) in the field store
+        this.FieldStore.set(document.Id, new Document(document.Id));
+        document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id));
+    }
+
+    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void, timeout: number) {
+
+        if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that.
+            callback(this.FieldStore.get(fieldid) as Field);
+        else { // actual logic here... 
+
+            // Send a request for fieldid to the server
+            // ...SOCKET(RETRIEVE_FIELD, fieldid)
+
+            // server responds (simulated with a timeout) and the callback is invoked
+            setTimeout(() =>
+
+                // when the field data comes back, call the callback() function 
+                callback(this.FieldStore.get(fieldid) as Field),
+
+
+                timeout);
+        }
+    }
+
+    public static SEND_ADD_DOCUMENT_FIELD(doc: Document, key: Key, value: Field) {
+
+        // Send a serialized version of the field to the server along with the
+        // associated info of the document id and key where it is used.
+
+        // ...SOCKET(ADD_DOCUMENT_FIELD, document id, key id, serialized field)
+
+        // server updates its document to hold a proxy mapping from key => fieldId
+        var document = this.FieldStore.get(doc.Id) as Document;
+        if (document)
+            document._proxies.set(key, value.Id);
+
+        // server adds the field to its repository of fields
+        this.FieldStore.set(value.Id, value);
+    }
+
+    public static SEND_DELETE_DOCUMENT_FIELD(doc: Document, key: Key) {
+        // Send a request to delete the field stored under the specified key from the document
+
+        // ...SOCKET(DELETE_DOCUMENT_FIELD, document id, key id)
+
+        // Server removes the field id from the document's list of field proxies
+        var document = this.FieldStore.get(doc.Id) as Document;
+        if (document)
+            document._proxies.delete(key);
+    }
+
+    public static SEND_SET_FIELD(field: Field, value: any) {
+        // Send a request to set the value of a field
+
+        // ...SOCKET(SET_FIELD, field id, serialized field value)
+
+        // Server updates the value of the field in its fieldstore
+        if (this.FieldStore.get(field.Id))
+            this.FieldStore.get(field.Id)!.TrySetValue(value);
+    }
+}
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 90124d36c..ce9a1529d 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -123,7 +123,7 @@ export namespace Documents {
             Server.AddDocument(imageProto);
             return imageProto;
         }
-        return Server.GetDocument(imageProtoId, true)!;
+        return Server.GetField(imageProtoId) as Document;
     }
 
     export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
@@ -131,7 +131,8 @@ export namespace Documents {
         setupOptions(doc, options);
         doc.Set(KeyStore.Data, new ImageField(new URL(url)));
         Server.AddDocument(doc);
-        return Server.GetDocument(doc.Id, true)!;
+        var sdoc = Server.GetField(doc.Id) as Document;
+        return sdoc;
     }
 
     let collectionProto: Document;
-- 
cgit v1.2.3-70-g09d2


From f2f9261c6469ed330ff9395fb97e15ca53c891f2 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 7 Feb 2019 16:07:29 -0500
Subject: final cleanup pass.

---
 src/Server.tsx         | 8 ++++----
 src/SocketStub.tsx     | 2 +-
 src/fields/Document.ts | 2 +-
 src/fields/Field.ts    | 1 -
 4 files changed, 6 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/Server.tsx b/src/Server.tsx
index 83f0d0f43..7eeec25e1 100644
--- a/src/Server.tsx
+++ b/src/Server.tsx
@@ -1,11 +1,11 @@
-import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING } from "./fields/Field"
+import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING } from "./fields/Field"
 import { Key, KeyStore } from "./fields/Key"
 import { ObservableMap, action } from "mobx";
 import { Document } from "./fields/Document"
 import { SocketStub } from "./SocketStub";
 
 export class Server {
-    private static ClientFieldsCached: ObservableMap<DOC_ID, Field | FIELD_WAITING> = new ObservableMap();
+    private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
 
     // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
     // Call this is from within a reaction and test whether the return value is FieldWaiting.
@@ -25,14 +25,14 @@ export class Server {
 
     static times = 0; // hack for testing
     public static GetDocumentField(doc: Document, key: Key) {
-        var timeoutHack: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
+        var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
 
         var field = this.GetField(doc._proxies.get(key),
             action((fieldfromserver: Field) => {
                 doc._proxies.delete(key);
                 doc.fields.set(key, this.cacheField(fieldfromserver));
             })
-            , timeoutHack);
+            , hackTimeout);
         if (field != FieldWaiting) {
             doc._proxies.delete(key); // perhaps another document inquired the same field 
         }
diff --git a/src/SocketStub.tsx b/src/SocketStub.tsx
index 49a847d34..f9d48c067 100644
--- a/src/SocketStub.tsx
+++ b/src/SocketStub.tsx
@@ -1,4 +1,4 @@
-import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING } from "./fields/Field"
+import { Field, FIELD_ID } from "./fields/Field"
 import { Key, KeyStore } from "./fields/Key"
 import { ObservableMap, action } from "mobx";
 import { Document } from "./fields/Document"
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 3d74c047c..cc81ff4a7 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,4 +1,4 @@
-import { Field, Cast, Opt, FieldWaiting, FIELD_ID, DOC_ID } from "./Field"
+import { Field, Cast, Opt, FieldWaiting, FIELD_ID } from "./Field"
 import { Key, KeyStore } from "./Key"
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action, observable } from "mobx";
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 9880116c0..3c1e976d4 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -13,7 +13,6 @@ export function Cast<T extends Field>(field: Opt<Field>, ctor: { new(): T }): Op
 export let FieldWaiting: FIELD_WAITING = "<Waiting>";
 export type FIELD_WAITING = "<Waiting>";
 export type FIELD_ID = string | undefined;
-export type DOC_ID = FIELD_ID;
 export type Opt<T> = T | undefined | FIELD_WAITING;
 
 export abstract class Field {
-- 
cgit v1.2.3-70-g09d2


From 8d264be35a511204449c22d0a4b1754e241a3421 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 7 Feb 2019 16:27:51 -0500
Subject: bug fix

---
 src/Server.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/Server.tsx b/src/Server.tsx
index 7eeec25e1..745634ca5 100644
--- a/src/Server.tsx
+++ b/src/Server.tsx
@@ -11,14 +11,14 @@ export class Server {
     // Call this is from within a reaction and test whether the return value is FieldWaiting.
     // 'hackTimeout' is here temporarily for simplicity when debugging things.
     public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
-        if (!this.ClientFieldsCached.has(fieldid)) {
+        if (!this.ClientFieldsCached.get(fieldid)) {
             this.ClientFieldsCached.set(fieldid, FieldWaiting);
             //simulating a server call with a registered callback action
             SocketStub.SEND_FIELD_REQUEST(fieldid,
-                action((field: Field) => {
-                    Server.cacheField(field);
-                    callback(field);
-                }), hackTimeout);
+                action((field: Field) => callback(Server.cacheField(field))),
+                hackTimeout);
+        } else if (this.ClientFieldsCached.get(fieldid) != FieldWaiting) {
+            callback(this.ClientFieldsCached.get(fieldid) as Field);
         }
         return this.ClientFieldsCached.get(fieldid);
     }
@@ -27,16 +27,12 @@ export class Server {
     public static GetDocumentField(doc: Document, key: Key) {
         var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
 
-        var field = this.GetField(doc._proxies.get(key),
+        return this.GetField(doc._proxies.get(key),
             action((fieldfromserver: Field) => {
                 doc._proxies.delete(key);
-                doc.fields.set(key, this.cacheField(fieldfromserver));
+                doc.fields.set(key, fieldfromserver);
             })
             , hackTimeout);
-        if (field != FieldWaiting) {
-            doc._proxies.delete(key); // perhaps another document inquired the same field 
-        }
-        return field;
     }
 
     public static AddDocument(document: Document) {
-- 
cgit v1.2.3-70-g09d2


From 9b942166ca6b09ce4f310928c3daf8503a63ee5c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 7 Feb 2019 23:33:44 -0500
Subject: Restored Opt<T> and made a new FieldValue<T> type to replace old
 Opt<T>

---
 src/Main.tsx                                       | 16 +++++++--------
 src/Server.tsx                                     | 10 ++++-----
 src/fields/Document.ts                             | 14 ++++++-------
 src/fields/DocumentReference.ts                    | 11 ++++++----
 src/fields/Field.ts                                | 13 ++++++------
 src/fields/ImageField.ts                           |  4 ++++
 src/fields/Key.ts                                  |  3 +++
 src/fields/ListField.ts                            |  4 ++++
 src/fields/RichTextField.ts                        |  4 ++++
 src/fields/TextField.ts                            |  4 ++++
 src/util/Scripting.ts                              | 17 +++++++++++----
 src/views/EditableView.tsx                         |  9 +++++---
 src/views/collections/CollectionDockingView.tsx    |  5 -----
 src/views/collections/CollectionFreeFormView.tsx   | 24 +++++++++-------------
 src/views/collections/CollectionSchemaView.tsx     |  8 +++++++-
 src/views/collections/CollectionViewBase.tsx       |  9 ++++----
 src/views/nodes/CollectionFreeFormDocumentView.tsx |  3 +--
 src/views/nodes/DocumentView.tsx                   | 12 +++++------
 src/views/nodes/FieldView.tsx                      |  4 ++--
 src/views/nodes/FormattedTextBox.tsx               | 10 ++++-----
 20 files changed, 107 insertions(+), 77 deletions(-)

(limited to 'src')

diff --git a/src/Main.tsx b/src/Main.tsx
index 6730cf799..a9ed1a365 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -46,14 +46,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 450, y: 500, title: "cat 1"
     });
-    // const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-    //     x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
-    // }));
-    // schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
-    // schemaDocs[4].SetData(KS.Author, "Bob", TextField);
-    // schemaDocs.push(doc2);
-    // const doc7 = Documents.SchemaDocument(schemaDocs)
-    const docset = [doc3]; // [doc1, doc2, doc3, doc7];
+    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+    }));
+    schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
+    schemaDocs[4].SetData(KS.Author, "Bob", TextField);
+    schemaDocs.push(doc2);
+    const doc7 = Documents.SchemaDocument(schemaDocs)
+    const docset = [doc1, doc2, doc3, doc7];
     let doc4 = Documents.CollectionDocument(docset, {
         x: 0, y: 400, title: "mini collection"
     });
diff --git a/src/Server.tsx b/src/Server.tsx
index 04473424a..08e400619 100644
--- a/src/Server.tsx
+++ b/src/Server.tsx
@@ -1,4 +1,4 @@
-import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING } from "./fields/Field"
+import { Field, FieldWaiting, FIELD_ID, DOC_ID, FIELD_WAITING, FieldValue } from "./fields/Field"
 import { Key, KeyStore } from "./fields/Key"
 import { ObservableMap, computed, action, observable } from "mobx";
 import { Document } from "./fields/Document"
@@ -44,7 +44,7 @@ export class Server {
 
 
     @action
-    public static GetDocumentField(doc: Document, key: Key) {
+    public static GetDocumentField(doc: Document, key: Key): FieldValue<Field> {
         var fieldid = doc._proxies.get(key);
         if (!this.ClientFieldsCached.has(fieldid)) {
             this.ClientFieldsCached.set(fieldid, FieldWaiting);
@@ -72,8 +72,8 @@ export class Server {
 
     public static SEND_DOCUMENT_FIELD_REQUEST(doc: Document, key: Key, fieldid: FIELD_ID) {
         //simulating a server call with a registered callback action
-        setTimeout(() => this.receivedDocumentField(doc, key, fieldid, this.FieldStore.get(fieldid)),
-            key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500
+        setTimeout(() => this.receivedDocumentField(doc, key, fieldid, this.FieldStore.get(fieldid)), 50
+            // key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500
         )
     }
 
@@ -82,7 +82,7 @@ export class Server {
             this.receivedDocument(docid, this.DocumentStore.get(docid)!)
         } else {
             //simulating a server call with a registered callback action
-            setTimeout(() => this.receivedDocument(docid, this.DocumentStore.get(docid)!), 1500);
+            setTimeout(() => this.receivedDocument(docid, this.DocumentStore.get(docid)!), 50);
         }
     }
 
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 53138eda9..e482df622 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,4 +1,4 @@
-import { Field, Cast, Opt, FieldWaiting, FIELD_ID, DOC_ID } from "./Field"
+import { Field, Cast, Opt, FieldWaiting, FIELD_ID, DOC_ID, FieldValue } from "./Field"
 import { Key, KeyStore } from "./Key"
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action, observable } from "mobx";
@@ -16,8 +16,8 @@ export class Document extends Field {
         return this.GetText(KeyStore.Title, "<untitled>");
     }
 
-    Get(key: Key, ignoreProto: boolean = false): Opt<Field> {
-        let field: Opt<Field>;
+    Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> {
+        let field: FieldValue<Field>;
         if (ignoreProto) {
             if (this.fields.has(key)) {
                 field = this.fields.get(key);
@@ -25,7 +25,7 @@ export class Document extends Field {
                 field = Server.GetDocumentField(this, key);
             }
         } else {
-            let doc: Opt<Document> = this;
+            let doc: FieldValue<Document> = this;
             while (doc && doc != FieldWaiting && field != FieldWaiting) {
                 if (!doc.fields.has(key)) {
                     if (doc._proxies.has(key)) {
@@ -46,7 +46,7 @@ export class Document extends Field {
         return field;
     }
 
-    GetT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): Opt<T> {
+    GetT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): FieldValue<T> {
         var getfield = this.Get(key, ignoreProto);
         if (getfield != FieldWaiting) {
             return Cast(getfield, ctor);
@@ -119,13 +119,13 @@ export class Document extends Field {
         this.SetData(key, value, NumberField, replaceWrongType);
     }
 
-    GetPrototype(): Opt<Document> {
+    GetPrototype(): FieldValue<Document> {
         return this.GetT(KeyStore.Prototype, Document, true);
     }
 
     GetAllPrototypes(): Document[] {
         let protos: Document[] = [];
-        let doc: Opt<Document> = this;
+        let doc: FieldValue<Document> = this;
         while (doc && doc != FieldWaiting) {
             protos.push(doc);
             doc = doc.GetPrototype();
diff --git a/src/fields/DocumentReference.ts b/src/fields/DocumentReference.ts
index 10dac9f92..983b162a3 100644
--- a/src/fields/DocumentReference.ts
+++ b/src/fields/DocumentReference.ts
@@ -1,4 +1,4 @@
-import { Field, Opt } from "./Field";
+import { Field, Opt, FieldValue } from "./Field";
 import { Document } from "./Document";
 import { Key } from "./Key";
 
@@ -15,12 +15,12 @@ export class DocumentReference extends Field {
         super();
     }
 
-    Dereference(): Opt<Field> {
+    Dereference(): FieldValue<Field> {
         return this.document.Get(this.key);
     }
 
-    DereferenceToRoot(): Opt<Field> {
-        let field: Opt<Field> = this;
+    DereferenceToRoot(): FieldValue<Field> {
+        let field: FieldValue<Field> = this;
         while (field instanceof DocumentReference) {
             field = field.Dereference();
         }
@@ -37,5 +37,8 @@ export class DocumentReference extends Field {
         throw new Error("Method not implemented.");
     }
 
+    ToScriptString(): string {
+        return "";
+    }
 
 }
\ No newline at end of file
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 20d8bf5ed..2bfc9d1da 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -1,7 +1,7 @@
 
 import { Utils } from "../Utils";
 
-export function Cast<T extends Field>(field: Opt<Field>, ctor: { new(): T }): Opt<T> {
+export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T }): Opt<T> {
     if (field) {
         if (ctor && field instanceof ctor) {
             return field;
@@ -14,7 +14,8 @@ export let FieldWaiting: FIELD_WAITING = "<Waiting>";
 export type FIELD_WAITING = "<Waiting>";
 export type FIELD_ID = string | undefined;
 export type DOC_ID = FIELD_ID;
-export type Opt<T> = T | undefined | FIELD_WAITING;
+export type Opt<T> = T | undefined;
+export type FieldValue<T> = Opt<T> | FIELD_WAITING;
 
 export abstract class Field {
     //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>();
@@ -28,18 +29,18 @@ export abstract class Field {
         this.id = id || Utils.GenerateGuid();
     }
 
-    Dereference(): Opt<Field> {
+    Dereference(): FieldValue<Field> {
         return this;
     }
-    DereferenceToRoot(): Opt<Field> {
+    DereferenceToRoot(): FieldValue<Field> {
         return this;
     }
 
-    DereferenceT<T extends Field = Field>(ctor: { new(): T }): Opt<T> {
+    DereferenceT<T extends Field = Field>(ctor: { new(): T }): FieldValue<T> {
         return Cast(this.Dereference(), ctor);
     }
 
-    DereferenceToRootT<T extends Field = Field>(ctor: { new(): T }): Opt<T> {
+    DereferenceToRootT<T extends Field = Field>(ctor: { new(): T }): FieldValue<T> {
         return Cast(this.DereferenceToRoot(), ctor);
     }
 
diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts
index bc2e7cdf4..63baf815b 100644
--- a/src/fields/ImageField.ts
+++ b/src/fields/ImageField.ts
@@ -10,6 +10,10 @@ export class ImageField extends BasicField<URL> {
         return this.Data.href;
     }
 
+    ToScriptString(): string {
+        return `new ImageField(${this.Data})`;
+    }
+
     Copy(): Field {
         return new ImageField(this.Data);
     }
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 5cd43f55e..993102613 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -27,6 +27,9 @@ export class Key extends Field {
         return this;
     }
 
+    ToScriptString(): string {
+        return name;
+    }
 
 }
 
diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index 8607ebe43..8843338c1 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -6,6 +6,10 @@ export class ListField<T extends Field> extends BasicField<T[]> {
         super(data.slice());
     }
 
+    ToScriptString(): string {
+        return "new ListField([" + this.Data.map(field => field.ToScriptString()).join(", ") + "])";
+    }
+
     Copy(): Field {
         return new ListField<T>(this.Data);
     }
diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts
index 24c7472d8..4a77c669c 100644
--- a/src/fields/RichTextField.ts
+++ b/src/fields/RichTextField.ts
@@ -5,6 +5,10 @@ export class RichTextField extends BasicField<string> {
         super(data);
     }
 
+    ToScriptString(): string {
+        return `new RichTextField(${this.Data})`;
+    }
+
     Copy() {
         return new RichTextField(this.Data);
     }
diff --git a/src/fields/TextField.ts b/src/fields/TextField.ts
index 95825d2ae..11d2ed7cd 100644
--- a/src/fields/TextField.ts
+++ b/src/fields/TextField.ts
@@ -5,6 +5,10 @@ export class TextField extends BasicField<string> {
         super(data);
     }
 
+    ToScriptString(): string {
+        return `new TextField("${this.Data}")`;
+    }
+
     Copy() {
         return new TextField(this.Data);
     }
diff --git a/src/util/Scripting.ts b/src/util/Scripting.ts
index 804c67bc5..e0d39bdfa 100644
--- a/src/util/Scripting.ts
+++ b/src/util/Scripting.ts
@@ -1,9 +1,9 @@
 // import * as ts from "typescript"
 let ts = (window as any).ts;
-import { Opt, Field, FieldWaiting } from "../fields/Field";
+import { Opt, Field } from "../fields/Field";
 import { Document as DocumentImport } from "../fields/Document";
-import { NumberField as NumberFieldImport } from "../fields/NumberField";
-import { TextField as TextFieldImport } from "../fields/TextField";
+import { NumberField as NumberFieldImport, NumberField } from "../fields/NumberField";
+import { TextField as TextFieldImport, TextField } from "../fields/TextField";
 import { RichTextField as RichTextFieldImport } from "../fields/RichTextField";
 import { KeyStore as KeyStoreImport } from "../fields/Key";
 
@@ -14,7 +14,7 @@ export interface ExecutableScript {
 }
 
 function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
-    const compiled = !(diagnostics && diagnostics != FieldWaiting && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
+    const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
 
     let func: () => Opt<Field>;
     if (compiled) {
@@ -44,4 +44,13 @@ export function CompileScript(script: string): ExecutableScript {
     let result = (window as any).ts.transpileModule(script, {})
 
     return ExecScript(result.outputText, result.diagnostics);
+}
+
+export function ToField(data: any): Opt<Field> {
+    if (typeof data == "string") {
+        return new TextField(data);
+    } else if (typeof data == "number") {
+        return new NumberField(data);
+    }
+    return undefined;
 }
\ No newline at end of file
diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
index 5f8d6ebcd..357c97af2 100644
--- a/src/views/EditableView.tsx
+++ b/src/views/EditableView.tsx
@@ -1,6 +1,6 @@
 import React = require('react')
 import { observer } from 'mobx-react';
-import { observable } from 'mobx';
+import { observable, action } from 'mobx';
 
 export interface EditableProps {
     GetValue(): string;
@@ -13,21 +13,24 @@ export class EditableView extends React.Component<EditableProps> {
     @observable
     editing: boolean = false;
 
+    @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key == "Enter" && !e.ctrlKey) {
             this.props.SetValue(e.currentTarget.value);
             this.editing = false;
+        } else if (e.key == "Escape") {
+            this.editing = false;
         }
     }
 
     render() {
         if (this.editing) {
-            return <input value={this.props.GetValue()} onKeyDown={this.onKeyDown}></input>
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}></input>
         } else {
             return (
                 <div>
                     {this.props.contents}
-                    <button onClick={() => this.editing = true}>Edit</button>
+                    <button onClick={action(() => this.editing = true)}>Edit</button>
                 </div>
             )
         }
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index e489e319a..adef03357 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -15,7 +15,6 @@ import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { FieldWaiting } from "../../fields/Field";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -70,8 +69,6 @@ export class CollectionDockingView extends CollectionViewBase {
 
     @action
     onResize = (event: any) => {
-        if (this.props.ContainingDocumentView == FieldWaiting)
-            return;
         var cur = this.props.ContainingDocumentView!.MainContent.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
@@ -255,8 +252,6 @@ export class CollectionDockingView extends CollectionViewBase {
 
 
     render() {
-        if (this.props.ContainingDocumentView == FieldWaiting)
-            return;
         const { CollectionFieldKey: fieldKey, DocumentForCollection: 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.
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 45d37ca4f..612f9acbe 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -33,23 +33,21 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const doc = de.data["document"];
         var me = this;
         if (doc instanceof CollectionFreeFormDocumentView) {
-            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this && doc.props.ContainingCollectionView != FieldWaiting) {
+            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
                 doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
                 this.addDocument(doc.props.Document);
             }
             const xOffset = de.data["xOffset"] as number || 0;
             const yOffset = de.data["yOffset"] as number || 0;
             const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            if (this.props.ContainingDocumentView != FieldWaiting) {
-                let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
-                const screenX = de.x - xOffset;
-                const screenY = de.y - yOffset;
-                const docX = (screenX - translateX) / sscale / scale;
-                const docY = (screenY - translateY) / sscale / scale;
-                doc.x = docX;
-                doc.y = docY;
-                this.bringToFront(doc);
-            }
+            let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
+            const screenX = de.x - xOffset;
+            const screenY = de.y - yOffset;
+            const docX = (screenX - translateX) / sscale / scale;
+            const docY = (screenY - translateY) / sscale / scale;
+            doc.x = docX;
+            doc.y = docY;
+            this.bringToFront(doc);
         }
         e.stopPropagation();
     }
@@ -88,7 +86,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerMove = (e: PointerEvent): void => {
         var me = this;
-        if (!e.cancelBubble && this.active && this.props.ContainingDocumentView != FieldWaiting) {
+        if (!e.cancelBubble && this.active) {
             e.preventDefault();
             e.stopPropagation();
             let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
@@ -105,8 +103,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
 
-        if (this.props.ContainingDocumentView == FieldWaiting)
-            return;
         let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
         var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
index c7a3d81a4..6f591a1bc 100644
--- a/src/views/collections/CollectionSchemaView.tsx
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -12,7 +12,7 @@ import { ScrollBox } from "../../util/ScrollBox";
 import { CollectionViewBase } from "./CollectionViewBase";
 import { DocumentView } from "../nodes/DocumentView";
 import { EditableView } from "../EditableView";
-import { CompileScript } from "../../util/Scripting";
+import { CompileScript, ToField } from "../../util/Scripting";
 import { Field } from "../../fields/Field";
 
 @observer
@@ -47,6 +47,12 @@ export class CollectionSchemaView extends CollectionViewBase {
                 if (field instanceof Field) {
                     props.doc.Set(props.fieldKey, field);
                     return true;
+                } else {
+                    let dataField = ToField(field);
+                    if (dataField) {
+                        props.doc.Set(props.fieldKey, dataField);
+                        return true;
+                    }
                 }
                 return false;
             }}></EditableView>
diff --git a/src/views/collections/CollectionViewBase.tsx b/src/views/collections/CollectionViewBase.tsx
index 4fce02ef6..35d938d43 100644
--- a/src/views/collections/CollectionViewBase.tsx
+++ b/src/views/collections/CollectionViewBase.tsx
@@ -1,7 +1,7 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../fields/Document";
-import { Opt, FieldWaiting } from "../../fields/Field";
+import { Opt } from "../../fields/Field";
 import { Key, KeyStore } from "../../fields/Key";
 import { ListField } from "../../fields/ListField";
 import { SelectionManager } from "../../util/SelectionManager";
@@ -30,10 +30,9 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
     public get active(): boolean {
         var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
         var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.ContainingDocumentView != undefined &&
-            this.props.ContainingDocumentView != FieldWaiting && this.props.ContainingDocumentView.props.ContainingCollectionView != FieldWaiting && (
-                this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
-                this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
+        var topMost = this.props.ContainingDocumentView != undefined && (
+            this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
+            this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
         return isSelected || childSelected || topMost;
     }
     @action
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
index 25d67d96a..dc284e07c 100644
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -10,7 +10,6 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
-import { FieldWaiting } from "../../fields/Field";
 
 
 @observer
@@ -86,7 +85,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     @computed
     get active(): boolean {
         return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            (this.props.ContainingCollectionView != FieldWaiting && this.props.ContainingCollectionView!.active);
+            this.props.ContainingCollectionView!.active;
     }
 
     @computed
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 81353cd60..39be54a4d 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -49,8 +49,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     //
     @computed
     public get ScalingToScreenSpace(): number {
-        if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != FieldWaiting) {
+        if (this.props.ContainingCollectionView != undefined &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
             let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
             return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
         }
@@ -63,8 +63,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     public TransformToLocalPoint(screenX: number, screenY: number) {
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
-        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != FieldWaiting ?
+        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
             this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
             { LocalX: screenX, LocalY: screenY };
         let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
@@ -113,8 +113,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         // if this collection view is nested within another collection view, then 
         // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != FieldWaiting ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
-        if (containingDocView != undefined && containingDocView != FieldWaiting) {
+        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
+        if (containingDocView != undefined) {
             let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
             let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 05a7b91b9..3a7652284 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -2,7 +2,7 @@ import React = require("react")
 import { Document } from "../../fields/Document";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt, FieldWaiting } from "../../fields/Field";
+import { Field, Opt, FieldWaiting, FieldValue } from "../../fields/Field";
 import { TextField } from "../../fields/TextField";
 import { NumberField } from "../../fields/NumberField";
 import { RichTextField } from "../../fields/RichTextField";
@@ -27,7 +27,7 @@ export interface FieldViewProps {
 export class FieldView extends React.Component<FieldViewProps> {
     public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
     @computed
-    get field(): Opt<Field> {
+    get field(): FieldValue<Field> {
         const { doc, fieldKey } = this.props;
         return doc.Get(fieldKey);
     }
diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx
index 3e3e22e46..6d0e117cc 100644
--- a/src/views/nodes/FormattedTextBox.tsx
+++ b/src/views/nodes/FormattedTextBox.tsx
@@ -6,7 +6,7 @@ import { keymap } from "prosemirror-keymap";
 import { schema } from "prosemirror-schema-basic";
 import { EditorState, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting } from "../../fields/Field";
+import { Opt, FieldWaiting, FieldValue } from "../../fields/Field";
 import { SelectionManager } from "../../util/SelectionManager";
 import "./FormattedTextBox.scss";
 import React = require("react")
@@ -48,7 +48,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     }
 
     dispatchTransaction = (tx: Transaction) => {
-        if (this._editorView && this._editorView != FieldWaiting) {
+        if (this._editorView) {
             const state = this._editorView.state.apply(tx);
             this._editorView.updateState(state);
             const { doc, fieldKey } = this.props;
@@ -85,17 +85,17 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
             const field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
             return field && field != FieldWaiting ? field.Data : undefined;
         }, (field) => {
-            if (field && this._editorView && this._editorView != FieldWaiting) {
+            if (field && this._editorView) {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
     }
 
     componentWillUnmount() {
-        if (this._editorView && this._editorView != FieldWaiting) {
+        if (this._editorView) {
             this._editorView.destroy();
         }
-        if (this._reactionDisposer && this._reactionDisposer != FieldWaiting) {
+        if (this._reactionDisposer) {
             this._reactionDisposer();
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 90296f23320df43e73fb1bd936428f19f0f705a9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 7 Feb 2019 23:50:07 -0500
Subject: Got rid of extra !

---
 src/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
index dc284e07c..e0bb459e9 100644
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -85,7 +85,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     @computed
     get active(): boolean {
         return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            this.props.ContainingCollectionView!.active;
+            this.props.ContainingCollectionView.active;
     }
 
     @computed
-- 
cgit v1.2.3-70-g09d2


From c1581aaf93467cce8fca8a3da71181d79b3bfef8 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 8 Feb 2019 00:23:27 -0500
Subject: a couple small changes

---
 src/Main.tsx             | 2 ++
 src/fields/ImageField.ts | 4 ++--
 src/util/Scripting.ts    | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/Main.tsx b/src/Main.tsx
index a9ed1a365..fa6230393 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -13,6 +13,7 @@ import "./Main.scss";
 import { ContextMenu } from './views/ContextMenu';
 import { DocumentView } from './views/nodes/DocumentView';
 import { CompileScript } from './util/Scripting';
+import { ImageField } from './fields/ImageField';
 
 
 configure({
@@ -46,6 +47,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 450, y: 500, title: "cat 1"
     });
+    doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
     }));
diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts
index 63baf815b..d82260f54 100644
--- a/src/fields/ImageField.ts
+++ b/src/fields/ImageField.ts
@@ -3,7 +3,7 @@ import { Field } from "./Field";
 
 export class ImageField extends BasicField<URL> {
     constructor(data: URL | undefined = undefined) {
-        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/face.gif") : data);
+        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data);
     }
 
     toString(): string {
@@ -11,7 +11,7 @@ export class ImageField extends BasicField<URL> {
     }
 
     ToScriptString(): string {
-        return `new ImageField(${this.Data})`;
+        return `new ImageField("${this.Data}")`;
     }
 
     Copy(): Field {
diff --git a/src/util/Scripting.ts b/src/util/Scripting.ts
index e0d39bdfa..0e83ab4f0 100644
--- a/src/util/Scripting.ts
+++ b/src/util/Scripting.ts
@@ -3,6 +3,7 @@ let ts = (window as any).ts;
 import { Opt, Field } from "../fields/Field";
 import { Document as DocumentImport } from "../fields/Document";
 import { NumberField as NumberFieldImport, NumberField } from "../fields/NumberField";
+import { ImageField as ImageFieldImport } from "../fields/ImageField";
 import { TextField as TextFieldImport, TextField } from "../fields/TextField";
 import { RichTextField as RichTextFieldImport } from "../fields/RichTextField";
 import { KeyStore as KeyStoreImport } from "../fields/Key";
@@ -23,6 +24,7 @@ function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
             let Document = DocumentImport;
             let NumberField = NumberFieldImport;
             let TextField = TextFieldImport;
+            let ImageField = ImageFieldImport;
             let RichTextField = RichTextFieldImport;
             let window = undefined;
             let document = undefined;
-- 
cgit v1.2.3-70-g09d2


From db177e6ff03a95f0f426943b4b6aaffea77204de Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 9 Feb 2019 17:28:22 -0500
Subject: Small style change

---
 src/views/EditableView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
index 357c97af2..2e784d3f9 100644
--- a/src/views/EditableView.tsx
+++ b/src/views/EditableView.tsx
@@ -25,7 +25,8 @@ export class EditableView extends React.Component<EditableProps> {
 
     render() {
         if (this.editing) {
-            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}></input>
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ width: "100%" }}></input>
         } else {
             return (
                 <div>
-- 
cgit v1.2.3-70-g09d2


From c06745a99ed85b215d0ae48bfb2af7c955f0b016 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 9 Feb 2019 17:31:30 -0500
Subject: Removed unused starter project files

---
 src/stores/NodeCollectionStore.ts  | 26 ---------------------
 src/stores/NodeStore.ts            | 24 --------------------
 src/stores/RootStore.ts            | 15 -------------
 src/stores/StaticTextNodeStore.ts  | 16 -------------
 src/stores/VideoNodeStore.ts       | 17 --------------
 src/views/nodes/TextNodeView.tsx   | 28 -----------------------
 src/views/nodes/TopBar.tsx         | 46 --------------------------------------
 src/views/nodes/VideoNodeView.scss |  5 -----
 src/views/nodes/VideoNodeView.tsx  | 29 ------------------------
 9 files changed, 206 deletions(-)
 delete mode 100644 src/stores/NodeCollectionStore.ts
 delete mode 100644 src/stores/NodeStore.ts
 delete mode 100644 src/stores/RootStore.ts
 delete mode 100644 src/stores/StaticTextNodeStore.ts
 delete mode 100644 src/stores/VideoNodeStore.ts
 delete mode 100644 src/views/nodes/TextNodeView.tsx
 delete mode 100644 src/views/nodes/TopBar.tsx
 delete mode 100644 src/views/nodes/VideoNodeView.scss
 delete mode 100644 src/views/nodes/VideoNodeView.tsx

(limited to 'src')

diff --git a/src/stores/NodeCollectionStore.ts b/src/stores/NodeCollectionStore.ts
deleted file mode 100644
index 7fac83d51..000000000
--- a/src/stores/NodeCollectionStore.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { computed, observable, action } from "mobx";
-import { NodeStore } from "./NodeStore";
-import { Document } from "../fields/Document";
-
-export class NodeCollectionStore extends NodeStore {
-
-    @observable
-    public Scale: number = 1;
-
-    @observable
-    public Nodes: NodeStore[] = new Array<NodeStore>();
-
-    @observable
-    public Docs: Document[] = [];
-
-    @computed
-    public get Transform(): string {
-        const halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2;
-        return `translate(${this.X + halfWidth}px, ${this.Y + halfHeight}px) scale(${this.Scale}) translate(${-halfWidth}px, ${-halfHeight}px)`;
-    }
-
-    @action
-    public AddNodes(stores: NodeStore[]): void {
-        stores.forEach(store => this.Nodes.push(store));
-    }
-}
\ No newline at end of file
diff --git a/src/stores/NodeStore.ts b/src/stores/NodeStore.ts
deleted file mode 100644
index 6a734cf44..000000000
--- a/src/stores/NodeStore.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { computed, observable } from "mobx";
-import { Utils } from "../Utils";
-
-export class NodeStore {
-
-    public Id: string = Utils.GenerateGuid();
-
-    @observable
-    public X: number = 0;
-
-    @observable
-    public Y: number = 0;
-
-    @observable
-    public Width: number = 0;
-
-    @observable
-    public Height: number = 0;
-
-    @computed
-    public get Transform(): string {
-        return "translate(" + this.X + "px, " + this.Y + "px)";
-    }
-}
\ No newline at end of file
diff --git a/src/stores/RootStore.ts b/src/stores/RootStore.ts
deleted file mode 100644
index 847fb6807..000000000
--- a/src/stores/RootStore.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { action, observable } from "mobx";
-
-// This globally accessible store might come in handy, although you may decide that you don't need it.
-export class RootStore {
-
-    private constructor() {
-        // initialization code
-    }
-
-    private static _instance: RootStore;
-
-    public static get Instance(): RootStore {
-        return this._instance || (this._instance = new this());
-    }
-}
\ No newline at end of file
diff --git a/src/stores/StaticTextNodeStore.ts b/src/stores/StaticTextNodeStore.ts
deleted file mode 100644
index 7c342a7a2..000000000
--- a/src/stores/StaticTextNodeStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { observable } from "mobx";
-import { NodeStore } from "./NodeStore";
-
-export class StaticTextNodeStore extends NodeStore {
-
-    constructor(initializer: Partial<StaticTextNodeStore>) {
-        super();
-        Object.assign(this, initializer);
-    }
-
-    @observable
-    public Title: string = "";
-
-    @observable
-    public Text: string = "";
-}
\ No newline at end of file
diff --git a/src/stores/VideoNodeStore.ts b/src/stores/VideoNodeStore.ts
deleted file mode 100644
index e5187ab07..000000000
--- a/src/stores/VideoNodeStore.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { observable } from "mobx";
-import { NodeStore } from "./NodeStore";
-
-export class VideoNodeStore extends NodeStore {
-
-    constructor(initializer: Partial<VideoNodeStore>) {
-        super();
-        Object.assign(this, initializer);
-    }
-
-    @observable
-    public Title: string = "";
-
-    @observable
-    public Url: string = "";
-
-}
\ No newline at end of file
diff --git a/src/views/nodes/TextNodeView.tsx b/src/views/nodes/TextNodeView.tsx
deleted file mode 100644
index ab762df12..000000000
--- a/src/views/nodes/TextNodeView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {observer} from "mobx-react";
-import {StaticTextNodeStore} from "../../stores/StaticTextNodeStore";
-import "./NodeView.scss";
-import {TopBar} from "./TopBar";
-import React = require("react");
-
-interface IProps {
-    store: StaticTextNodeStore;
-}
-
-@observer
-export class TextNodeView extends React.Component<IProps> {
-
-    render() {
-        let store = this.props.store;
-        return (
-            <div className="node text-node" style={{transform: store.Transform}}>
-                <TopBar store={store} />
-                <div className="scroll-box">
-                    <div className="content">
-                        <h3 className="title">{store.Title}</h3>
-                        <p className="paragraph">{store.Text}</p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/TopBar.tsx b/src/views/nodes/TopBar.tsx
deleted file mode 100644
index bb126e8b5..000000000
--- a/src/views/nodes/TopBar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { observer } from "mobx-react";
-import { NodeStore } from "../../stores/NodeStore";
-import "./NodeView.scss";
-import React = require("react");
-
-interface IProps {
-    store: NodeStore;
-}
-
-@observer
-export class TopBar extends React.Component<IProps> {
-
-    private _isPointerDown = false;
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = true;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = false;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (!this._isPointerDown) {
-            return;
-        }
-        this.props.store.X += e.movementX;
-        this.props.store.Y += e.movementY;
-    }
-
-    render() {
-        return <div className="top" onPointerDown={this.onPointerDown}></div>
-    }
-}
diff --git a/src/views/nodes/VideoNodeView.scss b/src/views/nodes/VideoNodeView.scss
deleted file mode 100644
index f412c3519..000000000
--- a/src/views/nodes/VideoNodeView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.node {
-    video {
-        width: 100%;
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/VideoNodeView.tsx b/src/views/nodes/VideoNodeView.tsx
deleted file mode 100644
index 0a7b3d174..000000000
--- a/src/views/nodes/VideoNodeView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { observer } from "mobx-react";
-import { VideoNodeStore } from "../../stores/VideoNodeStore";
-import "./NodeView.scss";
-import { TopBar } from "./TopBar";
-import "./VideoNodeView.scss";
-import React = require("react");
-
-interface IProps {
-    store: VideoNodeStore;
-}
-
-@observer
-export class VideoNodeView extends React.Component<IProps> {
-
-    render() {
-        let store = this.props.store;
-        return (
-            <div className="node text-node" style={{ transform: store.Transform }}>
-                <TopBar store={store} />
-                <div className="scroll-box">
-                    <div className="content">
-                        <h3 className="title">{store.Title}</h3>
-                        <video src={store.Url} controls />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 11134bc5ce01d0a025d311a4f83e67ff6e63ce1c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 9 Feb 2019 19:13:24 -0500
Subject: Moved client code to client folder

---
 src/DocumentDecorations.scss                       |  32 --
 src/DocumentDecorations.tsx                        | 153 ----------
 src/Main.scss                                      |  31 --
 src/Main.tsx                                       |  92 ------
 src/Server.tsx                                     |  61 ----
 src/SocketStub.tsx                                 |  78 -----
 src/client/Server.ts                               |  61 ++++
 src/client/SocketStub.ts                           |  78 +++++
 src/client/documents/Documents.ts                  | 161 ++++++++++
 src/client/util/DragManager.ts                     | 131 ++++++++
 src/client/util/Scripting.ts                       |  58 ++++
 src/client/util/ScrollBox.tsx                      |  21 ++
 src/client/util/SelectionManager.ts                |  39 +++
 src/client/util/TypedEvent.ts                      |  42 +++
 src/client/views/ContextMenu.scss                  |  34 +++
 src/client/views/ContextMenu.tsx                   |  68 +++++
 src/client/views/ContextMenuItem.tsx               |  17 ++
 src/client/views/DocumentDecorations.scss          |  32 ++
 src/client/views/DocumentDecorations.tsx           | 153 ++++++++++
 src/client/views/EditableView.tsx                  |  39 +++
 src/client/views/Main.scss                         |  31 ++
 src/client/views/Main.tsx                          |  91 ++++++
 .../views/collections/CollectionDockingView.scss   | 336 +++++++++++++++++++++
 .../views/collections/CollectionDockingView.tsx    | 281 +++++++++++++++++
 .../views/collections/CollectionFreeFormView.scss  |  20 ++
 .../views/collections/CollectionFreeFormView.tsx   | 205 +++++++++++++
 .../views/collections/CollectionSchemaView.scss    | 108 +++++++
 .../views/collections/CollectionSchemaView.tsx     | 144 +++++++++
 .../views/collections/CollectionViewBase.tsx       |  57 ++++
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 223 ++++++++++++++
 src/client/views/nodes/DocumentView.tsx            | 153 ++++++++++
 src/client/views/nodes/FieldTextBox.scss           |  14 +
 src/client/views/nodes/FieldView.tsx               |  56 ++++
 src/client/views/nodes/FormattedTextBox.scss       |  14 +
 src/client/views/nodes/FormattedTextBox.tsx        | 127 ++++++++
 src/client/views/nodes/ImageBox.scss               |  11 +
 src/client/views/nodes/ImageBox.tsx                |  92 ++++++
 src/client/views/nodes/NodeView.scss               |  23 ++
 src/documents/Documents.ts                         | 161 ----------
 src/fields/Document.ts                             |   2 +-
 src/server/index.js                                |   0
 src/util/DragManager.ts                            | 137 ---------
 src/util/Scripting.ts                              |  58 ----
 src/util/ScrollBox.tsx                             |  21 --
 src/util/SelectionManager.ts                       |  39 ---
 src/util/TypedEvent.ts                             |  42 ---
 src/views/ContextMenu.scss                         |  34 ---
 src/views/ContextMenu.tsx                          |  68 -----
 src/views/ContextMenuItem.tsx                      |  17 --
 src/views/EditableView.tsx                         |  39 ---
 src/views/collections/CollectionDockingView.scss   | 336 ---------------------
 src/views/collections/CollectionDockingView.tsx    | 282 -----------------
 src/views/collections/CollectionFreeFormView.scss  |  20 --
 src/views/collections/CollectionFreeFormView.tsx   | 206 -------------
 src/views/collections/CollectionSchemaView.scss    | 108 -------
 src/views/collections/CollectionSchemaView.tsx     | 144 ---------
 src/views/collections/CollectionViewBase.tsx       |  57 ----
 src/views/nodes/CollectionFreeFormDocumentView.tsx | 223 --------------
 src/views/nodes/DocumentView.tsx                   | 153 ----------
 src/views/nodes/FieldTextBox.scss                  |  14 -
 src/views/nodes/FieldView.tsx                      |  56 ----
 src/views/nodes/FormattedTextBox.scss              |  14 -
 src/views/nodes/FormattedTextBox.tsx               | 127 --------
 src/views/nodes/ImageBox.scss                      |  11 -
 src/views/nodes/ImageBox.tsx                       |  92 ------
 src/views/nodes/NodeView.scss                      |  23 --
 webpack.config.js                                  |   2 +-
 67 files changed, 2922 insertions(+), 2931 deletions(-)
 delete mode 100644 src/DocumentDecorations.scss
 delete mode 100644 src/DocumentDecorations.tsx
 delete mode 100644 src/Main.scss
 delete mode 100644 src/Main.tsx
 delete mode 100644 src/Server.tsx
 delete mode 100644 src/SocketStub.tsx
 create mode 100644 src/client/Server.ts
 create mode 100644 src/client/SocketStub.ts
 create mode 100644 src/client/documents/Documents.ts
 create mode 100644 src/client/util/DragManager.ts
 create mode 100644 src/client/util/Scripting.ts
 create mode 100644 src/client/util/ScrollBox.tsx
 create mode 100644 src/client/util/SelectionManager.ts
 create mode 100644 src/client/util/TypedEvent.ts
 create mode 100644 src/client/views/ContextMenu.scss
 create mode 100644 src/client/views/ContextMenu.tsx
 create mode 100644 src/client/views/ContextMenuItem.tsx
 create mode 100644 src/client/views/DocumentDecorations.scss
 create mode 100644 src/client/views/DocumentDecorations.tsx
 create mode 100644 src/client/views/EditableView.tsx
 create mode 100644 src/client/views/Main.scss
 create mode 100644 src/client/views/Main.tsx
 create mode 100644 src/client/views/collections/CollectionDockingView.scss
 create mode 100644 src/client/views/collections/CollectionDockingView.tsx
 create mode 100644 src/client/views/collections/CollectionFreeFormView.scss
 create mode 100644 src/client/views/collections/CollectionFreeFormView.tsx
 create mode 100644 src/client/views/collections/CollectionSchemaView.scss
 create mode 100644 src/client/views/collections/CollectionSchemaView.tsx
 create mode 100644 src/client/views/collections/CollectionViewBase.tsx
 create mode 100644 src/client/views/nodes/CollectionFreeFormDocumentView.tsx
 create mode 100644 src/client/views/nodes/DocumentView.tsx
 create mode 100644 src/client/views/nodes/FieldTextBox.scss
 create mode 100644 src/client/views/nodes/FieldView.tsx
 create mode 100644 src/client/views/nodes/FormattedTextBox.scss
 create mode 100644 src/client/views/nodes/FormattedTextBox.tsx
 create mode 100644 src/client/views/nodes/ImageBox.scss
 create mode 100644 src/client/views/nodes/ImageBox.tsx
 create mode 100644 src/client/views/nodes/NodeView.scss
 delete mode 100644 src/documents/Documents.ts
 create mode 100644 src/server/index.js
 delete mode 100644 src/util/DragManager.ts
 delete mode 100644 src/util/Scripting.ts
 delete mode 100644 src/util/ScrollBox.tsx
 delete mode 100644 src/util/SelectionManager.ts
 delete mode 100644 src/util/TypedEvent.ts
 delete mode 100644 src/views/ContextMenu.scss
 delete mode 100644 src/views/ContextMenu.tsx
 delete mode 100644 src/views/ContextMenuItem.tsx
 delete mode 100644 src/views/EditableView.tsx
 delete mode 100644 src/views/collections/CollectionDockingView.scss
 delete mode 100644 src/views/collections/CollectionDockingView.tsx
 delete mode 100644 src/views/collections/CollectionFreeFormView.scss
 delete mode 100644 src/views/collections/CollectionFreeFormView.tsx
 delete mode 100644 src/views/collections/CollectionSchemaView.scss
 delete mode 100644 src/views/collections/CollectionSchemaView.tsx
 delete mode 100644 src/views/collections/CollectionViewBase.tsx
 delete mode 100644 src/views/nodes/CollectionFreeFormDocumentView.tsx
 delete mode 100644 src/views/nodes/DocumentView.tsx
 delete mode 100644 src/views/nodes/FieldTextBox.scss
 delete mode 100644 src/views/nodes/FieldView.tsx
 delete mode 100644 src/views/nodes/FormattedTextBox.scss
 delete mode 100644 src/views/nodes/FormattedTextBox.tsx
 delete mode 100644 src/views/nodes/ImageBox.scss
 delete mode 100644 src/views/nodes/ImageBox.tsx
 delete mode 100644 src/views/nodes/NodeView.scss

(limited to 'src')

diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss
deleted file mode 100644
index e8b93a18b..000000000
--- a/src/DocumentDecorations.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-#documentDecorations-container {
-    position: absolute;
-    display: grid;
-    z-index: 1000;
-    grid-template-rows: 20px 1fr 20px;
-    grid-template-columns: 20px 1fr 20px;
-    pointer-events: none;
-    #documentDecorations-centerCont {
-        background: none;
-    }
-    .documentDecorations-resizer {
-        pointer-events: auto;
-        background: lightblue;
-        opacity: 0.4;
-    }
-    #documentDecorations-topLeftResizer,
-    #documentDecorations-bottomRightResizer {
-        cursor: nwse-resize;
-    }
-    #documentDecorations-topRightResizer,
-    #documentDecorations-bottomLeftResizer {
-        cursor: nesw-resize;
-    }
-    #documentDecorations-topResizer,
-    #documentDecorations-bottomResizer {
-        cursor: ns-resize;
-    }
-    #documentDecorations-leftResizer,
-    #documentDecorations-rightResizer {
-        cursor: ew-resize;
-    }
-}
\ No newline at end of file
diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx
deleted file mode 100644
index 1cf875ea5..000000000
--- a/src/DocumentDecorations.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { observable, computed } from "mobx";
-import React = require("react");
-import { SelectionManager } from "./util/SelectionManager";
-import { observer } from "mobx-react";
-import './DocumentDecorations.scss'
-import { CollectionFreeFormView } from "./views/collections/CollectionFreeFormView";
-
-@observer
-export class DocumentDecorations extends React.Component {
-    static Instance: DocumentDecorations
-    private _resizer = ""
-    private _isPointerDown = false;
-    @observable private _opacity = 1;
-
-    constructor(props: Readonly<{}>) {
-        super(props)
-
-        DocumentDecorations.Instance = this
-    }
-
-    @computed
-    get Bounds(): { x: number, y: number, b: number, r: number } {
-        return SelectionManager.SelectedDocuments().reduce((bounds, element) => {
-            if (element.props.ContainingCollectionView != undefined &&
-                !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
-                return bounds;
-            }
-            var spt = element.TransformToScreenPoint(0, 0);
-            var bpt = element.TransformToScreenPoint(element.width, element.height);
-            return {
-                x: Math.min(spt.ScreenX, bounds.x), y: Math.min(spt.ScreenY, bounds.y),
-                r: Math.max(bpt.ScreenX, bounds.r), b: Math.max(bpt.ScreenY, bounds.b)
-            }
-        }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
-    }
-
-    @computed
-    get opacity(): number {
-        return this._opacity
-    }
-
-    set opacity(o: number) {
-        this._opacity = Math.min(Math.max(0, o), 1)
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        if (e.button === 0) {
-            this._isPointerDown = true;
-            this._resizer = e.currentTarget.id;
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (!this._isPointerDown) {
-            return;
-        }
-
-        let dX = 0, dY = 0, dW = 0, dH = 0;
-
-        switch (this._resizer) {
-            case "":
-                break;
-            case "documentDecorations-topLeftResizer":
-                dX = -1
-                dY = -1
-                dW = -(e.movementX)
-                dH = -(e.movementY)
-                break;
-            case "documentDecorations-topRightResizer":
-                dW = e.movementX
-                dY = -1
-                dH = -(e.movementY)
-                break;
-            case "documentDecorations-topResizer":
-                dY = -1
-                dH = -(e.movementY)
-                break;
-            case "documentDecorations-bottomLeftResizer":
-                dX = -1
-                dW = -(e.movementX)
-                dH = e.movementY
-                break;
-            case "documentDecorations-bottomRightResizer":
-                dW = e.movementX
-                dH = e.movementY
-                break;
-            case "documentDecorations-bottomResizer":
-                dH = e.movementY
-                break;
-            case "documentDecorations-leftResizer":
-                dX = -1
-                dW = -(e.movementX)
-                break;
-            case "documentDecorations-rightResizer":
-                dW = e.movementX
-                break;
-        }
-
-        SelectionManager.SelectedDocuments().forEach(element => {
-            const rect = element.screenRect;
-            if (rect.width !== 0) {
-                let scale = element.width / rect.width;
-                let actualdW = Math.max(element.width + (dW * scale), 20);
-                let actualdH = Math.max(element.height + (dH * scale), 20);
-                element.x += dX * (actualdW - element.width);
-                element.y += dY * (actualdH - element.height);
-                element.width = actualdW;
-                element.height = actualdH;
-            }
-        })
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        if (e.button === 0) {
-            e.preventDefault();
-            this._isPointerDown = false;
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    render() {
-        var bounds = this.Bounds;
-        return (
-            <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + 40) + "px",
-                height: (bounds.b - bounds.y + 40) + "px",
-                left: bounds.x - 20,
-                top: bounds.y - 20,
-                opacity: this.opacity
-            }}>
-                <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-leftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-centerCont"></div>
-                <div id="documentDecorations-rightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/Main.scss b/src/Main.scss
deleted file mode 100644
index e73f62904..000000000
--- a/src/Main.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-html,
-body {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    font-family: 'Hind Siliguri', sans-serif;
-    margin: 0;
-}
-
-h1 {
-    font-size: 50px;
-    position: fixed;
-    top: 30px;
-    left: 50%;
-    transform: translateX(-50%);
-    color: black;
-    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
-    z-index: 9999;
-    font-family: 'Fjalla One', sans-serif;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-p {
-    margin: 0px;
-    padding: 0px;
-}
\ No newline at end of file
diff --git a/src/Main.tsx b/src/Main.tsx
deleted file mode 100644
index fa6230393..000000000
--- a/src/Main.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { action, configure } from 'mobx';
-import "normalize.css";
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { DocumentDecorations } from './DocumentDecorations';
-import { Documents } from './documents/Documents';
-import { Document } from './fields/Document';
-import { KeyStore, KeyStore as KS } from './fields/Key';
-import { ListField } from './fields/ListField';
-import { NumberField } from './fields/NumberField';
-import { TextField } from './fields/TextField';
-import "./Main.scss";
-import { ContextMenu } from './views/ContextMenu';
-import { DocumentView } from './views/nodes/DocumentView';
-import { CompileScript } from './util/Scripting';
-import { ImageField } from './fields/ImageField';
-
-
-configure({
-    enforceActions: "observed"
-});
-
-const mainNodeCollection = new Array<Document>();
-let mainContainer = Documents.DockDocument(mainNodeCollection, {
-    x: 0, y: 0, title: "main container"
-})
-
-window.addEventListener("drop", function (e) {
-    e.preventDefault();
-}, false)
-window.addEventListener("dragover", function (e) {
-    e.preventDefault();
-}, false)
-document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
-        ContextMenu.Instance.clearItems()
-    }
-}), true)
-
-
-//runInAction(() => 
-{
-    let doc1 = Documents.TextDocument({ title: "hello" });
-    let doc2 = doc1.MakeDelegate();
-    doc2.Set(KS.X, new NumberField(150));
-    doc2.Set(KS.Y, new NumberField(20));
-    let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 450, y: 500, title: "cat 1"
-    });
-    doc3.Set(KeyStore.Data, new ImageField);
-    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
-    }));
-    schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
-    schemaDocs[4].SetData(KS.Author, "Bob", TextField);
-    schemaDocs.push(doc2);
-    const doc7 = Documents.SchemaDocument(schemaDocs)
-    const docset = [doc1, doc2, doc3, doc7];
-    let doc4 = Documents.CollectionDocument(docset, {
-        x: 0, y: 400, title: "mini collection"
-    });
-    // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-    //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
-    // });
-    let docset2 = new Array<Document>(doc4);//, doc1, doc3);
-    let doc6 = Documents.CollectionDocument(docset2, {
-        x: 350, y: 100, width: 600, height: 600, title: "docking collection"
-    });
-    let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
-    if (!mainNodes) {
-        mainNodes = new ListField<Document>();
-    }
-    // mainNodes.Data.push(doc6);
-    // mainNodes.Data.push(doc2);
-    mainNodes.Data.push(doc4);
-    mainNodes.Data.push(doc3);
-    // mainNodes.Data.push(doc5);
-    // mainNodes.Data.push(doc1);
-    //mainNodes.Data.push(doc2);
-    //mainNodes.Data.push(doc6);
-    mainContainer.Set(KeyStore.Data, mainNodes);
-}
-//}
-//);
-
-ReactDOM.render((
-    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
-        <DocumentDecorations />
-        <ContextMenu />
-    </div>),
-    document.getElementById('root'));
\ No newline at end of file
diff --git a/src/Server.tsx b/src/Server.tsx
deleted file mode 100644
index 645420771..000000000
--- a/src/Server.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "./fields/Field"
-import { Key, KeyStore } from "./fields/Key"
-import { ObservableMap, action } from "mobx";
-import { Document } from "./fields/Document"
-import { SocketStub } from "./SocketStub";
-
-export class Server {
-    private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
-
-    // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
-    // Call this is from within a reaction and test whether the return value is FieldWaiting.
-    // 'hackTimeout' is here temporarily for simplicity when debugging things.
-    public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
-        if (!this.ClientFieldsCached.get(fieldid)) {
-            this.ClientFieldsCached.set(fieldid, FieldWaiting);
-            //simulating a server call with a registered callback action
-            SocketStub.SEND_FIELD_REQUEST(fieldid,
-                action((field: Field) => callback(Server.cacheField(field))),
-                hackTimeout);
-        } else if (this.ClientFieldsCached.get(fieldid) != FieldWaiting) {
-            callback(this.ClientFieldsCached.get(fieldid) as Field);
-        }
-        return this.ClientFieldsCached.get(fieldid);
-    }
-
-    static times = 0; // hack for testing
-    public static GetDocumentField(doc: Document, key: Key) {
-        var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
-
-        return this.GetField(doc._proxies.get(key),
-            action((fieldfromserver: Field) => {
-                doc._proxies.delete(key);
-                doc.fields.set(key, fieldfromserver);
-            })
-            , hackTimeout);
-    }
-
-    public static AddDocument(document: Document) {
-        SocketStub.SEND_ADD_DOCUMENT(document);
-    }
-    public static AddDocumentField(doc: Document, key: Key, value: Field) {
-        SocketStub.SEND_ADD_DOCUMENT_FIELD(doc, key, value);
-    }
-    public static DeleteDocumentField(doc: Document, key: Key) {
-        SocketStub.SEND_DELETE_DOCUMENT_FIELD(doc, key);
-    }
-    public static SetFieldValue(field: Field, value: any) {
-        SocketStub.SEND_SET_FIELD(field, value);
-    }
-
-    @action
-    private static cacheField(clientField: Field) {
-        var cached = this.ClientFieldsCached.get(clientField.Id);
-        if (!cached || cached == FieldWaiting) {
-            this.ClientFieldsCached.set(clientField.Id, clientField);
-        } else {
-            // probably should overwrite the values within any field that was already here...
-        }
-        return this.ClientFieldsCached.get(clientField.Id) as Field;
-    }
-}
diff --git a/src/SocketStub.tsx b/src/SocketStub.tsx
deleted file mode 100644
index f9d48c067..000000000
--- a/src/SocketStub.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Field, FIELD_ID } from "./fields/Field"
-import { Key, KeyStore } from "./fields/Key"
-import { ObservableMap, action } from "mobx";
-import { Document } from "./fields/Document"
-
-export class SocketStub {
-
-    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
-    public static SEND_ADD_DOCUMENT(document: Document) {
-
-        // Send a serialized version of the document to the server
-        // ...SOCKET(ADD_DOCUMENT, serialied document)
-
-        // server stores each document field in its repository of stored fields
-        document.fields.forEach((f, key) => this.FieldStore.set((f as Field).Id, f as Field));
-
-        // server stores stripped down document (w/ only field id proxies) in the field store
-        this.FieldStore.set(document.Id, new Document(document.Id));
-        document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id));
-    }
-
-    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void, timeout: number) {
-
-        if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that.
-            callback(this.FieldStore.get(fieldid) as Field);
-        else { // actual logic here... 
-
-            // Send a request for fieldid to the server
-            // ...SOCKET(RETRIEVE_FIELD, fieldid)
-
-            // server responds (simulated with a timeout) and the callback is invoked
-            setTimeout(() =>
-
-                // when the field data comes back, call the callback() function 
-                callback(this.FieldStore.get(fieldid) as Field),
-
-
-                timeout);
-        }
-    }
-
-    public static SEND_ADD_DOCUMENT_FIELD(doc: Document, key: Key, value: Field) {
-
-        // Send a serialized version of the field to the server along with the
-        // associated info of the document id and key where it is used.
-
-        // ...SOCKET(ADD_DOCUMENT_FIELD, document id, key id, serialized field)
-
-        // server updates its document to hold a proxy mapping from key => fieldId
-        var document = this.FieldStore.get(doc.Id) as Document;
-        if (document)
-            document._proxies.set(key, value.Id);
-
-        // server adds the field to its repository of fields
-        this.FieldStore.set(value.Id, value);
-    }
-
-    public static SEND_DELETE_DOCUMENT_FIELD(doc: Document, key: Key) {
-        // Send a request to delete the field stored under the specified key from the document
-
-        // ...SOCKET(DELETE_DOCUMENT_FIELD, document id, key id)
-
-        // Server removes the field id from the document's list of field proxies
-        var document = this.FieldStore.get(doc.Id) as Document;
-        if (document)
-            document._proxies.delete(key);
-    }
-
-    public static SEND_SET_FIELD(field: Field, value: any) {
-        // Send a request to set the value of a field
-
-        // ...SOCKET(SET_FIELD, field id, serialized field value)
-
-        // Server updates the value of the field in its fieldstore
-        if (this.FieldStore.get(field.Id))
-            this.FieldStore.get(field.Id)!.TrySetValue(value);
-    }
-}
diff --git a/src/client/Server.ts b/src/client/Server.ts
new file mode 100644
index 000000000..85e55a84e
--- /dev/null
+++ b/src/client/Server.ts
@@ -0,0 +1,61 @@
+import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "../fields/Field"
+import { Key, KeyStore } from "../fields/Key"
+import { ObservableMap, action } from "mobx";
+import { Document } from "../fields/Document"
+import { SocketStub } from "./SocketStub";
+
+export class Server {
+    private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
+
+    // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
+    // Call this is from within a reaction and test whether the return value is FieldWaiting.
+    // 'hackTimeout' is here temporarily for simplicity when debugging things.
+    public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
+        if (!this.ClientFieldsCached.get(fieldid)) {
+            this.ClientFieldsCached.set(fieldid, FieldWaiting);
+            //simulating a server call with a registered callback action
+            SocketStub.SEND_FIELD_REQUEST(fieldid,
+                action((field: Field) => callback(Server.cacheField(field))),
+                hackTimeout);
+        } else if (this.ClientFieldsCached.get(fieldid) != FieldWaiting) {
+            callback(this.ClientFieldsCached.get(fieldid) as Field);
+        }
+        return this.ClientFieldsCached.get(fieldid);
+    }
+
+    static times = 0; // hack for testing
+    public static GetDocumentField(doc: Document, key: Key) {
+        var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
+
+        return this.GetField(doc._proxies.get(key),
+            action((fieldfromserver: Field) => {
+                doc._proxies.delete(key);
+                doc.fields.set(key, fieldfromserver);
+            })
+            , hackTimeout);
+    }
+
+    public static AddDocument(document: Document) {
+        SocketStub.SEND_ADD_DOCUMENT(document);
+    }
+    public static AddDocumentField(doc: Document, key: Key, value: Field) {
+        SocketStub.SEND_ADD_DOCUMENT_FIELD(doc, key, value);
+    }
+    public static DeleteDocumentField(doc: Document, key: Key) {
+        SocketStub.SEND_DELETE_DOCUMENT_FIELD(doc, key);
+    }
+    public static SetFieldValue(field: Field, value: any) {
+        SocketStub.SEND_SET_FIELD(field, value);
+    }
+
+    @action
+    private static cacheField(clientField: Field) {
+        var cached = this.ClientFieldsCached.get(clientField.Id);
+        if (!cached || cached == FieldWaiting) {
+            this.ClientFieldsCached.set(clientField.Id, clientField);
+        } else {
+            // probably should overwrite the values within any field that was already here...
+        }
+        return this.ClientFieldsCached.get(clientField.Id) as Field;
+    }
+}
diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
new file mode 100644
index 000000000..58dedbf82
--- /dev/null
+++ b/src/client/SocketStub.ts
@@ -0,0 +1,78 @@
+import { Field, FIELD_ID } from "../fields/Field"
+import { Key, KeyStore } from "../fields/Key"
+import { ObservableMap, action } from "mobx";
+import { Document } from "../fields/Document"
+
+export class SocketStub {
+
+    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
+    public static SEND_ADD_DOCUMENT(document: Document) {
+
+        // Send a serialized version of the document to the server
+        // ...SOCKET(ADD_DOCUMENT, serialied document)
+
+        // server stores each document field in its repository of stored fields
+        document.fields.forEach((f, key) => this.FieldStore.set((f as Field).Id, f as Field));
+
+        // server stores stripped down document (w/ only field id proxies) in the field store
+        this.FieldStore.set(document.Id, new Document(document.Id));
+        document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id));
+    }
+
+    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void, timeout: number) {
+
+        if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that.
+            callback(this.FieldStore.get(fieldid) as Field);
+        else { // actual logic here... 
+
+            // Send a request for fieldid to the server
+            // ...SOCKET(RETRIEVE_FIELD, fieldid)
+
+            // server responds (simulated with a timeout) and the callback is invoked
+            setTimeout(() =>
+
+                // when the field data comes back, call the callback() function 
+                callback(this.FieldStore.get(fieldid) as Field),
+
+
+                timeout);
+        }
+    }
+
+    public static SEND_ADD_DOCUMENT_FIELD(doc: Document, key: Key, value: Field) {
+
+        // Send a serialized version of the field to the server along with the
+        // associated info of the document id and key where it is used.
+
+        // ...SOCKET(ADD_DOCUMENT_FIELD, document id, key id, serialized field)
+
+        // server updates its document to hold a proxy mapping from key => fieldId
+        var document = this.FieldStore.get(doc.Id) as Document;
+        if (document)
+            document._proxies.set(key, value.Id);
+
+        // server adds the field to its repository of fields
+        this.FieldStore.set(value.Id, value);
+    }
+
+    public static SEND_DELETE_DOCUMENT_FIELD(doc: Document, key: Key) {
+        // Send a request to delete the field stored under the specified key from the document
+
+        // ...SOCKET(DELETE_DOCUMENT_FIELD, document id, key id)
+
+        // Server removes the field id from the document's list of field proxies
+        var document = this.FieldStore.get(doc.Id) as Document;
+        if (document)
+            document._proxies.delete(key);
+    }
+
+    public static SEND_SET_FIELD(field: Field, value: any) {
+        // Send a request to set the value of a field
+
+        // ...SOCKET(SET_FIELD, field id, serialized field value)
+
+        // Server updates the value of the field in its fieldstore
+        if (this.FieldStore.get(field.Id))
+            this.FieldStore.get(field.Id)!.TrySetValue(value);
+    }
+}
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
new file mode 100644
index 000000000..6925234fe
--- /dev/null
+++ b/src/client/documents/Documents.ts
@@ -0,0 +1,161 @@
+import { Document } from "../../fields/Document";
+import { Server } from "../Server";
+import { KeyStore } from "../../fields/Key";
+import { TextField } from "../../fields/TextField";
+import { NumberField } from "../../fields/NumberField";
+import { ListField } from "../../fields/ListField";
+import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
+import { ImageField } from "../../fields/ImageField";
+import { ImageBox } from "../views/nodes/ImageBox";
+import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
+import { FIELD_ID } from "../../fields/Field";
+
+interface DocumentOptions {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    title?: string;
+}
+
+export namespace Documents {
+    function setupOptions(doc: Document, options: DocumentOptions): void {
+        if (options.x) {
+            doc.SetData(KeyStore.X, options.x, NumberField);
+        }
+        if (options.y) {
+            doc.SetData(KeyStore.Y, options.y, NumberField);
+        }
+        if (options.width) {
+            doc.SetData(KeyStore.Width, options.width, NumberField);
+        }
+        if (options.height) {
+            doc.SetData(KeyStore.Height, options.height, NumberField);
+        }
+        if (options.title) {
+            doc.SetData(KeyStore.Title, options.title, TextField);
+        }
+        doc.SetData(KeyStore.Scale, 1, NumberField);
+        doc.SetData(KeyStore.PanX, 0, NumberField);
+        doc.SetData(KeyStore.PanY, 0, NumberField);
+    }
+
+    let textProto: Document;
+    function GetTextPrototype(): Document {
+        if (!textProto) {
+            textProto = new Document();
+            textProto.Set(KeyStore.X, new NumberField(0));
+            textProto.Set(KeyStore.Y, new NumberField(0));
+            textProto.Set(KeyStore.Width, new NumberField(300));
+            textProto.Set(KeyStore.Height, new NumberField(150));
+            textProto.Set(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString()));
+            textProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+        }
+        return textProto;
+    }
+
+    export function TextDocument(options: DocumentOptions = {}): Document {
+        let doc = GetTextPrototype().MakeDelegate();
+        setupOptions(doc, options);
+        // doc.SetField(KeyStore.Data, new RichTextField());
+        return doc;
+    }
+
+    let schemaProto: Document;
+    function GetSchemaPrototype(): Document {
+        if (!schemaProto) {
+            schemaProto = new Document();
+            schemaProto.Set(KeyStore.X, new NumberField(0));
+            schemaProto.Set(KeyStore.Y, new NumberField(0));
+            schemaProto.Set(KeyStore.Width, new NumberField(300));
+            schemaProto.Set(KeyStore.Height, new NumberField(150));
+            schemaProto.Set(KeyStore.Layout, new TextField(CollectionSchemaView.LayoutString()));
+            schemaProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+        }
+        return schemaProto;
+    }
+
+    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
+        let doc = GetSchemaPrototype().MakeDelegate();
+        setupOptions(doc, options);
+        doc.Set(KeyStore.Data, new ListField(documents));
+        return doc;
+    }
+
+
+    let dockProto: Document;
+    function GetDockPrototype(): Document {
+        if (!dockProto) {
+            dockProto = new Document();
+            dockProto.Set(KeyStore.X, new NumberField(0));
+            dockProto.Set(KeyStore.Y, new NumberField(0));
+            dockProto.Set(KeyStore.Width, new NumberField(300));
+            dockProto.Set(KeyStore.Height, new NumberField(150));
+            dockProto.Set(KeyStore.Layout, new TextField(CollectionDockingView.LayoutString()));
+            dockProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+        }
+        return dockProto;
+    }
+
+    export function DockDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
+        let doc = GetDockPrototype().MakeDelegate();
+        setupOptions(doc, options);
+        doc.Set(KeyStore.Data, new ListField(documents));
+        return doc;
+    }
+
+
+    let imageProtoId: FIELD_ID;
+    function GetImagePrototype(): Document {
+        if (imageProtoId === undefined) {
+            let imageProto = new Document();
+            imageProtoId = imageProto.Id;
+            imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
+            imageProto.Set(KeyStore.X, new NumberField(0));
+            imageProto.Set(KeyStore.Y, new NumberField(0));
+            imageProto.Set(KeyStore.Width, new NumberField(300));
+            imageProto.Set(KeyStore.Height, new NumberField(300));
+            imageProto.Set(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
+            // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
+            imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+            Server.AddDocument(imageProto);
+            return imageProto;
+        }
+        return Server.GetField(imageProtoId) as Document;
+    }
+
+    export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
+        let doc = GetImagePrototype().MakeDelegate();
+        setupOptions(doc, options);
+        doc.Set(KeyStore.Data, new ImageField(new URL(url)));
+        Server.AddDocument(doc);
+        var sdoc = Server.GetField(doc.Id) as Document;
+        return sdoc;
+    }
+
+    let collectionProto: Document;
+    function GetCollectionPrototype(): Document {
+        if (!collectionProto) {
+            collectionProto = new Document();
+            collectionProto.Set(KeyStore.X, new NumberField(0));
+            collectionProto.Set(KeyStore.Y, new NumberField(0));
+            collectionProto.Set(KeyStore.Scale, new NumberField(1));
+            collectionProto.Set(KeyStore.PanX, new NumberField(0));
+            collectionProto.Set(KeyStore.PanY, new NumberField(0));
+            collectionProto.Set(KeyStore.Width, new NumberField(300));
+            collectionProto.Set(KeyStore.Height, new NumberField(300));
+            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
+            collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+        }
+        return collectionProto;
+    }
+
+    export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
+        let doc = GetCollectionPrototype().MakeDelegate();
+        setupOptions(doc, options);
+        doc.Set(KeyStore.Data, new ListField(documents));
+        return doc;
+    }
+}
\ No newline at end of file
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
new file mode 100644
index 000000000..f4dcce7c8
--- /dev/null
+++ b/src/client/util/DragManager.ts
@@ -0,0 +1,131 @@
+
+export namespace DragManager {
+    export function Root() {
+        const root = document.getElementById("root");
+        if (!root) {
+            throw new Error("No root element found");
+        }
+        return root;
+    }
+
+    let dragDiv: HTMLDivElement;
+
+    export enum DragButtons {
+        Left = 1, Right = 2, Both = Left | Right
+    }
+
+    interface DragOptions {
+        handlers: DragHandlers;
+
+        hideSource: boolean | (() => boolean);
+    }
+
+    export interface DragDropDisposer {
+        (): void;
+    }
+
+    export class DragCompleteEvent {
+    }
+
+    export interface DragHandlers {
+        dragComplete: (e: DragCompleteEvent) => void;
+    }
+
+    export interface DropOptions {
+        handlers: DropHandlers;
+    }
+
+    export class DropEvent {
+        constructor(readonly x: number, readonly y: number, readonly data: { [id: string]: any }) { }
+    }
+
+    export interface DropHandlers {
+        drop: (e: Event, de: DropEvent) => void;
+    }
+
+    export function MakeDropTarget(element: HTMLElement, options: DropOptions): DragDropDisposer {
+        if ("canDrop" in element.dataset) {
+            throw new Error("Element is already droppable, can't make it droppable again");
+        }
+        element.dataset["canDrop"] = "true";
+        const handler = (e: Event) => {
+            const ce = e as CustomEvent<DropEvent>;
+            options.handlers.drop(e, ce.detail);
+        };
+        element.addEventListener("dashOnDrop", handler);
+        return () => {
+            element.removeEventListener("dashOnDrop", handler);
+            delete element.dataset["canDrop"]
+        };
+    }
+
+
+    let _lastPointerX: number = 0;
+    let _lastPointerY: number = 0;
+    export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) {
+        if (!dragDiv) {
+            dragDiv = document.createElement("div");
+            DragManager.Root().appendChild(dragDiv);
+        }
+        const w = ele.offsetWidth, h = ele.offsetHeight;
+        const rect = ele.getBoundingClientRect();
+        const scaleX = rect.width / w, scaleY = rect.height / h;
+        let x = rect.left, y = rect.top;
+        // const offsetX = e.x - rect.left, offsetY = e.y - rect.top;
+        let dragElement = ele.cloneNode(true) as HTMLElement;
+        dragElement.style.opacity = "0.7";
+        dragElement.style.position = "absolute";
+        dragElement.style.transformOrigin = "0 0";
+        dragElement.style.zIndex = "1000";
+        dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
+        dragDiv.appendChild(dragElement);
+        _lastPointerX = dragData["xOffset"] + rect.left;
+        _lastPointerY = dragData["yOffset"] + rect.top;
+
+        let hideSource = false;
+        if (typeof options.hideSource === "boolean") {
+            hideSource = options.hideSource;
+        } else {
+            hideSource = options.hideSource();
+        }
+        const wasHidden = ele.hidden;
+        if (hideSource) {
+            ele.hidden = true;
+        }
+
+        const moveHandler = (e: PointerEvent) => {
+            e.stopPropagation();
+            e.preventDefault();
+            x += e.clientX - _lastPointerX; _lastPointerX = e.clientX;
+            y += e.clientY - _lastPointerY; _lastPointerY = e.clientY;
+            dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
+        };
+        const upHandler = (e: PointerEvent) => {
+            document.removeEventListener("pointermove", moveHandler, true);
+            document.removeEventListener("pointerup", upHandler);
+            FinishDrag(dragElement, e, options, dragData);
+            if (hideSource && !wasHidden) {
+                ele.hidden = false;
+            }
+        };
+        document.addEventListener("pointermove", moveHandler, true);
+        document.addEventListener("pointerup", upHandler);
+    }
+
+    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) {
+        dragDiv.removeChild(dragEle);
+        const target = document.elementFromPoint(e.x, e.y);
+        if (!target) {
+            return;
+        }
+        target.dispatchEvent(new CustomEvent<DropEvent>("dashOnDrop", {
+            bubbles: true,
+            detail: {
+                x: e.x,
+                y: e.y,
+                data: dragData
+            }
+        }));
+        options.handlers.dragComplete({});
+    }
+}
\ No newline at end of file
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
new file mode 100644
index 000000000..6bc5fa412
--- /dev/null
+++ b/src/client/util/Scripting.ts
@@ -0,0 +1,58 @@
+// import * as ts from "typescript"
+let ts = (window as any).ts;
+import { Opt, Field } from "../../fields/Field";
+import { Document as DocumentImport } from "../../fields/Document";
+import { NumberField as NumberFieldImport, NumberField } from "../../fields/NumberField";
+import { ImageField as ImageFieldImport } from "../../fields/ImageField";
+import { TextField as TextFieldImport, TextField } from "../../fields/TextField";
+import { RichTextField as RichTextFieldImport } from "../../fields/RichTextField";
+import { KeyStore as KeyStoreImport } from "../../fields/Key";
+
+export interface ExecutableScript {
+    (): any;
+
+    compiled: boolean;
+}
+
+function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
+    const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
+
+    let func: () => Opt<Field>;
+    if (compiled) {
+        func = function (): Opt<Field> {
+            let KeyStore = KeyStoreImport;
+            let Document = DocumentImport;
+            let NumberField = NumberFieldImport;
+            let TextField = TextFieldImport;
+            let ImageField = ImageFieldImport;
+            let RichTextField = RichTextFieldImport;
+            let window = undefined;
+            let document = undefined;
+            let retVal = eval(script);
+
+            return retVal;
+        };
+    } else {
+        func = () => undefined;
+    }
+
+    return Object.assign(func,
+        {
+            compiled
+        });
+}
+
+export function CompileScript(script: string): ExecutableScript {
+    let result = (window as any).ts.transpileModule(script, {})
+
+    return ExecScript(result.outputText, result.diagnostics);
+}
+
+export function ToField(data: any): Opt<Field> {
+    if (typeof data == "string") {
+        return new TextField(data);
+    } else if (typeof data == "number") {
+        return new NumberField(data);
+    }
+    return undefined;
+}
\ No newline at end of file
diff --git a/src/client/util/ScrollBox.tsx b/src/client/util/ScrollBox.tsx
new file mode 100644
index 000000000..b6b088170
--- /dev/null
+++ b/src/client/util/ScrollBox.tsx
@@ -0,0 +1,21 @@
+import React = require("react")
+
+export class ScrollBox extends React.Component {
+    onWheel = (e: React.WheelEvent) => {
+        if (e.currentTarget.scrollHeight > e.currentTarget.clientHeight) { // If the element has a scroll bar, then we don't want the containing collection to zoom
+            e.stopPropagation();
+        }
+    }
+
+    render() {
+        return (
+            <div style={{
+                overflow: "auto",
+                width: "100%",
+                height: "100%",
+            }} onWheel={this.onWheel}>
+                {this.props.children}
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
new file mode 100644
index 000000000..0759ae110
--- /dev/null
+++ b/src/client/util/SelectionManager.ts
@@ -0,0 +1,39 @@
+import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
+import { observable, action } from "mobx";
+
+export namespace SelectionManager {
+    class Manager {
+        @observable
+        SelectedDocuments: Array<CollectionFreeFormDocumentView> = [];
+
+        @action
+        SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+            // if doc is not in SelectedDocuments, add it
+            if (!ctrlPressed) {
+                manager.SelectedDocuments = [];
+            }
+
+            if (manager.SelectedDocuments.indexOf(doc) === -1) {
+                manager.SelectedDocuments.push(doc)
+            }
+        }
+    }
+
+    const manager = new Manager;
+
+    export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+        manager.SelectDoc(doc, ctrlPressed)
+    }
+
+    export function IsSelected(doc: CollectionFreeFormDocumentView): boolean {
+        return manager.SelectedDocuments.indexOf(doc) !== -1;
+    }
+
+    export function DeselectAll(): void {
+        manager.SelectedDocuments = []
+    }
+
+    export function SelectedDocuments(): Array<CollectionFreeFormDocumentView> {
+        return manager.SelectedDocuments;
+    }
+}
\ No newline at end of file
diff --git a/src/client/util/TypedEvent.ts b/src/client/util/TypedEvent.ts
new file mode 100644
index 000000000..0714a7f5c
--- /dev/null
+++ b/src/client/util/TypedEvent.ts
@@ -0,0 +1,42 @@
+export interface Listener<T> {
+  (event: T): any;
+}
+
+export interface Disposable {
+  dispose(): void;
+}
+
+/** passes through events as they happen. You will not get events from before you start listening */
+export class TypedEvent<T> {
+  private listeners: Listener<T>[] = [];
+  private listenersOncer: Listener<T>[] = [];
+
+  on = (listener: Listener<T>): Disposable => {
+    this.listeners.push(listener);
+    return {
+      dispose: () => this.off(listener)
+    };
+  }
+
+  once = (listener: Listener<T>): void => {
+    this.listenersOncer.push(listener);
+  }
+
+  off = (listener: Listener<T>) => {
+    var callbackIndex = this.listeners.indexOf(listener);
+    if (callbackIndex > -1) this.listeners.splice(callbackIndex, 1);
+  }
+
+  emit = (event: T) => {
+    /** Update any general listeners */
+    this.listeners.forEach((listener) => listener(event));
+
+    /** Clear the `once` queue */
+    this.listenersOncer.forEach((listener) => listener(event));
+    this.listenersOncer = [];
+  }
+
+  pipe = (te: TypedEvent<T>): Disposable => {
+    return this.on((e) => te.emit(e));
+  }
+}
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
new file mode 100644
index 000000000..234f82eb9
--- /dev/null
+++ b/src/client/views/ContextMenu.scss
@@ -0,0 +1,34 @@
+.contextMenu-cont {
+    position: absolute;
+    display: flex;
+    z-index: 1000;
+    box-shadow: #AAAAAA .2vw .2vw .4vw;
+}
+
+.contextMenu-item {
+    width: 10vw;
+    height: 4vh;
+    background: #DDDDDD;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition: all .1s;
+}
+
+.contextMenu-item:hover {
+    transition: all .1s;
+    background: #AAAAAA
+}
+
+.contextMenu-description {
+    font-size: 1.5vw;
+    text-align: left;
+    width: 8vw;
+}
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
new file mode 100644
index 000000000..4f26a75d2
--- /dev/null
+++ b/src/client/views/ContextMenu.tsx
@@ -0,0 +1,68 @@
+import React = require("react");
+import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import "./ContextMenu.scss"
+
+@observer
+export class ContextMenu extends React.Component {
+    static Instance: ContextMenu
+
+    @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
+    @observable private _pageX: number = 0;
+    @observable private _pageY: number = 0;
+    @observable private _display: string = "none";
+
+    private ref: React.RefObject<HTMLDivElement>;
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+
+        this.ref = React.createRef()
+
+        ContextMenu.Instance = this;
+    }
+
+    clearItems() {
+        this._items = []
+        this._display = "none"
+    }
+
+    addItem(item: ContextMenuProps) {
+        if (this._items.indexOf(item) === -1) {
+            this._items.push(item);
+        }
+    }
+
+    getItems() {
+        return this._items;
+    }
+
+    displayMenu(x: number, y: number) {
+        this._pageX = x
+        this._pageY = y
+
+        this._display = "flex"
+    }
+
+    intersects = (x: number, y: number): boolean => {
+        if (this.ref.current && this._display !== "none") {
+            if (x >= this._pageX && x <= this._pageX + this.ref.current.getBoundingClientRect().width) {
+                if (y >= this._pageY && y <= this._pageY + this.ref.current.getBoundingClientRect().height) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    render() {
+        return (
+            <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
+                {this._items.map(prop => {
+                    return <ContextMenuItem {...prop} key={prop.description} />
+                })}
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
new file mode 100644
index 000000000..8f00f8b3d
--- /dev/null
+++ b/src/client/views/ContextMenuItem.tsx
@@ -0,0 +1,17 @@
+import React = require("react");
+import { ContextMenu } from "./ContextMenu";
+
+export interface ContextMenuProps {
+    description: string;
+    event: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export class ContextMenuItem extends React.Component<ContextMenuProps> {
+    render() {
+        return (
+            <div className="contextMenu-item" onClick={this.props.event}>
+                <div className="contextMenu-description">{this.props.description}</div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
new file mode 100644
index 000000000..e8b93a18b
--- /dev/null
+++ b/src/client/views/DocumentDecorations.scss
@@ -0,0 +1,32 @@
+#documentDecorations-container {
+    position: absolute;
+    display: grid;
+    z-index: 1000;
+    grid-template-rows: 20px 1fr 20px;
+    grid-template-columns: 20px 1fr 20px;
+    pointer-events: none;
+    #documentDecorations-centerCont {
+        background: none;
+    }
+    .documentDecorations-resizer {
+        pointer-events: auto;
+        background: lightblue;
+        opacity: 0.4;
+    }
+    #documentDecorations-topLeftResizer,
+    #documentDecorations-bottomRightResizer {
+        cursor: nwse-resize;
+    }
+    #documentDecorations-topRightResizer,
+    #documentDecorations-bottomLeftResizer {
+        cursor: nesw-resize;
+    }
+    #documentDecorations-topResizer,
+    #documentDecorations-bottomResizer {
+        cursor: ns-resize;
+    }
+    #documentDecorations-leftResizer,
+    #documentDecorations-rightResizer {
+        cursor: ew-resize;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
new file mode 100644
index 000000000..8a94bff36
--- /dev/null
+++ b/src/client/views/DocumentDecorations.tsx
@@ -0,0 +1,153 @@
+import { observable, computed } from "mobx";
+import React = require("react");
+import { SelectionManager } from "../util/SelectionManager";
+import { observer } from "mobx-react";
+import './DocumentDecorations.scss'
+import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
+
+@observer
+export class DocumentDecorations extends React.Component {
+    static Instance: DocumentDecorations
+    private _resizer = ""
+    private _isPointerDown = false;
+    @observable private _opacity = 1;
+
+    constructor(props: Readonly<{}>) {
+        super(props)
+
+        DocumentDecorations.Instance = this
+    }
+
+    @computed
+    get Bounds(): { x: number, y: number, b: number, r: number } {
+        return SelectionManager.SelectedDocuments().reduce((bounds, element) => {
+            if (element.props.ContainingCollectionView != undefined &&
+                !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
+                return bounds;
+            }
+            var spt = element.TransformToScreenPoint(0, 0);
+            var bpt = element.TransformToScreenPoint(element.width, element.height);
+            return {
+                x: Math.min(spt.ScreenX, bounds.x), y: Math.min(spt.ScreenY, bounds.y),
+                r: Math.max(bpt.ScreenX, bounds.r), b: Math.max(bpt.ScreenY, bounds.b)
+            }
+        }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+    }
+
+    @computed
+    get opacity(): number {
+        return this._opacity
+    }
+
+    set opacity(o: number) {
+        this._opacity = Math.min(Math.max(0, o), 1)
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        if (e.button === 0) {
+            this._isPointerDown = true;
+            this._resizer = e.currentTarget.id;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!this._isPointerDown) {
+            return;
+        }
+
+        let dX = 0, dY = 0, dW = 0, dH = 0;
+
+        switch (this._resizer) {
+            case "":
+                break;
+            case "documentDecorations-topLeftResizer":
+                dX = -1
+                dY = -1
+                dW = -(e.movementX)
+                dH = -(e.movementY)
+                break;
+            case "documentDecorations-topRightResizer":
+                dW = e.movementX
+                dY = -1
+                dH = -(e.movementY)
+                break;
+            case "documentDecorations-topResizer":
+                dY = -1
+                dH = -(e.movementY)
+                break;
+            case "documentDecorations-bottomLeftResizer":
+                dX = -1
+                dW = -(e.movementX)
+                dH = e.movementY
+                break;
+            case "documentDecorations-bottomRightResizer":
+                dW = e.movementX
+                dH = e.movementY
+                break;
+            case "documentDecorations-bottomResizer":
+                dH = e.movementY
+                break;
+            case "documentDecorations-leftResizer":
+                dX = -1
+                dW = -(e.movementX)
+                break;
+            case "documentDecorations-rightResizer":
+                dW = e.movementX
+                break;
+        }
+
+        SelectionManager.SelectedDocuments().forEach(element => {
+            const rect = element.screenRect;
+            if (rect.width !== 0) {
+                let scale = element.width / rect.width;
+                let actualdW = Math.max(element.width + (dW * scale), 20);
+                let actualdH = Math.max(element.height + (dH * scale), 20);
+                element.x += dX * (actualdW - element.width);
+                element.y += dY * (actualdH - element.height);
+                element.width = actualdW;
+                element.height = actualdH;
+            }
+        })
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        if (e.button === 0) {
+            e.preventDefault();
+            this._isPointerDown = false;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    render() {
+        var bounds = this.Bounds;
+        return (
+            <div id="documentDecorations-container" style={{
+                width: (bounds.r - bounds.x + 40) + "px",
+                height: (bounds.b - bounds.y + 40) + "px",
+                left: bounds.x - 20,
+                top: bounds.y - 20,
+                opacity: this.opacity
+            }}>
+                <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-leftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-centerCont"></div>
+                <div id="documentDecorations-rightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
new file mode 100644
index 000000000..2e784d3f9
--- /dev/null
+++ b/src/client/views/EditableView.tsx
@@ -0,0 +1,39 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+
+export interface EditableProps {
+    GetValue(): string;
+    SetValue(value: string): boolean;
+    contents: any;
+}
+
+@observer
+export class EditableView extends React.Component<EditableProps> {
+    @observable
+    editing: boolean = false;
+
+    @action
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key == "Enter" && !e.ctrlKey) {
+            this.props.SetValue(e.currentTarget.value);
+            this.editing = false;
+        } else if (e.key == "Escape") {
+            this.editing = false;
+        }
+    }
+
+    render() {
+        if (this.editing) {
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ width: "100%" }}></input>
+        } else {
+            return (
+                <div>
+                    {this.props.contents}
+                    <button onClick={action(() => this.editing = true)}>Edit</button>
+                </div>
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
new file mode 100644
index 000000000..e73f62904
--- /dev/null
+++ b/src/client/views/Main.scss
@@ -0,0 +1,31 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: 'Hind Siliguri', sans-serif;
+    margin: 0;
+}
+
+h1 {
+    font-size: 50px;
+    position: fixed;
+    top: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: black;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+    z-index: 9999;
+    font-family: 'Fjalla One', sans-serif;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+p {
+    margin: 0px;
+    padding: 0px;
+}
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
new file mode 100644
index 000000000..fc6f0a208
--- /dev/null
+++ b/src/client/views/Main.tsx
@@ -0,0 +1,91 @@
+import { action, configure } from 'mobx';
+import "normalize.css";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { DocumentDecorations } from './DocumentDecorations';
+import { Documents } from '../documents/Documents';
+import { Document } from '../../fields/Document';
+import { KeyStore, KeyStore as KS } from '../../fields/Key';
+import { ListField } from '../../fields/ListField';
+import { NumberField } from '../../fields/NumberField';
+import { TextField } from '../../fields/TextField';
+import "./Main.scss";
+import { ContextMenu } from './ContextMenu';
+import { DocumentView } from './nodes/DocumentView';
+import { ImageField } from '../../fields/ImageField';
+
+
+configure({
+    enforceActions: "observed"
+});
+
+const mainNodeCollection = new Array<Document>();
+let mainContainer = Documents.DockDocument(mainNodeCollection, {
+    x: 0, y: 0, title: "main container"
+})
+
+window.addEventListener("drop", function (e) {
+    e.preventDefault();
+}, false)
+window.addEventListener("dragover", function (e) {
+    e.preventDefault();
+}, false)
+document.addEventListener("pointerdown", action(function (e: PointerEvent) {
+    if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
+        ContextMenu.Instance.clearItems()
+    }
+}), true)
+
+
+//runInAction(() => 
+{
+    let doc1 = Documents.TextDocument({ title: "hello" });
+    let doc2 = doc1.MakeDelegate();
+    doc2.Set(KS.X, new NumberField(150));
+    doc2.Set(KS.Y, new NumberField(20));
+    let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+        x: 450, y: 500, title: "cat 1"
+    });
+    doc3.Set(KeyStore.Data, new ImageField);
+    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+    }));
+    schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
+    schemaDocs[4].SetData(KS.Author, "Bob", TextField);
+    schemaDocs.push(doc2);
+    const doc7 = Documents.SchemaDocument(schemaDocs)
+    const docset = [doc1, doc2, doc3, doc7];
+    let doc4 = Documents.CollectionDocument(docset, {
+        x: 0, y: 400, title: "mini collection"
+    });
+    // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+    //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
+    // });
+    let docset2 = new Array<Document>(doc4);//, doc1, doc3);
+    let doc6 = Documents.CollectionDocument(docset2, {
+        x: 350, y: 100, width: 600, height: 600, title: "docking collection"
+    });
+    let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
+    if (!mainNodes) {
+        mainNodes = new ListField<Document>();
+    }
+    // mainNodes.Data.push(doc6);
+    // mainNodes.Data.push(doc2);
+    mainNodes.Data.push(doc4);
+    mainNodes.Data.push(doc3);
+    // mainNodes.Data.push(doc5);
+    // mainNodes.Data.push(doc1);
+    //mainNodes.Data.push(doc2);
+    //mainNodes.Data.push(doc6);
+    mainContainer.Set(KeyStore.Data, mainNodes);
+}
+//}
+//);
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
+        <DocumentDecorations />
+        <ContextMenu />
+    </div>),
+    document.getElementById('root'));
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
new file mode 100644
index 000000000..7c0b512a7
--- /dev/null
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -0,0 +1,336 @@
+.collectiondockingview-container {
+    position: relative;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    .lm_controls>li {
+        opacity: 0.6;
+        transform: scale(1.2);
+    }
+    .lm_maximised .lm_controls .lm_maximise {
+        opacity: 1;
+        transform: scale(0.8);
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
+    }
+    .flexlayout__layout {
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        overflow: hidden;
+    }
+    .flexlayout__splitter {
+        background-color: black;
+    }
+    .flexlayout__splitter:hover {
+        background-color: #333;
+    }
+    .flexlayout__splitter_drag {
+        border-radius: 5px;
+        background-color: #444;
+        z-index: 1000;
+    }
+    .flexlayout__outline_rect {
+        position: absolute;
+        cursor: move;
+        border: 2px solid #cfe8ff;
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+    }
+    .flexlayout__outline_rect_edge {
+        cursor: move;
+        border: 2px solid #b7d1b5;
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+    }
+    .flexlayout__edge_rect {
+        position: absolute;
+        z-index: 1000;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+        background-color: lightgray;
+    }
+    .flexlayout__drag_rect {
+        position: absolute;
+        cursor: move;
+        border: 2px solid #aaaaaa;
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, .3);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+        background-color: #eeeeee;
+        opacity: 0.9;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 10px;
+        word-wrap: break-word;
+    }
+    .flexlayout__tabset {
+        overflow: hidden;
+        background-color: #222;
+        box-sizing: border-box;
+    }
+    .flexlayout__tab {
+        overflow: auto;
+        position: absolute;
+        box-sizing: border-box;
+        background-color: #222;
+        color: black;
+    }
+    .flexlayout__tab_button {
+        cursor: pointer;
+        padding: 2px 8px 3px 8px;
+        margin: 2px;
+        /*box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .15);*/
+        /*border-top-left-radius: 3px;*/
+        /*border-top-right-radius: 3px;*/
+        float: left;
+        vertical-align: top;
+        box-sizing: border-box;
+    }
+    .flexlayout__tab_button--selected {
+        color: #ddd;
+        background-color: #222;
+    }
+    .flexlayout__tab_button--unselected {
+        color: gray;
+    }
+    .flexlayout__tab_button_leading {
+        display: inline-block;
+    }
+    .flexlayout__tab_button_content {
+        display: inline-block;
+    }
+    .flexlayout__tab_button_textbox {
+        float: left;
+        border: none;
+        color: lightgreen;
+        background-color: #222;
+    }
+    .flexlayout__tab_button_textbox:focus {
+        outline: none;
+    }
+    .flexlayout__tab_button_trailing {
+        display: inline-block;
+        margin-left: 5px;
+        margin-top: 3px;
+        width: 8px;
+        height: 8px;
+    }
+    .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
+    .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
+        background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
+    }
+    .flexlayout__tab_button_overflow {
+        float: left;
+        width: 20px;
+        height: 15px;
+        margin-top: 2px;
+        padding-left: 12px;
+        border: none;
+        font-size: 10px;
+        color: lightgray;
+        font-family: Arial, sans-serif;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
+    }
+    .flexlayout__tabset_header {
+        position: absolute;
+        left: 0;
+        right: 0;
+        color: #eee;
+        background-color: #212121;
+        padding: 3px 3px 3px 5px;
+        /*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
+        box-sizing: border-box;
+    }
+    .flexlayout__tab_header_inner {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 10000px;
+    }
+    .flexlayout__tab_header_outer {
+        background-color: black;
+        position: absolute;
+        left: 0;
+        right: 0;
+        /*top: 0px;*/
+        /*height: 100px;*/
+        overflow: hidden;
+    }
+    .flexlayout__tabset-selected {
+        background-image: linear-gradient(#111, #444);
+    }
+    .flexlayout__tabset-maximized {
+        background-image: linear-gradient(#666, #333);
+    }
+    .flexlayout__tab_toolbar {
+        position: absolute;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        top: 0;
+        bottom: 0;
+        right: 0;
+    }
+    .flexlayout__tab_toolbar_button-min {
+        width: 20px;
+        height: 20px;
+        border: none;
+        outline-width: 0;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
+    }
+    .flexlayout__tab_toolbar_button-max {
+        width: 20px;
+        height: 20px;
+        border: none;
+        outline-width: 0;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
+    }
+    .flexlayout__popup_menu {}
+    .flexlayout__popup_menu_item {
+        padding: 2px 10px 2px 10px;
+        color: #ddd;
+    }
+    .flexlayout__popup_menu_item:hover {
+        background-color: #444444;
+    }
+    .flexlayout__popup_menu_container {
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
+        border: 1px solid #555;
+        background: #222;
+        border-radius: 3px;
+        position: absolute;
+        z-index: 1000;
+    }
+    .flexlayout__border_top {
+        background-color: black;
+        border-bottom: 1px solid #ddd;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+    .flexlayout__border_bottom {
+        background-color: black;
+        border-top: 1px solid #333;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+    .flexlayout__border_left {
+        background-color: black;
+        border-right: 1px solid #333;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+    .flexlayout__border_right {
+        background-color: black;
+        border-left: 1px solid #333;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+    .flexlayout__border_inner_bottom {
+        display: flex;
+    }
+    .flexlayout__border_inner_left {
+        position: absolute;
+        white-space: nowrap;
+        right: 23px;
+        transform-origin: top right;
+        transform: rotate(-90deg);
+    }
+    .flexlayout__border_inner_right {
+        position: absolute;
+        white-space: nowrap;
+        left: 23px;
+        transform-origin: top left;
+        transform: rotate(90deg);
+    }
+    .flexlayout__border_button {
+        background-color: #222;
+        color: white;
+        display: inline-block;
+        white-space: nowrap;
+        cursor: pointer;
+        padding: 2px 8px 3px 8px;
+        margin: 2px;
+        vertical-align: top;
+        box-sizing: border-box;
+    }
+    .flexlayout__border_button--selected {
+        color: #ddd;
+        background-color: #222;
+    }
+    .flexlayout__border_button--unselected {
+        color: gray;
+    }
+    .flexlayout__border_button_leading {
+        float: left;
+        display: inline;
+    }
+    .flexlayout__border_button_content {
+        display: inline-block;
+    }
+    .flexlayout__border_button_textbox {
+        float: left;
+        border: none;
+        color: green;
+        background-color: #ddd;
+    }
+    .flexlayout__border_button_textbox:focus {
+        outline: none;
+    }
+    .flexlayout__border_button_trailing {
+        display: inline-block;
+        margin-left: 5px;
+        margin-top: 3px;
+        width: 8px;
+        height: 8px;
+    }
+    .flexlayout__border_button:hover .flexlayout__border_button_trailing,
+    .flexlayout__border_button--selected .flexlayout__border_button_trailing {
+        background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
+    }
+    .flexlayout__border_toolbar_left {
+        position: absolute;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    .flexlayout__border_toolbar_right {
+        position: absolute;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    .flexlayout__border_toolbar_top {
+        position: absolute;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        top: 0;
+        bottom: 0;
+        right: 0;
+    }
+    .flexlayout__border_toolbar_bottom {
+        position: absolute;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        top: 0;
+        bottom: 0;
+        right: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
new file mode 100644
index 000000000..9aee9c10f
--- /dev/null
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -0,0 +1,281 @@
+import { observer } from "mobx-react";
+import { KeyStore } from "../../../fields/Key";
+import React = require("react");
+import FlexLayout from "flexlayout-react";
+import { action, observable, computed } from "mobx";
+import { Document } from "../../../fields/Document";
+import { DocumentView } from "../nodes/DocumentView";
+import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
+import "./CollectionDockingView.scss"
+import 'golden-layout/src/css/goldenlayout-base.css';
+import 'golden-layout/src/css/goldenlayout-dark-theme.css';
+import * as GoldenLayout from "golden-layout";
+import * as ReactDOM from 'react-dom';
+import { DragManager } from "../../util/DragManager";
+import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+
+@observer
+export class CollectionDockingView extends CollectionViewBase {
+
+    private static UseGoldenLayout = true;
+    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
+    private _containerRef = React.createRef<HTMLDivElement>();
+    @computed
+    private get modelForFlexLayout() {
+        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const value: Document[] = Document.GetData(fieldKey, ListField, []);
+        var docs = value.map(doc => {
+            return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
+        });
+        return FlexLayout.Model.fromJson({
+            global: {}, borders: [],
+            layout: {
+                "type": "row",
+                "weight": 100,
+                "children": docs
+            }
+        });
+    }
+    @computed
+    private get modelForGoldenLayout(): any {
+        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const value: Document[] = Document.GetData(fieldKey, ListField, []);
+        var docs = value.map(doc => {
+            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
+        });
+        return new GoldenLayout({
+            settings: {
+                selectionEnabled: true
+            }, content: [{ type: 'row', content: docs }]
+        });
+    }
+    constructor(props: CollectionViewProps) {
+        super(props);
+    }
+
+    componentDidMount: () => void = () => {
+        if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
+            this.goldenLayoutFactory();
+            window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
+        }
+    }
+    componentWillUnmount: () => void = () => {
+        window.removeEventListener('resize', this.onResize);
+    }
+    private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
+
+
+    @action
+    onResize = (event: any) => {
+        var cur = this.props.ContainingDocumentView!.MainContent.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
+        CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
+    }
+
+    @action
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (e.button === 2 && this.active) {
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            if (e.buttons === 1 && this.active) {
+                e.stopPropagation();
+            }
+        }
+    }
+
+    flexLayoutFactory = (node: any): any => {
+        var component = node.getComponent();
+        if (component === "button") {
+            return <button>{node.getName()}</button>;
+        }
+        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const value: Document[] = Document.GetData(fieldKey, ListField, []);
+        for (var i: number = 0; i < value.length; i++) {
+            if (value[i].Id === component) {
+                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
+            }
+        }
+        if (component === "text") {
+            return (<div className="panel">Panel {node.getName()}</div>);
+        }
+    }
+
+    public static myLayout: any = null;
+
+    private static _dragDiv: any = null;
+    private static _dragParent: HTMLElement | null = null;
+    private static _dragElement: HTMLDivElement;
+    private static _dragFakeElement: HTMLDivElement;
+    public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+        var newItemConfig = {
+            type: 'component',
+            componentName: 'documentViewComponent',
+            componentState: { doc: dragDoc }
+        };
+        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);
+        CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+
+        //   - 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 HTMLDivElement;
+        this._dragParent!.appendChild(this._dragFakeElement);
+
+        // all of this must be undone when the document has been dropped (see tabCreated)
+    }
+
+    _makeFullScreen: boolean = false;
+    _maximizedStack: any = null;
+    public static OpenFullScreen(document: Document) {
+        var newItemConfig = {
+            type: 'component',
+            componentName: 'documentViewComponent',
+            componentState: { doc: document }
+        };
+        CollectionDockingView.myLayout._makeFullScreen = true;
+        CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig);
+    }
+    public static CloseFullScreen() {
+        if (CollectionDockingView.myLayout._maximizedStack != null) {
+            CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
+            CollectionDockingView.myLayout._maximizedStack = null;
+        }
+    }
+
+    //
+    //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
+    //
+    public static AddRightSplit(document: Document) {
+        var newItemConfig = {
+            type: 'component',
+            componentName: 'documentViewComponent',
+            componentState: { doc: document }
+        }
+        let newItemStackConfig = {
+            type: 'stack',
+            content: [newItemConfig]
+        };
+        var newContentItem = new CollectionDockingView.myLayout._typeToItem[newItemStackConfig.type](CollectionDockingView.myLayout, newItemStackConfig, parent);
+
+        if (CollectionDockingView.myLayout.root.contentItems[0].isRow) {
+            var rowlayout = CollectionDockingView.myLayout.root.contentItems[0];
+            var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1];
+
+            lastRowItem.config["width"] *= 0.5;
+            newContentItem.config["width"] = lastRowItem.config["width"];
+            rowlayout.addChild(newContentItem, rowlayout.contentItems.length, true);
+            rowlayout.callDownwards('setSize');
+        }
+        else {
+            var collayout = CollectionDockingView.myLayout.root.contentItems[0];
+            var newRow = collayout.layoutManager.createContentItem({ type: "row" }, CollectionDockingView.myLayout);
+            collayout.parent.replaceChild(collayout, newRow);
+
+            newRow.addChild(newContentItem, undefined, true);
+            newRow.addChild(collayout, 0, true);
+
+            collayout.config["width"] = 50;
+            newContentItem.config["width"] = 50;
+            collayout.parent.callDownwards('setSize');
+        }
+    }
+    goldenLayoutFactory() {
+        CollectionDockingView.myLayout = this.modelForGoldenLayout;
+
+        var layout = CollectionDockingView.myLayout;
+        CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
+            if (CollectionDockingView._dragDiv) {
+                CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
+                CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement);
+                CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement);
+                DragManager.Root().removeChild(CollectionDockingView._dragDiv);
+                CollectionDockingView._dragDiv = null;
+            }
+            tab.setTitle(tab.contentItem.config.componentState.doc.Title);
+            tab.closeElement.off('click') //unbind the current click handler
+                .click(function () {
+                    tab.contentItem.remove();
+                });
+        });
+
+        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
+            if (CollectionDockingView.myLayout._makeFullScreen) {
+                CollectionDockingView.myLayout._maximizedStack = stack;
+                CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise');
+            }
+            //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 () {
+                    //if (confirm('really close this?')) {
+                    stack.remove();
+                    //}
+                });
+        });
+
+        var me = this;
+        CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
+            // bcz: this is crufty
+            // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. 
+            // Apparently, we need to wait to allow a live html div element to actually be instantiated.
+            // After a timeout, we lookup the live html div element and add our React DocumentView to it.
+            var containingDiv = "component_" + me.nextId();
+            container.getElement().html("<div id='" + containingDiv + "'></div>");
+            setTimeout(function () {
+                ReactDOM.render((
+                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
+                ),
+                    document.getElementById(containingDiv)
+                );
+                if (CollectionDockingView.myLayout._maxstack != null) {
+                    CollectionDockingView.myLayout._maxstack.click();
+                }
+            }, 0);
+        });
+        CollectionDockingView.myLayout.container = this._containerRef.current;
+        CollectionDockingView.myLayout.init();
+    }
+
+
+    render() {
+        const { CollectionFieldKey: fieldKey, DocumentForCollection: 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.
+        var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
+        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)
+                return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />;
+        }
+
+        return (
+            <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>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
new file mode 100644
index 000000000..e9d134e7b
--- /dev/null
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -0,0 +1,20 @@
+.collectionfreeformview-container {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .collectionfreeformview {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+.border {
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
new file mode 100644
index 000000000..9cf29d000
--- /dev/null
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -0,0 +1,205 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { action, observable, computed } from "mobx";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DragManager } from "../../util/DragManager";
+import "./CollectionFreeFormView.scss";
+import { Utils } from "../../../Utils";
+import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { SelectionManager } from "../../util/SelectionManager";
+import { Key, KeyStore } from "../../../fields/Key";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
+import { Documents } from "../../documents/Documents";
+import { FieldWaiting } from "../../../fields/Field";
+
+@observer
+export class CollectionFreeFormView extends CollectionViewBase {
+    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
+    private _containerRef = React.createRef<HTMLDivElement>();
+    private _canvasRef = React.createRef<HTMLDivElement>();
+    private _nodeContainerRef = React.createRef<HTMLDivElement>();
+    private _lastX: number = 0;
+    private _lastY: number = 0;
+
+    constructor(props: CollectionViewProps) {
+        super(props);
+    }
+
+    @action
+    drop = (e: Event, de: DragManager.DropEvent) => {
+        const doc = de.data["document"];
+        var me = this;
+        if (doc instanceof CollectionFreeFormDocumentView) {
+            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
+                doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
+                this.addDocument(doc.props.Document);
+            }
+            const xOffset = de.data["xOffset"] as number || 0;
+            const yOffset = de.data["yOffset"] as number || 0;
+            const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
+            let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
+            const screenX = de.x - xOffset;
+            const screenY = de.y - yOffset;
+            const docX = (screenX - translateX) / sscale / scale;
+            const docY = (screenY - translateY) / sscale / scale;
+            doc.x = docX;
+            doc.y = docY;
+            this.bringToFront(doc);
+        }
+        e.stopPropagation();
+    }
+
+    componentDidMount() {
+        if (this._containerRef.current) {
+            DragManager.MakeDropTarget(this._containerRef.current, {
+                handlers: {
+                    drop: this.drop
+                }
+            });
+        }
+    }
+
+    @action
+    onPointerDown = (e: React.PointerEvent): void => {
+        if ((e.button === 2 && this.active) ||
+            !e.defaultPrevented) {
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+            this._lastX = e.pageX;
+            this._lastY = e.pageY;
+        }
+    }
+
+    @action
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        SelectionManager.DeselectAll();
+    }
+
+    @action
+    onPointerMove = (e: PointerEvent): void => {
+        var me = this;
+        if (!e.cancelBubble && this.active) {
+            e.preventDefault();
+            e.stopPropagation();
+            let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
+            let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
+            let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
+            this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
+            this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
+        }
+        this._lastX = e.pageX;
+        this._lastY = e.pageY;
+    }
+
+    @action
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+
+        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+
+        var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
+
+        var newContainerX = LocalX * deltaScale + Panxx + Xx;
+        var newContainerY = LocalY * deltaScale + Panyy + Yy;
+
+        let dx = ContainerX - newContainerX;
+        let dy = ContainerY - newContainerY;
+
+        this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale));
+        this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField);
+        this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField);
+    }
+
+    @action
+    onDrop = (e: React.DragEvent): void => {
+        e.stopPropagation()
+        e.preventDefault()
+        let fReader = new FileReader()
+        let file = e.dataTransfer.items[0].getAsFile();
+        let that = this;
+        const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
+        const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
+        let x = e.pageX - panx
+        let y = e.pageY - pany
+
+        fReader.addEventListener("load", action("drop", (event) => {
+            if (fReader.result) {
+                let url = "" + fReader.result;
+                let doc = Documents.ImageDocument(url, {
+                    x: x, y: y
+                })
+                let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField);
+                if (docs != FieldWaiting) {
+                    if (!docs) {
+                        docs = new ListField<Document>();
+                        that.props.DocumentForCollection.Set(KeyStore.Data, docs)
+                    }
+                    docs.Data.push(doc);
+                }
+            }
+        }), false)
+
+        if (file) {
+            fReader.readAsDataURL(file)
+        }
+    }
+
+    onDragOver = (e: React.DragEvent): void => {
+    }
+
+    @action
+    bringToFront(doc: CollectionFreeFormDocumentView) {
+        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+
+        const value: Document[] = Document.GetList<Document>(fieldKey, []);
+        var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000);
+        value.map(d => {
+            var zind = d.GetNumber(KeyStore.ZIndex, 0);
+            if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
+                d.SetData(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
+            }
+        })
+
+        if (doc.props.Document.GetNumber(KeyStore.ZIndex, 0) != 0) {
+            doc.props.Document.SetData(KeyStore.ZIndex, 0, NumberField);
+        }
+    }
+
+    render() {
+        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+        const value: Document[] = Document.GetList<Document>(fieldKey, []);
+        const panx: number = Document.GetNumber(KeyStore.PanX, 0);
+        const pany: number = Document.GetNumber(KeyStore.PanY, 0);
+        const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
+
+        return (
+            <div className="border" style={{
+                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+            }}>
+                <div className="collectionfreeformview-container"
+                    onPointerDown={this.onPointerDown}
+                    onWheel={this.onPointerWheel}
+                    onContextMenu={(e) => e.preventDefault()}
+                    onDrop={this.onDrop}
+                    onDragOver={this.onDragOver}
+                    ref={this._containerRef}>
+                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
+
+                        <div className="node-container" ref={this._nodeContainerRef}>
+                            {value.map(doc => {
+                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
new file mode 100644
index 000000000..707b44db6
--- /dev/null
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -0,0 +1,108 @@
+.Resizer {
+    box-sizing: border-box;
+    background: #000;
+    opacity: 0.5;
+    z-index: 1;
+    background-clip: padding-box;
+    &.horizontal {
+        height: 11px;
+        margin: -5px 0;
+        border-top: 5px solid rgba(255, 255, 255, 0);
+        border-bottom: 5px solid rgba(255, 255, 255, 0);
+        cursor: row-resize;
+        width: 100%;
+        &:hover {
+            border-top: 5px solid rgba(0, 0, 0, 0.5);
+            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+        }
+    }
+    &.vertical {
+        width: 11px;
+        margin: 0 -5px;
+        border-left: 5px solid rgba(255, 255, 255, 0);
+        border-right: 5px solid rgba(255, 255, 255, 0);
+        cursor: col-resize;
+        &:hover {
+            border-left: 5px solid rgba(0, 0, 0, 0.5);
+            border-right: 5px solid rgba(0, 0, 0, 0.5);
+        }
+    }
+    &:hover {
+        -webkit-transition: all 2s ease;
+        transition: all 2s ease;
+    }
+}
+
+.vertical {
+    section {
+        width: 100vh;
+        height: 100vh;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+    }
+    header {
+        padding: 1rem;
+        background: #eee;
+    }
+    footer {
+        padding: 1rem;
+        background: #eee;
+    }
+}
+
+.horizontal {
+    section {
+        width: 100vh;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
+    header {
+        padding: 1rem;
+        background: #eee;
+    }
+    footer {
+        padding: 1rem;
+        background: #eee;
+    }
+}
+
+.parent {
+    width: 100%;
+    height: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+.header {
+    background: #aaa;
+    height: 3rem;
+    line-height: 3rem;
+}
+
+.wrapper {
+    background: #ffa;
+    margin: 5rem;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
new file mode 100644
index 000000000..2d5bd6c99
--- /dev/null
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -0,0 +1,144 @@
+import React = require("react")
+import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
+import { observer } from "mobx-react";
+import { FieldView, FieldViewProps } from "../nodes/FieldView";
+import "react-table/react-table.css"
+import { observable, action, computed } from "mobx";
+import SplitPane from "react-split-pane"
+import "./CollectionSchemaView.scss"
+import { ScrollBox } from "../../util/ScrollBox";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { DocumentView } from "../nodes/DocumentView";
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
+import { KeyStore as KS, Key } from "../../../fields/Key";
+import { Document } from "../../../fields/Document";
+import { Field } from "../../../fields/Field";
+
+@observer
+export class CollectionSchemaView extends CollectionViewBase {
+    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
+
+    @observable
+    selectedIndex = 0;
+
+    renderCell = (rowProps: CellInfo) => {
+        let props: FieldViewProps = {
+            doc: rowProps.value[0],
+            fieldKey: rowProps.value[1],
+            DocumentViewForField: undefined
+        }
+        let contents = (
+            <FieldView {...props} />
+        )
+        return (
+            <EditableView contents={contents} GetValue={() => {
+                let field = props.doc.Get(props.fieldKey);
+                if (field && field instanceof Field) {
+                    return field.ToScriptString();
+                }
+                return field || "";
+            }} SetValue={(value: string) => {
+                let script = CompileScript(value);
+                if (!script.compiled) {
+                    return false;
+                }
+                let field = script();
+                if (field instanceof Field) {
+                    props.doc.Set(props.fieldKey, field);
+                    return true;
+                } else {
+                    let dataField = ToField(field);
+                    if (dataField) {
+                        props.doc.Set(props.fieldKey, dataField);
+                        return true;
+                    }
+                }
+                return false;
+            }}></EditableView>
+        )
+    }
+
+    private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
+        const that = this;
+        if (!rowInfo) {
+            return {};
+        }
+        return {
+            onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
+                that.selectedIndex = rowInfo.index;
+                const doc: Document = rowInfo.original;
+                console.log("Row clicked: ", doc.Title)
+
+                if (handleOriginal) {
+                    handleOriginal()
+                }
+            }),
+            style: {
+                background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
+                color: rowInfo.index == this.selectedIndex ? "white" : "black"
+            }
+        };
+    }
+
+    onPointerDown = (e: React.PointerEvent) => {
+        let target = e.target as HTMLElement;
+        if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
+            e.stopPropagation();
+        }
+        if (e.button === 2 && this.active) {
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            if (e.buttons === 1 && this.active) {
+                e.stopPropagation();
+            }
+        }
+    }
+
+    render() {
+        const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
+        const children = Document.GetList<Document>(fieldKey, []);
+        const columns = Document.GetList(KS.ColumnsKey,
+            [KS.Title, KS.Data, KS.Author])
+        let content;
+        if (this.selectedIndex != -1) {
+            content = (
+                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+            )
+        } else {
+            content = <div />
+        }
+        return (
+            <div onPointerDown={this.onPointerDown} >
+                <SplitPane split={"vertical"} defaultSize="60%">
+                    <ScrollBox>
+                        <ReactTable
+                            data={children}
+                            pageSize={children.length}
+                            page={0}
+                            showPagination={false}
+                            style={{
+                                display: "inline-block"
+                            }}
+                            columns={columns.map(col => {
+                                return (
+                                    {
+                                        Header: col.Name,
+                                        accessor: (doc: Document) => [doc, col],
+                                        id: col.Id
+                                    })
+                            })}
+                            column={{
+                                ...ReactTableDefaults.column,
+                                Cell: this.renderCell
+                            }}
+                            getTrProps={this.getTrProps}
+                        />
+                    </ScrollBox>
+                    {content}
+                </SplitPane>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
new file mode 100644
index 000000000..09e8ec729
--- /dev/null
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -0,0 +1,57 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { Opt } from "../../../fields/Field";
+import { Key, KeyStore } from "../../../fields/Key";
+import { ListField } from "../../../fields/ListField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { ContextMenu } from "../ContextMenu";
+import React = require("react");
+import { DocumentView } from "../nodes/DocumentView";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+
+
+export interface CollectionViewProps {
+    CollectionFieldKey: Key;
+    DocumentForCollection: Document;
+    ContainingDocumentView: Opt<DocumentView>;
+}
+
+export const COLLECTION_BORDER_WIDTH = 2;
+
+@observer
+export class CollectionViewBase extends React.Component<CollectionViewProps> {
+
+    public static LayoutString(collectionType: string) {
+        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+    }
+    @computed
+    public get active(): boolean {
+        var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
+        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
+        var topMost = this.props.ContainingDocumentView != undefined && (
+            this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
+            this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
+        return isSelected || childSelected || topMost;
+    }
+    @action
+    addDocument = (doc: Document): void => {
+        //TODO This won't create the field if it doesn't already exist
+        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
+        value.push(doc);
+    }
+
+    @action
+    removeDocument = (doc: Document): void => {
+        //TODO This won't create the field if it doesn't already exist
+        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
+        if (value.indexOf(doc) !== -1) {
+            value.splice(value.indexOf(doc), 1)
+
+            SelectionManager.DeselectAll()
+            ContextMenu.Instance.clearItems()
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
new file mode 100644
index 000000000..1d53cedc4
--- /dev/null
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -0,0 +1,223 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Key, KeyStore } from "../../../fields/Key";
+import { NumberField } from "../../../fields/NumberField";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { ContextMenu } from "../ContextMenu";
+import "./NodeView.scss";
+import React = require("react");
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+
+
+@observer
+export class CollectionFreeFormDocumentView extends DocumentView {
+    private _contextMenuCanOpen = false;
+    private _downX: number = 0;
+    private _downY: number = 0;
+
+    constructor(props: DocumentViewProps) {
+        super(props);
+    }
+    get screenRect(): ClientRect | DOMRect {
+        if (this._mainCont.current) {
+            return this._mainCont.current.getBoundingClientRect();
+        }
+        return new DOMRect();
+    }
+
+    @computed
+    get x(): number {
+        return this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
+    }
+
+    @computed
+    get y(): number {
+        return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
+    }
+
+    set x(x: number) {
+        this.props.Document.SetData(KeyStore.X, x, NumberField)
+    }
+
+    set y(y: number) {
+        this.props.Document.SetData(KeyStore.Y, y, NumberField)
+    }
+
+    @computed
+    get transform(): string {
+        return `translate(${this.x}px, ${this.y}px)`;
+    }
+
+    @computed
+    get width(): number {
+        return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
+    }
+
+    set width(w: number) {
+        this.props.Document.SetData(KeyStore.Width, w, NumberField)
+    }
+
+    @computed
+    get height(): number {
+        return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
+    }
+
+    set height(h: number) {
+        this.props.Document.SetData(KeyStore.Height, h, NumberField)
+    }
+
+    @computed
+    get zIndex(): number {
+        return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0));
+    }
+
+    set zIndex(h: number) {
+        this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
+    }
+
+    @action
+    dragComplete = (e: DragManager.DragCompleteEvent) => {
+    }
+
+    @computed
+    get active(): boolean {
+        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
+            this.props.ContainingCollectionView.active;
+    }
+
+    @computed
+    get topMost(): boolean {
+        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        var me = this;
+        if (e.shiftKey && e.buttons === 1) {
+            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            e.stopPropagation();
+            return;
+        }
+        this._contextMenuCanOpen = e.button == 2;
+        if (this.active && !e.isDefaultPrevented()) {
+            e.stopPropagation();
+            if (e.buttons === 2) {
+                e.preventDefault();
+            }
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp)
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    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 rect = this.screenRect;
+                let dragData: { [id: string]: any } = {};
+                dragData["document"] = this;
+                dragData["xOffset"] = e.x - rect.left;
+                dragData["yOffset"] = e.y - rect.top;
+                DragManager.StartDrag(this._mainCont.current, dragData, {
+                    handlers: {
+                        dragComplete: this.dragComplete,
+                    },
+                    hideSource: true
+                })
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove)
+        document.removeEventListener("pointerup", this.onPointerUp)
+        e.stopPropagation();
+        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    openRight = (e: React.MouseEvent): void => {
+        CollectionDockingView.AddRightSplit(this.props.Document);
+    }
+
+    deleteClicked = (e: React.MouseEvent): void => {
+        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+            this.props.ContainingCollectionView.removeDocument(this.props.Document)
+        }
+    }
+    @action
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.OpenFullScreen(this.props.Document);
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+    @action
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        if (!SelectionManager.IsSelected(this)) {
+            return;
+        }
+        e.preventDefault()
+
+        if (!this._contextMenuCanOpen) {
+            return;
+        }
+
+        if (this.topMost) {
+            ContextMenu.Instance.clearItems()
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        }
+        else {
+            // DocumentViews should stop propogation of this event
+            e.stopPropagation();
+
+            ContextMenu.Instance.clearItems();
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
+            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    render() {
+        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+        return (
+            <div className="node" ref={this._mainCont} style={{
+                transform: freestyling ? this.transform : "",
+                width: freestyling ? this.width : "100%",
+                height: freestyling ? this.height : "100%",
+                position: freestyling ? "absolute" : "relative",
+                zIndex: freestyling ? this.zIndex : 0,
+            }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown}>
+
+                <DocumentView {...this.props} DocumentView={this} />
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
new file mode 100644
index 000000000..730ce62f2
--- /dev/null
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -0,0 +1,153 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { Opt, FieldWaiting } from "../../../fields/Field";
+import { Key, KeyStore } from "../../../fields/Key";
+import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
+import { TextField } from "../../../fields/TextField";
+import { Utils } from "../../../Utils";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
+import { ImageBox } from "../nodes/ImageBox";
+import "./NodeView.scss";
+import React = require("react");
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
+
+export interface DocumentViewProps {
+    Document: Document;
+    DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
+    ContainingCollectionView: Opt<CollectionViewBase>;
+}
+@observer
+export class DocumentView extends React.Component<DocumentViewProps> {
+
+    protected _mainCont = React.createRef<any>();
+    get MainContent() {
+        return this._mainCont;
+    }
+    @computed
+    get layout(): string {
+        return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+    }
+
+    @computed
+    get layoutKeys(): Key[] {
+        return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
+    }
+
+    @computed
+    get layoutFields(): Key[] {
+        return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
+    }
+
+    // 
+    // returns the cumulative scaling between the document and the screen
+    //
+    @computed
+    public get ScalingToScreenSpace(): number {
+        if (this.props.ContainingCollectionView != undefined &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
+            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
+            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
+        }
+        return 1;
+    }
+
+    //
+    // Converts a coordinate in the screen space of the app into a local document coordinate.
+    //
+    public TransformToLocalPoint(screenX: number, screenY: number) {
+        // if this collection view is nested within another collection view, then 
+        // first transform the screen point into the parent collection's coordinate space.
+        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
+            this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
+            { LocalX: screenX, LocalY: screenY };
+        let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
+        let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
+
+        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
+        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
+        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+        // They also ignore any transformation that may have been applied to their content document.
+        // NOTE: this currently assumes CollectionDockingViews aren't nested.
+        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
+            Xx = rx - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH;
+        }
+
+        let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+        let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
+        let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
+        let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
+        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
+
+        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
+    }
+
+    //
+    // Converts a point in the coordinate space of a document to a screen space coordinate.
+    //
+    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
+
+        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
+        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
+        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+        // They also ignore any transformation that may have been applied to their content document.
+        // NOTE: this currently assumes CollectionDockingViews aren't nested.
+        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
+            Xx = rx - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH;
+        }
+
+        let W = COLLECTION_BORDER_WIDTH;
+        let H = COLLECTION_BORDER_WIDTH;
+        let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
+        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
+
+        // if this collection view is nested within another collection view, then 
+        // first transform the local point into the parent collection's coordinate space.
+        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
+        if (containingDocView != undefined) {
+            let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+            let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+            let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
+            parentX = ScreenX;
+            parentY = ScreenY;
+        }
+        return { ScreenX: parentX, ScreenY: parentY };
+    }
+
+
+    render() {
+        let bindings = { ...this.props } as any;
+        for (const key of this.layoutKeys) {
+            bindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
+        }
+        for (const key of this.layoutFields) {
+            let field = this.props.Document.Get(key);
+            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+        }
+        if (bindings.DocumentView === undefined) {
+            bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
+        }
+        return (
+            <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
+                <JsxParser
+                    components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+                    bindings={bindings}
+                    jsx={this.layout}
+                    showWarnings={true}
+                    onError={(test: any) => { console.log(test) }}
+                />
+            </div>
+        )
+    }
+}
diff --git a/src/client/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss
new file mode 100644
index 000000000..b6ce2fabc
--- /dev/null
+++ b/src/client/views/nodes/FieldTextBox.scss
@@ -0,0 +1,14 @@
+.ProseMirror {
+    margin-top: -1em;
+    width: 100%;
+    height: 100%;
+}
+
+.ProseMirror:focus {
+    outline: none !important
+}
+
+.fieldTextBox-cont {
+    background: white;
+    padding: 1vw;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
new file mode 100644
index 000000000..12371eb2e
--- /dev/null
+++ b/src/client/views/nodes/FieldView.tsx
@@ -0,0 +1,56 @@
+import React = require("react")
+import { observer } from "mobx-react";
+import { computed } from "mobx";
+import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Document } from "../../../fields/Document";
+import { TextField } from "../../../fields/TextField";
+import { NumberField } from "../../../fields/NumberField";
+import { RichTextField } from "../../../fields/RichTextField";
+import { ImageField } from "../../../fields/ImageField";
+import { Key } from "../../../fields/Key";
+import { FormattedTextBox } from "./FormattedTextBox";
+import { ImageBox } from "./ImageBox";
+import { DocumentView } from "./DocumentView";
+
+//
+// these properties get assigned through the render() method of the DocumentView when it creates this node.
+// However, that only happens because the properties are "defined" in the markup for the field view.
+// See the LayoutString method on each field view :   ImageBox, FormattedTextBox, etc. 
+//
+export interface FieldViewProps {
+    fieldKey: Key;
+    doc: Document;
+    DocumentViewForField: Opt<DocumentView>
+}
+
+@observer
+export class FieldView extends React.Component<FieldViewProps> {
+    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
+    @computed
+    get field(): FieldValue<Field> {
+        const { doc, fieldKey } = this.props;
+        return doc.Get(fieldKey);
+    }
+    render() {
+        const field = this.field;
+        if (!field) {
+            return <p>{'<null>'}</p>
+        }
+        if (field instanceof TextField) {
+            return <p>{field.Data}</p>
+        }
+        else if (field instanceof RichTextField) {
+            return <FormattedTextBox {...this.props} />
+        }
+        else if (field instanceof ImageField) {
+            return <ImageBox {...this.props} />
+        }
+        else if (field instanceof NumberField) {
+            return <p>{field.Data}</p>
+        } else if (field != FieldWaiting) {
+            return <p>{field.GetValue}</p>
+        } else
+            return <p> {"Waiting for server..."} </p>
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
new file mode 100644
index 000000000..492367fce
--- /dev/null
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -0,0 +1,14 @@
+.ProseMirror {
+    margin-top: -1em;
+    width: 100%;
+    height: 100%;
+}
+
+.ProseMirror:focus {
+    outline: none !important
+}
+
+.formattedTextBox-cont {
+    background: white;
+    padding: 1vw;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
new file mode 100644
index 000000000..8bc4c902c
--- /dev/null
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -0,0 +1,127 @@
+import { action, IReactionDisposer, reaction } from "mobx";
+import { observer } from "mobx-react"
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { schema } from "prosemirror-schema-basic";
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { SelectionManager } from "../../util/SelectionManager";
+import "./FormattedTextBox.scss";
+import React = require("react")
+import { RichTextField } from "../../../fields/RichTextField";
+import { FieldViewProps, FieldView } from "./FieldView";
+import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
+
+
+// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
+//
+//  HTML Markup:  <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
+// 
+//  In Code, the node's HTML is specified in the document's parameterized structure as:
+//        document.SetField(KeyStore.Layout,  "<FormattedTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
+//  and the node's binding to the specified document KEYNAME as:
+//        document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.<KEYNAME>]));
+//  The Jsx parser at run time will bind:
+//        'fieldKey' property to the Key stored in LayoutKeys
+//    and 'doc' property to the document that is being rendered
+//
+//  When rendered() by React, this extracts the TextController from the Document stored at the 
+//  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
+//  this will edit the document and assign the new value to that field.
+//]
+@observer
+export class FormattedTextBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _editorView: Opt<EditorView>;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+
+        this.onChange = this.onChange.bind(this);
+    }
+
+    dispatchTransaction = (tx: Transaction) => {
+        if (this._editorView) {
+            const state = this._editorView.state.apply(tx);
+            this._editorView.updateState(state);
+            const { doc, fieldKey } = this.props;
+            doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
+        }
+    }
+
+    componentDidMount() {
+        let state: EditorState;
+        const { doc, fieldKey } = this.props;
+        const config = {
+            schema,
+            plugins: [
+                history(),
+                keymap({ "Mod-z": undo, "Mod-y": redo }),
+                keymap(baseKeymap)
+            ]
+        };
+
+        let field = doc.GetT(fieldKey, RichTextField);
+        if (field && field != FieldWaiting) {  // bcz: don't think this works
+            state = EditorState.fromJSON(config, JSON.parse(field.Data));
+        } else {
+            state = EditorState.create(config);
+        }
+        if (this._ref.current) {
+            this._editorView = new EditorView(this._ref.current, {
+                state,
+                dispatchTransaction: this.dispatchTransaction
+            });
+        }
+
+        this._reactionDisposer = reaction(() => {
+            const field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
+            return field && field != FieldWaiting ? field.Data : undefined;
+        }, (field) => {
+            if (field && this._editorView) {
+                this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
+            }
+        })
+    }
+
+    componentWillUnmount() {
+        if (this._editorView) {
+            this._editorView.destroy();
+        }
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+    }
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    @action
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const { fieldKey, doc } = this.props;
+        doc.SetData(fieldKey, e.target.value, RichTextField);
+    }
+    onPointerDown = (e: React.PointerEvent): void => {
+        let me = this;
+        if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
+            e.stopPropagation();
+        }
+    }
+    render() {
+        return (<div className="formattedTextBox-cont"
+            style={{
+                color: "initial",
+                whiteSpace: "initial"
+            }}
+            onPointerDown={this.onPointerDown}
+            ref={this._ref} />)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
new file mode 100644
index 000000000..136fda1d0
--- /dev/null
+++ b/src/client/views/nodes/ImageBox.scss
@@ -0,0 +1,11 @@
+
+.imageBox-cont {
+    padding: 0vw;
+}
+
+.imageBox-button {
+    padding : 0vw;
+    border: none;
+    width : 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
new file mode 100644
index 000000000..ab20f140c
--- /dev/null
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -0,0 +1,92 @@
+
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { SelectionManager } from "../../util/SelectionManager";
+import "./ImageBox.scss";
+import React = require("react")
+import { ImageField } from '../../../fields/ImageField';
+import { FieldViewProps, FieldView } from './FieldView';
+import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+
+@observer
+export class ImageBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    private _lastTap: number = 0;
+    @observable private _photoIndex: number = 0;
+    @observable private _isOpen: boolean = false;
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+        this.state = {
+            photoIndex: 0,
+            isOpen: false,
+        };
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (Date.now() - this._lastTap < 300) {
+            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+                e.stopPropagation();
+                this._downX = e.clientX;
+                this._downY = e.clientY;
+                document.removeEventListener("pointerup", this.onPointerUp);
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        } else {
+            this._lastTap = Date.now();
+        }
+    }
+    @action
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointerup", this.onPointerUp);
+        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+            this._isOpen = true;
+        }
+        e.stopPropagation();
+    }
+
+    lightbox = (path: string) => {
+        const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
+        if (this._isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+            return (<Lightbox
+                mainSrc={images[this._photoIndex]}
+                nextSrc={images[(this._photoIndex + 1) % images.length]}
+                prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
+                onCloseRequest={() => this.setState({ isOpen: false })}
+                onMovePrevRequest={action(() =>
+                    this._photoIndex = (this._photoIndex + images.length - 1) % images.length
+                )}
+                onMoveNextRequest={action(() =>
+                    this._photoIndex = (this._photoIndex + 1) % images.length
+                )}
+            />)
+        }
+    }
+
+    render() {
+        let field = this.props.doc.Get(this.props.fieldKey);
+        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+            field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+
+        return (
+            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+                <img src={path} width="100%" alt="Image not found" />
+                {this.lightbox(path)}
+            </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/NodeView.scss b/src/client/views/nodes/NodeView.scss
new file mode 100644
index 000000000..dac1c0a8e
--- /dev/null
+++ b/src/client/views/nodes/NodeView.scss
@@ -0,0 +1,23 @@
+.node {
+    position: absolute;
+    background: #cdcdcd;
+    overflow: hidden;
+    &.minimized {
+        width: 30px;
+        height: 30px;
+    }
+    .top {
+        background: #232323;
+        height: 20px;
+        cursor: pointer;
+    }
+    .content {
+        padding: 20px 20px;
+        height: auto;
+        box-sizing: border-box;
+    }
+    .scroll-box {
+        overflow-y: scroll;
+        height: calc(100% - 20px);
+    }
+}
\ No newline at end of file
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
deleted file mode 100644
index ce9a1529d..000000000
--- a/src/documents/Documents.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Document } from "../fields/Document";
-import { Server } from "../Server";
-import { KeyStore } from "../fields/Key";
-import { TextField } from "../fields/TextField";
-import { NumberField } from "../fields/NumberField";
-import { ListField } from "../fields/ListField";
-import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
-import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
-import { ImageField } from "../fields/ImageField";
-import { ImageBox } from "../views/nodes/ImageBox";
-import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
-import { FIELD_ID } from "../fields/Field";
-
-interface DocumentOptions {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-    title?: string;
-}
-
-export namespace Documents {
-    function setupOptions(doc: Document, options: DocumentOptions): void {
-        if (options.x) {
-            doc.SetData(KeyStore.X, options.x, NumberField);
-        }
-        if (options.y) {
-            doc.SetData(KeyStore.Y, options.y, NumberField);
-        }
-        if (options.width) {
-            doc.SetData(KeyStore.Width, options.width, NumberField);
-        }
-        if (options.height) {
-            doc.SetData(KeyStore.Height, options.height, NumberField);
-        }
-        if (options.title) {
-            doc.SetData(KeyStore.Title, options.title, TextField);
-        }
-        doc.SetData(KeyStore.Scale, 1, NumberField);
-        doc.SetData(KeyStore.PanX, 0, NumberField);
-        doc.SetData(KeyStore.PanY, 0, NumberField);
-    }
-
-    let textProto: Document;
-    function GetTextPrototype(): Document {
-        if (!textProto) {
-            textProto = new Document();
-            textProto.Set(KeyStore.X, new NumberField(0));
-            textProto.Set(KeyStore.Y, new NumberField(0));
-            textProto.Set(KeyStore.Width, new NumberField(300));
-            textProto.Set(KeyStore.Height, new NumberField(150));
-            textProto.Set(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString()));
-            textProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return textProto;
-    }
-
-    export function TextDocument(options: DocumentOptions = {}): Document {
-        let doc = GetTextPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        // doc.SetField(KeyStore.Data, new RichTextField());
-        return doc;
-    }
-
-    let schemaProto: Document;
-    function GetSchemaPrototype(): Document {
-        if (!schemaProto) {
-            schemaProto = new Document();
-            schemaProto.Set(KeyStore.X, new NumberField(0));
-            schemaProto.Set(KeyStore.Y, new NumberField(0));
-            schemaProto.Set(KeyStore.Width, new NumberField(300));
-            schemaProto.Set(KeyStore.Height, new NumberField(150));
-            schemaProto.Set(KeyStore.Layout, new TextField(CollectionSchemaView.LayoutString()));
-            schemaProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return schemaProto;
-    }
-
-    export function SchemaDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetSchemaPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ListField(documents));
-        return doc;
-    }
-
-
-    let dockProto: Document;
-    function GetDockPrototype(): Document {
-        if (!dockProto) {
-            dockProto = new Document();
-            dockProto.Set(KeyStore.X, new NumberField(0));
-            dockProto.Set(KeyStore.Y, new NumberField(0));
-            dockProto.Set(KeyStore.Width, new NumberField(300));
-            dockProto.Set(KeyStore.Height, new NumberField(150));
-            dockProto.Set(KeyStore.Layout, new TextField(CollectionDockingView.LayoutString()));
-            dockProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return dockProto;
-    }
-
-    export function DockDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetDockPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ListField(documents));
-        return doc;
-    }
-
-
-    let imageProtoId: FIELD_ID;
-    function GetImagePrototype(): Document {
-        if (imageProtoId === undefined) {
-            let imageProto = new Document();
-            imageProtoId = imageProto.Id;
-            imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
-            imageProto.Set(KeyStore.X, new NumberField(0));
-            imageProto.Set(KeyStore.Y, new NumberField(0));
-            imageProto.Set(KeyStore.Width, new NumberField(300));
-            imageProto.Set(KeyStore.Height, new NumberField(300));
-            imageProto.Set(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
-            // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-            Server.AddDocument(imageProto);
-            return imageProto;
-        }
-        return Server.GetField(imageProtoId) as Document;
-    }
-
-    export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
-        let doc = GetImagePrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ImageField(new URL(url)));
-        Server.AddDocument(doc);
-        var sdoc = Server.GetField(doc.Id) as Document;
-        return sdoc;
-    }
-
-    let collectionProto: Document;
-    function GetCollectionPrototype(): Document {
-        if (!collectionProto) {
-            collectionProto = new Document();
-            collectionProto.Set(KeyStore.X, new NumberField(0));
-            collectionProto.Set(KeyStore.Y, new NumberField(0));
-            collectionProto.Set(KeyStore.Scale, new NumberField(1));
-            collectionProto.Set(KeyStore.PanX, new NumberField(0));
-            collectionProto.Set(KeyStore.PanY, new NumberField(0));
-            collectionProto.Set(KeyStore.Width, new NumberField(300));
-            collectionProto.Set(KeyStore.Height, new NumberField(300));
-            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
-            collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return collectionProto;
-    }
-
-    export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
-        let doc = GetCollectionPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new ListField(documents));
-        return doc;
-    }
-}
\ No newline at end of file
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 546c89e04..6f9752a8e 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -5,7 +5,7 @@ import { ObservableMap, computed, action, observable } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
 import { findDOMNode } from "react-dom";
-import { Server } from "../Server";
+import { Server } from "../client/Server";
 
 export class Document extends Field {
     public fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
diff --git a/src/server/index.js b/src/server/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
deleted file mode 100644
index 63d6a88f8..000000000
--- a/src/util/DragManager.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { Opt } from "../fields/Field";
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
-import { DocumentDecorations } from "../DocumentDecorations";
-import { SelectionManager } from "./SelectionManager";
-import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { Document } from "../fields/Document";
-
-export namespace DragManager {
-    export function Root() {
-        const root = document.getElementById("root");
-        if (!root) {
-            throw new Error("No root element found");
-        }
-        return root;
-    }
-
-    let dragDiv: HTMLDivElement;
-
-    export enum DragButtons {
-        Left = 1, Right = 2, Both = Left | Right
-    }
-
-    interface DragOptions {
-        handlers: DragHandlers;
-
-        hideSource: boolean | (() => boolean);
-    }
-
-    export interface DragDropDisposer {
-        (): void;
-    }
-
-    export class DragCompleteEvent {
-    }
-
-    export interface DragHandlers {
-        dragComplete: (e: DragCompleteEvent) => void;
-    }
-
-    export interface DropOptions {
-        handlers: DropHandlers;
-    }
-
-    export class DropEvent {
-        constructor(readonly x: number, readonly y: number, readonly data: { [id: string]: any }) { }
-    }
-
-    export interface DropHandlers {
-        drop: (e: Event, de: DropEvent) => void;
-    }
-
-    export function MakeDropTarget(element: HTMLElement, options: DropOptions): DragDropDisposer {
-        if ("canDrop" in element.dataset) {
-            throw new Error("Element is already droppable, can't make it droppable again");
-        }
-        element.dataset["canDrop"] = "true";
-        const handler = (e: Event) => {
-            const ce = e as CustomEvent<DropEvent>;
-            options.handlers.drop(e, ce.detail);
-        };
-        element.addEventListener("dashOnDrop", handler);
-        return () => {
-            element.removeEventListener("dashOnDrop", handler);
-            delete element.dataset["canDrop"]
-        };
-    }
-
-
-    let _lastPointerX: number = 0;
-    let _lastPointerY: number = 0;
-    export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) {
-        if (!dragDiv) {
-            dragDiv = document.createElement("div");
-            DragManager.Root().appendChild(dragDiv);
-        }
-        const w = ele.offsetWidth, h = ele.offsetHeight;
-        const rect = ele.getBoundingClientRect();
-        const scaleX = rect.width / w, scaleY = rect.height / h;
-        let x = rect.left, y = rect.top;
-        // const offsetX = e.x - rect.left, offsetY = e.y - rect.top;
-        let dragElement = ele.cloneNode(true) as HTMLElement;
-        dragElement.style.opacity = "0.7";
-        dragElement.style.position = "absolute";
-        dragElement.style.transformOrigin = "0 0";
-        dragElement.style.zIndex = "1000";
-        dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
-        dragDiv.appendChild(dragElement);
-        _lastPointerX = dragData["xOffset"] + rect.left;
-        _lastPointerY = dragData["yOffset"] + rect.top;
-
-        let hideSource = false;
-        if (typeof options.hideSource === "boolean") {
-            hideSource = options.hideSource;
-        } else {
-            hideSource = options.hideSource();
-        }
-        const wasHidden = ele.hidden;
-        if (hideSource) {
-            ele.hidden = true;
-        }
-
-        const moveHandler = (e: PointerEvent) => {
-            e.stopPropagation();
-            e.preventDefault();
-            x += e.clientX - _lastPointerX; _lastPointerX = e.clientX;
-            y += e.clientY - _lastPointerY; _lastPointerY = e.clientY;
-            dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
-        };
-        const upHandler = (e: PointerEvent) => {
-            document.removeEventListener("pointermove", moveHandler, true);
-            document.removeEventListener("pointerup", upHandler);
-            FinishDrag(dragElement, e, options, dragData);
-            if (hideSource && !wasHidden) {
-                ele.hidden = false;
-            }
-        };
-        document.addEventListener("pointermove", moveHandler, true);
-        document.addEventListener("pointerup", upHandler);
-    }
-
-    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) {
-        dragDiv.removeChild(dragEle);
-        const target = document.elementFromPoint(e.x, e.y);
-        if (!target) {
-            return;
-        }
-        target.dispatchEvent(new CustomEvent<DropEvent>("dashOnDrop", {
-            bubbles: true,
-            detail: {
-                x: e.x,
-                y: e.y,
-                data: dragData
-            }
-        }));
-        options.handlers.dragComplete({});
-    }
-}
\ No newline at end of file
diff --git a/src/util/Scripting.ts b/src/util/Scripting.ts
deleted file mode 100644
index 0e83ab4f0..000000000
--- a/src/util/Scripting.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// import * as ts from "typescript"
-let ts = (window as any).ts;
-import { Opt, Field } from "../fields/Field";
-import { Document as DocumentImport } from "../fields/Document";
-import { NumberField as NumberFieldImport, NumberField } from "../fields/NumberField";
-import { ImageField as ImageFieldImport } from "../fields/ImageField";
-import { TextField as TextFieldImport, TextField } from "../fields/TextField";
-import { RichTextField as RichTextFieldImport } from "../fields/RichTextField";
-import { KeyStore as KeyStoreImport } from "../fields/Key";
-
-export interface ExecutableScript {
-    (): any;
-
-    compiled: boolean;
-}
-
-function ExecScript(script: string, diagnostics: Opt<any[]>): ExecutableScript {
-    const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error));
-
-    let func: () => Opt<Field>;
-    if (compiled) {
-        func = function (): Opt<Field> {
-            let KeyStore = KeyStoreImport;
-            let Document = DocumentImport;
-            let NumberField = NumberFieldImport;
-            let TextField = TextFieldImport;
-            let ImageField = ImageFieldImport;
-            let RichTextField = RichTextFieldImport;
-            let window = undefined;
-            let document = undefined;
-            let retVal = eval(script);
-
-            return retVal;
-        };
-    } else {
-        func = () => undefined;
-    }
-
-    return Object.assign(func,
-        {
-            compiled
-        });
-}
-
-export function CompileScript(script: string): ExecutableScript {
-    let result = (window as any).ts.transpileModule(script, {})
-
-    return ExecScript(result.outputText, result.diagnostics);
-}
-
-export function ToField(data: any): Opt<Field> {
-    if (typeof data == "string") {
-        return new TextField(data);
-    } else if (typeof data == "number") {
-        return new NumberField(data);
-    }
-    return undefined;
-}
\ No newline at end of file
diff --git a/src/util/ScrollBox.tsx b/src/util/ScrollBox.tsx
deleted file mode 100644
index b6b088170..000000000
--- a/src/util/ScrollBox.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React = require("react")
-
-export class ScrollBox extends React.Component {
-    onWheel = (e: React.WheelEvent) => {
-        if (e.currentTarget.scrollHeight > e.currentTarget.clientHeight) { // If the element has a scroll bar, then we don't want the containing collection to zoom
-            e.stopPropagation();
-        }
-    }
-
-    render() {
-        return (
-            <div style={{
-                overflow: "auto",
-                width: "100%",
-                height: "100%",
-            }} onWheel={this.onWheel}>
-                {this.props.children}
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts
deleted file mode 100644
index 0759ae110..000000000
--- a/src/util/SelectionManager.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
-import { observable, action } from "mobx";
-
-export namespace SelectionManager {
-    class Manager {
-        @observable
-        SelectedDocuments: Array<CollectionFreeFormDocumentView> = [];
-
-        @action
-        SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
-            // if doc is not in SelectedDocuments, add it
-            if (!ctrlPressed) {
-                manager.SelectedDocuments = [];
-            }
-
-            if (manager.SelectedDocuments.indexOf(doc) === -1) {
-                manager.SelectedDocuments.push(doc)
-            }
-        }
-    }
-
-    const manager = new Manager;
-
-    export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
-        manager.SelectDoc(doc, ctrlPressed)
-    }
-
-    export function IsSelected(doc: CollectionFreeFormDocumentView): boolean {
-        return manager.SelectedDocuments.indexOf(doc) !== -1;
-    }
-
-    export function DeselectAll(): void {
-        manager.SelectedDocuments = []
-    }
-
-    export function SelectedDocuments(): Array<CollectionFreeFormDocumentView> {
-        return manager.SelectedDocuments;
-    }
-}
\ No newline at end of file
diff --git a/src/util/TypedEvent.ts b/src/util/TypedEvent.ts
deleted file mode 100644
index 0714a7f5c..000000000
--- a/src/util/TypedEvent.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export interface Listener<T> {
-  (event: T): any;
-}
-
-export interface Disposable {
-  dispose(): void;
-}
-
-/** passes through events as they happen. You will not get events from before you start listening */
-export class TypedEvent<T> {
-  private listeners: Listener<T>[] = [];
-  private listenersOncer: Listener<T>[] = [];
-
-  on = (listener: Listener<T>): Disposable => {
-    this.listeners.push(listener);
-    return {
-      dispose: () => this.off(listener)
-    };
-  }
-
-  once = (listener: Listener<T>): void => {
-    this.listenersOncer.push(listener);
-  }
-
-  off = (listener: Listener<T>) => {
-    var callbackIndex = this.listeners.indexOf(listener);
-    if (callbackIndex > -1) this.listeners.splice(callbackIndex, 1);
-  }
-
-  emit = (event: T) => {
-    /** Update any general listeners */
-    this.listeners.forEach((listener) => listener(event));
-
-    /** Clear the `once` queue */
-    this.listenersOncer.forEach((listener) => listener(event));
-    this.listenersOncer = [];
-  }
-
-  pipe = (te: TypedEvent<T>): Disposable => {
-    return this.on((e) => te.emit(e));
-  }
-}
\ No newline at end of file
diff --git a/src/views/ContextMenu.scss b/src/views/ContextMenu.scss
deleted file mode 100644
index 234f82eb9..000000000
--- a/src/views/ContextMenu.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.contextMenu-cont {
-    position: absolute;
-    display: flex;
-    z-index: 1000;
-    box-shadow: #AAAAAA .2vw .2vw .4vw;
-}
-
-.contextMenu-item {
-    width: 10vw;
-    height: 4vh;
-    background: #DDDDDD;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    transition: all .1s;
-}
-
-.contextMenu-item:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
-
-.contextMenu-description {
-    font-size: 1.5vw;
-    text-align: left;
-    width: 8vw;
-}
\ No newline at end of file
diff --git a/src/views/ContextMenu.tsx b/src/views/ContextMenu.tsx
deleted file mode 100644
index 4f26a75d2..000000000
--- a/src/views/ContextMenu.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React = require("react");
-import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import "./ContextMenu.scss"
-
-@observer
-export class ContextMenu extends React.Component {
-    static Instance: ContextMenu
-
-    @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
-    @observable private _pageX: number = 0;
-    @observable private _pageY: number = 0;
-    @observable private _display: string = "none";
-
-    private ref: React.RefObject<HTMLDivElement>;
-
-    constructor(props: Readonly<{}>) {
-        super(props);
-
-        this.ref = React.createRef()
-
-        ContextMenu.Instance = this;
-    }
-
-    clearItems() {
-        this._items = []
-        this._display = "none"
-    }
-
-    addItem(item: ContextMenuProps) {
-        if (this._items.indexOf(item) === -1) {
-            this._items.push(item);
-        }
-    }
-
-    getItems() {
-        return this._items;
-    }
-
-    displayMenu(x: number, y: number) {
-        this._pageX = x
-        this._pageY = y
-
-        this._display = "flex"
-    }
-
-    intersects = (x: number, y: number): boolean => {
-        if (this.ref.current && this._display !== "none") {
-            if (x >= this._pageX && x <= this._pageX + this.ref.current.getBoundingClientRect().width) {
-                if (y >= this._pageY && y <= this._pageY + this.ref.current.getBoundingClientRect().height) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                {this._items.map(prop => {
-                    return <ContextMenuItem {...prop} key={prop.description} />
-                })}
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/views/ContextMenuItem.tsx b/src/views/ContextMenuItem.tsx
deleted file mode 100644
index 8f00f8b3d..000000000
--- a/src/views/ContextMenuItem.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React = require("react");
-import { ContextMenu } from "./ContextMenu";
-
-export interface ContextMenuProps {
-    description: string;
-    event: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-export class ContextMenuItem extends React.Component<ContextMenuProps> {
-    render() {
-        return (
-            <div className="contextMenu-item" onClick={this.props.event}>
-                <div className="contextMenu-description">{this.props.description}</div>
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
deleted file mode 100644
index 2e784d3f9..000000000
--- a/src/views/EditableView.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React = require('react')
-import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
-
-export interface EditableProps {
-    GetValue(): string;
-    SetValue(value: string): boolean;
-    contents: any;
-}
-
-@observer
-export class EditableView extends React.Component<EditableProps> {
-    @observable
-    editing: boolean = false;
-
-    @action
-    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key == "Enter" && !e.ctrlKey) {
-            this.props.SetValue(e.currentTarget.value);
-            this.editing = false;
-        } else if (e.key == "Escape") {
-            this.editing = false;
-        }
-    }
-
-    render() {
-        if (this.editing) {
-            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
-                style={{ width: "100%" }}></input>
-        } else {
-            return (
-                <div>
-                    {this.props.contents}
-                    <button onClick={action(() => this.editing = true)}>Edit</button>
-                </div>
-            )
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
deleted file mode 100644
index db924b57f..000000000
--- a/src/views/collections/CollectionDockingView.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-.collectiondockingview-container {
-    position: relative;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    .lm_controls>li {
-        opacity: 0.6;
-        transform: scale(1.2);
-    }
-    .lm_maximised .lm_controls .lm_maximise {
-        opacity: 1;
-        transform: scale(0.8);
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
-    }
-    .flexlayout__layout {
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-        overflow: hidden;
-    }
-    .flexlayout__splitter {
-        background-color: black;
-    }
-    .flexlayout__splitter:hover {
-        background-color: #333;
-    }
-    .flexlayout__splitter_drag {
-        border-radius: 5px;
-        background-color: #444;
-        z-index: 1000;
-    }
-    .flexlayout__outline_rect {
-        position: absolute;
-        cursor: move;
-        border: 2px solid #cfe8ff;
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
-        border-radius: 5px;
-        z-index: 1000;
-        box-sizing: border-box;
-    }
-    .flexlayout__outline_rect_edge {
-        cursor: move;
-        border: 2px solid #b7d1b5;
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
-        border-radius: 5px;
-        z-index: 1000;
-        box-sizing: border-box;
-    }
-    .flexlayout__edge_rect {
-        position: absolute;
-        z-index: 1000;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
-        background-color: lightgray;
-    }
-    .flexlayout__drag_rect {
-        position: absolute;
-        cursor: move;
-        border: 2px solid #aaaaaa;
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, .3);
-        border-radius: 5px;
-        z-index: 1000;
-        box-sizing: border-box;
-        background-color: #eeeeee;
-        opacity: 0.9;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        overflow: hidden;
-        padding: 10px;
-        word-wrap: break-word;
-    }
-    .flexlayout__tabset {
-        overflow: hidden;
-        background-color: #222;
-        box-sizing: border-box;
-    }
-    .flexlayout__tab {
-        overflow: auto;
-        position: absolute;
-        box-sizing: border-box;
-        background-color: #222;
-        color: black;
-    }
-    .flexlayout__tab_button {
-        cursor: pointer;
-        padding: 2px 8px 3px 8px;
-        margin: 2px;
-        /*box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .15);*/
-        /*border-top-left-radius: 3px;*/
-        /*border-top-right-radius: 3px;*/
-        float: left;
-        vertical-align: top;
-        box-sizing: border-box;
-    }
-    .flexlayout__tab_button--selected {
-        color: #ddd;
-        background-color: #222;
-    }
-    .flexlayout__tab_button--unselected {
-        color: gray;
-    }
-    .flexlayout__tab_button_leading {
-        display: inline-block;
-    }
-    .flexlayout__tab_button_content {
-        display: inline-block;
-    }
-    .flexlayout__tab_button_textbox {
-        float: left;
-        border: none;
-        color: lightgreen;
-        background-color: #222;
-    }
-    .flexlayout__tab_button_textbox:focus {
-        outline: none;
-    }
-    .flexlayout__tab_button_trailing {
-        display: inline-block;
-        margin-left: 5px;
-        margin-top: 3px;
-        width: 8px;
-        height: 8px;
-    }
-    .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
-    .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
-        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
-    }
-    .flexlayout__tab_button_overflow {
-        float: left;
-        width: 20px;
-        height: 15px;
-        margin-top: 2px;
-        padding-left: 12px;
-        border: none;
-        font-size: 10px;
-        color: lightgray;
-        font-family: Arial, sans-serif;
-        background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
-    }
-    .flexlayout__tabset_header {
-        position: absolute;
-        left: 0;
-        right: 0;
-        color: #eee;
-        background-color: #212121;
-        padding: 3px 3px 3px 5px;
-        /*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
-        box-sizing: border-box;
-    }
-    .flexlayout__tab_header_inner {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 10000px;
-    }
-    .flexlayout__tab_header_outer {
-        background-color: black;
-        position: absolute;
-        left: 0;
-        right: 0;
-        /*top: 0px;*/
-        /*height: 100px;*/
-        overflow: hidden;
-    }
-    .flexlayout__tabset-selected {
-        background-image: linear-gradient(#111, #444);
-    }
-    .flexlayout__tabset-maximized {
-        background-image: linear-gradient(#666, #333);
-    }
-    .flexlayout__tab_toolbar {
-        position: absolute;
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        top: 0;
-        bottom: 0;
-        right: 0;
-    }
-    .flexlayout__tab_toolbar_button-min {
-        width: 20px;
-        height: 20px;
-        border: none;
-        outline-width: 0;
-        background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
-    }
-    .flexlayout__tab_toolbar_button-max {
-        width: 20px;
-        height: 20px;
-        border: none;
-        outline-width: 0;
-        background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
-    }
-    .flexlayout__popup_menu {}
-    .flexlayout__popup_menu_item {
-        padding: 2px 10px 2px 10px;
-        color: #ddd;
-    }
-    .flexlayout__popup_menu_item:hover {
-        background-color: #444444;
-    }
-    .flexlayout__popup_menu_container {
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
-        border: 1px solid #555;
-        background: #222;
-        border-radius: 3px;
-        position: absolute;
-        z-index: 1000;
-    }
-    .flexlayout__border_top {
-        background-color: black;
-        border-bottom: 1px solid #ddd;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-    .flexlayout__border_bottom {
-        background-color: black;
-        border-top: 1px solid #333;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-    .flexlayout__border_left {
-        background-color: black;
-        border-right: 1px solid #333;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-    .flexlayout__border_right {
-        background-color: black;
-        border-left: 1px solid #333;
-        box-sizing: border-box;
-        overflow: hidden;
-    }
-    .flexlayout__border_inner_bottom {
-        display: flex;
-    }
-    .flexlayout__border_inner_left {
-        position: absolute;
-        white-space: nowrap;
-        right: 23px;
-        transform-origin: top right;
-        transform: rotate(-90deg);
-    }
-    .flexlayout__border_inner_right {
-        position: absolute;
-        white-space: nowrap;
-        left: 23px;
-        transform-origin: top left;
-        transform: rotate(90deg);
-    }
-    .flexlayout__border_button {
-        background-color: #222;
-        color: white;
-        display: inline-block;
-        white-space: nowrap;
-        cursor: pointer;
-        padding: 2px 8px 3px 8px;
-        margin: 2px;
-        vertical-align: top;
-        box-sizing: border-box;
-    }
-    .flexlayout__border_button--selected {
-        color: #ddd;
-        background-color: #222;
-    }
-    .flexlayout__border_button--unselected {
-        color: gray;
-    }
-    .flexlayout__border_button_leading {
-        float: left;
-        display: inline;
-    }
-    .flexlayout__border_button_content {
-        display: inline-block;
-    }
-    .flexlayout__border_button_textbox {
-        float: left;
-        border: none;
-        color: green;
-        background-color: #ddd;
-    }
-    .flexlayout__border_button_textbox:focus {
-        outline: none;
-    }
-    .flexlayout__border_button_trailing {
-        display: inline-block;
-        margin-left: 5px;
-        margin-top: 3px;
-        width: 8px;
-        height: 8px;
-    }
-    .flexlayout__border_button:hover .flexlayout__border_button_trailing,
-    .flexlayout__border_button--selected .flexlayout__border_button_trailing {
-        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
-    }
-    .flexlayout__border_toolbar_left {
-        position: absolute;
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: center;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-    .flexlayout__border_toolbar_right {
-        position: absolute;
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: center;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-    .flexlayout__border_toolbar_top {
-        position: absolute;
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        top: 0;
-        bottom: 0;
-        right: 0;
-    }
-    .flexlayout__border_toolbar_bottom {
-        position: absolute;
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        top: 0;
-        bottom: 0;
-        right: 0;
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
deleted file mode 100644
index adef03357..000000000
--- a/src/views/collections/CollectionDockingView.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { observer } from "mobx-react";
-import { KeyStore } from "../../fields/Key";
-import React = require("react");
-import FlexLayout from "flexlayout-react";
-import { action, observable, computed } from "mobx";
-import { Document } from "../../fields/Document";
-import { DocumentView } from "../nodes/DocumentView";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { SSL_OP_SINGLE_DH_USE } from "constants";
-import "./CollectionDockingView.scss"
-import 'golden-layout/src/css/goldenlayout-base.css';
-import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import * as GoldenLayout from "golden-layout";
-import * as ReactDOM from 'react-dom';
-import { DragManager } from "../../util/DragManager";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-
-@observer
-export class CollectionDockingView extends CollectionViewBase {
-
-    private static UseGoldenLayout = true;
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
-    private _containerRef = React.createRef<HTMLDivElement>();
-    @computed
-    private get modelForFlexLayout() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        var docs = value.map(doc => {
-            return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
-        });
-        return FlexLayout.Model.fromJson({
-            global: {}, borders: [],
-            layout: {
-                "type": "row",
-                "weight": 100,
-                "children": docs
-            }
-        });
-    }
-    @computed
-    private get modelForGoldenLayout(): any {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        var docs = value.map(doc => {
-            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
-        });
-        return new GoldenLayout({
-            settings: {
-                selectionEnabled: true
-            }, content: [{ type: 'row', content: docs }]
-        });
-    }
-    constructor(props: CollectionViewProps) {
-        super(props);
-    }
-
-    componentDidMount: () => void = () => {
-        if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
-            this.goldenLayoutFactory();
-            window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
-        }
-    }
-    componentWillUnmount: () => void = () => {
-        window.removeEventListener('resize', this.onResize);
-    }
-    private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
-
-
-    @action
-    onResize = (event: any) => {
-        var cur = this.props.ContainingDocumentView!.MainContent.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
-        CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
-    }
-
-    @action
-    onPointerDown = (e: React.PointerEvent): void => {
-        if (e.button === 2 && this.active) {
-            e.stopPropagation();
-            e.preventDefault();
-        } else {
-            if (e.buttons === 1 && this.active) {
-                e.stopPropagation();
-            }
-        }
-    }
-
-    flexLayoutFactory = (node: any): any => {
-        var component = node.getComponent();
-        if (component === "button") {
-            return <button>{node.getName()}</button>;
-        }
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetData(fieldKey, ListField, []);
-        for (var i: number = 0; i < value.length; i++) {
-            if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
-            }
-        }
-        if (component === "text") {
-            return (<div className="panel">Panel {node.getName()}</div>);
-        }
-    }
-
-    public static myLayout: any = null;
-
-    private static _dragDiv: any = null;
-    private static _dragParent: HTMLElement | null = null;
-    private static _dragElement: HTMLDivElement;
-    private static _dragFakeElement: HTMLDivElement;
-    public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
-        var newItemConfig = {
-            type: 'component',
-            componentName: 'documentViewComponent',
-            componentState: { doc: dragDoc }
-        };
-        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);
-        CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
-
-        //   - 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 HTMLDivElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
-    }
-
-    _makeFullScreen: boolean = false;
-    _maximizedStack: any = null;
-    public static OpenFullScreen(document: Document) {
-        var newItemConfig = {
-            type: 'component',
-            componentName: 'documentViewComponent',
-            componentState: { doc: document }
-        };
-        CollectionDockingView.myLayout._makeFullScreen = true;
-        CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig);
-    }
-    public static CloseFullScreen() {
-        if (CollectionDockingView.myLayout._maximizedStack != null) {
-            CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
-            CollectionDockingView.myLayout._maximizedStack = null;
-        }
-    }
-
-    //
-    //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
-    //
-    public static AddRightSplit(document: Document) {
-        var newItemConfig = {
-            type: 'component',
-            componentName: 'documentViewComponent',
-            componentState: { doc: document }
-        }
-        let newItemStackConfig = {
-            type: 'stack',
-            content: [newItemConfig]
-        };
-        var newContentItem = new CollectionDockingView.myLayout._typeToItem[newItemStackConfig.type](CollectionDockingView.myLayout, newItemStackConfig, parent);
-
-        if (CollectionDockingView.myLayout.root.contentItems[0].isRow) {
-            var rowlayout = CollectionDockingView.myLayout.root.contentItems[0];
-            var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1];
-
-            lastRowItem.config["width"] *= 0.5;
-            newContentItem.config["width"] = lastRowItem.config["width"];
-            rowlayout.addChild(newContentItem, rowlayout.contentItems.length, true);
-            rowlayout.callDownwards('setSize');
-        }
-        else {
-            var collayout = CollectionDockingView.myLayout.root.contentItems[0];
-            var newRow = collayout.layoutManager.createContentItem({ type: "row" }, CollectionDockingView.myLayout);
-            collayout.parent.replaceChild(collayout, newRow);
-
-            newRow.addChild(newContentItem, undefined, true);
-            newRow.addChild(collayout, 0, true);
-
-            collayout.config["width"] = 50;
-            newContentItem.config["width"] = 50;
-            collayout.parent.callDownwards('setSize');
-        }
-    }
-    goldenLayoutFactory() {
-        CollectionDockingView.myLayout = this.modelForGoldenLayout;
-
-        var layout = CollectionDockingView.myLayout;
-        CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
-            if (CollectionDockingView._dragDiv) {
-                CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
-                CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement);
-                CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement);
-                DragManager.Root().removeChild(CollectionDockingView._dragDiv);
-                CollectionDockingView._dragDiv = null;
-            }
-            tab.setTitle(tab.contentItem.config.componentState.doc.Title);
-            tab.closeElement.off('click') //unbind the current click handler
-                .click(function () {
-                    tab.contentItem.remove();
-                });
-        });
-
-        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
-            if (CollectionDockingView.myLayout._makeFullScreen) {
-                CollectionDockingView.myLayout._maximizedStack = stack;
-                CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise');
-            }
-            //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 () {
-                    //if (confirm('really close this?')) {
-                    stack.remove();
-                    //}
-                });
-        });
-
-        var me = this;
-        CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
-            // bcz: this is crufty
-            // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. 
-            // Apparently, we need to wait to allow a live html div element to actually be instantiated.
-            // After a timeout, we lookup the live html div element and add our React DocumentView to it.
-            var containingDiv = "component_" + me.nextId();
-            container.getElement().html("<div id='" + containingDiv + "'></div>");
-            setTimeout(function () {
-                ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
-                ),
-                    document.getElementById(containingDiv)
-                );
-                if (CollectionDockingView.myLayout._maxstack != null) {
-                    CollectionDockingView.myLayout._maxstack.click();
-                }
-            }, 0);
-        });
-        CollectionDockingView.myLayout.container = this._containerRef.current;
-        CollectionDockingView.myLayout.init();
-    }
-
-
-    render() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: 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.
-        var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
-        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)
-                return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />;
-        }
-
-        return (
-            <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>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionFreeFormView.scss b/src/views/collections/CollectionFreeFormView.scss
deleted file mode 100644
index e9d134e7b..000000000
--- a/src/views/collections/CollectionFreeFormView.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.collectionfreeformview-container {
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    .collectionfreeformview {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-}
-
-.border {
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
deleted file mode 100644
index 612f9acbe..000000000
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
-import React = require("react");
-import { action, observable, computed } from "mobx";
-import { Document } from "../../fields/Document";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { SSL_OP_SINGLE_DH_USE } from "constants";
-import { Documents } from "../../documents/Documents";
-import { DragManager } from "../../util/DragManager";
-import "./CollectionFreeFormView.scss";
-import { Utils } from "../../Utils";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { SelectionManager } from "../../util/SelectionManager";
-import { FieldWaiting } from "../../fields/Field";
-
-@observer
-export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
-    private _containerRef = React.createRef<HTMLDivElement>();
-    private _canvasRef = React.createRef<HTMLDivElement>();
-    private _nodeContainerRef = React.createRef<HTMLDivElement>();
-    private _lastX: number = 0;
-    private _lastY: number = 0;
-
-    constructor(props: CollectionViewProps) {
-        super(props);
-    }
-
-    @action
-    drop = (e: Event, de: DragManager.DropEvent) => {
-        const doc = de.data["document"];
-        var me = this;
-        if (doc instanceof CollectionFreeFormDocumentView) {
-            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
-                doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
-                this.addDocument(doc.props.Document);
-            }
-            const xOffset = de.data["xOffset"] as number || 0;
-            const yOffset = de.data["yOffset"] as number || 0;
-            const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
-            const screenX = de.x - xOffset;
-            const screenY = de.y - yOffset;
-            const docX = (screenX - translateX) / sscale / scale;
-            const docY = (screenY - translateY) / sscale / scale;
-            doc.x = docX;
-            doc.y = docY;
-            this.bringToFront(doc);
-        }
-        e.stopPropagation();
-    }
-
-    componentDidMount() {
-        if (this._containerRef.current) {
-            DragManager.MakeDropTarget(this._containerRef.current, {
-                handlers: {
-                    drop: this.drop
-                }
-            });
-        }
-    }
-
-    @action
-    onPointerDown = (e: React.PointerEvent): void => {
-        if ((e.button === 2 && this.active) ||
-            !e.defaultPrevented) {
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointerup", this.onPointerUp);
-            this._lastX = e.pageX;
-            this._lastY = e.pageY;
-        }
-    }
-
-    @action
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        e.stopPropagation();
-        SelectionManager.DeselectAll();
-    }
-
-    @action
-    onPointerMove = (e: PointerEvent): void => {
-        var me = this;
-        if (!e.cancelBubble && this.active) {
-            e.preventDefault();
-            e.stopPropagation();
-            let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
-            let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-            let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
-            this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
-            this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
-        }
-        this._lastX = e.pageX;
-        this._lastY = e.pageY;
-    }
-
-    @action
-    onPointerWheel = (e: React.WheelEvent): void => {
-        e.stopPropagation();
-
-        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
-
-        var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
-
-        var newContainerX = LocalX * deltaScale + Panxx + Xx;
-        var newContainerY = LocalY * deltaScale + Panyy + Yy;
-
-        let dx = ContainerX - newContainerX;
-        let dy = ContainerY - newContainerY;
-
-        this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale));
-        this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField);
-        this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField);
-    }
-
-    @action
-    onDrop = (e: React.DragEvent): void => {
-        e.stopPropagation()
-        e.preventDefault()
-        let fReader = new FileReader()
-        let file = e.dataTransfer.items[0].getAsFile();
-        let that = this;
-        const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-        const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
-        let x = e.pageX - panx
-        let y = e.pageY - pany
-
-        fReader.addEventListener("load", action("drop", (event) => {
-            if (fReader.result) {
-                let url = "" + fReader.result;
-                let doc = Documents.ImageDocument(url, {
-                    x: x, y: y
-                })
-                let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField);
-                if (docs != FieldWaiting) {
-                    if (!docs) {
-                        docs = new ListField<Document>();
-                        that.props.DocumentForCollection.Set(KeyStore.Data, docs)
-                    }
-                    docs.Data.push(doc);
-                }
-            }
-        }), false)
-
-        if (file) {
-            fReader.readAsDataURL(file)
-        }
-    }
-
-    onDragOver = (e: React.DragEvent): void => {
-    }
-
-    @action
-    bringToFront(doc: CollectionFreeFormDocumentView) {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-
-        const value: Document[] = Document.GetList<Document>(fieldKey, []);
-        var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000);
-        value.map(d => {
-            var zind = d.GetNumber(KeyStore.ZIndex, 0);
-            if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
-                d.SetData(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
-            }
-        })
-
-        if (doc.props.Document.GetNumber(KeyStore.ZIndex, 0) != 0) {
-            doc.props.Document.SetData(KeyStore.ZIndex, 0, NumberField);
-        }
-    }
-
-    render() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetList<Document>(fieldKey, []);
-        const panx: number = Document.GetNumber(KeyStore.PanX, 0);
-        const pany: number = Document.GetNumber(KeyStore.PanY, 0);
-        const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
-
-        return (
-            <div className="border" style={{
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-            }}>
-                <div className="collectionfreeformview-container"
-                    onPointerDown={this.onPointerDown}
-                    onWheel={this.onPointerWheel}
-                    onContextMenu={(e) => e.preventDefault()}
-                    onDrop={this.onDrop}
-                    onDragOver={this.onDragOver}
-                    ref={this._containerRef}>
-                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
-
-                        <div className="node-container" ref={this._nodeContainerRef}>
-                            {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
-                            })}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionSchemaView.scss b/src/views/collections/CollectionSchemaView.scss
deleted file mode 100644
index 707b44db6..000000000
--- a/src/views/collections/CollectionSchemaView.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-.Resizer {
-    box-sizing: border-box;
-    background: #000;
-    opacity: 0.5;
-    z-index: 1;
-    background-clip: padding-box;
-    &.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-        &:hover {
-            border-top: 5px solid rgba(0, 0, 0, 0.5);
-            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-        &:hover {
-            border-left: 5px solid rgba(0, 0, 0, 0.5);
-            border-right: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
-}
-
-.vertical {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.horizontal {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.parent {
-    width: 100%;
-    height: 100%;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-}
-
-.header {
-    background: #aaa;
-    height: 3rem;
-    line-height: 3rem;
-}
-
-.wrapper {
-    background: #ffa;
-    margin: 5rem;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
deleted file mode 100644
index 6f591a1bc..000000000
--- a/src/views/collections/CollectionSchemaView.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React = require("react")
-import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
-import { observer } from "mobx-react";
-import { KeyStore as KS, Key } from "../../fields/Key";
-import { Document } from "../../fields/Document";
-import { FieldView, FieldViewProps } from "../nodes/FieldView";
-import "react-table/react-table.css"
-import { observable, action, computed } from "mobx";
-import SplitPane from "react-split-pane"
-import "./CollectionSchemaView.scss"
-import { ScrollBox } from "../../util/ScrollBox";
-import { CollectionViewBase } from "./CollectionViewBase";
-import { DocumentView } from "../nodes/DocumentView";
-import { EditableView } from "../EditableView";
-import { CompileScript, ToField } from "../../util/Scripting";
-import { Field } from "../../fields/Field";
-
-@observer
-export class CollectionSchemaView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
-
-    @observable
-    selectedIndex = 0;
-
-    renderCell = (rowProps: CellInfo) => {
-        let props: FieldViewProps = {
-            doc: rowProps.value[0],
-            fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined
-        }
-        let contents = (
-            <FieldView {...props} />
-        )
-        return (
-            <EditableView contents={contents} GetValue={() => {
-                let field = props.doc.Get(props.fieldKey);
-                if (field && field instanceof Field) {
-                    return field.ToScriptString();
-                }
-                return field || "";
-            }} SetValue={(value: string) => {
-                let script = CompileScript(value);
-                if (!script.compiled) {
-                    return false;
-                }
-                let field = script();
-                if (field instanceof Field) {
-                    props.doc.Set(props.fieldKey, field);
-                    return true;
-                } else {
-                    let dataField = ToField(field);
-                    if (dataField) {
-                        props.doc.Set(props.fieldKey, dataField);
-                        return true;
-                    }
-                }
-                return false;
-            }}></EditableView>
-        )
-    }
-
-    private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
-        const that = this;
-        if (!rowInfo) {
-            return {};
-        }
-        return {
-            onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
-                that.selectedIndex = rowInfo.index;
-                const doc: Document = rowInfo.original;
-                console.log("Row clicked: ", doc.Title)
-
-                if (handleOriginal) {
-                    handleOriginal()
-                }
-            }),
-            style: {
-                background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
-                color: rowInfo.index == this.selectedIndex ? "white" : "black"
-            }
-        };
-    }
-
-    onPointerDown = (e: React.PointerEvent) => {
-        let target = e.target as HTMLElement;
-        if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
-            e.stopPropagation();
-        }
-        if (e.button === 2 && this.active) {
-            e.stopPropagation();
-            e.preventDefault();
-        } else {
-            if (e.buttons === 1 && this.active) {
-                e.stopPropagation();
-            }
-        }
-    }
-
-    render() {
-        const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
-        const children = Document.GetList<Document>(fieldKey, []);
-        const columns = Document.GetList(KS.ColumnsKey,
-            [KS.Title, KS.Data, KS.Author])
-        let content;
-        if (this.selectedIndex != -1) {
-            content = (
-                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
-            )
-        } else {
-            content = <div />
-        }
-        return (
-            <div onPointerDown={this.onPointerDown} >
-                <SplitPane split={"vertical"} defaultSize="60%">
-                    <ScrollBox>
-                        <ReactTable
-                            data={children}
-                            pageSize={children.length}
-                            page={0}
-                            showPagination={false}
-                            style={{
-                                display: "inline-block"
-                            }}
-                            columns={columns.map(col => {
-                                return (
-                                    {
-                                        Header: col.Name,
-                                        accessor: (doc: Document) => [doc, col],
-                                        id: col.Id
-                                    })
-                            })}
-                            column={{
-                                ...ReactTableDefaults.column,
-                                Cell: this.renderCell
-                            }}
-                            getTrProps={this.getTrProps}
-                        />
-                    </ScrollBox>
-                    {content}
-                </SplitPane>
-            </div>
-        )
-    }
-}
\ No newline at end of file
diff --git a/src/views/collections/CollectionViewBase.tsx b/src/views/collections/CollectionViewBase.tsx
deleted file mode 100644
index 35d938d43..000000000
--- a/src/views/collections/CollectionViewBase.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
-import { SelectionManager } from "../../util/SelectionManager";
-import { ContextMenu } from "../ContextMenu";
-import React = require("react");
-import { DocumentView } from "../nodes/DocumentView";
-import { CollectionDockingView } from "./CollectionDockingView";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-
-
-export interface CollectionViewProps {
-    CollectionFieldKey: Key;
-    DocumentForCollection: Document;
-    ContainingDocumentView: Opt<DocumentView>;
-}
-
-export const COLLECTION_BORDER_WIDTH = 2;
-
-@observer
-export class CollectionViewBase extends React.Component<CollectionViewProps> {
-
-    public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
-    }
-    @computed
-    public get active(): boolean {
-        var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
-        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.ContainingDocumentView != undefined && (
-            this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
-            this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
-        return isSelected || childSelected || topMost;
-    }
-    @action
-    addDocument = (doc: Document): void => {
-        //TODO This won't create the field if it doesn't already exist
-        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        value.push(doc);
-    }
-
-    @action
-    removeDocument = (doc: Document): void => {
-        //TODO This won't create the field if it doesn't already exist
-        const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        if (value.indexOf(doc) !== -1) {
-            value.splice(value.indexOf(doc), 1)
-
-            SelectionManager.DeselectAll()
-            ContextMenu.Instance.clearItems()
-        }
-    }
-
-}
\ No newline at end of file
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
deleted file mode 100644
index e0bb459e9..000000000
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
-import { NumberField } from "../../fields/NumberField";
-import { DragManager } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { ContextMenu } from "../ContextMenu";
-import "./NodeView.scss";
-import React = require("react");
-import { DocumentView, DocumentViewProps } from "./DocumentView";
-
-
-@observer
-export class CollectionFreeFormDocumentView extends DocumentView {
-    private _contextMenuCanOpen = false;
-    private _downX: number = 0;
-    private _downY: number = 0;
-
-    constructor(props: DocumentViewProps) {
-        super(props);
-    }
-    get screenRect(): ClientRect | DOMRect {
-        if (this._mainCont.current) {
-            return this._mainCont.current.getBoundingClientRect();
-        }
-        return new DOMRect();
-    }
-
-    @computed
-    get x(): number {
-        return this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-    }
-
-    @computed
-    get y(): number {
-        return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-    }
-
-    set x(x: number) {
-        this.props.Document.SetData(KeyStore.X, x, NumberField)
-    }
-
-    set y(y: number) {
-        this.props.Document.SetData(KeyStore.Y, y, NumberField)
-    }
-
-    @computed
-    get transform(): string {
-        return `translate(${this.x}px, ${this.y}px)`;
-    }
-
-    @computed
-    get width(): number {
-        return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
-    }
-
-    set width(w: number) {
-        this.props.Document.SetData(KeyStore.Width, w, NumberField)
-    }
-
-    @computed
-    get height(): number {
-        return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
-    }
-
-    set height(h: number) {
-        this.props.Document.SetData(KeyStore.Height, h, NumberField)
-    }
-
-    @computed
-    get zIndex(): number {
-        return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0));
-    }
-
-    set zIndex(h: number) {
-        this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
-    }
-
-    @action
-    dragComplete = (e: DragManager.DragCompleteEvent) => {
-    }
-
-    @computed
-    get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            this.props.ContainingCollectionView.active;
-    }
-
-    @computed
-    get topMost(): boolean {
-        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        var me = this;
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
-            e.stopPropagation();
-            return;
-        }
-        this._contextMenuCanOpen = e.button == 2;
-        if (this.active && !e.isDefaultPrevented()) {
-            e.stopPropagation();
-            if (e.buttons === 2) {
-                e.preventDefault();
-            }
-            document.removeEventListener("pointermove", this.onPointerMove)
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp)
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    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 rect = this.screenRect;
-                let dragData: { [id: string]: any } = {};
-                dragData["document"] = this;
-                dragData["xOffset"] = e.x - rect.left;
-                dragData["yOffset"] = e.y - rect.top;
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: this.dragComplete,
-                    },
-                    hideSource: true
-                })
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove)
-        document.removeEventListener("pointerup", this.onPointerUp)
-        e.stopPropagation();
-        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    openRight = (e: React.MouseEvent): void => {
-        CollectionDockingView.AddRightSplit(this.props.Document);
-    }
-
-    deleteClicked = (e: React.MouseEvent): void => {
-        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            this.props.ContainingCollectionView.removeDocument(this.props.Document)
-        }
-    }
-    @action
-    fullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.OpenFullScreen(this.props.Document);
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-    @action
-    closeFullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.CloseFullScreen();
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-
-    @action
-    onContextMenu = (e: React.MouseEvent): void => {
-        if (!SelectionManager.IsSelected(this)) {
-            return;
-        }
-        e.preventDefault()
-
-        if (!this._contextMenuCanOpen) {
-            return;
-        }
-
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
-            // DocumentViews should stop propogation of this event
-            e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    render() {
-        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
-        return (
-            <div className="node" ref={this._mainCont} style={{
-                transform: freestyling ? this.transform : "",
-                width: freestyling ? this.width : "100%",
-                height: freestyling ? this.height : "100%",
-                position: freestyling ? "absolute" : "relative",
-                zIndex: freestyling ? this.zIndex : 0,
-            }}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}>
-
-                <DocumentView {...this.props} DocumentView={this} />
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
deleted file mode 100644
index 39be54a4d..000000000
--- a/src/views/nodes/DocumentView.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { TextField } from "../../fields/TextField";
-import { Utils } from "../../Utils";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
-import { FormattedTextBox } from "../nodes/FormattedTextBox";
-import { ImageBox } from "../nodes/ImageBox";
-import "./NodeView.scss";
-import React = require("react");
-const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
-
-export interface DocumentViewProps {
-    Document: Document;
-    DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
-    ContainingCollectionView: Opt<CollectionViewBase>;
-}
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-
-    protected _mainCont = React.createRef<any>();
-    get MainContent() {
-        return this._mainCont;
-    }
-    @computed
-    get layout(): string {
-        return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
-    }
-
-    @computed
-    get layoutKeys(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
-    }
-
-    @computed
-    get layoutFields(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
-    }
-
-    // 
-    // returns the cumulative scaling between the document and the screen
-    //
-    @computed
-    public get ScalingToScreenSpace(): number {
-        if (this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
-            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
-        }
-        return 1;
-    }
-
-    //
-    // Converts a coordinate in the screen space of the app into a local document coordinate.
-    //
-    public TransformToLocalPoint(screenX: number, screenY: number) {
-        // if this collection view is nested within another collection view, then 
-        // first transform the screen point into the parent collection's coordinate space.
-        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
-            this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
-            { LocalX: screenX, LocalY: screenY };
-        let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
-        let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
-
-        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // They also ignore any transformation that may have been applied to their content document.
-        // NOTE: this currently assumes CollectionDockingViews aren't nested.
-        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
-        let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
-        let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
-        let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
-        let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
-        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
-        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
-    }
-
-    //
-    // Converts a point in the coordinate space of a document to a screen space coordinate.
-    //
-    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
-
-        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // They also ignore any transformation that may have been applied to their content document.
-        // NOTE: this currently assumes CollectionDockingViews aren't nested.
-        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
-        let W = COLLECTION_BORDER_WIDTH;
-        let H = COLLECTION_BORDER_WIDTH;
-        let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
-        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
-
-        // if this collection view is nested within another collection view, then 
-        // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
-        if (containingDocView != undefined) {
-            let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
-            let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
-            let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
-            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
-            parentX = ScreenX;
-            parentY = ScreenY;
-        }
-        return { ScreenX: parentX, ScreenY: parentY };
-    }
-
-
-    render() {
-        let bindings = { ...this.props } as any;
-        for (const key of this.layoutKeys) {
-            bindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
-        }
-        for (const key of this.layoutFields) {
-            let field = this.props.Document.Get(key);
-            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
-        }
-        if (bindings.DocumentView === undefined) {
-            bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
-        }
-        return (
-            <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
-                <JsxParser
-                    components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
-                    bindings={bindings}
-                    jsx={this.layout}
-                    showWarnings={true}
-                    onError={(test: any) => { console.log(test) }}
-                />
-            </div>
-        )
-    }
-}
diff --git a/src/views/nodes/FieldTextBox.scss b/src/views/nodes/FieldTextBox.scss
deleted file mode 100644
index b6ce2fabc..000000000
--- a/src/views/nodes/FieldTextBox.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.ProseMirror {
-    margin-top: -1em;
-    width: 100%;
-    height: 100%;
-}
-
-.ProseMirror:focus {
-    outline: none !important
-}
-
-.fieldTextBox-cont {
-    background: white;
-    padding: 1vw;
-}
\ No newline at end of file
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
deleted file mode 100644
index 3a7652284..000000000
--- a/src/views/nodes/FieldView.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React = require("react")
-import { Document } from "../../fields/Document";
-import { observer } from "mobx-react";
-import { computed } from "mobx";
-import { Field, Opt, FieldWaiting, FieldValue } from "../../fields/Field";
-import { TextField } from "../../fields/TextField";
-import { NumberField } from "../../fields/NumberField";
-import { RichTextField } from "../../fields/RichTextField";
-import { FormattedTextBox } from "./FormattedTextBox";
-import { ImageField } from "../../fields/ImageField";
-import { ImageBox } from "./ImageBox";
-import { Key } from "../../fields/Key";
-import { DocumentView } from "./DocumentView";
-
-//
-// these properties get assigned through the render() method of the DocumentView when it creates this node.
-// However, that only happens because the properties are "defined" in the markup for the field view.
-// See the LayoutString method on each field view :   ImageBox, FormattedTextBox, etc. 
-//
-export interface FieldViewProps {
-    fieldKey: Key;
-    doc: Document;
-    DocumentViewForField: Opt<DocumentView>
-}
-
-@observer
-export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
-    @computed
-    get field(): FieldValue<Field> {
-        const { doc, fieldKey } = this.props;
-        return doc.Get(fieldKey);
-    }
-    render() {
-        const field = this.field;
-        if (!field) {
-            return <p>{'<null>'}</p>
-        }
-        if (field instanceof TextField) {
-            return <p>{field.Data}</p>
-        }
-        else if (field instanceof RichTextField) {
-            return <FormattedTextBox {...this.props} />
-        }
-        else if (field instanceof ImageField) {
-            return <ImageBox {...this.props} />
-        }
-        else if (field instanceof NumberField) {
-            return <p>{field.Data}</p>
-        } else if (field != FieldWaiting) {
-            return <p>{field.GetValue}</p>
-        } else
-            return <p> {"Waiting for server..."} </p>
-    }
-
-}
\ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.scss b/src/views/nodes/FormattedTextBox.scss
deleted file mode 100644
index 492367fce..000000000
--- a/src/views/nodes/FormattedTextBox.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.ProseMirror {
-    margin-top: -1em;
-    width: 100%;
-    height: 100%;
-}
-
-.ProseMirror:focus {
-    outline: none !important
-}
-
-.formattedTextBox-cont {
-    background: white;
-    padding: 1vw;
-}
\ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx
deleted file mode 100644
index 6d0e117cc..000000000
--- a/src/views/nodes/FormattedTextBox.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { action, IReactionDisposer, reaction } from "mobx";
-import { observer } from "mobx-react"
-import { baseKeymap } from "prosemirror-commands";
-import { history, redo, undo } from "prosemirror-history";
-import { keymap } from "prosemirror-keymap";
-import { schema } from "prosemirror-schema-basic";
-import { EditorState, Transaction } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting, FieldValue } from "../../fields/Field";
-import { SelectionManager } from "../../util/SelectionManager";
-import "./FormattedTextBox.scss";
-import React = require("react")
-import { RichTextField } from "../../fields/RichTextField";
-import { FieldViewProps, FieldView } from "./FieldView";
-import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-
-
-// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
-//
-//  HTML Markup:  <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
-// 
-//  In Code, the node's HTML is specified in the document's parameterized structure as:
-//        document.SetField(KeyStore.Layout,  "<FormattedTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
-//  and the node's binding to the specified document KEYNAME as:
-//        document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.<KEYNAME>]));
-//  The Jsx parser at run time will bind:
-//        'fieldKey' property to the Key stored in LayoutKeys
-//    and 'doc' property to the document that is being rendered
-//
-//  When rendered() by React, this extracts the TextController from the Document stored at the 
-//  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
-//  this will edit the document and assign the new value to that field.
-//]
-@observer
-export class FormattedTextBox extends React.Component<FieldViewProps> {
-
-    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
-    private _ref: React.RefObject<HTMLDivElement>;
-    private _editorView: Opt<EditorView>;
-    private _reactionDisposer: Opt<IReactionDisposer>;
-
-    constructor(props: FieldViewProps) {
-        super(props);
-
-        this._ref = React.createRef();
-
-        this.onChange = this.onChange.bind(this);
-    }
-
-    dispatchTransaction = (tx: Transaction) => {
-        if (this._editorView) {
-            const state = this._editorView.state.apply(tx);
-            this._editorView.updateState(state);
-            const { doc, fieldKey } = this.props;
-            doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
-        }
-    }
-
-    componentDidMount() {
-        let state: EditorState;
-        const { doc, fieldKey } = this.props;
-        const config = {
-            schema,
-            plugins: [
-                history(),
-                keymap({ "Mod-z": undo, "Mod-y": redo }),
-                keymap(baseKeymap)
-            ]
-        };
-
-        let field = doc.GetT(fieldKey, RichTextField);
-        if (field && field != FieldWaiting) {  // bcz: don't think this works
-            state = EditorState.fromJSON(config, JSON.parse(field.Data));
-        } else {
-            state = EditorState.create(config);
-        }
-        if (this._ref.current) {
-            this._editorView = new EditorView(this._ref.current, {
-                state,
-                dispatchTransaction: this.dispatchTransaction
-            });
-        }
-
-        this._reactionDisposer = reaction(() => {
-            const field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
-            return field && field != FieldWaiting ? field.Data : undefined;
-        }, (field) => {
-            if (field && this._editorView) {
-                this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
-            }
-        })
-    }
-
-    componentWillUnmount() {
-        if (this._editorView) {
-            this._editorView.destroy();
-        }
-        if (this._reactionDisposer) {
-            this._reactionDisposer();
-        }
-    }
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    @action
-    onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        const { fieldKey, doc } = this.props;
-        doc.SetData(fieldKey, e.target.value, RichTextField);
-    }
-    onPointerDown = (e: React.PointerEvent): void => {
-        let me = this;
-        if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
-            e.stopPropagation();
-        }
-    }
-    render() {
-        return (<div className="formattedTextBox-cont"
-            style={{
-                color: "initial",
-                whiteSpace: "initial"
-            }}
-            onPointerDown={this.onPointerDown}
-            ref={this._ref} />)
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/ImageBox.scss b/src/views/nodes/ImageBox.scss
deleted file mode 100644
index 136fda1d0..000000000
--- a/src/views/nodes/ImageBox.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-
-.imageBox-cont {
-    padding: 0vw;
-}
-
-.imageBox-button {
-    padding : 0vw;
-    border: none;
-    width : 100%;
-    height: 100%;
-}
\ No newline at end of file
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
deleted file mode 100644
index 123c76d19..000000000
--- a/src/views/nodes/ImageBox.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import { SelectionManager } from "../../util/SelectionManager";
-import "./ImageBox.scss";
-import React = require("react")
-import { ImageField } from '../../fields/ImageField';
-import { FieldViewProps, FieldView } from './FieldView';
-import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
-import { FieldWaiting } from '../../fields/Field';
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-
-@observer
-export class ImageBox extends React.Component<FieldViewProps> {
-
-    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
-    private _ref: React.RefObject<HTMLDivElement>;
-    private _downX: number = 0;
-    private _downY: number = 0;
-    private _lastTap: number = 0;
-    @observable private _photoIndex: number = 0;
-    @observable private _isOpen: boolean = false;
-
-    constructor(props: FieldViewProps) {
-        super(props);
-
-        this._ref = React.createRef();
-        this.state = {
-            photoIndex: 0,
-            isOpen: false,
-        };
-    }
-
-    componentDidMount() {
-    }
-
-    componentWillUnmount() {
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
-                e.stopPropagation();
-                this._downX = e.clientX;
-                this._downY = e.clientY;
-                document.removeEventListener("pointerup", this.onPointerUp);
-                document.addEventListener("pointerup", this.onPointerUp);
-            }
-        } else {
-            this._lastTap = Date.now();
-        }
-    }
-    @action
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointerup", this.onPointerUp);
-        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
-            this._isOpen = true;
-        }
-        e.stopPropagation();
-    }
-
-    lightbox = (path: string) => {
-        const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
-        if (this._isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
-            return (<Lightbox
-                mainSrc={images[this._photoIndex]}
-                nextSrc={images[(this._photoIndex + 1) % images.length]}
-                prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
-                onCloseRequest={() => this.setState({ isOpen: false })}
-                onMovePrevRequest={action(() =>
-                    this._photoIndex = (this._photoIndex + images.length - 1) % images.length
-                )}
-                onMoveNextRequest={action(() =>
-                    this._photoIndex = (this._photoIndex + 1) % images.length
-                )}
-            />)
-        }
-    }
-
-    render() {
-        let field = this.props.doc.Get(this.props.fieldKey);
-        let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
-            field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
-
-        return (
-            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width="100%" alt="Image not found" />
-                {this.lightbox(path)}
-            </div>)
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/NodeView.scss b/src/views/nodes/NodeView.scss
deleted file mode 100644
index dac1c0a8e..000000000
--- a/src/views/nodes/NodeView.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.node {
-    position: absolute;
-    background: #cdcdcd;
-    overflow: hidden;
-    &.minimized {
-        width: 30px;
-        height: 30px;
-    }
-    .top {
-        background: #232323;
-        height: 20px;
-        cursor: pointer;
-    }
-    .content {
-        padding: 20px 20px;
-        height: auto;
-        box-sizing: border-box;
-    }
-    .scroll-box {
-        overflow-y: scroll;
-        height: calc(100% - 20px);
-    }
-}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 1a7c9286e..e91b0be5e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 module.exports = {
   devtool: 'eval',
   mode: 'development',
-  entry: "./src/Main.tsx",
+  entry: "./src/client/views/Main.tsx",
   devtool: "source-map",
   node: {
     fs: 'empty',
-- 
cgit v1.2.3-70-g09d2


From 0d1359d43a4f6805a431f2e15d15a2550004116b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 9 Feb 2019 21:38:27 -0500
Subject: Added our own server with webpack-dev-middleware

---
 package-lock.json   | 1196 +++++++++++++++++++++++++++++++++++----------------
 package.json        |   11 +-
 src/server/index.js |   13 +
 src/server/index.ts |   26 ++
 webpack.config.js   |    1 -
 5 files changed, 881 insertions(+), 366 deletions(-)
 create mode 100644 src/server/index.ts

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 9fbe16195..07fe093fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,12 +17,53 @@
         "@fortawesome/fontawesome-common-types": "^0.2.14"
       }
     },
+    "@types/anymatch": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.0.tgz",
+      "integrity": "sha512-7WcbyctkE8GTzogDb0ulRAEw7v8oIS54ft9mQTU7PfM0hp5e+8kpa+HeQ7IQrFbKtJXBKcZ4bh+Em9dTw5L6AQ=="
+    },
+    "@types/body-parser": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.17.0.tgz",
+      "integrity": "sha512-a2+YeUjPkztKJu5aIF2yArYFQQp8d51wZ7DavSHjFuY1mqVgidGyzEQ41JIVNy82fXj8yPgy2vJmfIywgESW6w==",
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/chai": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.7.tgz",
       "integrity": "sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==",
       "dev": true
     },
+    "@types/connect": {
+      "version": "3.4.32",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.32.tgz",
+      "integrity": "sha512-4r8qa0quOvh7lGD0pre62CAb1oni1OO6ecJLGCezTmhQ8Fz50Arx9RUszryR8KlgK6avuSXvviL6yWyViQABOg==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/express": {
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.16.1.tgz",
+      "integrity": "sha512-V0clmJow23WeyblmACoxbHBu2JKlE5TiIme6Lem14FnPW9gsttyHtk6wq7njcdIWH1njAaFgR8gW09lgY98gQg==",
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.16.1.tgz",
+      "integrity": "sha512-QgbIMRU1EVRry5cIu1ORCQP4flSYqLM1lS5LYyGWfKnFT3E58f0gKto7BR13clBFVrVZ0G0rbLZ1hUpSkgQQOA==",
+      "requires": {
+        "@types/node": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "@types/jquery": {
       "version": "3.3.29",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
@@ -31,6 +72,26 @@
         "@types/sizzle": "*"
       }
     },
+    "@types/loglevel": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/loglevel/-/loglevel-1.5.4.tgz",
+      "integrity": "sha512-8dx4ckP0vndJeN+iKZwdGiapLqFjVQ3JLOt92uqK0C63acs5NcPLbUOpfXCJkKVRjZLBQjw8NIGNBSsnatFnFQ==",
+      "dev": true
+    },
+    "@types/memory-fs": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@types/memory-fs/-/memory-fs-0.3.2.tgz",
+      "integrity": "sha512-j5AcZo7dbMxHoOimcHEIh0JZe5e1b8q8AqGSpZJrYc7xOgCIP79cIjTdx5jSDLtySnQDwkDTqwlC7Xw7uXw7qg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/mime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.1.tgz",
+      "integrity": "sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw=="
+    },
     "@types/mocha": {
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.5.tgz",
@@ -38,9 +99,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "10.12.21",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.21.tgz",
-      "integrity": "sha512-CBgLNk4o3XMnqMc0rhb6lc77IwShMEglz05deDcn2lQxyXEZivfwgYJu7SMha9V5XcrP6qZuevTHV/QrN2vjKQ=="
+      "version": "10.12.24",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.24.tgz",
+      "integrity": "sha512-GWWbvt+z9G5otRBW8rssOFgRY87J9N/qbhqfjMZ+gUuL6zoL+Hm6gP/8qQBG4jjimqdaNLCehcVapZ/Fs2WjCQ=="
     },
     "@types/orderedmap": {
       "version": "1.0.0",
@@ -124,6 +185,11 @@
         "@types/prosemirror-transform": "*"
       }
     },
+    "@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
+    },
     "@types/react": {
       "version": "16.8.1",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.1.tgz",
@@ -150,11 +216,25 @@
         "@types/react": "*"
       }
     },
+    "@types/serve-static": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.2.tgz",
+      "integrity": "sha512-/BZ4QRLpH/bNYgZgwhKEh+5AsboDBcUdlBYgzoLX0fpj3Y2gp6EApyOlM3bK53wQS/OE1SrdSYBAbux2D1528Q==",
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/mime": "*"
+      }
+    },
     "@types/sizzle": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
       "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
     },
+    "@types/tapable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.4.tgz",
+      "integrity": "sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ=="
+    },
     "@types/typescript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/typescript/-/typescript-2.0.0.tgz",
@@ -163,6 +243,21 @@
         "typescript": "*"
       }
     },
+    "@types/uglify-js": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.0.4.tgz",
+      "integrity": "sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==",
+      "requires": {
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "@types/uuid": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.4.tgz",
@@ -171,6 +266,37 @@
         "@types/node": "*"
       }
     },
+    "@types/webpack": {
+      "version": "4.4.24",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.4.24.tgz",
+      "integrity": "sha512-yg99CjvB7xZ/iuHrsZ7dkGKoq/FRDzqLzAxKh2EmTem6FWjzrty4FqCqBYuX5z+MFwSaaQGDAX4Q9HQkLjGLnQ==",
+      "requires": {
+        "@types/anymatch": "*",
+        "@types/node": "*",
+        "@types/tapable": "*",
+        "@types/uglify-js": "*",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@types/webpack-dev-middleware": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/webpack-dev-middleware/-/webpack-dev-middleware-2.0.2.tgz",
+      "integrity": "sha512-uZ1avIbAcnspcDKKm0WfgIdvBYRqUapPmwb0MYGzzB74q2F3T4Xi+qPSoS0Oq5iQvIMVxOm7KMqHQJii4VDCsw==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/loglevel": "*",
+        "@types/memory-fs": "*",
+        "@types/webpack": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.11",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@@ -364,7 +490,6 @@
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
-      "dev": true,
       "requires": {
         "mime-types": "~2.1.18",
         "negotiator": "0.6.1"
@@ -415,6 +540,43 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "ansi-align": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
+      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "requires": {
+        "string-width": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "ansi-colors": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
@@ -441,7 +603,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
       "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-      "dev": true,
       "requires": {
         "micromatch": "^3.1.4",
         "normalize-path": "^2.1.1"
@@ -464,20 +625,17 @@
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-      "dev": true
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
     },
     "arr-flatten": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
     },
     "arr-union": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
-      "dev": true
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
     },
     "array-find-index": {
       "version": "1.0.2",
@@ -508,8 +666,7 @@
     "array-unique": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-      "dev": true
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
     "arrify": {
       "version": "1.0.1",
@@ -576,8 +733,7 @@
     "assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
-      "dev": true
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
     },
     "async": {
       "version": "1.5.2",
@@ -588,8 +744,7 @@
     "async-each": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
-      "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
-      "dev": true
+      "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0="
     },
     "async-foreach": {
       "version": "0.1.3",
@@ -604,8 +759,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "awesome-typescript-loader": {
       "version": "5.2.1",
@@ -673,7 +827,6 @@
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
       "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "dev": true,
       "requires": {
         "cache-base": "^1.0.1",
         "class-utils": "^0.3.5",
@@ -688,7 +841,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
           "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^1.0.0"
           }
@@ -697,7 +849,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -706,7 +857,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -715,7 +865,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -752,8 +901,7 @@
     "binary-extensions": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.0.tgz",
-      "integrity": "sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==",
-      "dev": true
+      "integrity": "sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw=="
     },
     "block-stream": {
       "version": "0.0.9",
@@ -779,7 +927,6 @@
       "version": "1.18.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
-      "dev": true,
       "requires": {
         "bytes": "3.0.0",
         "content-type": "~1.0.4",
@@ -807,6 +954,80 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "boxen": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
+      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "requires": {
+        "ansi-align": "^2.0.0",
+        "camelcase": "^4.0.0",
+        "chalk": "^2.0.1",
+        "cli-boxes": "^1.0.0",
+        "string-width": "^2.0.0",
+        "term-size": "^1.2.0",
+        "widest-line": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -820,7 +1041,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
       "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-      "dev": true,
       "requires": {
         "arr-flatten": "^1.1.0",
         "array-unique": "^0.3.2",
@@ -838,7 +1058,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -971,8 +1190,7 @@
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-      "dev": true
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
     },
     "cacache": {
       "version": "10.0.4",
@@ -1007,7 +1225,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
       "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "dev": true,
       "requires": {
         "collection-visit": "^1.0.0",
         "component-emitter": "^1.2.1",
@@ -1034,6 +1251,11 @@
         "map-obj": "^1.0.0"
       }
     },
+    "capture-stack-trace": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz",
+      "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw=="
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -1107,6 +1329,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "ci-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
+      "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A=="
+    },
     "cipher-base": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
@@ -1121,7 +1348,6 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
       "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-      "dev": true,
       "requires": {
         "arr-union": "^3.1.0",
         "define-property": "^0.2.5",
@@ -1133,7 +1359,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -1145,6 +1370,11 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
       "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
+    "cli-boxes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
+      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -1176,7 +1406,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
       "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
-      "dev": true,
       "requires": {
         "map-visit": "^1.0.0",
         "object-visit": "^1.0.0"
@@ -1186,7 +1415,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -1194,8 +1422,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "combined-stream": {
       "version": "1.0.7",
@@ -1220,8 +1447,7 @@
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-      "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
-      "dev": true
+      "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
     },
     "compressible": {
       "version": "2.0.15",
@@ -1264,6 +1490,19 @@
         "typedarray": "^0.0.6"
       }
     },
+    "configstore": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
+      "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==",
+      "requires": {
+        "dot-prop": "^4.1.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^1.0.0",
+        "unique-string": "^1.0.0",
+        "write-file-atomic": "^2.0.0",
+        "xdg-basedir": "^3.0.0"
+      }
+    },
     "connect-history-api-fallback": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
@@ -1293,26 +1532,22 @@
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
-      "dev": true
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
     },
     "content-type": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-      "dev": true
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
     },
     "cookie": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
-      "dev": true
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
     },
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-      "dev": true
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
     "copy-concurrently": {
       "version": "1.0.5",
@@ -1331,8 +1566,7 @@
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
-      "dev": true
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
     "copy-webpack-plugin": {
       "version": "4.6.0",
@@ -1365,6 +1599,14 @@
         "elliptic": "^6.0.0"
       }
     },
+    "create-error-class": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
+      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
+      "requires": {
+        "capture-stack-trace": "^1.0.0"
+      }
+    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -1420,6 +1662,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-random-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
+      "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
+    },
     "css-loader": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.1.0.tgz",
@@ -1501,7 +1748,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -1514,8 +1760,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "deep-eql": {
       "version": "3.0.1",
@@ -1532,6 +1777,11 @@
       "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
       "dev": true
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
     "default-gateway": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-2.7.2.tgz",
@@ -1591,7 +1841,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
       "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
       "requires": {
         "is-descriptor": "^1.0.2",
         "isobject": "^3.0.1"
@@ -1601,7 +1850,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -1610,7 +1858,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -1619,7 +1866,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -1684,8 +1930,7 @@
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-      "dev": true
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
     "des.js": {
       "version": "1.0.0",
@@ -1700,8 +1945,7 @@
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-      "dev": true
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
     "detect-file": {
       "version": "1.0.0",
@@ -1789,6 +2033,19 @@
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
       "dev": true
     },
+    "dot-prop": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
+      "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+      "requires": {
+        "is-obj": "^1.0.0"
+      }
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -1813,8 +2070,7 @@
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-      "dev": true
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "elliptic": {
       "version": "6.4.1",
@@ -1839,8 +2095,7 @@
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
-      "dev": true
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
     "end-of-stream": {
       "version": "1.4.1",
@@ -1914,8 +2169,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-      "dev": true
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -1950,8 +2204,7 @@
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
-      "dev": true
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
     "eventemitter3": {
       "version": "2.0.3",
@@ -2022,7 +2275,6 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
       "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-      "dev": true,
       "requires": {
         "debug": "^2.3.3",
         "define-property": "^0.2.5",
@@ -2037,7 +2289,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -2046,7 +2297,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -2066,7 +2316,6 @@
       "version": "4.16.4",
       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
-      "dev": true,
       "requires": {
         "accepts": "~1.3.5",
         "array-flatten": "1.1.1",
@@ -2103,8 +2352,7 @@
         "array-flatten": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-          "dev": true
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
         }
       }
     },
@@ -2117,7 +2365,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
       "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dev": true,
       "requires": {
         "assign-symbols": "^1.0.0",
         "is-extendable": "^1.0.1"
@@ -2127,7 +2374,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
           "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
           "requires": {
             "is-plain-object": "^2.0.4"
           }
@@ -2138,7 +2384,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
       "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-      "dev": true,
       "requires": {
         "array-unique": "^0.3.2",
         "define-property": "^1.0.0",
@@ -2154,7 +2399,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
           "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^1.0.0"
           }
@@ -2163,7 +2407,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -2172,7 +2415,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -2181,7 +2423,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -2190,7 +2431,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -2239,7 +2479,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
       "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-      "dev": true,
       "requires": {
         "extend-shallow": "^2.0.1",
         "is-number": "^3.0.0",
@@ -2251,7 +2490,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -2262,7 +2500,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
-      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
@@ -2367,8 +2604,7 @@
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
     },
     "for-own": {
       "version": "1.0.0",
@@ -2397,14 +2633,12 @@
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
-      "dev": true
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
     },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
       "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
-      "dev": true,
       "requires": {
         "map-cache": "^0.2.2"
       }
@@ -2412,8 +2646,7 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-      "dev": true
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
     "from2": {
       "version": "2.3.0",
@@ -2446,7 +2679,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.7.tgz",
       "integrity": "sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==",
-      "dev": true,
       "optional": true,
       "requires": {
         "nan": "^2.9.2",
@@ -2456,24 +2688,20 @@
         "abbrev": {
           "version": "1.1.1",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -2482,13 +2710,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "dev": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2497,34 +2723,28 @@
         "chownr": {
           "version": "1.1.1",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "ms": "2.0.0"
@@ -2533,25 +2753,21 @@
         "deep-extend": {
           "version": "0.6.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -2560,13 +2776,11 @@
         "fs.realpath": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "aproba": "^1.0.3",
@@ -2582,7 +2796,6 @@
         "glob": {
           "version": "7.1.3",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -2596,13 +2809,11 @@
         "has-unicode": {
           "version": "2.0.1",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
@@ -2611,7 +2822,6 @@
         "ignore-walk": {
           "version": "3.0.1",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "minimatch": "^3.0.4"
@@ -2620,7 +2830,6 @@
         "inflight": {
           "version": "1.0.6",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "once": "^1.3.0",
@@ -2629,19 +2838,16 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2649,26 +2855,22 @@
         "isarray": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "dev": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "dev": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -2677,7 +2879,6 @@
         "minizlib": {
           "version": "1.2.1",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -2686,7 +2887,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "dev": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2694,13 +2894,11 @@
         "ms": {
           "version": "2.0.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.4",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "debug": "^2.1.2",
@@ -2711,7 +2909,6 @@
         "node-pre-gyp": {
           "version": "0.10.3",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
@@ -2729,7 +2926,6 @@
         "nopt": {
           "version": "4.0.1",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "abbrev": "1",
@@ -2739,13 +2935,11 @@
         "npm-bundled": {
           "version": "1.0.5",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.2.0",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -2755,7 +2949,6 @@
         "npmlog": {
           "version": "4.1.2",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "are-we-there-yet": "~1.1.2",
@@ -2766,19 +2959,16 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "dev": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2786,19 +2976,16 @@
         "os-homedir": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "os-homedir": "^1.0.0",
@@ -2808,19 +2995,16 @@
         "path-is-absolute": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "deep-extend": "^0.6.0",
@@ -2832,7 +3016,6 @@
             "minimist": {
               "version": "1.2.0",
               "bundled": true,
-              "dev": true,
               "optional": true
             }
           }
@@ -2840,7 +3023,6 @@
         "readable-stream": {
           "version": "2.3.6",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
@@ -2855,7 +3037,6 @@
         "rimraf": {
           "version": "2.6.3",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "glob": "^7.1.3"
@@ -2863,43 +3044,36 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.6.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2909,7 +3083,6 @@
         "string_decoder": {
           "version": "1.1.1",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
@@ -2918,7 +3091,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2926,13 +3098,11 @@
         "strip-json-comments": {
           "version": "2.0.1",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "chownr": "^1.1.1",
@@ -2947,13 +3117,11 @@
         "util-deprecate": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
           "bundled": true,
-          "dev": true,
           "optional": true,
           "requires": {
             "string-width": "^1.0.2 || 2"
@@ -2961,13 +3129,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "dev": true
+          "bundled": true
         }
       }
     },
@@ -3051,8 +3217,7 @@
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
-      "dev": true
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
     },
     "getpass": {
       "version": "0.1.7",
@@ -3079,7 +3244,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
       "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-      "dev": true,
       "requires": {
         "is-glob": "^3.1.0",
         "path-dirname": "^1.0.0"
@@ -3089,13 +3253,20 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
           "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-          "dev": true,
           "requires": {
             "is-extglob": "^2.1.0"
           }
         }
       }
     },
+    "global-dirs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
+      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
+      "requires": {
+        "ini": "^1.3.4"
+      }
+    },
     "global-modules": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
@@ -3166,6 +3337,31 @@
         "jquery": "*"
       }
     },
+    "got": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "requires": {
+        "create-error-class": "^3.0.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^3.0.0",
+        "is-redirect": "^1.0.0",
+        "is-retry-allowed": "^1.0.0",
+        "is-stream": "^1.0.0",
+        "lowercase-keys": "^1.0.0",
+        "safe-buffer": "^5.0.1",
+        "timed-out": "^4.0.0",
+        "unzip-response": "^2.0.1",
+        "url-parse-lax": "^1.0.0"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        }
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
@@ -3208,8 +3404,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.0",
@@ -3226,7 +3421,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
       "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
-      "dev": true,
       "requires": {
         "get-value": "^2.0.6",
         "has-values": "^1.0.0",
@@ -3237,7 +3431,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
       "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
-      "dev": true,
       "requires": {
         "is-number": "^3.0.0",
         "kind-of": "^4.0.0"
@@ -3247,7 +3440,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
           "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -3341,7 +3533,6 @@
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-      "dev": true,
       "requires": {
         "depd": "~1.1.2",
         "inherits": "2.0.3",
@@ -3406,7 +3597,6 @@
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -3444,6 +3634,16 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+    },
+    "import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+    },
     "import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -3517,8 +3717,7 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
     "in-publish": {
       "version": "2.0.0",
@@ -3556,8 +3755,7 @@
     "ini": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
-      "dev": true
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
     "internal-ip": {
       "version": "3.0.1",
@@ -3595,14 +3793,12 @@
     "ipaddr.js": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
-      "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=",
-      "dev": true
+      "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
     },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
       "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -3611,7 +3807,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -3627,7 +3822,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
       "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-      "dev": true,
       "requires": {
         "binary-extensions": "^1.0.0"
       }
@@ -3635,8 +3829,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -3646,11 +3839,18 @@
         "builtin-modules": "^1.0.0"
       }
     },
+    "is-ci": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+      "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
+      "requires": {
+        "ci-info": "^1.5.0"
+      }
+    },
     "is-data-descriptor": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
       "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -3659,7 +3859,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -3670,7 +3869,6 @@
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
       "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "dev": true,
       "requires": {
         "is-accessor-descriptor": "^0.1.6",
         "is-data-descriptor": "^0.1.4",
@@ -3680,22 +3878,19 @@
         "kind-of": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
         }
       }
     },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
     },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-finite": {
       "version": "1.0.2",
@@ -3717,16 +3912,28 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
       "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
     },
+    "is-installed-globally": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
+      "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=",
+      "requires": {
+        "global-dirs": "^0.1.0",
+        "is-path-inside": "^1.0.0"
+      }
+    },
+    "is-npm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
+      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
       "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -3735,13 +3942,17 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
         }
       }
     },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
@@ -3761,7 +3972,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
       "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=",
-      "dev": true,
       "requires": {
         "path-is-inside": "^1.0.1"
       }
@@ -3770,16 +3980,24 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
     },
+    "is-redirect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
+      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ="
+    },
+    "is-retry-allowed": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
+      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-typedarray": {
       "version": "1.0.0",
@@ -3794,8 +4012,7 @@
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
     "is-wsl": {
       "version": "1.1.0",
@@ -3816,8 +4033,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
     "isstream": {
       "version": "0.1.2",
@@ -3905,8 +4121,15 @@
     "kind-of": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
-      "dev": true
+      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
+    },
+    "latest-version": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
+      "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=",
+      "requires": {
+        "package-json": "^4.0.0"
+      }
     },
     "lcid": {
       "version": "1.0.0",
@@ -4073,6 +4296,11 @@
         "signal-exit": "^3.0.0"
       }
     },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
     "lru-cache": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@@ -4086,7 +4314,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
       "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-      "dev": true,
       "requires": {
         "pify": "^3.0.0"
       },
@@ -4094,8 +4321,7 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
         }
       }
     },
@@ -4117,8 +4343,7 @@
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
-      "dev": true
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
     },
     "map-obj": {
       "version": "1.0.1",
@@ -4129,7 +4354,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
       "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
-      "dev": true,
       "requires": {
         "object-visit": "^1.0.0"
       }
@@ -4148,8 +4372,7 @@
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-      "dev": true
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
     "mem": {
       "version": "4.1.0",
@@ -4192,20 +4415,17 @@
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-      "dev": true
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
     },
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-      "dev": true
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
     },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
       "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "dev": true,
       "requires": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -4303,7 +4523,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
       "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
-      "dev": true,
       "requires": {
         "for-in": "^1.0.2",
         "is-extendable": "^1.0.1"
@@ -4313,7 +4532,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
           "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
           "requires": {
             "is-plain-object": "^2.0.4"
           }
@@ -4442,8 +4660,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -4470,7 +4687,6 @@
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
       "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "dev": true,
       "requires": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -4493,8 +4709,7 @@
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
-      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
-      "dev": true
+      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
     "neo-async": {
       "version": "2.6.0",
@@ -4585,32 +4800,96 @@
         }
       }
     },
-    "node-sass": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
-      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
-      "requires": {
-        "async-foreach": "^0.1.3",
-        "chalk": "^1.1.1",
-        "cross-spawn": "^3.0.0",
-        "gaze": "^1.0.0",
-        "get-stdin": "^4.0.1",
-        "glob": "^7.0.3",
-        "in-publish": "^2.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.clonedeep": "^4.3.2",
-        "lodash.mergewith": "^4.6.0",
-        "meow": "^3.7.0",
-        "mkdirp": "^0.5.1",
-        "nan": "^2.10.0",
-        "node-gyp": "^3.8.0",
-        "npmlog": "^4.0.0",
-        "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
-        "stdout-stream": "^1.4.0",
-        "true-case-path": "^1.0.2"
-      }
-    },
+    "node-sass": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
+      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash.assign": "^4.2.0",
+        "lodash.clonedeep": "^4.3.2",
+        "lodash.mergewith": "^4.6.0",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.10.0",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "^2.2.4",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      }
+    },
+    "nodemon": {
+      "version": "1.18.10",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.18.10.tgz",
+      "integrity": "sha512-we51yBb1TfEvZamFchRgcfLbVYgg0xlGbyXmOtbBzDwxwgewYS/YbZ5tnlnsH51+AoSTTsT3A2E/FloUbtH8cQ==",
+      "requires": {
+        "chokidar": "^2.1.0",
+        "debug": "^3.1.0",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.0.4",
+        "pstree.remy": "^1.1.6",
+        "semver": "^5.5.0",
+        "supports-color": "^5.2.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.2",
+        "update-notifier": "^2.5.0"
+      },
+      "dependencies": {
+        "chokidar": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.0.tgz",
+          "integrity": "sha512-5t6G2SH8eO6lCvYOoUpaRnF5Qfd//gd7qJAkwRUw9qlGVkiQ13uwQngqbWWaurOsaAm9+kUGbITADxt6H0XFNQ==",
+          "requires": {
+            "anymatch": "^2.0.0",
+            "async-each": "^1.0.1",
+            "braces": "^2.3.2",
+            "fsevents": "^1.2.7",
+            "glob-parent": "^3.1.0",
+            "inherits": "^2.0.3",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^4.0.0",
+            "normalize-path": "^3.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.2.1",
+            "upath": "^1.1.0"
+          }
+        },
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "nopt": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
@@ -4634,7 +4913,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
       "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
       "requires": {
         "remove-trailing-separator": "^1.0.1"
       }
@@ -7677,7 +7955,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
       "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-      "dev": true,
       "requires": {
         "path-key": "^2.0.0"
       }
@@ -7712,7 +7989,6 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
       "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
-      "dev": true,
       "requires": {
         "copy-descriptor": "^0.1.0",
         "define-property": "^0.2.5",
@@ -7723,7 +7999,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -7732,7 +8007,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -7749,7 +8023,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
       "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.0"
       }
@@ -7770,7 +8043,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
       "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -7785,7 +8057,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "dev": true,
       "requires": {
         "ee-first": "1.1.1"
       }
@@ -7869,8 +8140,7 @@
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-is-promise": {
       "version": "2.0.0",
@@ -7908,6 +8178,17 @@
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
       "dev": true
     },
+    "package-json": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz",
+      "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=",
+      "requires": {
+        "got": "^6.7.1",
+        "registry-auth-token": "^3.0.1",
+        "registry-url": "^3.0.3",
+        "semver": "^5.1.0"
+      }
+    },
     "pako": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.8.tgz",
@@ -7956,14 +8237,12 @@
     "parseurl": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
-      "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=",
-      "dev": true
+      "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
     },
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
-      "dev": true
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
     },
     "path-browserify": {
       "version": "0.0.0",
@@ -7974,8 +8253,7 @@
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-      "dev": true
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
     },
     "path-exists": {
       "version": "2.1.0",
@@ -7993,20 +8271,17 @@
     "path-is-inside": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
-      "dev": true
+      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM="
     },
     "path-key": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-      "dev": true
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
     },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-      "dev": true
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
     "path-type": {
       "version": "1.1.0",
@@ -8094,8 +8369,7 @@
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
-      "dev": true
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
       "version": "7.0.14",
@@ -8202,6 +8476,11 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -8304,7 +8583,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
-      "dev": true,
       "requires": {
         "forwarded": "~0.1.2",
         "ipaddr.js": "1.8.0"
@@ -8326,6 +8604,11 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz",
       "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw=="
     },
+    "pstree.remy": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.6.tgz",
+      "integrity": "sha512-NdF35+QsqD7EgNEI5mkI/X+UwaxVEbQaz9f4IooEmMUv6ZPmlTQYGjBPJGgrlzNdjSvIy4MWMg6Q6vCgBO2K+w=="
+    },
     "public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
@@ -8411,14 +8694,12 @@
     "range-parser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
-      "dev": true
+      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
     },
     "raw-body": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
-      "dev": true,
       "requires": {
         "bytes": "3.0.0",
         "http-errors": "1.6.3",
@@ -8426,6 +8707,17 @@
         "unpipe": "1.0.0"
       }
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
     "react": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
@@ -8571,7 +8863,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
       "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.11",
         "micromatch": "^3.1.10",
@@ -8597,7 +8888,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
       "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^3.0.2",
         "safe-regex": "^1.1.0"
@@ -8614,6 +8904,23 @@
         "regjsparser": "^0.1.4"
       }
     },
+    "registry-auth-token": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
+      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
+      "requires": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "requires": {
+        "rc": "^1.0.1"
+      }
+    },
     "regjsgen": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
@@ -8632,20 +8939,17 @@
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
     },
     "repeat-element": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
-      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==",
-      "dev": true
+      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g=="
     },
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
     "repeating": {
       "version": "2.0.1",
@@ -8726,14 +9030,12 @@
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
     },
     "rimraf": {
       "version": "2.6.3",
@@ -8776,7 +9078,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-      "dev": true,
       "requires": {
         "ret": "~0.1.10"
       }
@@ -8873,11 +9174,18 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
       "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg=="
     },
+    "semver-diff": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
+      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
+      "requires": {
+        "semver": "^5.0.3"
+      }
+    },
     "send": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
-      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -8897,8 +9205,7 @@
         "mime": {
           "version": "1.4.1",
           "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-          "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
-          "dev": true
+          "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
         }
       }
     },
@@ -8927,7 +9234,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
-      "dev": true,
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
@@ -8944,7 +9250,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
       "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^2.0.1",
         "is-extendable": "^0.1.1",
@@ -8956,7 +9261,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -8972,8 +9276,7 @@
     "setprototypeof": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-      "dev": true
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
     },
     "sha.js": {
       "version": "2.4.11",
@@ -9008,7 +9311,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
       "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
       "requires": {
         "shebang-regex": "^1.0.0"
       }
@@ -9016,8 +9318,7 @@
     "shebang-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
     },
     "signal-exit": {
       "version": "3.0.2",
@@ -9034,7 +9335,6 @@
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
       "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-      "dev": true,
       "requires": {
         "base": "^0.11.1",
         "debug": "^2.2.0",
@@ -9050,7 +9350,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -9059,7 +9358,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -9067,8 +9365,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -9076,7 +9373,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
       "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-      "dev": true,
       "requires": {
         "define-property": "^1.0.0",
         "isobject": "^3.0.0",
@@ -9087,7 +9383,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
           "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^1.0.0"
           }
@@ -9096,7 +9391,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -9105,7 +9399,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -9114,7 +9407,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -9127,7 +9419,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
       "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-      "dev": true,
       "requires": {
         "kind-of": "^3.2.0"
       },
@@ -9136,7 +9427,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -9211,7 +9501,6 @@
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
       "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
-      "dev": true,
       "requires": {
         "atob": "^2.1.1",
         "decode-uri-component": "^0.2.0",
@@ -9241,8 +9530,7 @@
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "spdx-correct": {
       "version": "3.1.0",
@@ -9348,7 +9636,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
       "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "dev": true,
       "requires": {
         "extend-shallow": "^3.0.0"
       }
@@ -9382,7 +9669,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
       "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
-      "dev": true,
       "requires": {
         "define-property": "^0.2.5",
         "object-copy": "^0.1.0"
@@ -9392,7 +9678,6 @@
           "version": "0.2.5",
           "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
           "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
           "requires": {
             "is-descriptor": "^0.1.0"
           }
@@ -9402,8 +9687,7 @@
     "statuses": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
-      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
-      "dev": true
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
     "stdout-stream": {
       "version": "1.4.1",
@@ -9489,8 +9773,7 @@
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
-      "dev": true
+      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
     },
     "strip-indent": {
       "version": "1.0.1",
@@ -9500,6 +9783,11 @@
         "get-stdin": "^4.0.1"
       }
     },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+    },
     "style-loader": {
       "version": "0.23.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
@@ -9531,6 +9819,45 @@
         "inherits": "2"
       }
     },
+    "term-size": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
+      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
+      "requires": {
+        "execa": "^0.7.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        }
+      }
+    },
     "terser": {
       "version": "3.16.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-3.16.1.tgz",
@@ -9754,6 +10081,11 @@
       "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==",
       "dev": true
     },
+    "timed-out": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
+    },
     "timers-browserify": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz",
@@ -9773,7 +10105,6 @@
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
       "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       },
@@ -9782,7 +10113,6 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -9793,7 +10123,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
       "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "dev": true,
       "requires": {
         "define-property": "^2.0.2",
         "extend-shallow": "^3.0.2",
@@ -9805,12 +10134,29 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
       "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-      "dev": true,
       "requires": {
         "is-number": "^3.0.0",
         "repeat-string": "^1.6.1"
       }
     },
+    "touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "requires": {
+        "nopt": "~1.0.10"
+      },
+      "dependencies": {
+        "nopt": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+          "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+          "requires": {
+            "abbrev": "1"
+          }
+        }
+      }
+    },
     "tough-cookie": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
@@ -9891,7 +10237,6 @@
       "version": "1.6.16",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
-      "dev": true,
       "requires": {
         "media-typer": "0.3.0",
         "mime-types": "~2.1.18"
@@ -9908,11 +10253,18 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.1.tgz",
       "integrity": "sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA=="
     },
+    "undefsafe": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
+      "integrity": "sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY=",
+      "requires": {
+        "debug": "^2.2.0"
+      }
+    },
     "union-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
       "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
-      "dev": true,
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
@@ -9924,7 +10276,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -9933,7 +10284,6 @@
           "version": "0.4.3",
           "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
           "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-          "dev": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-extendable": "^0.1.1",
@@ -9961,17 +10311,23 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "unique-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
+      "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
+      "requires": {
+        "crypto-random-string": "^1.0.0"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-      "dev": true
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
     },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
       "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
-      "dev": true,
       "requires": {
         "has-value": "^0.3.1",
         "isobject": "^3.0.0"
@@ -9981,7 +10337,6 @@
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
           "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
-          "dev": true,
           "requires": {
             "get-value": "^2.0.3",
             "has-values": "^0.1.4",
@@ -9992,7 +10347,6 @@
               "version": "2.1.0",
               "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
               "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-              "dev": true,
               "requires": {
                 "isarray": "1.0.0"
               }
@@ -10002,16 +10356,64 @@
         "has-values": {
           "version": "0.1.4",
           "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
-          "dev": true
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
         }
       }
     },
+    "unzip-response": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
+      "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
+    },
     "upath": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",
-      "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==",
-      "dev": true
+      "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw=="
+    },
+    "update-notifier": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.5.0.tgz",
+      "integrity": "sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==",
+      "requires": {
+        "boxen": "^1.2.1",
+        "chalk": "^2.0.1",
+        "configstore": "^3.0.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^1.0.10",
+        "is-installed-globally": "^0.1.0",
+        "is-npm": "^1.0.0",
+        "latest-version": "^3.0.0",
+        "semver-diff": "^2.0.0",
+        "xdg-basedir": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
     },
     "uri-js": {
       "version": "4.2.2",
@@ -10024,8 +10426,7 @@
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
     },
     "url": {
       "version": "0.11.0",
@@ -10065,11 +10466,18 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-parse-lax": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
+      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "requires": {
+        "prepend-http": "^1.0.1"
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
-      "dev": true
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
     "util": {
       "version": "0.11.1",
@@ -10088,8 +10496,7 @@
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
-      "dev": true
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
       "version": "3.3.2",
@@ -10114,8 +10521,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
     "verror": {
       "version": "1.10.0",
@@ -10444,9 +10850,9 @@
       }
     },
     "webpack-dev-middleware": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz",
-      "integrity": "sha512-Q9Iyc0X9dP9bAsYskAVJ/hmIZZQwf/3Sy4xCAZgL5cUkjZmUZLt4l5HpbST/Pdgjn3u6pE7u5OdGd1apgzRujA==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.5.2.tgz",
+      "integrity": "sha512-nPmshdt1ckcwWjI0Ubrdp8KroeuprW6xFKYqk0u3MflNMBXvHPnMATsC7/L/enwav2zvLCfj/Usr47qnF3KQyA==",
       "dev": true,
       "requires": {
         "memory-fs": "~0.4.1",
@@ -10674,6 +11080,18 @@
             "has-flag": "^3.0.0"
           }
         },
+        "webpack-dev-middleware": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz",
+          "integrity": "sha512-Q9Iyc0X9dP9bAsYskAVJ/hmIZZQwf/3Sy4xCAZgL5cUkjZmUZLt4l5HpbST/Pdgjn3u6pE7u5OdGd1apgzRujA==",
+          "dev": true,
+          "requires": {
+            "memory-fs": "~0.4.1",
+            "mime": "^2.3.1",
+            "range-parser": "^1.0.3",
+            "webpack-log": "^2.0.0"
+          }
+        },
         "webpack-log": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
@@ -10819,6 +11237,43 @@
         "string-width": "^1.0.2 || 2"
       }
     },
+    "widest-line": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
+      "requires": {
+        "string-width": "^2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "worker-farm": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.6.0.tgz",
@@ -10842,6 +11297,21 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "write-file-atomic": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.2.tgz",
+      "integrity": "sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==",
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "xdg-basedir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
+      "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
+    },
     "xregexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
diff --git a/package.json b/package.json
index 9afddb8d9..65c718283 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --mode development --color --progress --inline --hot --env development",
+    "start": "nodemon --watch src/server/**/*.ts --exec ts-node src/server/index.ts",
     "build": "webpack --env production",
     "test": "mocha -r ts-node/register test/**/*.ts"
   },
@@ -12,6 +12,7 @@
     "@types/chai": "^4.1.7",
     "@types/mocha": "^5.2.5",
     "@types/react-dom": "^16.0.9",
+    "@types/webpack-dev-middleware": "^2.0.2",
     "awesome-typescript-loader": "^5.2.1",
     "chai": "^4.2.0",
     "copy-webpack-plugin": "^4.6.0",
@@ -24,11 +25,14 @@
     "typescript": "^3.3.1",
     "webpack": "^4.29.1",
     "webpack-cli": "^3.2.1",
+    "webpack-dev-middleware": "^3.5.2",
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
+    "@types/express": "^4.16.1",
     "@types/jquery": "^3.3.29",
+    "@types/node": "^10.12.24",
     "@types/prosemirror-commands": "^1.0.1",
     "@types/prosemirror-history": "^1.0.1",
     "@types/prosemirror-keymap": "^1.0.1",
@@ -40,12 +44,15 @@
     "@types/react-table": "^6.7.21",
     "@types/typescript": "^2.0.0",
     "@types/uuid": "^3.4.4",
+    "@types/webpack": "^4.4.24",
+    "express": "^4.16.4",
     "flexlayout-react": "^0.3.3",
     "golden-layout": "^1.5.9",
     "mobx": "^5.9.0",
     "mobx-react": "^5.3.5",
     "mobx-react-devtools": "^6.0.3",
     "node-sass": "^4.11.0",
+    "nodemon": "^1.18.10",
     "normalize.css": "^8.0.1",
     "npm": "^6.7.0",
     "prosemirror-commands": "^1.0.7",
@@ -67,4 +74,4 @@
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/server/index.js b/src/server/index.js
index e69de29bb..15e763f9d 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+var express = require("express");
+var app = express();
+var port = 8080; // default port to listen
+// define a route handler for the default home page
+app.get("/", function (req, res) {
+    res.send("Hello world!");
+});
+// start the Express server
+app.listen(port, function () {
+    console.log("server started at http://localhost:" + port);
+});
diff --git a/src/server/index.ts b/src/server/index.ts
new file mode 100644
index 000000000..f3db7c73b
--- /dev/null
+++ b/src/server/index.ts
@@ -0,0 +1,26 @@
+import * as express from 'express'
+const app = express()
+import * as webpack from 'webpack'
+import * as wdm from 'webpack-dev-middleware';
+import * as path from 'path'
+const config = require('../../webpack.config')
+const compiler = webpack(config)
+const port = 1050; // default port to listen
+
+// define a route handler for the default home page
+app.get("/", (req, res) => {
+    res.sendFile(path.join(__dirname, '../../deploy/index.html'));
+});
+
+app.get("/hello", (req, res) => {
+    res.send("<p>Hello</p>");
+})
+
+app.use(wdm(compiler, {
+    publicPath: config.output.publicPath
+}))
+
+// start the Express server
+app.listen(port, () => {
+    console.log(`server started at http://localhost:${port}`);
+});
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index e91b0be5e..73538c2df 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,6 @@ var webpack = require('webpack');
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
-  devtool: 'eval',
   mode: 'development',
   entry: "./src/client/views/Main.tsx",
   devtool: "source-map",
-- 
cgit v1.2.3-70-g09d2


From 099c5823f05285fc5086c5a433658cf06dc4a04b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 9 Feb 2019 22:06:27 -0500
Subject: Got Hot-Module-Reloading working

---
 package-lock.json         | 22 ++++++++++++++++++++++
 package.json              |  6 ++++--
 src/client/views/Main.tsx |  2 +-
 src/server/index.ts       |  3 +++
 webpack.config.js         |  7 +++++--
 5 files changed, 35 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 07fe093fd..535c348d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -297,6 +297,16 @@
         "@types/webpack": "*"
       }
     },
+    "@types/webpack-hot-middleware": {
+      "version": "2.16.4",
+      "resolved": "https://registry.npmjs.org/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.16.4.tgz",
+      "integrity": "sha512-z9np8JOIx7P66GMPJn+FkFcClo1RZZvmwVp9GAfupcEF1i+6+QmVaozTPZwpHexukgVy0F7RRQkybAeV2y+RjA==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/webpack": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.11",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@@ -11139,6 +11149,18 @@
         }
       }
     },
+    "webpack-hot-middleware": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.24.3.tgz",
+      "integrity": "sha512-pPlmcdoR2Fn6UhYjAhp1g/IJy1Yc9hD+T6O9mjRcWV2pFbBjIFoJXhP0CoD0xPOhWJuWXuZXGBga9ybbOdzXpg==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "0.0.7",
+        "html-entities": "^1.2.0",
+        "querystring": "^0.2.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
     "webpack-log": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz",
diff --git a/package.json b/package.json
index 65c718283..6697b5f47 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/mocha": "^5.2.5",
     "@types/react-dom": "^16.0.9",
     "@types/webpack-dev-middleware": "^2.0.2",
+    "@types/webpack-hot-middleware": "^2.16.4",
     "awesome-typescript-loader": "^5.2.1",
     "chai": "^4.2.0",
     "copy-webpack-plugin": "^4.6.0",
@@ -26,7 +27,8 @@
     "webpack": "^4.29.1",
     "webpack-cli": "^3.2.1",
     "webpack-dev-middleware": "^3.5.2",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.1.14",
+    "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
@@ -74,4 +76,4 @@
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index fc6f0a208..9a359e868 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -44,7 +44,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 450, y: 500, title: "cat 1"
+        x: 450, y: 100, title: "cat 1"
     });
     doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
diff --git a/src/server/index.ts b/src/server/index.ts
index f3db7c73b..640ad8180 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,6 +2,7 @@ import * as express from 'express'
 const app = express()
 import * as webpack from 'webpack'
 import * as wdm from 'webpack-dev-middleware';
+import * as whm from 'webpack-hot-middleware';
 import * as path from 'path'
 const config = require('../../webpack.config')
 const compiler = webpack(config)
@@ -20,6 +21,8 @@ app.use(wdm(compiler, {
     publicPath: config.output.publicPath
 }))
 
+app.use(whm(compiler))
+
 // start the Express server
 app.listen(port, () => {
     console.log(`server started at http://localhost:${port}`);
diff --git a/webpack.config.js b/webpack.config.js
index 73538c2df..478c900b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
   mode: 'development',
-  entry: "./src/client/views/Main.tsx",
+  entry: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'],
   devtool: "source-map",
   node: {
     fs: 'empty',
@@ -50,7 +50,10 @@ module.exports = {
     }]
   },
   plugins: [
-    new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }])
+    new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }]),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
   ],
   devServer: {
     compress: false,
-- 
cgit v1.2.3-70-g09d2


From d89b1039ecc05d4d6c40fc38f51da9cee0c00af6 Mon Sep 17 00:00:00 2001
From: Hannah <hannah_chow@brown.edu>
Date: Sun, 10 Feb 2019 22:13:15 -0500
Subject: Small changes for starting annotations

---
 src/client/views/nodes/AnnotationView.tsx   | 0
 src/client/views/nodes/FormattedTextBox.tsx | 2 --
 2 files changed, 2 deletions(-)
 create mode 100644 src/client/views/nodes/AnnotationView.tsx

(limited to 'src')

diff --git a/src/client/views/nodes/AnnotationView.tsx b/src/client/views/nodes/AnnotationView.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8bc4c902c..eead43b9f 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1,5 +1,4 @@
 import { action, IReactionDisposer, reaction } from "mobx";
-import { observer } from "mobx-react"
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
@@ -31,7 +30,6 @@ import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView
 //  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
 //  this will edit the document and assign the new value to that field.
 //]
-@observer
 export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
-- 
cgit v1.2.3-70-g09d2


From 400a14c03c10f07f3e4cfedd1df963d9263e98c8 Mon Sep 17 00:00:00 2001
From: Hannah <hannah_chow@brown.edu>
Date: Mon, 11 Feb 2019 01:22:49 -0500
Subject: From last

---
 src/client/views/nodes/AnnotationView.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src')

diff --git a/src/client/views/nodes/AnnotationView.tsx b/src/client/views/nodes/AnnotationView.tsx
index e69de29bb..2e50370a1 100644
--- a/src/client/views/nodes/AnnotationView.tsx
+++ b/src/client/views/nodes/AnnotationView.tsx
@@ -0,0 +1,12 @@
+import React = require('react')
+import { CollectionViewProps } from '../collections/CollectionViewBase';
+
+export class AnnotationView extends React.Component<CollectionViewProps> {
+
+    render() {
+        return (
+            <></>
+        );
+    }
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 9f8653ab3d7f82a5d82b925bf339bef8d6723f5c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 11 Feb 2019 17:37:03 -0500
Subject: added framework for annotation overlays -- see ImageBox

---
 src/client/documents/Documents.ts                  | 14 +++--
 src/client/views/Main.tsx                          | 12 ++--
 .../views/collections/CollectionDockingView.tsx    |  4 +-
 .../views/collections/CollectionFreeFormView.tsx   | 69 ++++++++++++++--------
 .../views/collections/CollectionSchemaView.tsx     | 14 +++--
 .../views/collections/CollectionViewBase.tsx       |  1 +
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  3 +-
 src/client/views/nodes/DocumentView.tsx            | 20 ++++++-
 src/client/views/nodes/ImageBox.scss               |  1 +
 src/client/views/nodes/ImageBox.tsx                | 10 +++-
 src/fields/Key.ts                                  |  3 +
 11 files changed, 101 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6925234fe..12eddaec9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -115,11 +115,13 @@ export namespace Documents {
             imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
             imageProto.Set(KeyStore.X, new NumberField(0));
             imageProto.Set(KeyStore.Y, new NumberField(0));
-            imageProto.Set(KeyStore.Width, new NumberField(300));
-            imageProto.Set(KeyStore.Height, new NumberField(300));
-            imageProto.Set(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
+            imageProto.Set(KeyStore.NativeWidth, new NumberField(606));
+            imageProto.Set(KeyStore.Width, new NumberField(606));
+            imageProto.Set(KeyStore.Height, new NumberField(446));
+            imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
+            imageProto.Set(KeyStore.AnnotatedLayout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+            imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
             Server.AddDocument(imageProto);
             return imageProto;
         }
@@ -130,6 +132,10 @@ export namespace Documents {
         let doc = GetImagePrototype().MakeDelegate();
         setupOptions(doc, options);
         doc.Set(KeyStore.Data, new ImageField(new URL(url)));
+
+        let annotation = Documents.TextDocument({ title: "hello" });
+        Server.AddDocument(annotation);
+        doc.Set(KeyStore.Annotations, new ListField([annotation]));
         Server.AddDocument(doc);
         var sdoc = Server.GetField(doc.Id) as Document;
         return sdoc;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 9a359e868..31a709744 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -43,11 +43,11 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     let doc2 = doc1.MakeDelegate();
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
-    let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+    let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
         x: 450, y: 100, title: "cat 1"
     });
-    doc3.Set(KeyStore.Data, new ImageField);
-    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+    //doc3.Set(KeyStore.Data, new ImageField);
+    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
         x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
     }));
     schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
@@ -61,7 +61,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
     //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
     // });
-    let docset2 = new Array<Document>(doc4);//, doc1, doc3);
+    let docset2 = [doc4, doc1, doc3];
     let doc6 = Documents.CollectionDocument(docset2, {
         x: 350, y: 100, width: 600, height: 600, title: "docking collection"
     });
@@ -76,7 +76,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     // mainNodes.Data.push(doc5);
     // mainNodes.Data.push(doc1);
     //mainNodes.Data.push(doc2);
-    //mainNodes.Data.push(doc6);
+    mainNodes.Data.push(doc6);
     mainContainer.Set(KeyStore.Data, mainNodes);
 }
 //}
@@ -84,7 +84,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
 ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
+        <DocumentView Document={mainContainer} Scaling={1} ContainingCollectionView={undefined} DocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
     </div>),
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9aee9c10f..037b85712 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -95,7 +95,7 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         for (var i: number = 0; i < value.length; i++) {
             if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
+                return (<DocumentView key={value[i].Id} Scaling={1} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
             }
         }
         if (component === "text") {
@@ -236,7 +236,7 @@ export class CollectionDockingView extends CollectionViewBase {
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
                 ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
+                    <DocumentView key={state.doc.Id} Scaling={1} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
                 ),
                     document.getElementById(containingDiv)
                 );
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf29d000..9cf8f2e35 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -22,11 +22,25 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private _nodeContainerRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
     private _lastY: number = 0;
+    private _downX: number = 0;
+    private _downY: number = 0;
 
     constructor(props: CollectionViewProps) {
         super(props);
     }
 
+    @computed
+    get isAnnotationOverlay() { return this.props.CollectionFieldKey == KeyStore.Annotations; }
+
+    @computed
+    get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); }
+
+    @computed
+    get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); }
+
+    @computed
+    get resizeScaling() { return this.isAnnotationOverlay ? this.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) / this.nativeWidth : 1; }
+
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         const doc = de.data["document"];
@@ -38,12 +52,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
             }
             const xOffset = de.data["xOffset"] as number || 0;
             const yOffset = de.data["yOffset"] as number || 0;
-            const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            let sscale = this.props.ContainingDocumentView!.props.Document.GetData(KeyStore.Scale, NumberField, Number(1))
+            const { translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
+            const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
             const screenX = de.x - xOffset;
             const screenY = de.y - yOffset;
-            const docX = (screenX - translateX) / sscale / scale;
-            const docY = (screenY - translateY) / sscale / scale;
+            const docX = (screenX - translateX) / currScale;
+            const docY = (screenY - translateY) / currScale;
             doc.x = docX;
             doc.y = docY;
             this.bringToFront(doc);
@@ -69,8 +83,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
-            this._lastX = e.pageX;
-            this._lastY = e.pageY;
+            this._downX = this._lastX = e.pageX;
+            this._downY = this._lastY = e.pageY;
         }
     }
 
@@ -79,20 +93,23 @@ export class CollectionFreeFormView extends CollectionViewBase {
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
         e.stopPropagation();
-        SelectionManager.DeselectAll();
+        if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+            if (!SelectionManager.IsSelected(this.props.ContainingDocumentView as CollectionFreeFormDocumentView)) {
+                SelectionManager.SelectDoc(this.props.ContainingDocumentView as CollectionFreeFormDocumentView, false);
+            }
+        }
     }
 
     @action
     onPointerMove = (e: PointerEvent): void => {
-        var me = this;
         if (!e.cancelBubble && this.active) {
             e.preventDefault();
             e.stopPropagation();
             let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
-            let x = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-            let y = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
-            this.props.DocumentForCollection.SetData(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField);
-            this.props.DocumentForCollection.SetData(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
+            let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+            let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+
+            this.SetPan(x + (e.pageX - this._lastX) / currScale, y + (e.pageY - this._lastY) / currScale);
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -105,16 +122,18 @@ export class CollectionFreeFormView extends CollectionViewBase {
         let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
         var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
+        var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
 
-        var newContainerX = LocalX * deltaScale + Panxx + Xx;
-        var newContainerY = LocalY * deltaScale + Panyy + Yy;
-
-        let dx = ContainerX - newContainerX;
-        let dy = ContainerY - newContainerY;
+        this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
+        this.SetPan(ContainerX - (LocalX * newDeltaScale + Xx), ContainerY - (LocalY * newDeltaScale + Yy));
+    }
 
-        this.props.DocumentForCollection.Set(KeyStore.Scale, new NumberField(deltaScale));
-        this.props.DocumentForCollection.SetData(KeyStore.PanX, Panxx + dx, NumberField);
-        this.props.DocumentForCollection.SetData(KeyStore.PanY, Panyy + dy, NumberField);
+    @action
+    private SetPan(panX: number, panY: number) {
+        const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX));
+        const newPanY = Math.min(0, panY);
+        this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
+        this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
 
     @action
@@ -173,11 +192,10 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     render() {
-        const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
-        const value: Document[] = Document.GetList<Document>(fieldKey, []);
+        const Document: Document = this.props.DocumentForCollection;
+        const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
         const panx: number = Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = Document.GetNumber(KeyStore.PanY, 0);
-        const currScale: number = Document.GetNumber(KeyStore.Scale, 1);
 
         return (
             <div className="border" style={{
@@ -190,11 +208,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     onDrop={this.onDrop}
                     onDragOver={this.onDragOver}
                     ref={this._containerRef}>
-                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
+                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
 
                         <div className="node-container" ref={this._nodeContainerRef}>
+                            {this.props.BackgroundView}
                             {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
+                                return (<CollectionFreeFormDocumentView Scaling={this.resizeScaling} key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
                             })}
                         </div>
                     </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2d5bd6c99..b2ee2f5f2 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -86,10 +86,11 @@ export class CollectionSchemaView extends CollectionViewBase {
         if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
             e.stopPropagation();
         }
-        if (e.button === 2 && this.active) {
-            e.stopPropagation();
-            e.preventDefault();
-        } else {
+        // if (e.button === 2 && this.active) {
+        //     e.stopPropagation();
+        //     e.preventDefault();
+        // } else 
+        {
             if (e.buttons === 1 && this.active) {
                 e.stopPropagation();
             }
@@ -104,7 +105,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         let content;
         if (this.selectedIndex != -1) {
             content = (
-                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+                <DocumentView Scaling={1} Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
             )
         } else {
             content = <div />
@@ -119,7 +120,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                             page={0}
                             showPagination={false}
                             style={{
-                                display: "inline-block"
+                                display: "inline-block",
+                                width: "100%"
                             }}
                             columns={columns.map(col => {
                                 return (
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 09e8ec729..e854d3077 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -16,6 +16,7 @@ export interface CollectionViewProps {
     CollectionFieldKey: Key;
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
+    BackgroundView: Opt<DocumentView>;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1d53cedc4..a183db828 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -48,7 +48,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get transform(): string {
-        return `translate(${this.x}px, ${this.y}px)`;
+        return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
     }
 
     @computed
@@ -207,6 +207,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
             <div className="node" ref={this._mainCont} style={{
+                transformOrigin: "left top",
                 transform: freestyling ? this.transform : "",
                 width: freestyling ? this.width : "100%",
                 height: freestyling ? this.height : "100%",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 730ce62f2..bba5becc3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -21,6 +21,7 @@ export interface DocumentViewProps {
     Document: Document;
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
+    Scaling: number;
 }
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
@@ -34,6 +35,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
     }
 
+    @computed
+    get annotatedlayout(): string {
+        return this.props.Document.GetData(KeyStore.AnnotatedLayout, TextField, String("<p>Error loading layout data</p>"));
+    }
+
     @computed
     get layoutKeys(): Key[] {
         return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
@@ -51,7 +57,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     public get ScalingToScreenSpace(): number {
         if (this.props.ContainingCollectionView != undefined &&
             this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
+            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
             return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
         }
         return 1;
@@ -81,7 +87,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             Yy = ry - COLLECTION_BORDER_WIDTH;
         }
 
-        let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+        let Ss = this.props.Document.GetNumber(KeyStore.Scale, 1);
         let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
         let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
         let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
@@ -115,7 +121,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // first transform the local point into the parent collection's coordinate space.
         let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
         if (containingDocView != undefined) {
-            let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+            let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1) * this.props.Scaling;
             let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
@@ -138,6 +144,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (bindings.DocumentView === undefined) {
             bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
         }
+        var annotated = <JsxParser
+            components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+            bindings={bindings}
+            jsx={this.annotatedlayout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
+        />;
+        bindings["BackgroundView"] = this.annotatedlayout ? annotated : null;
         return (
             <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
                 <JsxParser
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 136fda1d0..83392311b 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,6 +1,7 @@
 
 .imageBox-cont {
     padding: 0vw;
+    position: absolute
 }
 
 .imageBox-button {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ab20f140c..b96e717ed 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -9,7 +9,8 @@ import { FieldViewProps, FieldView } from './FieldView';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
 import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
+import { observable, action, spy } from 'mobx';
+import { KeyStore } from '../../../fields/Key';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
@@ -67,7 +68,9 @@ export class ImageBox extends React.Component<FieldViewProps> {
                 mainSrc={images[this._photoIndex]}
                 nextSrc={images[(this._photoIndex + 1) % images.length]}
                 prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
-                onCloseRequest={() => this.setState({ isOpen: false })}
+                onCloseRequest={action(() =>
+                    this._isOpen = false
+                )}
                 onMovePrevRequest={action(() =>
                     this._photoIndex = (this._photoIndex + images.length - 1) % images.length
                 )}
@@ -82,10 +85,11 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+        let width = this.props.doc.GetNumber(KeyStore.Width, 1);
 
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width="100%" alt="Image not found" />
+                <img src={path} width={width} alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
     }
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 993102613..67a5f86fb 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -42,11 +42,14 @@ export namespace KeyStore {
     export const PanX = new Key("PanX");
     export const PanY = new Key("PanY");
     export const Scale = new Key("Scale");
+    export const NativeWidth = new Key("NativeWidth");
     export const Width = new Key("Width");
     export const Height = new Key("Height");
     export const ZIndex = new Key("ZIndex");
     export const Data = new Key("Data");
+    export const Annotations = new Key("Annotations");
     export const Layout = new Key("Layout");
+    export const AnnotatedLayout = new Key("AnnotatedLayout");
     export const LayoutKeys = new Key("LayoutKeys");
     export const LayoutFields = new Key("LayoutFields");
     export const ColumnsKey = new Key("SchemaColumns");
-- 
cgit v1.2.3-70-g09d2


From 793cc99ab134bc5aa4667c95def851ce08d35146 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 11 Feb 2019 21:17:24 -0500
Subject: added aspect resizing.  fixed pinch zoom for macs

---
 src/client/documents/Documents.ts                   | 15 ++++++++++++---
 src/client/views/DocumentDecorations.tsx            |  6 ++++--
 src/client/views/Main.tsx                           |  4 ++--
 .../views/collections/CollectionFreeFormView.tsx    | 17 +++++++++++------
 .../views/nodes/CollectionFreeFormDocumentView.tsx  | 21 ++++++++++++++++++---
 src/fields/Key.ts                                   |  1 +
 6 files changed, 48 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 12eddaec9..84aaaa78f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -17,6 +17,8 @@ interface DocumentOptions {
     y?: number;
     width?: number;
     height?: number;
+    nativeWidth?: number;
+    nativeHeight?: number;
     title?: string;
 }
 
@@ -34,6 +36,12 @@ export namespace Documents {
         if (options.height) {
             doc.SetData(KeyStore.Height, options.height, NumberField);
         }
+        if (options.nativeWidth) {
+            doc.SetData(KeyStore.NativeWidth, options.nativeWidth, NumberField);
+        }
+        if (options.nativeHeight) {
+            doc.SetData(KeyStore.NativeHeight, options.nativeHeight, NumberField);
+        }
         if (options.title) {
             doc.SetData(KeyStore.Title, options.title, TextField);
         }
@@ -115,9 +123,10 @@ export namespace Documents {
             imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
             imageProto.Set(KeyStore.X, new NumberField(0));
             imageProto.Set(KeyStore.Y, new NumberField(0));
-            imageProto.Set(KeyStore.NativeWidth, new NumberField(606));
-            imageProto.Set(KeyStore.Width, new NumberField(606));
-            imageProto.Set(KeyStore.Height, new NumberField(446));
+            imageProto.Set(KeyStore.NativeWidth, new NumberField(300));
+            imageProto.Set(KeyStore.NativeHeight, new NumberField(300));
+            imageProto.Set(KeyStore.Width, new NumberField(300));
+            imageProto.Set(KeyStore.Height, new NumberField(300));
             imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
             imageProto.Set(KeyStore.AnnotatedLayout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8a94bff36..7efaa5533 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -111,8 +111,10 @@ export class DocumentDecorations extends React.Component {
                 let actualdH = Math.max(element.height + (dH * scale), 20);
                 element.x += dX * (actualdW - element.width);
                 element.y += dY * (actualdH - element.height);
-                element.width = actualdW;
-                element.height = actualdH;
+                if (Math.abs(dW) > Math.abs(dH))
+                    element.width = actualdW;
+                else
+                    element.height = actualdH;
             }
         })
     }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 31a709744..8d474698f 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -44,11 +44,11 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
-        x: 450, y: 100, title: "cat 1"
+        x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
     });
     //doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
-        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386
     }));
     schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
     schemaDocs[4].SetData(KS.Author, "Bob", TextField);
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf8f2e35..bf24965dc 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -34,6 +34,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @computed
     get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed
+    get nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); }
 
     @computed
     get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); }
@@ -56,10 +58,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
             const screenX = de.x - xOffset;
             const screenY = de.y - yOffset;
-            const docX = (screenX - translateX) / currScale;
-            const docY = (screenY - translateY) / currScale;
-            doc.x = docX;
-            doc.y = docY;
+            doc.x = (screenX - translateX) / currScale;
+            doc.y = (screenY - translateY) / currScale;
             this.bringToFront(doc);
         }
         e.stopPropagation();
@@ -118,10 +118,15 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
+        e.preventDefault();
+        let modes = ['pixels', 'lines', 'page'];
+        let coefficient = 1000;
+        if (modes[e.deltaMode] == 'pixels') coefficient = 50;
+        else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
 
         let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
-        var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
+        var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
         var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
 
         this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
@@ -131,7 +136,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     private SetPan(panX: number, panY: number) {
         const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX));
-        const newPanY = Math.min(0, panY);
+        const newPanY = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeHeight, Math.min(0, panY));
         this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
         this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a183db828..fafb470f9 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -53,20 +53,35 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get width(): number {
-        return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
+        return this.props.Document.GetNumber(KeyStore.Width, 0);
+    }
+
+    @computed
+    get nativeWidth(): number {
+        return this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
     }
 
     set width(w: number) {
         this.props.Document.SetData(KeyStore.Width, w, NumberField)
+        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+            this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
+        }
     }
 
     @computed
     get height(): number {
-        return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
+        return this.props.Document.GetNumber(KeyStore.Height, 0);
+    }
+    @computed
+    get nativeHeight(): number {
+        return this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
     }
 
     set height(h: number) {
-        this.props.Document.SetData(KeyStore.Height, h, NumberField)
+        this.props.Document.SetData(KeyStore.Height, h, NumberField);
+        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+            this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
+        }
     }
 
     @computed
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 67a5f86fb..13bdd01d4 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -43,6 +43,7 @@ export namespace KeyStore {
     export const PanY = new Key("PanY");
     export const Scale = new Key("Scale");
     export const NativeWidth = new Key("NativeWidth");
+    export const NativeHeight = new Key("NativeHeight");
     export const Width = new Key("Width");
     export const Height = new Key("Height");
     export const ZIndex = new Key("ZIndex");
-- 
cgit v1.2.3-70-g09d2


From f3359bd32f8c4ecb612d3c95f198d5e248ab6450 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 11 Feb 2019 21:28:09 -0500
Subject: renamed AnnotatedLaout to BackgroundLayout

---
 src/client/documents/Documents.ts       | 2 +-
 src/client/views/nodes/DocumentView.tsx | 8 ++++----
 src/fields/Key.ts                       | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 84aaaa78f..8fbf99da6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -128,7 +128,7 @@ export namespace Documents {
             imageProto.Set(KeyStore.Width, new NumberField(300));
             imageProto.Set(KeyStore.Height, new NumberField(300));
             imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
-            imageProto.Set(KeyStore.AnnotatedLayout, new TextField(ImageBox.LayoutString()));
+            imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
             imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
             Server.AddDocument(imageProto);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bba5becc3..a2f8ceebe 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -36,8 +36,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @computed
-    get annotatedlayout(): string {
-        return this.props.Document.GetData(KeyStore.AnnotatedLayout, TextField, String("<p>Error loading layout data</p>"));
+    get backgroundLayout(): string {
+        return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
     }
 
     @computed
@@ -147,11 +147,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var annotated = <JsxParser
             components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
             bindings={bindings}
-            jsx={this.annotatedlayout}
+            jsx={this.backgroundLayout}
             showWarnings={true}
             onError={(test: any) => { console.log(test) }}
         />;
-        bindings["BackgroundView"] = this.annotatedlayout ? annotated : null;
+        bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
         return (
             <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
                 <JsxParser
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 13bdd01d4..8d92b89b6 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -50,7 +50,7 @@ export namespace KeyStore {
     export const Data = new Key("Data");
     export const Annotations = new Key("Annotations");
     export const Layout = new Key("Layout");
-    export const AnnotatedLayout = new Key("AnnotatedLayout");
+    export const BackgroundLayout = new Key("BackgroundLayout");
     export const LayoutKeys = new Key("LayoutKeys");
     export const LayoutFields = new Key("LayoutFields");
     export const ColumnsKey = new Key("SchemaColumns");
-- 
cgit v1.2.3-70-g09d2


From dad5b1f21df41444a577db1ee108980b8b8ab0a9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 11 Feb 2019 21:42:49 -0500
Subject: Changed FieldId type around to clean some stuff up

---
 src/client/Server.ts                               | 23 ++++++++++++----------
 src/client/SocketStub.ts                           |  6 +++---
 src/client/documents/Documents.ts                  |  4 ++--
 src/client/views/nodes/AnnotationView.tsx          | 12 -----------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  3 ++-
 src/client/views/nodes/FormattedTextBox.tsx        |  1 +
 src/fields/Document.ts                             |  7 +++----
 src/fields/Field.ts                                | 10 +++++-----
 8 files changed, 29 insertions(+), 37 deletions(-)
 delete mode 100644 src/client/views/nodes/AnnotationView.tsx

(limited to 'src')

diff --git a/src/client/Server.ts b/src/client/Server.ts
index 85e55a84e..0cb6e17c2 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -1,16 +1,16 @@
-import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "../fields/Field"
+import { Field, FieldWaiting, FieldId, FIELD_WAITING, FieldValue, Opt } from "../fields/Field"
 import { Key, KeyStore } from "../fields/Key"
 import { ObservableMap, action } from "mobx";
 import { Document } from "../fields/Document"
 import { SocketStub } from "./SocketStub";
 
 export class Server {
-    private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
+    private static ClientFieldsCached: ObservableMap<FieldId, Field | FIELD_WAITING> = new ObservableMap();
 
     // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
     // Call this is from within a reaction and test whether the return value is FieldWaiting.
     // 'hackTimeout' is here temporarily for simplicity when debugging things.
-    public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
+    public static GetField(fieldid: FieldId, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
         if (!this.ClientFieldsCached.get(fieldid)) {
             this.ClientFieldsCached.set(fieldid, FieldWaiting);
             //simulating a server call with a registered callback action
@@ -24,15 +24,18 @@ export class Server {
     }
 
     static times = 0; // hack for testing
-    public static GetDocumentField(doc: Document, key: Key) {
+    public static GetDocumentField(doc: Document, key: Key): FieldValue<Field> {
         var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
 
-        return this.GetField(doc._proxies.get(key),
-            action((fieldfromserver: Field) => {
-                doc._proxies.delete(key);
-                doc.fields.set(key, fieldfromserver);
-            })
-            , hackTimeout);
+        let fieldId = doc._proxies.get(key);
+        if (fieldId) {
+            return this.GetField(fieldId,
+                action((fieldfromserver: Field) => {
+                    doc._proxies.delete(key);
+                    doc.fields.set(key, fieldfromserver);
+                })
+                , hackTimeout);
+        }
     }
 
     public static AddDocument(document: Document) {
diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
index 58dedbf82..cea30cb8b 100644
--- a/src/client/SocketStub.ts
+++ b/src/client/SocketStub.ts
@@ -1,11 +1,11 @@
-import { Field, FIELD_ID } from "../fields/Field"
+import { Field, FieldId } from "../fields/Field"
 import { Key, KeyStore } from "../fields/Key"
 import { ObservableMap, action } from "mobx";
 import { Document } from "../fields/Document"
 
 export class SocketStub {
 
-    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
+    static FieldStore: ObservableMap<FieldId, Field> = new ObservableMap();
     public static SEND_ADD_DOCUMENT(document: Document) {
 
         // Send a serialized version of the document to the server
@@ -19,7 +19,7 @@ export class SocketStub {
         document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id));
     }
 
-    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void, timeout: number) {
+    public static SEND_FIELD_REQUEST(fieldid: FieldId, callback: (field: Field) => void, timeout: number) {
 
         if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that.
             callback(this.FieldStore.get(fieldid) as Field);
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6925234fe..575112c85 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -10,7 +10,7 @@ import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"
 import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "../views/nodes/ImageBox";
 import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
-import { FIELD_ID } from "../../fields/Field";
+import { FieldId } from "../../fields/Field";
 
 interface DocumentOptions {
     x?: number;
@@ -107,7 +107,7 @@ export namespace Documents {
     }
 
 
-    let imageProtoId: FIELD_ID;
+    let imageProtoId: FieldId;
     function GetImagePrototype(): Document {
         if (imageProtoId === undefined) {
             let imageProto = new Document();
diff --git a/src/client/views/nodes/AnnotationView.tsx b/src/client/views/nodes/AnnotationView.tsx
deleted file mode 100644
index 2e50370a1..000000000
--- a/src/client/views/nodes/AnnotationView.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React = require('react')
-import { CollectionViewProps } from '../collections/CollectionViewBase';
-
-export class AnnotationView extends React.Component<CollectionViewProps> {
-
-    render() {
-        return (
-            <></>
-        );
-    }
-
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1d53cedc4..a111a9936 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -17,6 +17,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
+    // private _mainCont = React.createRef<HTMLDivElement>();
 
     constructor(props: DocumentViewProps) {
         super(props);
@@ -216,7 +217,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} DocumentView={this} />
+                <DocumentView {...this.props} DocumentView={this.props.DocumentView} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index eead43b9f..8f959762a 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -12,6 +12,7 @@ import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
+import { observer } from "mobx-react";
 
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 6f9752a8e..c682d8e94 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,15 +1,14 @@
-import { Field, Cast, Opt, FieldWaiting, FIELD_ID, FieldValue } from "./Field"
+import { Field, Cast, Opt, FieldWaiting, FieldId, FieldValue } from "./Field"
 import { Key, KeyStore } from "./Key"
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action, observable } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
-import { findDOMNode } from "react-dom";
 import { Server } from "../client/Server";
 
 export class Document extends Field {
-    public fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
-    public _proxies: ObservableMap<Key, FIELD_ID> = new ObservableMap();
+    public fields: ObservableMap<Key, Field> = new ObservableMap();
+    public _proxies: ObservableMap<Key, FieldId> = new ObservableMap();
 
     @computed
     public get Title() {
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 6adee9b61..4a3968699 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -10,21 +10,21 @@ export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T
     return undefined;
 }
 
-export let FieldWaiting: FIELD_WAITING = "<Waiting>";
+export const FieldWaiting: FIELD_WAITING = "<Waiting>";
 export type FIELD_WAITING = "<Waiting>";
-export type FIELD_ID = string | undefined;
+export type FieldId = string;
 export type Opt<T> = T | undefined;
 export type FieldValue<T> = Opt<T> | FIELD_WAITING;
 
 export abstract class Field {
     //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>();
 
-    private id: FIELD_ID;
-    get Id(): FIELD_ID {
+    private id: FieldId;
+    get Id(): FieldId {
         return this.id;
     }
 
-    constructor(id: FIELD_ID = undefined) {
+    constructor(id: Opt<FieldId> = undefined) {
         this.id = id || Utils.GenerateGuid();
     }
 
-- 
cgit v1.2.3-70-g09d2


From e2ca8fa7ec95768ef37914b909ee47fbca6b1251 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 12 Feb 2019 00:44:01 -0500
Subject: Added transforms to everything, not being used yet

---
 package-lock.json                                  | 199 ++++++++++++++++++++-
 package.json                                       |   1 +
 src/client/util/Transform.ts                       |  94 ++++++++++
 src/client/views/Main.tsx                          |   5 +-
 .../views/collections/CollectionDockingView.tsx    |  11 +-
 .../views/collections/CollectionFreeFormView.tsx   |  24 ++-
 .../views/collections/CollectionSchemaView.tsx     |   6 +-
 .../views/collections/CollectionViewBase.tsx       |  11 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   7 +-
 src/client/views/nodes/DocumentView.tsx            |   8 +-
 10 files changed, 354 insertions(+), 12 deletions(-)
 create mode 100644 src/client/util/Transform.ts

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 535c348d5..a4939f1cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -684,6 +684,11 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -745,6 +750,11 @@
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
     },
+    "ast-types": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
+      "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk="
+    },
     "async": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
@@ -883,6 +893,11 @@
         }
       }
     },
+    "base62": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.8.tgz",
+      "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA=="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -1445,8 +1460,7 @@
     "commander": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
-      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
-      "dev": true
+      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -1454,6 +1468,36 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
+    "commoner": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz",
+      "integrity": "sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=",
+      "requires": {
+        "commander": "^2.5.0",
+        "detective": "^4.3.1",
+        "glob": "^5.0.15",
+        "graceful-fs": "^4.1.2",
+        "iconv-lite": "^0.4.5",
+        "mkdirp": "^0.5.0",
+        "private": "^0.1.6",
+        "q": "^1.1.2",
+        "recast": "^0.11.17"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "5.0.15",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+          "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
@@ -1594,6 +1638,11 @@
         "serialize-javascript": "^1.4.0"
       }
     },
+    "core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1884,6 +1933,11 @@
         }
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
+    },
     "del": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz",
@@ -1969,6 +2023,15 @@
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
+    "detective": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz",
+      "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==",
+      "requires": {
+        "acorn": "^5.2.1",
+        "defined": "^1.0.0"
+      }
+    },
     "diff": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
@@ -2127,6 +2190,15 @@
         "tapable": "^1.0.0"
       }
     },
+    "envify": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz",
+      "integrity": "sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=",
+      "requires": {
+        "jstransform": "^11.0.3",
+        "through": "~2.3.4"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -2196,6 +2268,11 @@
         "estraverse": "^4.1.1"
       }
     },
+    "esprima-fb": {
+      "version": "15001.1.0-dev-harmony-fb",
+      "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz",
+      "integrity": "sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE="
+    },
     "esrecurse": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -2479,6 +2556,18 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fbjs": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.6.1.tgz",
+      "integrity": "sha1-lja3cF9bqWhNRLcveDISVK/IYPc=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "promise": "^7.0.3",
+        "ua-parser-js": "^0.7.9",
+        "whatwg-fetch": "^0.9.0"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -3649,6 +3738,11 @@
       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
     },
+    "immutable": {
+      "version": "4.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.12.tgz",
+      "integrity": "sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A=="
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -4092,6 +4186,11 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-stringify-pretty-compact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-1.2.0.tgz",
+      "integrity": "sha512-/11Pj1OyX814QMKO7K8l85SHPTr/KsFxHp8GE2zVa0BtJgGimDjXHfM3FhC7keQdWDea7+nXf+f1de7ATZcZkQ=="
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -4122,6 +4221,46 @@
         "verror": "1.10.0"
       }
     },
+    "jstransform": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz",
+      "integrity": "sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=",
+      "requires": {
+        "base62": "^1.1.0",
+        "commoner": "^0.10.1",
+        "esprima-fb": "^15001.1.0-dev-harmony-fb",
+        "object-assign": "^2.0.0",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
+          "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo="
+        }
+      }
+    },
+    "jsx-to-string": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsx-to-string/-/jsx-to-string-1.4.0.tgz",
+      "integrity": "sha1-Ztw013PaufQP6ZPP+ZQOXaZVtwU=",
+      "requires": {
+        "immutable": "^4.0.0-rc.9",
+        "json-stringify-pretty-compact": "^1.0.1",
+        "react": "^0.14.0"
+      },
+      "dependencies": {
+        "react": {
+          "version": "0.14.9",
+          "resolved": "https://registry.npmjs.org/react/-/react-0.14.9.tgz",
+          "integrity": "sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=",
+          "requires": {
+            "envify": "^3.0.0",
+            "fbjs": "^0.6.1"
+          }
+        }
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8491,6 +8630,11 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -8502,6 +8646,14 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -8659,6 +8811,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -8879,6 +9036,29 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "recast": {
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
+      "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=",
+      "requires": {
+        "ast-types": "0.9.6",
+        "esprima": "~3.1.0",
+        "private": "~0.1.5",
+        "source-map": "~0.5.0"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -10075,6 +10255,11 @@
         "native-promise-only": "^0.8.1"
       }
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -10263,6 +10448,11 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.1.tgz",
       "integrity": "sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA=="
     },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
     "undefsafe": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
@@ -11238,6 +11428,11 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "whatwg-fetch": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz",
+      "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 6697b5f47..657bb875d 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "express": "^4.16.4",
     "flexlayout-react": "^0.3.3",
     "golden-layout": "^1.5.9",
+    "jsx-to-string": "^1.4.0",
     "mobx": "^5.9.0",
     "mobx-react": "^5.3.5",
     "mobx-react-devtools": "^6.0.3",
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
new file mode 100644
index 000000000..7861ed308
--- /dev/null
+++ b/src/client/util/Transform.ts
@@ -0,0 +1,94 @@
+export class Transform {
+    private _translateX: number = 0;
+    private _translateY: number = 0;
+    private _scale: number = 1;
+
+    static get Identity(): Transform {
+        return new Transform(0, 0, 1);
+    }
+
+    constructor(x: number, y: number, scale: number) {
+        this._translateX = x;
+        this._translateY = y;
+        this._scale = scale;
+    }
+
+    translate = (x: number, y: number): Transform => {
+        this._translateX += x;
+        this._translateY += y;
+        return this;
+    }
+
+    translated = (x: number, y: number): Transform => {
+        return this.copy().translate(x, y);
+    }
+
+    preTranslate = (x: number, y: number): Transform => {
+        this._translateX += x * this._scale;
+        this._translateY += y * this._scale;
+        return this;
+    }
+
+    preTranslated = (x: number, y: number): Transform => {
+        return this.copy().preTranslate(x, y);
+    }
+
+    scale = (scale: number): Transform => {
+        this._scale *= scale;
+        return this;
+    }
+
+    scaled = (scale: number): Transform => {
+        return this.copy().scale(scale);
+    }
+
+    preScale = (scale: number): Transform => {
+        this._scale *= scale;
+        this._translateX *= scale;
+        this._translateY *= scale;
+        return this;
+    }
+
+    preScaled = (scale: number): Transform => {
+        return this.copy().preScale(scale);
+    }
+
+    transform = (transform: Transform): Transform => {
+        this._translateX += transform._translateX * this._scale;
+        this._translateY += transform._translateY * this._scale;
+        this._scale *= transform._scale;
+        return this;
+    }
+
+    transformed = (transform: Transform): Transform => {
+        return this.copy().transform(transform);
+    }
+
+    preTransform = (transform: Transform): Transform => {
+        this._translateX = transform._translateX + this._translateX * transform._scale;
+        this._translateY = transform._translateY + this._translateY * transform._scale;
+        this._scale *= transform._scale;
+        return this;
+    }
+
+    preTransformed = (transform: Transform): Transform => {
+        return this.copy().preTransform(transform);
+    }
+
+    transformPoint = (x: number, y: number): [number, number] => {
+        x *= this._scale;
+        x += this._translateX;
+        y *= this._scale;
+        y += this._translateY;
+        return [x, y];
+    }
+
+    inverse = () => {
+        return new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale)
+    }
+
+    copy = () => {
+        return new Transform(this._translateX, this._translateY, this._scale);
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 9a359e868..ac6f1de00 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -13,6 +13,7 @@ import "./Main.scss";
 import { ContextMenu } from './ContextMenu';
 import { DocumentView } from './nodes/DocumentView';
 import { ImageField } from '../../fields/ImageField';
+import { Transform } from '../util/Transform';
 
 
 configure({
@@ -84,7 +85,9 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
 ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
+        <DocumentView Document={mainContainer}
+            AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
+            ContainingCollectionView={undefined} DocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
     </div>),
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9aee9c10f..32d00d41a 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -14,6 +14,7 @@ import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -95,7 +96,10 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         for (var i: number = 0; i < value.length; i++) {
             if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
+                return (<DocumentView key={value[i].Id} Document={value[i]}
+                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                    GetTransform={() => Transform.Identity}
+                    ContainingCollectionView={this} DocumentView={undefined} />);
             }
         }
         if (component === "text") {
@@ -236,7 +240,10 @@ export class CollectionDockingView extends CollectionViewBase {
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
                 ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
+                    <DocumentView key={state.doc.Id} Document={state.doc}
+                        AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
+                        GetTransform={() => Transform.Identity}
+                        ContainingCollectionView={me} DocumentView={undefined} />
                 ),
                     document.getElementById(containingDiv)
                 );
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf29d000..50f4f1892 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -13,6 +13,7 @@ import { ListField } from "../../../fields/ListField";
 import { NumberField } from "../../../fields/NumberField";
 import { Documents } from "../../documents/Documents";
 import { FieldWaiting } from "../../../fields/Field";
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -172,6 +173,23 @@ export class CollectionFreeFormView extends CollectionViewBase {
         }
     }
 
+    @computed
+    get translate(): [number, number] {
+        const x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+        const y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+        return [x, y];
+    }
+
+    @computed
+    get scale(): number {
+        return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
+    }
+
+    getTransform = (): Transform => {
+        const [x, y] = this.translate;
+        return this.props.GetTransform().scaled(this.scale).translate(x, y);
+    }
+
     render() {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
         const value: Document[] = Document.GetList<Document>(fieldKey, []);
@@ -194,7 +212,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
                         <div className="node-container" ref={this._nodeContainerRef}>
                             {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
+                                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                                    AddDocument={this.addDocument}
+                                    RemoveDocument={this.removeDocument}
+                                    GetTransform={this.getTransform}
+                                    ContainingCollectionView={this} DocumentView={undefined} />);
                             })}
                         </div>
                     </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2d5bd6c99..b897fd481 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -14,6 +14,7 @@ import { CompileScript, ToField } from "../../util/Scripting";
 import { KeyStore as KS, Key } from "../../../fields/Key";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -104,7 +105,10 @@ export class CollectionSchemaView extends CollectionViewBase {
         let content;
         if (this.selectedIndex != -1) {
             content = (
-                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+                <DocumentView Document={children[this.selectedIndex]}
+                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                    GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
+                    DocumentView={undefined} ContainingCollectionView={this} />
             )
         } else {
             content = <div />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 09e8ec729..ff54d88d7 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -10,12 +10,14 @@ import React = require("react");
 import { DocumentView } from "../nodes/DocumentView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { Transform } from "../../util/Transform";
 
 
 export interface CollectionViewProps {
     CollectionFieldKey: Key;
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
+    GetTransform: () => Transform;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -43,15 +45,18 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
     }
 
     @action
-    removeDocument = (doc: Document): void => {
+    removeDocument = (doc: Document): boolean => {
         //TODO This won't create the field if it doesn't already exist
         const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        if (value.indexOf(doc) !== -1) {
-            value.splice(value.indexOf(doc), 1)
+        let index = value.indexOf(doc);
+        if (index !== -1) {
+            value.splice(index, 1)
 
             SelectionManager.DeselectAll()
             ContextMenu.Instance.clearItems()
+            return true;
         }
+        return false
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a111a9936..0defc8f1d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { Transform } from "../../util/Transform";
 
 
 @observer
@@ -204,6 +205,10 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         }
     }
 
+    getTransform = (): Transform => {
+        return this.props.GetTransform().translated(this.x, this.y);
+    }
+
     render() {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
@@ -217,7 +222,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} DocumentView={this.props.DocumentView} />
+                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this.props.DocumentView} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 730ce62f2..ce23a70a6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -15,13 +15,19 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./NodeView.scss";
 import React = require("react");
+import { Transform } from "../../util/Transform";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
-    Document: Document;
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
+
+    Document: Document;
+    AddDocument?: (doc: Document) => void;
+    RemoveDocument?: (doc: Document) => boolean;
+    GetTransform: () => Transform;
 }
+
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
-- 
cgit v1.2.3-70-g09d2


From 1afff429130469a431af1552b77c3ff197f3820a Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 08:43:39 -0500
Subject: changed back to DocumentView={this} in CollectionFreeFormDocumentView
 - it's needed when panning a collectionl

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 4641ea290..54d3a1b56 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -238,7 +238,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this.props.DocumentView} />
+                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From e1acd0061c45f680fee85f10e9187b9769022a40 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 08:44:14 -0500
Subject: got rid of extra divs in collectionFreeFormView .... good idea or
 bad?

---
 .../views/collections/CollectionFreeFormView.scss  |  9 +---
 .../views/collections/CollectionFreeFormView.tsx   | 48 +++++++++++-----------
 2 files changed, 25 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index e9d134e7b..4cf474f77 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,4 +1,6 @@
 .collectionfreeformview-container {
+    border-style: solid;
+    box-sizing: border-box;
     position: relative;
     top: 0;
     left: 0;
@@ -10,11 +12,4 @@
         top: 0;
         left: 0;
     }
-}
-
-.border {
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index e485c8e14..f767bbc16 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -20,7 +20,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
     private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
-    private _nodeContainerRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
     private _lastY: number = 0;
     private _downX: number = 0;
@@ -221,30 +220,29 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const pany: number = Document.GetNumber(KeyStore.PanY, 0);
 
         return (
-            <div className="border" style={{
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-            }}>
-                <div className="collectionfreeformview-container"
-                    onPointerDown={this.onPointerDown}
-                    onWheel={this.onPointerWheel}
-                    onContextMenu={(e) => e.preventDefault()}
-                    onDrop={this.onDrop}
-                    onDragOver={this.onDragOver}
-                    ref={this._containerRef}>
-                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
-
-                        <div className="node-container" ref={this._nodeContainerRef}>
-                            {this.props.BackgroundView}
-                            {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
-                                    AddDocument={this.addDocument}
-                                    RemoveDocument={this.removeDocument}
-                                    GetTransform={this.getTransform}
-                                    Scaling={this.resizeScaling}
-                                    ContainingCollectionView={this} DocumentView={undefined} />);
-                            })}
-                        </div>
-                    </div>
+            <div className="collectionfreeformview-container"
+                onPointerDown={this.onPointerDown}
+                onWheel={this.onPointerWheel}
+                onContextMenu={(e) => e.preventDefault()}
+                onDrop={this.onDrop}
+                onDragOver={this.onDragOver}
+                style={{
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }}
+                ref={this._containerRef}>
+                <div className="collectionfreeformview"
+                    style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+                    ref={this._canvasRef}>
+
+                    {this.props.BackgroundView}
+                    {value.map(doc => {
+                        return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                            AddDocument={this.addDocument}
+                            RemoveDocument={this.removeDocument}
+                            GetTransform={this.getTransform}
+                            Scaling={this.resizeScaling}
+                            ContainingCollectionView={this} DocumentView={undefined} />);
+                    })}
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From a675daa63a4367c1ad42403dd1d95d72aadf2e64 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 09:47:04 -0500
Subject: fixed document resizing from docking view

---
 .../views/collections/CollectionDockingView.tsx    | 30 +++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index bef301eb5..15a586282 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,20 +1,21 @@
-import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/Key";
-import React = require("react");
 import FlexLayout from "flexlayout-react";
-import { action, observable, computed } from "mobx";
-import { Document } from "../../../fields/Document";
-import { DocumentView } from "../nodes/DocumentView";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import "./CollectionDockingView.scss"
+import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import * as GoldenLayout from "golden-layout";
+import { action, computed } 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 { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 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 { changeDependenciesStateTo0 } from "mobx/lib/internal";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -240,6 +241,11 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
+                var htmlElement = document.getElementById(containingDiv);
+                container.on('resize', (e: any) => {
+                    state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
+                    state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
+                })
                 ReactDOM.render((
                     <DocumentView key={state.doc.Id} Document={state.doc}
                         AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
@@ -247,7 +253,7 @@ export class CollectionDockingView extends CollectionViewBase {
                         Scaling={1}
                         ContainingCollectionView={me} DocumentView={undefined} />
                 ),
-                    document.getElementById(containingDiv)
+                    htmlElement
                 );
                 if (CollectionDockingView.myLayout._maxstack != null) {
                     CollectionDockingView.myLayout._maxstack.click();
-- 
cgit v1.2.3-70-g09d2


From 9dd25514bf0ede364e255e7f82d73369f6eb7f48 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 10:29:23 -0500
Subject: apparently the mac pinch zoom vs scroll wheel detection doesn't work.

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

(limited to 'src')

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index f767bbc16..2007a111b 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -121,8 +121,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
         e.preventDefault();
         let modes = ['pixels', 'lines', 'page'];
         let coefficient = 1000;
-        if (modes[e.deltaMode] == 'pixels') coefficient = 50;
-        else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+        // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
+        // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
 
         let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
-- 
cgit v1.2.3-70-g09d2


From 2541c2cd562251143050554f3c0117caed6d9345 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 10:48:03 -0500
Subject: still struggling with sizing issues.

---
 src/client/views/collections/CollectionDockingView.tsx  | 5 +++--
 src/client/views/collections/CollectionFreeFormView.tsx | 2 +-
 src/client/views/nodes/ImageBox.scss                    | 3 ++-
 src/client/views/nodes/ImageBox.tsx                     | 3 +--
 4 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 15a586282..e3d50eb80 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -243,8 +243,9 @@ export class CollectionDockingView extends CollectionViewBase {
             setTimeout(function () {
                 var htmlElement = document.getElementById(containingDiv);
                 container.on('resize', (e: any) => {
-                    state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
-                    state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
+                    // state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
+                    // if (htmlElement!.clientHeight > 0)
+                    //     state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
                 })
                 ReactDOM.render((
                     <DocumentView key={state.doc.Id} Document={state.doc}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 2007a111b..977a03f58 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -231,7 +231,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 }}
                 ref={this._containerRef}>
                 <div className="collectionfreeformview"
-                    style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+                    style={{ width: "100%", transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
                     ref={this._canvasRef}>
 
                     {this.props.BackgroundView}
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 83392311b..2bd8b1d3c 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,7 +1,8 @@
 
 .imageBox-cont {
     padding: 0vw;
-    position: absolute
+    position: absolute;
+    width: 100%
 }
 
 .imageBox-button {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index b96e717ed..60be5f94d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -85,11 +85,10 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
-        let width = this.props.doc.GetNumber(KeyStore.Width, 1);
 
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width={width} alt="Image not found" />
+                <img src={path} width="100%" alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
     }
-- 
cgit v1.2.3-70-g09d2


From 7a93f60c9529e5d175e617fc7c07145a9b33e572 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 15:49:06 -0500
Subject: more updates to resizing, etc.

---
 src/client/documents/Documents.ts                  |  4 +-
 src/client/views/Main.tsx                          |  6 +--
 .../views/collections/CollectionDockingView.tsx    | 63 +++++++++++++++-------
 .../views/collections/CollectionFreeFormView.tsx   |  7 +--
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 .../views/collections/CollectionViewBase.tsx       |  5 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 src/client/views/nodes/DocumentView.tsx            |  9 +++-
 src/client/views/nodes/FormattedTextBox.tsx        |  2 +-
 src/client/views/nodes/ImageBox.tsx                |  3 +-
 10 files changed, 68 insertions(+), 35 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7512d25cb..72fa608ad 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -127,7 +127,7 @@ export namespace Documents {
             imageProto.Set(KeyStore.NativeHeight, new NumberField(300));
             imageProto.Set(KeyStore.Width, new NumberField(300));
             imageProto.Set(KeyStore.Height, new NumberField(300));
-            imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
+            imageProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("AnnotationsKey")));
             imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
             imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
@@ -161,7 +161,7 @@ export namespace Documents {
             collectionProto.Set(KeyStore.PanY, new NumberField(0));
             collectionProto.Set(KeyStore.Width, new NumberField(300));
             collectionProto.Set(KeyStore.Height, new NumberField(300));
-            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
+            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("DataKey")));
             collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return collectionProto;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b58704264..ba92cc17e 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -40,7 +40,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
 //runInAction(() => 
 {
-    let doc1 = Documents.TextDocument({ title: "hello" });
+    let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 });
     let doc2 = doc1.MakeDelegate();
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
@@ -62,7 +62,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
     //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
     // });
-    let docset2 = [doc4, doc1, doc3];
+    let docset2 = [doc3, doc1, doc2];
     let doc6 = Documents.CollectionDocument(docset2, {
         x: 350, y: 100, width: 600, height: 600, title: "docking collection"
     });
@@ -76,7 +76,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     mainNodes.Data.push(doc3);
     // mainNodes.Data.push(doc5);
     // mainNodes.Data.push(doc1);
-    //mainNodes.Data.push(doc2);
+    // mainNodes.Data.push(doc2);
     mainNodes.Data.push(doc6);
     mainContainer.Set(KeyStore.Data, mainNodes);
 }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e3d50eb80..d3e90d11c 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -2,7 +2,7 @@ import FlexLayout from "flexlayout-react";
 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 } from "mobx";
+import { action, computed, reaction, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
@@ -44,7 +44,7 @@ export class CollectionDockingView extends CollectionViewBase {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         var docs = value.map(doc => {
-            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
+            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } };
         });
         return new GoldenLayout({
             settings: {
@@ -111,6 +111,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;
@@ -119,7 +120,7 @@ export class CollectionDockingView extends CollectionViewBase {
         var newItemConfig = {
             type: 'component',
             componentName: 'documentViewComponent',
-            componentState: { doc: dragDoc }
+            componentState: { doc: dragDoc, scaling: 1 }
         };
         this._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
@@ -160,7 +161,6 @@ export class CollectionDockingView extends CollectionViewBase {
             CollectionDockingView.myLayout._maximizedStack = null;
         }
     }
-
     //
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
@@ -241,21 +241,8 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
-                var htmlElement = document.getElementById(containingDiv);
-                container.on('resize', (e: any) => {
-                    // state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
-                    // if (htmlElement!.clientHeight > 0)
-                    //     state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
-                })
-                ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc}
-                        AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
-                        GetTransform={() => Transform.Identity}
-                        Scaling={1}
-                        ContainingCollectionView={me} DocumentView={undefined} />
-                ),
-                    htmlElement
-                );
+                state.rc = new RenderClass(containingDiv, state.doc, me, container);
+                me.rcs.push(state.rc);
                 if (CollectionDockingView.myLayout._maxstack != null) {
                     CollectionDockingView.myLayout._maxstack.click();
                 }
@@ -294,4 +281,42 @@ export class CollectionDockingView extends CollectionViewBase {
             </div>
         );
     }
+}
+
+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() {
+        var 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={() => Transform.Identity}
+                Scaling={scaling}
+                ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} />
+        ),
+            this._htmlElement
+        );
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 977a03f58..15450d737 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -17,7 +17,7 @@ import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
+    public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); }
     private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
@@ -218,6 +218,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
         const panx: number = Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = Document.GetNumber(KeyStore.PanY, 0);
+        var me = this;
 
         return (
             <div className="collectionfreeformview-container"
@@ -231,7 +232,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 }}
                 ref={this._containerRef}>
                 <div className="collectionfreeformview"
-                    style={{ width: "100%", transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+                    style={{ width: "100%", transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
                     ref={this._canvasRef}>
 
                     {this.props.BackgroundView}
@@ -240,7 +241,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                             AddDocument={this.addDocument}
                             RemoveDocument={this.removeDocument}
                             GetTransform={this.getTransform}
-                            Scaling={this.resizeScaling}
+                            Scaling={1}
                             ContainingCollectionView={this} DocumentView={undefined} />);
                     })}
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 331c4f6fe..f1e882e20 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -27,7 +27,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
             fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined
+            DocumentViewForField: undefined,
         }
         let contents = (
             <FieldView {...props} />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index eea7908ce..7e2fcb39d 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -19,6 +19,7 @@ export interface CollectionViewProps {
     ContainingDocumentView: Opt<DocumentView>;
     GetTransform: () => Transform;
     BackgroundView: Opt<DocumentView>;
+    Scaling: number;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -26,8 +27,8 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
-    public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+    public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
+        return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
     }
     @computed
     public get active(): boolean {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 54d3a1b56..9cd42a069 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -238,7 +238,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this} />
+                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} DocumentView={this} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 691ac6311..3a73f2fde 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -115,7 +115,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
             var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
             Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH + 18 * Ss;
         }
 
         let W = COLLECTION_BORDER_WIDTH;
@@ -158,8 +158,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />;
         bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
+
+        var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        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%";
         return (
-            <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
+            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}>
                 <JsxParser
                     components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                     bindings={bindings}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8f959762a..f6bd0c0f8 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -118,7 +118,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         return (<div className="formattedTextBox-cont"
             style={{
                 color: "initial",
-                whiteSpace: "initial"
+                whiteSpace: "initial",
             }}
             onPointerDown={this.onPointerDown}
             ref={this._ref} />)
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 60be5f94d..2fa70734d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -85,10 +85,11 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+        let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
 
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width="100%" alt="Image not found" />
+                <img src={path} width={nativeWidth} alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
     }
-- 
cgit v1.2.3-70-g09d2