fix

30 files changed, 1950 insertions, 1030 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 47a4e38ab..89351c76c 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -3,15 +3,21 @@
     display: flex;
     z-index: 1000;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
-    flex-direction: column; //E
+    flex-direction: column;
 }
 
 .contextMenu-item {
+<<<<<<< HEAD
     width: 10vw; //10vw
     height: auto; //4vh
     background: #DDDDDD;
+=======
+    width: auto;
+    height: auto;
+    background: #F0F8FF;
+>>>>>>> 09928503be98d605052fba65dcd2f91f9b056f23
     display: flex;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -20,19 +26,22 @@
     -ms-user-select: none;
     user-select: none;
     transition: all .1s;
+    border-width: .11px;
+    border-style: none;
+    border-color: rgb(187, 186, 186);
+    border-bottom-style: solid;
+    padding: 10px;
+    white-space: nowrap;
+    font-size: 1.5vw;
 }
 
 .contextMenu-item:hover {
     transition: all .1s;
-    background: #AAAAAA
+    background: #B0E0E6;
 }
 
 .contextMenu-description {
     font-size: 1.5vw;
     text-align: left;
     width: 8vw;
-}
-
-#mySearch {
-    font-size: 1.4vw;
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d4be0dea8..a947eed63 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -12,6 +12,8 @@ export class ContextMenu extends React.Component {
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
+    @observable private _searchString: string = "";
+
 
     private ref: React.RefObject<HTMLDivElement>;
 
@@ -40,10 +42,13 @@ export class ContextMenu extends React.Component {
         return this._items;
     }
 
+    @action
     displayMenu(x: number, y: number) {
         this._pageX = x
         this._pageY = y
 
+        this._searchString = "";
+
         this._display = "flex"
     }
 
@@ -60,28 +65,19 @@ export class ContextMenu extends React.Component {
 
     render() {
         return (
-            <div className="contextMenu-cont" id="options" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                <input className="contextMenu-item" type="text" id="mySearch" placeholder="Search . . ." onKeyUp={this.search}></input>
-                {this._items.map(prop => {
+            <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
+                <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                {this._items.filter(prop => {
+                    return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
+                }).map(prop => {
                     return <ContextMenuItem {...prop} key={prop.description} />
                 })}
             </div>
         )
     }
 
-    search() {
-        let input = document.getElementById("mySearch");
-        let filter = (input as HTMLSelectElement).value.toUpperCase();
-        let li = document.getElementById("options");
-        let a = (li as HTMLSelectElement).getElementsByTagName("div");
-        for (let i = 0; i < a.length; i++) {
-            let txtValue = a[i].textContent || a[i].innerText;
-            if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                a[i].style.display = "";
-            }
-            else {
-                a[i].style.display = "none";
-            }
-        }
+    @action
+    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._searchString = e.target.value;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 8f00f8b3d..4801c1555 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,11 +1,19 @@
 import React = require("react");
-import { ContextMenu } from "./ContextMenu";
 
 export interface ContextMenuProps {
     description: string;
     event: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
+export interface SubmenuProps {
+    description: string;
+    subitems: ContextMenuProps[];
+}
+
+export interface ContextMenuItemProps {
+    type: ContextMenuProps | SubmenuProps
+}
+
 export class ContextMenuItem extends React.Component<ContextMenuProps> {
     render() {
         return (
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7efaa5533..9fd73a33b 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -3,14 +3,15 @@ import React = require("react");
 import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
-import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
+import { KeyStore } from '../../fields/KeyStore'
+import { NumberField } from "../../fields/NumberField";
 
 @observer
 export class DocumentDecorations extends React.Component {
     static Instance: DocumentDecorations
     private _resizer = ""
     private _isPointerDown = false;
-    @observable private _opacity = 1;
+    @observable private _hidden = false;
 
     constructor(props: Readonly<{}>) {
         super(props)
@@ -20,28 +21,24 @@ export class DocumentDecorations extends React.Component {
 
     @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 SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
+            if (documentView.props.isTopMost) {
                 return bounds;
             }
-            var spt = element.TransformToScreenPoint(0, 0);
-            var bpt = element.TransformToScreenPoint(element.width, element.height);
+            let transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
+            var [sptX, sptY] = transform.transformPoint(0, 0);
+            let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
             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: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
+                r: Math.max(bptX, bounds.r), b: Math.max(bptY, 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)
-    }
+    @computed
+    public get Hidden() { return this._hidden; }
+    public set Hidden(value: boolean) { this._hidden = value; }
 
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
@@ -104,17 +101,29 @@ export class DocumentDecorations extends React.Component {
         }
 
         SelectionManager.SelectedDocuments().forEach(element => {
-            const rect = element.screenRect;
+            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);
-                if (Math.abs(dW) > Math.abs(dH))
-                    element.width = actualdW;
-                else
-                    element.height = actualdH;
+                let doc = element.props.Document;
+                let width = doc.GetNumber(KeyStore.Width, 0);
+                let nwidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+                let nheight = doc.GetNumber(KeyStore.NativeHeight, 0);
+                let height = doc.GetNumber(KeyStore.Height, nwidth ? nheight / nwidth * width : 0);
+                let x = doc.GetOrCreate(KeyStore.X, NumberField);
+                let y = doc.GetOrCreate(KeyStore.Y, NumberField);
+                let scale = width / rect.width;
+                let actualdW = Math.max(width + (dW * scale), 20);
+                let actualdH = Math.max(height + (dH * scale), 20);
+                x.Data += dX * (actualdW - width);
+                y.Data += dY * (actualdH - height);
+                var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+                var nativeHeight = doc.GetNumber(KeyStore.NativeHeight, 0);
+                if (nativeWidth > 0 && nativeHeight > 0) {
+                    if (Math.abs(dW) > Math.abs(dH))
+                        actualdH = nativeHeight / nativeWidth * actualdW;
+                    else actualdW = nativeWidth / nativeHeight * actualdH;
+                }
+                doc.SetNumber(KeyStore.Width, actualdW);
+                doc.SetNumber(KeyStore.Height, actualdH);
             }
         })
     }
@@ -131,13 +140,19 @@ export class DocumentDecorations extends React.Component {
 
     render() {
         var bounds = this.Bounds;
+        if (this.Hidden) {
+            return (null);
+        }
+        if (isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
+            console.log("DocumentDecorations: Bounds Error")
+            return (null);
+        }
         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>
@@ -148,7 +163,6 @@ export class DocumentDecorations extends React.Component {
                 <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>
         )
     }
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 2e784d3f9..88ef67afa 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -6,6 +6,7 @@ export interface EditableProps {
     GetValue(): string;
     SetValue(value: string): boolean;
     contents: any;
+    height: number
 }
 
 @observer
@@ -26,12 +27,12 @@ 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)}
-                style={{ width: "100%" }}></input>
+                style={{ display: "inline" }}></input>
         } else {
             return (
-                <div>
+                <div className="editableView-container-editing" style={{ display: "inline", height: "100%", maxHeight: `${this.props.height}` }}
+                    onClick={action(() => this.editing = true)}>
                     {this.props.contents}
-                    <button onClick={action(() => this.editing = true)}>Edit</button>
                 </div>
             )
         }
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index e73f62904..4334ed299 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -28,4 +28,24 @@ h1 {
 p {
     margin: 0px;
     padding: 0px;
-}
\ No newline at end of file
+}
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    height:5px;
+    width:5px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: rgba(0,0,0,.5);
+}
+
+.main-buttonDiv {
+    position: absolute;
+    width: 150px;
+    left: 0px;
+}
+.main-undoButtons {
+    position: absolute;
+    width: 150px;
+    right: 0px;
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b58704264..d845fa7a3 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -2,35 +2,26 @@ 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 { KeyStore } from '../../fields/KeyStore';
 import "./Main.scss";
+import { MessageStore } from '../../server/Message';
+import { Utils } from '../../Utils';
+import { Documents } from '../documents/Documents';
+import { Server } from '../Server';
+import { setupDrag } from '../util/DragManager';
+import { Transform } from '../util/Transform';
+import { UndoManager } from '../util/UndoManager';
+import { CollectionDockingView } from './collections/CollectionDockingView';
 import { ContextMenu } from './ContextMenu';
+import { DocumentDecorations } from './DocumentDecorations';
 import { DocumentView } from './nodes/DocumentView';
-import { ImageField } from '../../fields/ImageField';
-import { Transform } from '../util/Transform';
-
+import "./Main.scss";
 
-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)
+configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
+window.addEventListener("drop", (e) => e.preventDefault(), false)
+window.addEventListener("dragover", (e) => e.preventDefault(), false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
@@ -38,58 +29,73 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 }), 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://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
-        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, nativeWidth: 606, nativeHeight: 386
-    }));
-    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 = [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>();
+const mainDocId = "mainDoc";
+let mainContainer: Document;
+let mainfreeform: Document;
+Documents.initProtos(mainDocId, (res?: Document) => {
+    if (res instanceof Document) {
+        mainContainer = res;
+        mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document);
+    }
+    else {
+        mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId);
+
+        // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
+        setTimeout(() => {
+            mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
+
+            var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] };
+            mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout));
+            mainContainer.Set(KeyStore.ActiveFrame, mainfreeform);
+        }, 0);
     }
-    // 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}
-            AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
-            Scaling={1}
-            ContainingCollectionView={undefined} DocumentView={undefined} />
-        <DocumentDecorations />
-        <ContextMenu />
-    </div>),
-    document.getElementById('root'));
\ No newline at end of file
+    let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
+    let weburl = "https://cs.brown.edu/courses/cs166/";
+    let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
+    let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+    let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+    let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
+    let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
+
+    let addClick = (creator: () => Document) => action(() =>
+        mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
+    );
+
+    let imgRef = React.createRef<HTMLDivElement>();
+    let webRef = React.createRef<HTMLDivElement>();
+    let textRef = React.createRef<HTMLDivElement>();
+    let schemaRef = React.createRef<HTMLDivElement>();
+    let colRef = React.createRef<HTMLDivElement>();
+
+    ReactDOM.render((
+        <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+            <DocumentView Document={mainContainer}
+                AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
+                ContentScaling={() => 1}
+                PanelWidth={() => 0}
+                PanelHeight={() => 0}
+                isTopMost={true}
+                SelectOnLoad={false}
+                focus={() => { }}
+                ContainingCollectionView={undefined} />
+            <DocumentDecorations />
+            <ContextMenu />
+            <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
+                <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '25px' }} ref={webRef} >
+                <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '50px' }} ref={textRef}>
+                <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '75px' }} ref={colRef}>
+                <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '100px' }} ref={schemaRef}>
+                <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+            <div className="main-buttonDiv" style={{ bottom: '125px' }} >
+                <button onClick={clearDatabase}>Clear Database</button></div>
+            <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+            <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+        </div>),
+        document.getElementById('root'));
+})
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 7c0b512a7..2706c3272 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,3 +1,7 @@
+.collectiondockingview-content {
+    height: 100%;
+}
+
 .collectiondockingview-container {
     position: relative;
     top: 0;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e3d50eb80..c51fba908 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,297 +1,280 @@
-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, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
-import { KeyStore } from "../../../fields/Key";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import { DragManager } from "../../util/DragManager";
-import { Transform } from "../../util/Transform";
+import { KeyStore } from "../../../fields/KeyStore";
+import Measure from "react-measure";
+import { FieldId, Opt, Field } from "../../../fields/Field";
+import { Utils } from "../../../Utils";
+import { Server } from "../../Server";
+import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import React = require("react");
-import { changeDependenciesStateTo0 } from "mobx/lib/internal";
+import { SubCollectionViewProps } from "./CollectionViewBase";
 
 @observer
-export class CollectionDockingView extends CollectionViewBase {
+export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
+    public static Instance: CollectionDockingView;
+    public static makeDocumentConfig(document: Document) {
+        return {
+            type: 'react-component',
+            component: 'DocumentFrameRenderer',
+            title: document.Title,
+            props: {
+                documentId: document.Id,
+                //collectionDockingView: CollectionDockingView.Instance
+            }
+        }
+    }
 
-    private static UseGoldenLayout = true;
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
+    private _goldenLayout: any = null;
     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
-            }
-        });
+    private _fullScreen: any = null;
+
+    constructor(props: SubCollectionViewProps) {
+        super(props);
+        CollectionDockingView.Instance = this;
+        (window as any).React = React;
+        (window as any).ReactDOM = ReactDOM;
     }
-    @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 }]
-        });
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
     }
-    constructor(props: CollectionViewProps) {
-        super(props);
+
+    @action
+    public OpenFullScreen(document: Document) {
+        let newItemStackConfig = {
+            type: 'stack',
+            content: [CollectionDockingView.makeDocumentConfig(document)]
+        }
+        var docconfig = this._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, this._goldenLayout);
+        this._goldenLayout.root.contentItems[0].addChild(docconfig);
+        docconfig.callDownwards('_$init');
+        this._goldenLayout._$maximiseItem(docconfig);
+        this._fullScreen = docconfig;
+        this.stateChanged();
     }
+    @action
+    public CloseFullScreen() {
+        if (this._fullScreen) {
+            this._goldenLayout._$minimiseItem(this._fullScreen);
+            this._goldenLayout.root.contentItems[0].removeChild(this._fullScreen);
+            this._fullScreen = null;
+            this.stateChanged();
+        }
+    }
+
+    //
+    //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
+    //
+    @action
+    public AddRightSplit(document: Document, minimize: boolean = false) {
+        this._goldenLayout.emit('stateChanged');
+        let newItemStackConfig = {
+            type: 'stack',
+            content: [CollectionDockingView.makeDocumentConfig(document)]
+        }
+
+        var newContentItem = this._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, this._goldenLayout);
 
+        if (this._goldenLayout.root.contentItems[0].isRow) {
+            this._goldenLayout.root.contentItems[0].addChild(newContentItem);
+        }
+        else {
+            var collayout = this._goldenLayout.root.contentItems[0];
+            var newRow = collayout.layoutManager.createContentItem({ type: "row" }, this._goldenLayout);
+            collayout.parent.replaceChild(collayout, newRow);
+
+            newRow.addChild(newContentItem, undefined, true);
+            newRow.addChild(collayout, 0, true);
+
+            collayout.config["width"] = 50;
+            newContentItem.config["width"] = 50;
+        }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
+        newContentItem.callDownwards('_$init');
+        this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
+        this._goldenLayout.emit('stateChanged');
+        this.stateChanged();
+        return newContentItem;
+    }
+
+    setupGoldenLayout() {
+        var config = this.props.Document.GetText(KeyStore.Data, "");
+        if (config) {
+            if (!this._goldenLayout) {
+                this._goldenLayout = new GoldenLayout(JSON.parse(config));
+            }
+            else {
+                if (config == JSON.stringify(this._goldenLayout.toConfig()))
+                    return;
+                try {
+                    this._goldenLayout.unbind('itemDropped', this.itemDropped);
+                    this._goldenLayout.unbind('tabCreated', this.tabCreated);
+                    this._goldenLayout.unbind('stackCreated', this.stackCreated);
+                } catch (e) { }
+                this._goldenLayout.destroy();
+                this._goldenLayout = new GoldenLayout(JSON.parse(config));
+            }
+            this._goldenLayout.on('itemDropped', this.itemDropped);
+            this._goldenLayout.on('tabCreated', this.tabCreated);
+            this._goldenLayout.on('stackCreated', this.stackCreated);
+            this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer);
+            this._goldenLayout.container = this._containerRef.current;
+            if (this._goldenLayout.config.maximisedItemId === '__glMaximised') {
+                try {
+                    this._goldenLayout.config.root.getItemsById(this._goldenLayout.config.maximisedItemId)[0].toggleMaximise();
+                } catch (e) {
+                    this._goldenLayout.config.maximisedItemId = null;
+                }
+            }
+            this._goldenLayout.init();
+        }
+    }
     componentDidMount: () => void = () => {
-        if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
-            this.goldenLayoutFactory();
+        if (this._containerRef.current) {
+            reaction(
+                () => this.props.Document.GetText(KeyStore.Data, ""),
+                () => this.setupGoldenLayout(), { fireImmediately: true });
+
             window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
         }
     }
     componentWillUnmount: () => void = () => {
+        this._goldenLayout.unbind('itemDropped', this.itemDropped);
+        this._goldenLayout.unbind('tabCreated', this.tabCreated);
+        this._goldenLayout.unbind('stackCreated', this.stackCreated);
+        this._goldenLayout.destroy();
+        this._goldenLayout = null;
         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;
+        var cur = this._containerRef.current;
 
         // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
-        CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
+        this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
     }
 
+    _flush: boolean = false;
+    @action
+    onPointerUp = (e: React.PointerEvent): void => {
+        if (this._flush) {
+            this._flush = false;
+            setTimeout(() => this.stateChanged(), 10);
+        }
+    }
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.button === 2 && this.active) {
+        if (e.button === 2 && this.props.active()) {
             e.stopPropagation();
             e.preventDefault();
         } else {
-            if (e.buttons === 1 && this.active) {
-                e.stopPropagation();
+            var className = (e.target as any).className;
+            if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
+                this._flush = true;
             }
-        }
-    }
-
-    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} Document={value[i]}
-                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                    GetTransform={() => Transform.Identity}
-                    Scaling={1}
-                    ContainingCollectionView={this} DocumentView={undefined} />);
+            if (e.buttons === 1 && this.props.active()) {
+                e.stopPropagation();
             }
         }
-        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)
+    @undoBatch
+    stateChanged = () => {
+        var json = JSON.stringify(this._goldenLayout.toConfig());
+        this.props.Document.SetText(KeyStore.Data, json)
     }
 
-    _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);
+    itemDropped = () => {
+        this.stateChanged();
     }
-    public static CloseFullScreen() {
-        if (CollectionDockingView.myLayout._maximizedStack != null) {
-            CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
-            CollectionDockingView.myLayout._maximizedStack = null;
-        }
+    tabCreated = (tab: any) => {
+        tab.closeElement.off('click') //unbind the current click handler
+            .click(function () {
+                tab.contentItem.remove();
+            });
     }
 
-    //
-    //  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);
+    stackCreated = (stack: any) => {
+        //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(action(function () {
+                //if (confirm('really close this?')) {
+                stack.remove();
+                //}
+            }));
+    }
 
-        if (CollectionDockingView.myLayout.root.contentItems[0].isRow) {
-            var rowlayout = CollectionDockingView.myLayout.root.contentItems[0];
-            var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1];
+    render() {
+        return (
+            <div className="collectiondockingview-container" id="menuContainer"
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    borderStyle: "solid",
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }} />
+        );
+    }
+}
 
-            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);
+interface DockedFrameProps {
+    documentId: FieldId,
+    //collectionDockingView: CollectionDockingView
+}
+@observer
+export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
-            newRow.addChild(newContentItem, undefined, true);
-            newRow.addChild(collayout, 0, true);
+    private _mainCont = React.createRef<HTMLDivElement>();
+    @observable private _panelWidth = 0;
+    @observable private _panelHeight = 0;
+    @observable private _document: Opt<Document>;
 
-            collayout.config["width"] = 50;
-            newContentItem.config["width"] = 50;
-            collayout.parent.callDownwards('setSize');
-        }
+    constructor(props: any) {
+        super(props);
+        Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
     }
-    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();
-                    //}
-                });
-        });
+    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); }
+    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); }
+    private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
 
-        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 () {
-                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
-                );
-                if (CollectionDockingView.myLayout._maxstack != null) {
-                    CollectionDockingView.myLayout._maxstack.click();
-                }
-            }, 0);
-        });
-        CollectionDockingView.myLayout.container = this._containerRef.current;
-        CollectionDockingView.myLayout.init();
+    ScreenToLocalTransform = () => {
+        let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
+        return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling())
     }
 
-
     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>
+        if (!this._document)
+            return (null);
+        var content =
+            <div className="collectionDockingView-content" ref={this._mainCont}>
+                <DocumentView key={this._document.Id} Document={this._document}
+                    AddDocument={undefined}
+                    RemoveDocument={undefined}
+                    ContentScaling={this._contentScaling}
+                    PanelWidth={this._nativeWidth}
+                    PanelHeight={this._nativeHeight}
+                    ScreenToLocalTransform={this.ScreenToLocalTransform}
+                    isTopMost={true}
+                    SelectOnLoad={false}
+                    focus={(doc: Document) => { }}
+                    ContainingCollectionView={undefined} />
             </div>
-        );
+
+        return <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
+            {({ measureRef }) => <div ref={measureRef}>  {content} </div>}
+        </Measure>
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 4cf474f77..f432e8cc3 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,4 +1,10 @@
 .collectionfreeformview-container {
+
+    .collectionfreeformview > .jsx-parser{
+        position:absolute;
+        height: 100%;
+    }
+        
     border-style: solid;
     box-sizing: border-box;
     position: relative;
@@ -11,5 +17,25 @@
         position: absolute;
         top: 0;
         left: 0;
+        width:100%;
+        height: 100%
     }
+}
+
+.border {
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+//this is an animation for the blinking cursor!
+@keyframes blink {
+	0% {opacity: 0}
+	49%{opacity: 0}
+	50% {opacity: 1}
+}
+
+#prevCursor {
+    animation: blink 1s infinite;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 977a03f58..f71f2791c 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,90 +1,81 @@
+import { observable, action, computed } from "mobx";
 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";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { TextField } from "../../../fields/TextField";
+import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
+import { undoBatch } from "../../util/UndoManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionView } from "../collections/CollectionView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DocumentView } from "../nodes/DocumentView";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
+import { ImageBox } from "../nodes/ImageBox";
+import { WebBox } from "../nodes/WebBox";
+import { KeyValueBox } from "../nodes/KeyValueBox"
+import "./CollectionFreeFormView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { Documents } from "../../documents/Documents";
+import React = require("react");
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
-    private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
     private _lastY: number = 0;
+    private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
+
+    @observable
     private _downX: number = 0;
+    @observable
     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 nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); }
+    //determines whether the blinking cursor for indicating whether a text will be made on key down is visible
+    @observable
+    private _previewCursorVisible: boolean = false;
 
-    @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; }
+    @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
+    @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
+    @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get isAnnotationOverlay() { return this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's?
+    @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+    @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this.props.panelWidth() / 2 : 0; }  // shift so pan position is at center of window for non-overlay collections
+    @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
 
+    @undoBatch
     @action
     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 { 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;
-            doc.x = (screenX - translateX) / currScale;
-            doc.y = (screenY - translateY) / currScale;
-            this.bringToFront(doc);
-        }
-        e.stopPropagation();
-    }
-
-    componentDidMount() {
-        if (this._containerRef.current) {
-            DragManager.MakeDropTarget(this._containerRef.current, {
-                handlers: {
-                    drop: this.drop
-                }
-            });
-        }
+        super.drop(e, de);
+        const docView: DocumentView = de.data["documentView"];
+        let doc: Document = docView ? docView.props.Document : de.data["document"];
+        let screenX = de.x - (de.data["xOffset"] as number || 0);
+        let screenY = de.y - (de.data["yOffset"] as number || 0);
+        const [x, y] = this.getTransform().transformPoint(screenX, screenY);
+        doc.SetNumber(KeyStore.X, x);
+        doc.SetNumber(KeyStore.Y, y);
+        this.bringToFront(doc);
     }
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if ((e.button === 2 && this.active) ||
+        if ((e.button === 2 && this.props.active()) ||
             !e.defaultPrevented) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
-            this._downX = this._lastX = e.pageX;
-            this._downY = this._lastY = e.pageY;
+            this._lastX = e.pageX;
+            this._lastY = e.pageY;
+            this._downX = e.pageX;
+            this._downY = e.pageY;
         }
     }
 
@@ -94,22 +85,25 @@ export class CollectionFreeFormView extends CollectionViewBase {
         document.removeEventListener("pointerup", this.onPointerUp);
         e.stopPropagation();
         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);
+            //show preview text cursor on tap
+            this._previewCursorVisible = true;
+            //select is not already selected
+            if (!this.props.isSelected()) {
+                this.props.select(false);
             }
         }
+
     }
 
     @action
     onPointerMove = (e: PointerEvent): void => {
-        if (!e.cancelBubble && this.active) {
-            e.preventDefault();
+        if (!e.cancelBubble && this.props.active()) {
             e.stopPropagation();
-            let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
-            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);
+            let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
+            let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
+            let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+            this._previewCursorVisible = false;
+            this.SetPan(x - dx, y - dy);
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -119,131 +113,199 @@ export class CollectionFreeFormView extends CollectionViewBase {
     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);
+        if (e.ctrlKey) {
+            var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+            var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+            const coefficient = 1000;
+            let deltaScale = (1 - (e.deltaY / coefficient));
+            this.props.Document.SetNumber(KeyStore.NativeWidth, nativeWidth * deltaScale);
+            this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight * deltaScale);
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
+            // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+            let transform = this.getTransform();
+
+            let deltaScale = (1 - (e.deltaY / coefficient));
+            if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay)
+                deltaScale = 1 / this.zoomScaling;
+            let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
-        var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
-        var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+            let localTransform = this.getLocalTransform()
+            localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+            console.log(localTransform)
 
-        this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
-        this.SetPan(ContainerX - (LocalX * newDeltaScale + Xx), ContainerY - (LocalY * newDeltaScale + Yy));
+            this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
+            this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale);
+        }
     }
 
     @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.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);
+        const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
+        const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
+        this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
+        this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
 
     @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)
+        var pt = this.getTransform().transformPoint(e.pageX, e.pageY);
+        super.onDrop(e, { x: pt[0], y: pt[1] });
+    }
 
-        if (file) {
-            fReader.readAsDataURL(file)
-        }
+    onDragOver = (): void => {
     }
 
-    onDragOver = (e: React.DragEvent): void => {
+    @action
+    onKeyDown = (e: React.KeyboardEvent<Element>) => {
+        //if not these keys, make a textbox if preview cursor is active!
+        if (!e.ctrlKey && !e.altKey) {
+            if (this._previewCursorVisible) {
+                //make textbox and add it to this collection
+                let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); (this._downX, this._downY);
+                let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
+                // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself
+                this._selectOnLoaded = newBox.Id;
+                //set text to be the typed key and get focus on text box
+                this.props.CollectionView.addDocument(newBox);
+                //remove cursor from screen
+                this._previewCursorVisible = false;
+            }
+        }
     }
 
     @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);
+    bringToFront(doc: Document) {
+        const { fieldKey: fieldKey, Document: Document } = this.props;
+
+        const value: Document[] = Document.GetList<Document>(fieldKey, []).slice();
+        value.sort((doc1, doc2) => {
+            if (doc1 === doc) {
+                return 1;
             }
-        })
+            if (doc2 === doc) {
+                return -1;
+            }
+            return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0);
+        }).map((doc, index) => {
+            doc.SetNumber(KeyStore.ZIndex, index + 1)
+        });
+    }
 
-        if (doc.props.Document.GetNumber(KeyStore.ZIndex, 0) != 0) {
-            doc.props.Document.SetData(KeyStore.ZIndex, 0, NumberField);
+    @computed get backgroundLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
         }
     }
+    @computed get overlayLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
+        }
+    }
+
+    focusDocument = (doc: Document) => {
+        let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2;
+        let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2;
+        this.SetPan(x, y);
+        this.props.focus(this.props.Document);
+    }
+
 
     @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];
+    get views() {
+        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
+        if (lvalue && lvalue != FieldWaiting) {
+            return lvalue.Data.map(doc => {
+                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                    AddDocument={this.props.addDocument}
+                    RemoveDocument={this.props.removeDocument}
+                    ScreenToLocalTransform={this.getTransform}
+                    isTopMost={false}
+                    SelectOnLoad={doc.Id === this._selectOnLoaded}
+                    ContentScaling={this.noScaling}
+                    PanelWidth={doc.Width}
+                    PanelHeight={doc.Height}
+                    ContainingCollectionView={this.props.CollectionView}
+                    focus={this.focusDocument}
+                />);
+            })
+        }
+        return null;
     }
 
     @computed
-    get scale(): number {
-        return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
+    get backgroundView() {
+        return !this.backgroundLayout ? (null) :
+            (<JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+                bindings={this.props.bindings}
+                jsx={this.backgroundLayout}
+                showWarnings={true}
+                onError={(test: any) => console.log(test)}
+            />);
+    }
+    @computed
+    get overlayView() {
+        return !this.overlayLayout ? (null) :
+            (<JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+                bindings={this.props.bindings}
+                jsx={this.overlayLayout}
+                showWarnings={true}
+                onError={(test: any) => console.log(test)}
+            />);
     }
 
-    getTransform = (): Transform => {
-        const [x, y] = this.translate;
-        return this.props.GetTransform().scaled(this.scale).translate(x, y);
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform())
+    getLocalTransform = (): Transform => Transform.Identity.scale(1 / this.scale).translate(this.panX, this.panY);
+    noScaling = () => 1;
+
+    //when focus is lost, this will remove the preview cursor
+    @action
+    onBlur = (e: React.FocusEvent<HTMLDivElement>): void => {
+        this._previewCursorVisible = false;
     }
 
     render() {
-        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);
+
+        //determines whether preview text cursor should be visible (ie when user taps this collection it should)
+        let cursor = null;
+        if (this._previewCursorVisible) {
+            //get local position and place cursor there!
+            let [x, y] = this.getTransform().transformPoint(this._downX, this._downY);
+            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
+        }
+
+        let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
+
+        const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
+        const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
 
         return (
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
+                onKeyPress={this.onKeyDown}
                 onWheel={this.onPointerWheel}
-                onContextMenu={(e) => e.preventDefault()}
-                onDrop={this.onDrop}
+                onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
-                style={{
-                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-                }}
-                ref={this._containerRef}>
+                onBlur={this.onBlur}
+                style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
+                tabIndex={0}
+                ref={this.createDropTarget}>
                 <div className="collectionfreeformview"
-                    style={{ width: "100%", transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+                    style={{ transformOrigin: "left top", transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}
                     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} />);
-                    })}
+                    {this.backgroundView}
+                    {cursor}
+                    {this.views}
                 </div>
+                {this.overlayView}
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 707b44db6..d40e6d314 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,3 +1,102 @@
+
+
+.collectionSchemaView-container {
+    border-style: solid;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .collectionSchemaView-previewRegion {
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-previewHandle {
+        position: absolute;
+        height: 37px;
+        width: 20px; 
+        z-index: 20; 
+        right: 0; 
+        top: 0; 
+        background: Black ;
+    }
+    .collectionSchemaView-dividerDragger{
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-tableContainer {
+        position: relative;
+        float: left;
+        height: 100%; 
+    }
+
+    .ReactTable {
+        position: absolute;
+       // display: inline-block;
+       // overflow: auto;
+        width: 100%;
+        height: 100%;
+        background: white;
+        box-sizing: border-box;
+        .rt-table {
+            overflow-y: auto;
+            overflow-x: auto;
+            height: 100%;
+
+            display: -webkit-inline-box;
+            direction: ltr;
+            // direction:rtl;
+            // display:block;
+        }
+        .rt-tbody {
+            //direction: ltr;
+            direction: rtl;
+        }
+        .rt-tr-group {
+            direction: ltr;
+            max-height: 44px;
+        }
+        .rt-td {
+            border-width: 1;
+            border-right-color: #aaa;
+            .imageBox-cont {
+                position:relative;
+                max-height:100%;
+            }
+            .imageBox-cont img {
+                object-fit: contain;
+                max-width: 100%;
+                height: 100%
+            }
+        }
+        .rt-tr-group {
+            border-width: 1;
+            border-bottom-color: #aaa
+        }
+    }
+    .ReactTable .rt-thead.-header {
+            background:grey;
+        }
+    .ReactTable .rt-th, .ReactTable .rt-td {
+        max-height: 44;
+        padding: 3px 7px;
+    }
+    .ReactTable .rt-tbody .rt-tr-group:last-child {
+        border-bottom: grey;
+        border-bottom-style: solid;
+        border-bottom-width: 1;
+    }
+    .documentView-node:first-child {
+        background: grey;
+        .imageBox-cont img {
+            object-fit: contain;
+        }
+    }
+}
+
 .Resizer {
     box-sizing: border-box;
     background: #000;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 331c4f6fe..49f95c014 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,62 +1,83 @@
 import React = require("react")
-import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
+import { action, observable } from "mobx";
 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 Measure from "react-measure";
+import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
+import "react-table/react-table.css";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { CompileScript, ToField } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
+import { ContextMenu } from "../ContextMenu";
+import { EditableView } from "../EditableView";
+import { DocumentView } from "../nodes/DocumentView";
+import { FieldView, FieldViewProps } from "../nodes/FieldView";
+import "./CollectionSchemaView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { setupDrag } from "../../util/DragManager";
+
+// bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
+
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
+    private _mainCont = React.createRef<HTMLDivElement>();
+    private DIVIDER_WIDTH = 5;
 
-    @observable
-    selectedIndex = 0;
+    @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView
+    @observable _dividerX = 0;
+    @observable _panelWidth = 0;
+    @observable _panelHeight = 0;
+    @observable _selectedIndex = 0;
+    @observable _splitPercentage: number = 50;
 
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
             fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined
+            isSelected: () => false,
+            select: () => { },
+            isTopMost: false,
+            bindings: {},
+            selectOnLoad: false,
         }
         let contents = (
             <FieldView {...props} />
         )
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => props.doc);
         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>
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
+                <EditableView contents={contents}
+                    height={36} 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, undefined, true);
+                        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>
+            </div>
         )
     }
 
@@ -67,85 +88,157 @@ export class CollectionSchemaView extends CollectionViewBase {
         }
         return {
             onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
-                that.selectedIndex = rowInfo.index;
-                const doc: Document = rowInfo.original;
-                console.log("Row clicked: ", doc.Title)
+                that._selectedIndex = rowInfo.index;
+                this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
 
                 if (handleOriginal) {
                     handleOriginal()
                 }
             }),
             style: {
-                background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
-                color: rowInfo.index == this.selectedIndex ? "white" : "black"
+                background: rowInfo.index == this._selectedIndex ? "lightGray" : "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();
+    _startSplitPercent = 0;
+    @action
+    onDividerMove = (e: PointerEvent): void => {
+        let nativeWidth = this._mainCont.current!.getBoundingClientRect();
+        this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
+    }
+    @action
+    onDividerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onDividerMove);
+        document.removeEventListener('pointerup', this.onDividerUp);
+        if (this._startSplitPercent == this._splitPercentage) {
+            this._splitPercentage = this._splitPercentage == 1 ? 66 : 100;
         }
+    }
+    onDividerDown = (e: React.PointerEvent) => {
+        this._startSplitPercent = this._splitPercentage;
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener("pointermove", this.onDividerMove);
+        document.addEventListener('pointerup', this.onDividerUp);
+    }
+    @action
+    onExpanderMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    @action
+    onExpanderUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener("pointermove", this.onExpanderMove);
+        document.removeEventListener('pointerup', this.onExpanderUp);
+        if (this._startSplitPercent == this._splitPercentage) {
+            this._splitPercentage = this._splitPercentage == 100 ? 66 : 100;
+        }
+    }
+    onExpanderDown = (e: React.PointerEvent) => {
+        this._startSplitPercent = this._splitPercentage;
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener("pointermove", this.onExpanderMove);
+        document.addEventListener('pointerup', this.onExpanderUp);
+    }
+
+    onPointerDown = (e: React.PointerEvent) => {
         // if (e.button === 2 && this.active) {
         //     e.stopPropagation();
         //     e.preventDefault();
         // } else 
         {
-            if (e.buttons === 1 && this.active) {
-                e.stopPropagation();
+            if (e.buttons === 1) {
+                if (this.props.isSelected()) {
+                    e.stopPropagation();
+                }
             }
         }
     }
 
+    @action
+    setScaling = (r: any) => {
+        const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+        const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+        this._panelWidth = r.entry.width;
+        this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight;
+        this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+    }
+
+    getContentScaling = (): number => this._contentScaling;
+    getPanelWidth = (): number => this._panelWidth;
+    getPanelHeight = (): number => this._panelHeight;
+    getTransform = (): Transform => {
+        return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
+    }
+
+    focusDocument = (doc: Document) => { }
+
     render() {
-        const { 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]}
-                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                    GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
-                    Scaling={1}
-                    DocumentView={undefined} ContainingCollectionView={this} />
-            )
-        } else {
-            content = <div />
-        }
+        const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
+        const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+        const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+        let content = this._selectedIndex == -1 || !selected ? (null) : (
+            <Measure onResize={this.setScaling}>
+                {({ measureRef }) =>
+                    <div className="collectionSchemaView-content" ref={measureRef}>
+                        <DocumentView Document={selected}
+                            AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
+                            isTopMost={false}
+                            SelectOnLoad={false}
+                            ScreenToLocalTransform={this.getTransform}
+                            ContentScaling={this.getContentScaling}
+                            PanelWidth={this.getPanelWidth}
+                            PanelHeight={this.getPanelHeight}
+                            ContainingCollectionView={this.props.CollectionView}
+                            focus={this.focusDocument}
+                        />
+                    </div>
+                }
+            </Measure>
+        )
+        let previewHandle = !this.props.active() ? (null) : (
+            <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
         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",
-                                width: "100%"
-                            }}
-                            columns={columns.map(col => {
-                                return (
-                                    {
+            <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+                <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
+                    <Measure onResize={action((r: any) => {
+                        this._dividerX = r.entry.width;
+                        this._panelHeight = r.entry.height;
+                    })}>
+                        {({ measureRef }) =>
+                            <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ width: `${this._splitPercentage}%` }}>
+                                <ReactTable
+                                    data={children}
+                                    pageSize={children.length}
+                                    page={0}
+                                    showPagination={false}
+                                    columns={columns.map(col => ({
                                         Header: col.Name,
                                         accessor: (doc: Document) => [doc, col],
                                         id: col.Id
-                                    })
-                            })}
-                            column={{
-                                ...ReactTableDefaults.column,
-                                Cell: this.renderCell
-                            }}
-                            getTrProps={this.getTrProps}
-                        />
-                    </ScrollBox>
-                    {content}
-                </SplitPane>
-            </div>
+                                    }))}
+                                    column={{
+                                        ...ReactTableDefaults.column,
+                                        Cell: this.renderCell,
+
+                                    }}
+                                    getTrProps={this.getTrProps}
+                                />
+                            </div>
+                        }
+                    </Measure>
+                    <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+                    <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
+                        {content}
+                    </div>
+                    {previewHandle}
+                </div>
+            </div >
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
new file mode 100644
index 000000000..f8d580a7b
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -0,0 +1,37 @@
+#body {
+    padding: 20px;
+    background: #bbbbbb;
+}
+
+ul {
+    list-style: none;
+}
+
+li {
+    margin: 5px 0;
+}
+
+.no-indent {
+    padding-left: 0;
+}
+
+.bullet {
+    width: 1.5em;
+    display: inline-block;
+}
+
+.collectionTreeView-dropTarget {
+    border-style: solid;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.docContainer {
+    display: inline-table;
+}
+
+.delete-button {
+    color: #999999;
+    float: right;
+    margin-left: 1em;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
new file mode 100644
index 000000000..8b06d9ac4
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -0,0 +1,175 @@
+import { observer } from "mobx-react";
+import { CollectionViewBase } from "./CollectionViewBase";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../../fields/TextField";
+import { observable, action } from "mobx";
+import "./CollectionTreeView.scss";
+import { EditableView } from "../EditableView";
+import { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+
+export interface TreeViewProps {
+    document: Document;
+    deleteDoc: (doc: Document) => void;
+}
+
+export enum BulletType {
+    Collapsed,
+    Collapsible,
+    List
+}
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class TreeView extends React.Component<TreeViewProps> {
+
+    @observable
+    collapsed: boolean = false;
+
+    delete = () => {
+        this.props.deleteDoc(this.props.document);
+    }
+
+
+    @action
+    remove = (document: Document) => {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) {
+            children.Data.splice(children.Data.indexOf(document), 1);
+        }
+    }
+
+    renderBullet(type: BulletType) {
+        let onClicked = action(() => this.collapsed = !this.collapsed);
+
+        switch (type) {
+            case BulletType.Collapsed:
+                return <div className="bullet" onClick={onClicked}>&#9654;</div>
+            case BulletType.Collapsible:
+                return <div className="bullet" onClick={onClicked}>&#9660;</div>
+            case BulletType.List:
+                return <div className="bullet">&mdash;</div>
+        }
+    }
+
+    /**
+     * Renders the EditableView title element for placement into the tree.
+     */
+    renderTitle() {
+        let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
+
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={this.props.document.Id}></div>;
+        }
+
+        return <div className="docContainer"> <EditableView contents={title.Data}
+            height={36} GetValue={() => {
+                let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
+                if (title && title !== "<Waiting>")
+                    return title.Data;
+                return "";
+            }} SetValue={(value: string) => {
+                this.props.document.SetData(KeyStore.Title, value, TextField);
+                return true;
+            }} />
+            <div className="delete-button" onClick={this.delete}>x</div>
+        </div >
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => this.props.document);
+        let titleElement = this.renderTitle();
+
+        // check if this document is a collection
+        if (children && children !== FieldWaiting) {
+            let subView;
+
+            // if uncollapsed, then add the children elements
+            if (!this.collapsed) {
+                // render all children elements
+                let childrenElement = (children.Data.map(value =>
+                    <TreeView document={value} deleteDoc={this.remove} />)
+                )
+                subView =
+                    <li key={this.props.document.Id} >
+                        {this.renderBullet(BulletType.Collapsible)}
+                        {titleElement}
+                        <ul key={this.props.document.Id}>
+                            {childrenElement}
+                        </ul>
+                    </li>
+            } else {
+                subView = <li key={this.props.document.Id}>
+                    {this.renderBullet(BulletType.Collapsed)}
+                    {titleElement}
+                </li>
+            }
+
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                {subView}
+            </div>
+        }
+
+        // otherwise this is a normal leaf node
+        else {
+            return <li key={this.props.document.Id}>
+                {this.renderBullet(BulletType.List)}
+                {titleElement}
+            </li>;
+        }
+    }
+}
+
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
+
+    @action
+    remove = (document: Document) => {
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) {
+            children.Data.splice(children.Data.indexOf(document), 1);
+        }
+    }
+
+    render() {
+        let titleStr = "";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== FieldWaiting) {
+            titleStr = title.Data;
+        }
+
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let childrenElement = !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <TreeView document={value} key={value.Id} deleteDoc={this.remove} />)
+            )
+
+        return (
+            <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
+                <h3>
+                    <EditableView contents={titleStr}
+                        height={72} GetValue={() => {
+                            return this.props.Document.Title;
+                        }} SetValue={(value: string) => {
+                            this.props.Document.SetData(KeyStore.Title, value, TextField);
+                            return true;
+                        }} />
+                </h3>
+                <ul className="no-indent">
+                    {childrenElement}
+                </ul>
+            </div >
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
new file mode 100644
index 000000000..1dbc3c3e3
--- /dev/null
+++ b/src/client/views/collections/CollectionView.tsx
@@ -0,0 +1,131 @@
+import { action } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { ContextMenu } from "../ContextMenu";
+import React = require("react");
+import { KeyStore } from "../../../fields/KeyStore";
+import { NumberField } from "../../../fields/NumberField";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionSchemaView } from "./CollectionSchemaView";
+import { CollectionViewProps } from "./CollectionViewBase";
+import { CollectionTreeView } from "./CollectionTreeView";
+import { Field } from "../../../fields/Field";
+
+export enum CollectionViewType {
+    Invalid,
+    Freeform,
+    Schema,
+    Docking,
+    Tree
+}
+
+export const COLLECTION_BORDER_WIDTH = 2;
+
+@observer
+export class CollectionView extends React.Component<CollectionViewProps> {
+
+    public static LayoutString(fieldKey: string = "DataKey") {
+        return `<CollectionView Document={Document}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
+                    isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
+    }
+    public active = () => {
+        var isSelected = this.props.isSelected();
+        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
+        var topMost = this.props.isTopMost;
+        return isSelected || childSelected || topMost;
+    }
+    @action
+    addDocument = (doc: Document): void => {
+        if (this.props.Document.Get(this.props.fieldKey) instanceof Field) {
+            //TODO This won't create the field if it doesn't already exist
+            const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+            value.push(doc);
+        } else {
+            this.props.Document.SetData(this.props.fieldKey, [doc], ListField);
+        }
+    }
+
+
+    @action
+    removeDocument = (doc: Document): boolean => {
+        //TODO This won't create the field if it doesn't already exist
+        const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+        let index = -1;
+        for (let i = 0; i < value.length; i++) {
+            if (value[i].Id == doc.Id) {
+                index = i;
+                break;
+            }
+        }
+
+        if (index !== -1) {
+            value.splice(index, 1)
+
+            SelectionManager.DeselectAll()
+            ContextMenu.Instance.clearItems()
+            return true;
+        }
+        return false
+    }
+
+    get collectionViewType(): CollectionViewType {
+        let Document = this.props.Document;
+        let viewField = Document.GetT(KeyStore.ViewType, NumberField);
+        if (viewField === "<Waiting>") {
+            return CollectionViewType.Invalid;
+        } else if (viewField) {
+            return viewField.Data;
+        } else {
+            return CollectionViewType.Freeform;
+        }
+    }
+
+    set collectionViewType(type: CollectionViewType) {
+        let Document = this.props.Document;
+        Document.SetData(KeyStore.ViewType, type, NumberField);
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
+        ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
+        ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
+        ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+    }
+
+    render() {
+        let viewType = this.collectionViewType;
+        let subView: JSX.Element;
+        switch (viewType) {
+            case CollectionViewType.Freeform:
+                subView = (<CollectionFreeFormView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            case CollectionViewType.Schema:
+                subView = (<CollectionSchemaView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            case CollectionViewType.Docking:
+                subView = (<CollectionDockingView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            case CollectionViewType.Tree:
+                subView = (<CollectionTreeView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
+                break;
+            default:
+                subView = <div></div>
+                break;
+        }
+        return (<div onContextMenu={this.specificContextMenu}>
+            {subView}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index eea7908ce..0a3b965f2 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,63 +1,121 @@
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
+import { action } from "mobx";
 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 { KeyStore } from "../../../fields/KeyStore";
+import { FieldWaiting } from "../../../fields/Field";
+import { undoBatch } from "../../util/UndoManager";
+import { DragManager } from "../../util/DragManager";
 import { DocumentView } from "../nodes/DocumentView";
-import { CollectionDockingView } from "./CollectionDockingView";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { Documents, DocumentOptions } from "../../documents/Documents";
+import { Key } from "../../../fields/Key";
 import { Transform } from "../../util/Transform";
-
+import { CollectionView } from "./CollectionView";
 
 export interface CollectionViewProps {
-    CollectionFieldKey: Key;
-    DocumentForCollection: Document;
-    ContainingDocumentView: Opt<DocumentView>;
-    GetTransform: () => Transform;
-    BackgroundView: Opt<DocumentView>;
+    fieldKey: Key;
+    Document: Document;
+    ScreenToLocalTransform: () => Transform;
+    isSelected: () => boolean;
+    isTopMost: boolean;
+    select: (ctrlPressed: boolean) => void;
+    bindings: any;
+    panelWidth: () => number;
+    panelHeight: () => number;
+    focus: (doc: Document) => void;
+}
+export interface SubCollectionViewProps extends CollectionViewProps {
+    active: () => boolean;
+    addDocument: (doc: Document) => void;
+    removeDocument: (doc: Document) => boolean;
+    CollectionView: CollectionView;
 }
 
-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;
+export class CollectionViewBase extends React.Component<SubCollectionViewProps> {
+    private dropDisposer?: DragManager.DragDropDisposer;
+    protected createDropTarget = (ele: HTMLDivElement) => {
+        if (this.dropDisposer) {
+            this.dropDisposer();
+        }
+        if (ele) {
+            this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } });
+        }
     }
+
+    @undoBatch
     @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);
+    protected drop(e: Event, de: DragManager.DropEvent) {
+        const docView: DocumentView = de.data["documentView"];
+        const doc: Document = de.data["document"];
+        if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) {
+            if (docView.props.RemoveDocument) {
+                docView.props.RemoveDocument(docView.props.Document);
+            }
+            this.props.addDocument(docView.props.Document);
+        } else if (doc) {
+            this.props.removeDocument(doc);
+            this.props.addDocument(doc);
+        }
+        e.stopPropagation();
     }
 
     @action
-    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>())
-        let index = value.indexOf(doc);
-        if (index !== -1) {
-            value.splice(index, 1)
-
-            SelectionManager.DeselectAll()
-            ContextMenu.Instance.clearItems()
-            return true;
+    protected onDrop(e: React.DragEvent, options: DocumentOptions): void {
+        e.stopPropagation()
+        e.preventDefault()
+        let that = this;
+
+        let html = e.dataTransfer.getData("text/html");
+        let text = e.dataTransfer.getData("text/plain");
+        if (html && html.indexOf("<img") != 0) {
+            let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 });
+            htmlDoc.SetText(KeyStore.DocumentText, text);
+            this.props.addDocument(htmlDoc);
+            return;
         }
-        return false
-    }
 
-}
\ No newline at end of file
+        for (let i = 0; i < e.dataTransfer.items.length; i++) {
+            let item = e.dataTransfer.items[i];
+            if (item.kind === "string" && item.type.indexOf("uri") != -1) {
+                e.dataTransfer.items[i].getAsString(function (s) {
+                    action(() => {
+                        var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, width: 300, })
+
+                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+                        if (docs != FieldWaiting) {
+                            if (!docs) {
+                                docs = new ListField<Document>();
+                                that.props.Document.Set(KeyStore.Data, docs)
+                            }
+                            docs.Data.push(img);
+                        }
+                    })()
+
+                })
+            }
+            if (item.kind == "file" && item.type.indexOf("image")) {
+                let fReader = new FileReader()
+                let file = item.getAsFile();
+
+                fReader.addEventListener("load", action("drop", () => {
+                    if (fReader.result) {
+                        let url = "" + fReader.result;
+                        let doc = Documents.ImageDocument(url, options)
+                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+                        if (docs != FieldWaiting) {
+                            if (!docs) {
+                                docs = new ListField<Document>();
+                                that.props.Document.Set(KeyStore.Data, docs)
+                            }
+                            docs.Data.push(doc);
+                        }
+                    }
+                }), false)
+
+                if (file) {
+                    fReader.readAsDataURL(file)
+                }
+            }
+        }
+    }
+}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index f37232c08..50dc5a619 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,24 +1,16 @@
-import { action, computed } from "mobx";
+import { computed, trace } from "mobx";
 import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 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";
 import { Transform } from "../../util/Transform";
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+import "./DocumentView.scss";
+import React = require("react");
 
 
 @observer
-export class CollectionFreeFormDocumentView extends DocumentView {
-    private _contextMenuCanOpen = false;
-    private _downX: number = 0;
-    private _downY: number = 0;
-    // private _mainCont = React.createRef<HTMLDivElement>();
+export class CollectionFreeFormDocumentView extends React.Component<DocumentViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
 
     constructor(props: DocumentViewProps) {
         super(props);
@@ -31,212 +23,63 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     }
 
     @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 `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
-    }
-
-    @computed
-    get width(): number {
-        return this.props.Document.GetNumber(KeyStore.Width, 0);
+        return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
     }
 
-    @computed
-    get nativeWidth(): number {
-        return this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-    }
+    @computed get zIndex(): number { return this.props.Document.GetNumber(KeyStore.ZIndex, 0); }
+    @computed get width(): number { return this.props.Document.Width(); }
+    @computed get height(): number { return this.props.Document.Height(); }
+    @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
 
     set width(w: number) {
         this.props.Document.SetData(KeyStore.Width, w, NumberField)
-        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+        if (this.nativeWidth && this.nativeHeight) {
             this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
         }
     }
 
-    @computed
-    get height(): number {
-        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);
-        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+        if (this.nativeWidth && this.nativeHeight) {
             this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
         }
     }
 
-    @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) => {
+    contentScaling = () => {
+        return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
     }
 
-    @computed
-    get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            this.props.ContainingCollectionView.active;
+    getTransform = (): Transform => {
+        return this.props.ScreenToLocalTransform().
+            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling());
     }
 
     @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.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.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);
-        }
-    }
-
-    getTransform = (): Transform => {
-        return this.props.GetTransform().translated(this.x, this.y);
+    get docView() {
+        return <DocumentView {...this.props}
+            ContentScaling={this.contentScaling}
+            ScreenToLocalTransform={this.getTransform}
+        />
     }
 
     render() {
-        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
-            <div className="node" ref={this._mainCont} style={{
+            <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
                 transformOrigin: "left top",
-                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} GetTransform={this.getTransform} DocumentView={this} />
+                transform: this.transform,
+                width: this.width,
+                height: this.height,
+                position: "absolute",
+                zIndex: this.zIndex,
+                backgroundColor: "transparent"
+            }} >
+                {this.docView}
             </div>
         );
     }
diff --git a/src/client/views/nodes/NodeView.scss b/src/client/views/nodes/DocumentView.scss
index dac1c0a8e..8e2ebd690 100644
--- a/src/client/views/nodes/NodeView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,4 +1,4 @@
-.node {
+.documentView-node {
     position: absolute;
     background: #cdcdcd;
     overflow: hidden;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 691ac6311..e01e1d4cd 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,173 +1,250 @@
 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 { Field, FieldWaiting, Opt } from "../../../fields/Field";
+import { Key } from "../../../fields/Key";
+import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import { TextField } from "../../../fields/TextField";
-import { Utils } from "../../../Utils";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { Transform } from "../../util/Transform";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
+import { CollectionView, CollectionViewType } from "../collections/CollectionView";
+import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
-import "./NodeView.scss";
+import { Documents } from "../../documents/Documents"
+import { KeyValueBox } from "./KeyValueBox"
+import { WebBox } from "../nodes/WebBox";
+import "./DocumentView.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?
+const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
-export interface DocumentViewProps {
-    DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
-    ContainingCollectionView: Opt<CollectionViewBase>;
 
+export interface DocumentViewProps {
+    ContainingCollectionView: Opt<CollectionView>;
     Document: Document;
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
-    GetTransform: () => Transform;
-    Scaling: number;
+    ScreenToLocalTransform: () => Transform;
+    isTopMost: boolean;
+    ContentScaling: () => number;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
+    focus: (doc: Document) => void;
+    SelectOnLoad: boolean;
+}
+export interface JsxArgs extends DocumentViewProps {
+    Keys: { [name: string]: Key }
+    Fields: { [name: string]: Field }
 }
 
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-
-    protected _mainCont = React.createRef<any>();
-    get MainContent() {
-        return this._mainCont;
+/*
+This function is pretty much a hack that lets us fill out the fields in JsxArgs with something that
+jsx-to-string can recover the jsx from
+Example usage of this function:
+    public static LayoutString() {
+        let args = FakeJsxArgs(["Data"]);
+        return jsxToString(
+            <CollectionFreeFormView
+                doc={args.Document}
+                fieldKey={args.Keys.Data}
+                DocumentViewForField={args.DocumentView} />,
+            { useFunctionCode: true, functionNameOnly: true }
+        )
     }
-    @computed
-    get layout(): string {
-        return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+*/
+export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
+    let Keys: { [name: string]: any } = {}
+    let Fields: { [name: string]: any } = {}
+    for (const key of keys) {
+        let fn = () => { }
+        Object.defineProperty(fn, "name", { value: key + "Key" })
+        Keys[key] = fn;
     }
-
-    @computed
-    get backgroundLayout(): string {
-        return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
+    for (const field of fields) {
+        let fn = () => { }
+        Object.defineProperty(fn, "name", { value: field })
+        Fields[field] = fn;
     }
+    let args: JsxArgs = {
+        Document: function Document() { },
+        DocumentView: function DocumentView() { },
+        Keys,
+        Fields
+    } as any;
+    return args;
+}
 
-    @computed
-    get layoutKeys(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
+@observer
+export class DocumentView extends React.Component<DocumentViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
+    private _documentBindings: any = null;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
+    @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
+    @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<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>()); }
+    screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        if (e.shiftKey && e.buttons === 1) {
+            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
+            e.stopPropagation();
+        } else {
+            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);
+            }
+        }
     }
-
-    @computed
-    get layoutFields(): Key[] {
-        return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
+    onPointerMove = (e: PointerEvent): void => {
+        if (e.cancelBubble) {
+            return;
+        }
+        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.removeEventListener("pointerup", this.onPointerUp)
+            if (this._mainCont.current != null && !this.topMost) {
+                const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+                let dragData: { [id: string]: any } = {};
+                dragData["documentView"] = this;
+                dragData["xOffset"] = e.x - left;
+                dragData["yOffset"] = e.y - top;
+                DragManager.StartDrag(this._mainCont.current, dragData, {
+                    handlers: {
+                        dragComplete: action(() => { }),
+                    },
+                    hideSource: true
+                })
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
     }
-
-    // 
-    // 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.GetNumber(KeyStore.Scale, 1);
-            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
+    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);
         }
-        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;
+    deleteClicked = (): void => {
+        if (this.props.RemoveDocument) {
+            this.props.RemoveDocument(this.props.Document);
         }
+    }
 
-        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;
-        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
-        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
+    fieldsClicked = (e: React.MouseEvent): void => {
+        if (this.props.AddDocument) {
+            this.props.AddDocument(Documents.KVPDocument(this.props.Document));
+        }
+    }
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.Instance.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)
     }
 
-    //
-    // 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 } {
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.Instance.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
 
-        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;
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault()
+            return;
+        }
+        e.preventDefault()
+
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
+        ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
+        ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+        //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        if (!this.topMost) {
+            // DocumentViews should stop propagation of this event
+            e.stopPropagation();
         }
 
-        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;
+        ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        SelectionManager.SelectDoc(this, e.ctrlKey);
+    }
+    @computed get mainContent() {
+        return <JsxParser
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+            bindings={this._documentBindings}
+            jsx={this.layout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
+        />
+    }
 
-        // 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.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);
-            parentX = ScreenX;
-            parentY = ScreenY;
-        }
-        return { ScreenX: parentX, ScreenY: parentY };
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
     }
 
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed)
+    }
 
     render() {
-        let bindings = { ...this.props } as any;
+        if (!this.props.Document) return <div></div>
+        let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
+        if (!lkeys || lkeys === "<Waiting>") {
+            return <p>Error loading layout keys</p>;
+        }
+        this._documentBindings = {
+            ...this.props,
+            isSelected: this.isSelected,
+            select: this.select,
+            focus: this.props.focus
+        };
         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
+            this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
         }
         for (const key of this.layoutFields) {
             let field = this.props.Document.Get(key);
-            bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
+            this._documentBindings[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.
-        }
-        var annotated = <JsxParser
-            components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
-            bindings={bindings}
-            jsx={this.backgroundLayout}
-            showWarnings={true}
-            onError={(test: any) => { console.log(test) }}
-        />;
-        bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
+        this._documentBindings.bindings = this._documentBindings;
+        var scaling = this.props.ContentScaling();
+        var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         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 className="documentView-node" ref={this._mainCont}
+                style={{
+                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
+                    height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
+                    transformOrigin: "left top",
+                    transform: `scale(${scaling} , ${scaling})`
+                }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown} >
+                {this.mainContent}
             </div>
         )
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 12371eb2e..9e63006d1 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,16 +1,17 @@
 import React = require("react")
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Field, FieldWaiting, FieldValue } from "../../../fields/Field";
 import { Document } from "../../../fields/Document";
 import { TextField } from "../../../fields/TextField";
 import { NumberField } from "../../../fields/NumberField";
 import { RichTextField } from "../../../fields/RichTextField";
 import { ImageField } from "../../../fields/ImageField";
+import { WebField } from "../../../fields/WebField";
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
-import { DocumentView } from "./DocumentView";
+import { WebBox } from "./WebBox";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -20,12 +21,19 @@ import { DocumentView } from "./DocumentView";
 export interface FieldViewProps {
     fieldKey: Key;
     doc: Document;
-    DocumentViewForField: Opt<DocumentView>
+    isSelected: () => boolean;
+    select: () => void;
+    isTopMost: boolean;
+    selectOnLoad: boolean;
+    bindings: any;
 }
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
+    public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") {
+        return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost} />`;
+    }
+
     @computed
     get field(): FieldValue<Field> {
         const { doc, fieldKey } = this.props;
@@ -45,11 +53,20 @@ export class FieldView extends React.Component<FieldViewProps> {
         else if (field instanceof ImageField) {
             return <ImageBox {...this.props} />
         }
+        else if (field instanceof WebField) {
+            return <WebBox {...this.props} />
+        }
+        // bcz: this belongs here, but it doesn't render well so taking it out for now
+        // else if (field instanceof HtmlField) {
+        //     return <WebBox {...this.props} />
+        // }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
-        } else if (field != FieldWaiting) {
-            return <p>{field.GetValue}</p>
-        } else
+        }
+        else if (field != FieldWaiting) {
+            return <p>{JSON.stringify(field.GetValue())}</p>
+        }
+        else
             return <p> {"Waiting for server..."} </p>
     }
 
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 492367fce..21bd43b6e 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -1,7 +1,7 @@
 .ProseMirror {
-    margin-top: -1em;
     width: 100%;
-    height: 100%;
+    height: auto;
+    min-height: 100%
 }
 
 .ProseMirror:focus {
@@ -10,5 +10,11 @@
 
 .formattedTextBox-cont {
     background: white;
-    padding: 1vw;
+    padding: 1;
+    border: black;
+    border-width: 10;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    color: initial;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 0fe6befda..04eb2052d 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -3,19 +3,18 @@ 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 { EditorState, Transaction, } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
-import { SelectionManager } from "../../util/SelectionManager";
+import { Opt, FieldWaiting } from "../../../fields/Field";
 import "./FormattedTextBox.scss";
 import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
-import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-import { observer } from "mobx-react";
 import { ContextMenu } from "../../views/ContextMenu";
 
 
+
+
 // 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"}
@@ -34,7 +33,7 @@ import { ContextMenu } from "../../views/ContextMenu";
 //]
 export class FormattedTextBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(FormattedTextBox, fieldStr) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
@@ -43,7 +42,6 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         super(props);
 
         this._ref = React.createRef();
-
         this.onChange = this.onChange.bind(this);
     }
 
@@ -51,25 +49,23 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         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);
+            this.props.doc.SetData(this.props.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)
+                keymap(baseKeymap),
             ]
         };
 
-        let field = doc.GetT(fieldKey, RichTextField);
-        if (field && field != FieldWaiting) {  // bcz: don't think this works
+        let field = this.props.doc.GetT(this.props.fieldKey, RichTextField);
+        if (field && field != FieldWaiting) {
             state = EditorState.fromJSON(config, JSON.parse(field.Data));
         } else {
             state = EditorState.create(config);
@@ -89,6 +85,10 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
+        if (this.props.selectOnLoad) {
+            this.props.select();
+            this._editorView!.focus();
+        }
     }
 
     componentWillUnmount() {
@@ -106,31 +106,44 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     @action
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        const { fieldKey, doc } = this.props;
-        doc.SetData(fieldKey, e.target.value, RichTextField);
+        this.props.doc.SetData(this.props.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)) {
+        if (e.buttons === 1 && this.props.isSelected()) {
             e.stopPropagation();
         }
     }
 
-    //REPLACE THIS WITH CAPABILITIES SPECIFC TO THIS TYPE OF NODE
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
     textCapability = (e: React.MouseEvent): void => {
     }
 
     specificContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
+        // ContextMenu.Instance.addItem({
+        //     description: "Submenu",
+        //     items: [
+        //         {
+        //             description: "item 1", event:
+        //     },
+        //         {
+        //             description: "item 2", event:
+        //     }
+        //     ]
+        // })
+        // e.stopPropagation()
+
+    }
+
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
     }
 
     render() {
         return (<div className="formattedTextBox-cont"
-            style={{
-                color: "initial",
-                whiteSpace: "initial"
-            }}
             onPointerDown={this.onPointerDown}
-            ref={this._ref} onContextMenu={this.specificContextMenu} />)
+            onContextMenu={this.specificContextMenu}
+            onWheel={this.onPointerWheel}
+            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
index 2bd8b1d3c..ea459b911 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,8 +1,17 @@
 
 .imageBox-cont {
     padding: 0vw;
-    position: absolute;
-    width: 100%
+    position: relative;
+    text-align: center;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%
+}
+
+.imageBox-cont img {
+    object-fit: contain;
+    height: 100%;
 }
 
 .imageBox-button {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f363487c3..8c44395f4 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,23 +1,22 @@
 
 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, spy } from 'mobx';
-import { KeyStore } from '../../../fields/Key';
 import { ContextMenu } from "../../views/ContextMenu";
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
+    public static LayoutString() { return FieldView.LayoutString(ImageBox) }
     private _ref: React.RefObject<HTMLDivElement>;
+    private _imgRef: React.RefObject<HTMLImageElement>;
     private _downX: number = 0;
     private _downY: number = 0;
     private _lastTap: number = 0;
@@ -28,12 +27,20 @@ export class ImageBox extends React.Component<FieldViewProps> {
         super(props);
 
         this._ref = React.createRef();
+        this._imgRef = React.createRef();
         this.state = {
             photoIndex: 0,
             isOpen: false,
         };
     }
 
+    @action
+    onLoad = (target: any) => {
+        var h = this._imgRef.current!.naturalHeight;
+        var w = this._imgRef.current!.naturalWidth;
+        this.props.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w)
+    }
+
     componentDidMount() {
     }
 
@@ -42,7 +49,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     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)) {
+            if (e.buttons === 1 && this.props.isSelected()) {
                 e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
@@ -64,7 +71,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     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)) {
+        if (this._isOpen && this.props.isSelected()) {
             return (<Lightbox
                 mainSrc={images[this._photoIndex]}
                 nextSrc={images[(this._photoIndex + 1) % images.length]}
@@ -82,7 +89,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
         }
     }
 
-    //REPLACE THIS WITH CAPABILITIES SPECIFC TO THIS TYPE OF NODE
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
     imageCapability = (e: React.MouseEvent): void => {
     }
 
@@ -94,10 +101,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 nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} onContextMenu={this.specificContextMenu}>
-                <img src={path} width="100%" alt="Image not found" />
+                <img src={path} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
                 {this.lightbox(path)}
             </div>)
     }
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
new file mode 100644
index 000000000..1295266e5
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -0,0 +1,31 @@
+.keyValueBox-cont {
+    overflow-y:scroll;
+    height: 100%;
+    border: black;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+    display: inline-block;
+    .imageBox-cont img {
+        max-height:45px;
+        height: auto;
+    }
+}
+.keyValueBox-table {
+    position: relative;
+}
+.keyValueBox-header {
+    background:gray;
+}
+.keyValueBox-evenRow {
+    background: white;
+    .formattedTextBox-cont {
+        background: white;
+    }
+}
+.keyValueBox-oddRow {
+    background: lightGray;
+    .formattedTextBox-cont {
+        background: lightgray;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
new file mode 100644
index 000000000..e8ebd50be
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -0,0 +1,85 @@
+
+import { IReactionDisposer } from 'mobx';
+import { observer } from "mobx-react";
+import { EditorView } from 'prosemirror-view';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { Document } from '../../../fields/Document';
+import { Opt, FieldWaiting } from '../../../fields/Field';
+import { KeyStore } from '../../../fields/KeyStore';
+import { FieldView, FieldViewProps } from './FieldView';
+import { KeyValuePair } from "./KeyValuePair";
+import "./KeyValueBox.scss";
+import React = require("react")
+
+@observer
+export class KeyValueBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _editorView: Opt<EditorView>;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+    }
+
+
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (e.buttons === 1 && this.props.isSelected()) {
+            e.stopPropagation();
+        }
+    }
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+    }
+
+    createTable = () => {
+        let doc = this.props.doc.GetT(KeyStore.Data, Document);
+        if (!doc || doc == FieldWaiting) {
+            return <tr><td>Loading...</td></tr>
+        }
+        let realDoc = doc;
+
+        let ids: { [key: string]: string } = {};
+        let protos = doc.GetAllPrototypes();
+        for (const proto of protos) {
+            proto._proxies.forEach((val, key) => {
+                if (!(key in ids)) {
+                    ids[key] = key;
+                }
+            })
+        }
+
+        let rows: JSX.Element[] = [];
+        let i = 0;
+        for (let key in ids) {
+            rows.push(<KeyValuePair doc={realDoc} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />)
+        }
+        return rows;
+    }
+
+
+    render() {
+
+        return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
+            <table className="keyValueBox-table">
+                <tbody>
+                    <tr className="keyValueBox-header">
+                        <th>Key</th>
+                        <th>Fields</th>
+                    </tr>
+                    {this.createTable()}
+                </tbody>
+            </table>
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
new file mode 100644
index 000000000..a97e98313
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -0,0 +1,58 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./KeyValueBox.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { Opt, Field } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import { Document } from '../../../fields/Document';
+import { Key } from '../../../fields/Key';
+import { Server } from "../../Server"
+
+// Represents one row in a key value plane
+
+export interface KeyValuePairProps {
+    rowStyle: string;
+    fieldId: string;
+    doc: Document;
+}
+@observer
+export class KeyValuePair extends React.Component<KeyValuePairProps> {
+
+    @observable
+    private key: Opt<Key>
+
+    constructor(props: KeyValuePairProps) {
+        super(props);
+        Server.GetField(this.props.fieldId,
+            action((field: Opt<Field>) => {
+                if (field) {
+                    this.key = field as Key;
+                }
+            }));
+
+    }
+
+
+    render() {
+        if (!this.key) {
+            return <tr><td>error</td><td></td></tr>
+
+        }
+        let props: FieldViewProps = {
+            doc: this.props.doc,
+            fieldKey: this.key,
+            isSelected: () => false,
+            select: () => { },
+            isTopMost: false,
+            bindings: {},
+            selectOnLoad: false,
+        }
+        return (
+            <tr className={this.props.rowStyle}>
+                <td>{this.key.Name}</td>
+                <td><FieldView {...props} /></td>
+            </tr>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
new file mode 100644
index 000000000..e72b3c4da
--- /dev/null
+++ b/src/client/views/nodes/WebBox.scss
@@ -0,0 +1,14 @@
+
+.webBox-cont {
+    padding: 0vw;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.webBox-button {
+    padding : 0vw;
+    border: none;
+    width : 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
new file mode 100644
index 000000000..2ca8d49ce
--- /dev/null
+++ b/src/client/views/nodes/WebBox.tsx
@@ -0,0 +1,38 @@
+import "./WebBox.scss";
+import React = require("react")
+import { WebField } from '../../../fields/WebField';
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { computed } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+
+@observer
+export class WebBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(WebBox); }
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+    @computed get html(): string { return this.props.doc.GetHtml(KeyStore.Data, ""); }
+
+    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 WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu";
+
+        let content = this.html ?
+            <span dangerouslySetInnerHTML={{ __html: this.html }}></span> :
+            <div style={{ width: "100%", height: "100%", position: "absolute" }}>
+                <iframe src={path} style={{ position: "absolute", width: "100%", height: "100%" }}></iframe>
+                {this.props.isSelected() ? (null) : <div style={{ width: "100%", height: "100%", position: "absolute" }} />}
+            </div>;
+
+        return (
+            <div className="webBox-cont"  >
+                {content}
+            </div>)
+    }
+}
\ No newline at end of file