fixed bugs and merged with master

21 files changed, 346 insertions, 256 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5c73c6b87..e5154737e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -9,10 +9,8 @@ import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "../views/nodes/ImageBox";
 import { WebField } from "../../fields/WebField";
 import { WebBox } from "../views/nodes/WebBox";
-import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
-import { FieldId } from "../../fields/Field";
 import { CollectionView, CollectionViewType } from "../views/collections/CollectionView";
-import { FieldView } from "../views/nodes/FieldView";
+import { HtmlField } from "../../fields/HtmlField";
 
 export interface DocumentOptions {
     x?: number;
@@ -110,13 +108,13 @@ export namespace Documents {
             <div style="position:relative; margin:auto; height:85%;" >`
             + ImageBox.LayoutString() +
             `</div>
-            <div style="position:relative; overflow:auto; height:15%; text-align:center; ">`
+            <div style="position:relative; height:15%; text-align:center; ">`
             + FormattedTextBox.LayoutString("CaptionKey") +
             `</div> 
         </div>` };
     function FixedCaption() {
         return `<div style="position:absolute; height:30px; bottom:0; width:100%">
-            <div style="position:absolute; width:100%; height:100%; overflow:auto;text-align:center;bottom:0;">`
+            <div style="position:absolute; width:100%; height:100%; text-align:center;bottom:0;">`
             + FormattedTextBox.LayoutString("CaptionKey") +
             `</div> 
         </div>` };
@@ -133,35 +131,34 @@ export namespace Documents {
         return doc;
     }
 
-    let webProtoId: FieldId;
+    let webProto: Document;
+    const webProtoId = "webProto";
     function GetWebPrototype(): Document {
-        if (webProtoId === undefined) {
-            let webProto = new Document();
-            webProtoId = webProto.Id;
+        if (!webProto) {
+            webProto = new Document(webProtoId);
             webProto.Set(KeyStore.Title, new TextField("WEB PROTO"));
             webProto.Set(KeyStore.X, new NumberField(0));
             webProto.Set(KeyStore.Y, new NumberField(0));
-            webProto.Set(KeyStore.NativeWidth, new NumberField(300));
-            webProto.Set(KeyStore.NativeHeight, new NumberField(300));
             webProto.Set(KeyStore.Width, new NumberField(300));
             webProto.Set(KeyStore.Height, new NumberField(300));
-            webProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("AnnotationsKey")));
-            webProto.Set(KeyStore.BackgroundLayout, new TextField(WebBox.LayoutString()));
+            //webProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("AnnotationsKey")));
+            webProto.Set(KeyStore.Layout, new TextField(WebBox.LayoutString()));
             webProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
-            Server.AddDocument(webProto);
-            return webProto;
         }
-        return Server.GetField(webProtoId) as Document;
+        return webProto;
     }
 
     export function WebDocument(url: string, options: DocumentOptions = {}): Document {
         let doc = GetWebPrototype().MakeDelegate();
         setupOptions(doc, options);
         doc.Set(KeyStore.Data, new WebField(new URL(url)));
-        Server.AddDocument(doc);
-        var sdoc = Server.GetField(doc.Id) as Document;
-        console.log(sdoc);
-        return sdoc;
+        return doc;
+    }
+    export function HtmlDocument(html: string, options: DocumentOptions = {}): Document {
+        let doc = GetWebPrototype().MakeDelegate();
+        setupOptions(doc, options);
+        doc.Set(KeyStore.Data, new HtmlField(html));
+        return doc;
     }
 
     let collectionProto: Document;
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index aab23f91c..6b4b8ca57 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,4 +1,37 @@
 import { DocumentDecorations } from "../views/DocumentDecorations";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../../fields/Document"
+import { action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
+
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
+    let onRowMove = action((e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+        DragManager.StartDrag(_reference.current!, { document: docFunc() });
+    });
+    let onRowUp = action((e: PointerEvent): void => {
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+    });
+    let onItemDown = (e: React.PointerEvent) => {
+        // if (this.props.isSelected() || this.props.isTopMost) {
+        if (e.button == 0) {
+            e.stopPropagation();
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(docFunc(), e);
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
+        //}
+    }
+    return onItemDown;
+}
 
 export namespace DragManager {
     export function Root() {
@@ -106,22 +139,32 @@ export namespace DragManager {
             e.preventDefault();
             x += e.movementX;
             y += e.movementY;
+            if (e.shiftKey) {
+                abortDrag();
+                const docView: DocumentView = dragData["documentView"];
+                const doc: Document = docView ? docView.props.Document : dragData["document"];
+                CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 });
+            }
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         };
-        const upHandler = (e: PointerEvent) => {
+
+        const abortDrag = () => {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
-            FinishDrag(dragElement, e, dragData, options);
+            dragDiv.removeChild(dragElement);
             if (hideSource && !wasHidden) {
                 ele.hidden = false;
             }
+        }
+        const upHandler = (e: PointerEvent) => {
+            abortDrag();
+            FinishDrag(dragElement, e, dragData, options);
         };
         document.addEventListener("pointermove", moveHandler, true);
         document.addEventListener("pointerup", upHandler);
     }
 
     function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) {
-        dragDiv.removeChild(dragEle);
         const target = document.elementFromPoint(e.x, e.y);
         if (!target) {
             return;
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index e73f62904..6540af5b2 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -28,4 +28,13 @@ 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);
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 69ded8fa7..af4db521c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -15,9 +15,8 @@ import { ServerUtils } from '../../server/ServerUtil';
 import { MessageStore, DocumentTransfer } from '../../server/Message';
 import { Transform } from '../util/Transform';
 import { CollectionDockingView } from './collections/CollectionDockingView';
-import { FieldWaiting } from '../../fields/Field';
 import { UndoManager } from '../util/UndoManager';
-import { DragManager } from '../util/DragManager';
+import { setupDrag } from '../util/DragManager';
 
 
 configure({
@@ -101,28 +100,7 @@ Documents.initProtos(() => {
         let textRef = React.createRef<HTMLDivElement>();
         let schemaRef = React.createRef<HTMLDivElement>();
         let colRef = React.createRef<HTMLDivElement>();
-        let curMoveListener: any = null
-        let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
 
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(dragRef.current!, { document: creator() });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => {
-            if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator());
-                e.stopPropagation();
-            } else {
-                document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef));
-                document.addEventListener('pointerup', onRowUp);
-            }
-        }
         ReactDOM.render((
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
@@ -135,18 +113,18 @@ Documents.initProtos(() => {
                 <DocumentDecorations />
                 <ContextMenu />
                 <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
-                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
-                <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={webRef} >
-                    <button onPointerDown={onRowDown(addWebNode, webRef)} onClick={addClick(addWebNode)}>Add Web</button></div>
-                <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
-                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
-                <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
-                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
-                <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
-                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
-                <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
-                <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
-                <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={webRef} >
+                    <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
+                <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={textRef}>
+                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={colRef}>
+                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                <div style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} ref={schemaRef}>
+                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                <button style={{ position: 'absolute', bottom: '125px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
+                <button style={{ position: 'absolute', bottom: '25px', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+                <button style={{ position: 'absolute', bottom: '0px', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
             </div>),
             document.getElementById('root'));
     })
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 8926f4aca..3d7e46a01 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -10,7 +10,6 @@ import { FieldId, Opt, Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { Utils } from "../../../Utils";
 import { Server } from "../../Server";
-import { DragManager } from "../../util/DragManager";
 import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
@@ -34,10 +33,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
 
     private _goldenLayout: any = null;
-    private _dragDiv: any = null;
-    private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLElement | undefined;
-    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -47,28 +42,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).React = React;
         (window as any).ReactDOM = ReactDOM;
     }
-
-    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
-        this._dragElement = dragElement;
-        this._dragParent = dragElement.parentElement;
-        // bcz: we want to copy this document into the header, not move it there.
-        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
-
-        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
-        this._dragDiv = document.createElement("div");
-        this._dragDiv.style.opacity = 0;
-        DragManager.Root().appendChild(this._dragDiv);
-        this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc));
-
-        //   - add our document to that div so that GoldenLayout will get the move events its listening for
-        this._dragDiv.appendChild(this._dragElement);
-
-        //   - add a duplicate of our document to the original document's container 
-        //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
     }
 
     @action
@@ -98,7 +73,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
     @action
-    public AddRightSplit(document: Document) {
+    public AddRightSplit(document: Document, minimize: boolean = false) {
         this._goldenLayout.emit('stateChanged');
         let newItemStackConfig = {
             type: 'stack',
@@ -121,10 +96,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             collayout.config["width"] = 50;
             newContentItem.config["width"] = 50;
         }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
         newContentItem.callDownwards('_$init');
         this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
         this._goldenLayout.emit('stateChanged');
         this.stateChanged();
+        return newContentItem;
     }
 
     setupGoldenLayout() {
@@ -218,13 +198,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        if (this._dragDiv) {
-            this._dragDiv.removeChild(this._dragElement);
-            this._dragParent!.removeChild(this._dragFakeElement!);
-            this._dragParent!.appendChild(this._dragElement!);
-            DragManager.Root().removeChild(this._dragDiv);
-            this._dragDiv = null;
-        }
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
@@ -235,11 +208,11 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         //stack.header.controlsContainer.find('.lm_popout').hide();
         stack.header.controlsContainer.find('.lm_close') //get the close icon
             .off('click') //unbind the current click handler
-            .click(function () {
+            .click(action(function () {
                 //if (confirm('really close this?')) {
                 stack.remove();
                 //}
-            });
+            }));
     }
 
     render() {
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index d583a8218..e86295c26 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,14 +1,5 @@
 .collectionfreeformview-container {
 
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 10px;
-    }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(0,0,0,.5);
-    }
-    
     .collectionfreeformview > .jsx-parser{
         position:absolute;
         height: 100%;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index b54d9e0cf..c454d62b3 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -16,6 +16,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { WebView } from "../nodes/WebView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
+import { WebBox } from "../nodes/WebBox";
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
@@ -199,7 +200,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView, WebBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -210,7 +211,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView, WebBox }}
                 bindings={this.props.bindings}
                 jsx={this.overlayLayout}
                 showWarnings={true}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 74aa20e8b..d40e6d314 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,17 +1,36 @@
 
+
 .collectionSchemaView-container {
     border-style: solid;
     box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 100%;
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 10px;
+    .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%;
     }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(0,0,0,.5);
+    .collectionSchemaView-tableContainer {
+        position: relative;
+        float: left;
+        height: 100%; 
     }
 
     .ReactTable {
@@ -38,6 +57,7 @@
         }
         .rt-tr-group {
             direction: ltr;
+            max-height: 44px;
         }
         .rt-td {
             border-width: 1;
@@ -61,13 +81,13 @@
             background:grey;
         }
     .ReactTable .rt-th, .ReactTable .rt-td {
-        max-height: 75px;
+        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;
-        height: auto;
     }
     .documentView-node:first-child {
         background: grey;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index d5b82cbb6..03110a9c7 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -15,11 +15,11 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
-import { DragManager } from "../../util/DragManager";
-import { CollectionDockingView } from "./CollectionDockingView";
+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 {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -32,9 +32,6 @@ export class CollectionSchemaView extends CollectionViewBase {
     @observable _selectedIndex = 0;
     @observable _splitPercentage: number = 50;
 
-
-
-
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
@@ -48,29 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase {
             <FieldView {...props} />
         )
         let reference = React.createRef<HTMLDivElement>();
-        let onRowMove = action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
-
-            document.removeEventListener("pointermove", onRowMove);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(reference.current!, { document: props.doc });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", onRowMove);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (e: React.PointerEvent) => {
-            if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc);
-                e.stopPropagation();
-            } else {
-                document.addEventListener("pointermove", onRowMove);
-                document.addEventListener('pointerup', onRowUp);
-            }
-        }
+        let onItemDown = setupDrag(reference, () => props.doc);
         return (
-            <div onPointerDown={onRowDown} ref={reference}>
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
                 <EditableView contents={contents}
                     height={36} GetValue={() => {
                         let field = props.doc.Get(props.fieldKey);
@@ -78,7 +55,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                             return field.ToScriptString();
                         }
                         return field || "";
-                    }} SetValue={(value: string) => {
+                    }}
+                    SetValue={(value: string) => {
                         let script = CompileScript(value);
                         if (!script.compiled) {
                             return false;
@@ -95,7 +73,9 @@ export class CollectionSchemaView extends CollectionViewBase {
                             }
                         }
                         return false;
-                    }}></EditableView></div>
+                    }}>
+                </EditableView>
+            </div>
         )
     }
 
@@ -114,8 +94,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             }),
             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"
             }
         };
     }
@@ -214,44 +194,43 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             </Measure>
         )
-        let handle = !this.props.active() ? (null) : (
-            <div style={{ position: "absolute", height: "37px", width: "20px", zIndex: 20, right: 0, top: 0, background: "Black" }} onPointerDown={this.onExpanderDown} />);
+        let previewHandle = !this.props.active() ? (null) : (
+            <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
         return (
-            <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
-                <Measure onResize={action((r: any) => {
-                    this._dividerX = r.entry.width;
-                    this._panelHeight = r.entry.height;
-                })}>
-                    {({ measureRef }) =>
-                        <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}>
-                            <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}
-                            />
-                        </div>
-                    }
-                </Measure>
-                <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: `${this.DIVIDER_WIDTH}px`, height: "100%" }} onPointerDown={this.onDividerDown} />
-                <div className="collectionSchemaView-previewRegion"
-                    onDrop={(e: React.DragEvent) => this.onDrop(e, {})}
-                    ref={this.createDropTarget}
-                    style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}>
-                    {content}
+            <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}
+                                />
+                            </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>
-                {handle}
             </div >
         )
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
new file mode 100644
index 000000000..c488e2894
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -0,0 +1,34 @@
+ul {
+    list-style: none;
+}
+
+li {
+    margin: 5px 0;
+}
+
+.no-indent {
+    padding-left: 0;
+}
+
+/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */
+
+li:before {
+    content: '\2014';
+    margin-right: 0.7em;
+}
+
+.collapsed:before {
+    content: '\25b6';
+    margin-right: 0.65em;
+}
+
+.uncollapsed:before {
+    content: '\25bc';
+    margin-right: 0.5em;
+}
+
+.collectionTreeView-dropTarget {
+    border-style: solid;
+    box-sizing: border-box;
+    height:100%;
+}
\ 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..55c804337
--- /dev/null
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -0,0 +1,86 @@
+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 { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+
+export interface TreeViewProps {
+    document: Document;
+}
+
+@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;
+
+    /**
+     * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
+     * @param childDocument The document to render.
+     */
+    renderChild(childDocument: Document) {
+        let reference = React.createRef<HTMLDivElement>();
+
+        var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+        let onItemDown = setupDrag(reference, () => childDocument);
+
+        if (title && title != FieldWaiting) {
+            let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
+                <ul>
+                    <TreeView document={childDocument} />
+                </ul>;
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                <li className={!children ? "leaf" : this.collapsed ? "collapsed" : "uncollapsed"}
+                    onClick={action(() => this.collapsed = !this.collapsed)} >
+                    {title.Data}
+                    {subView}
+                </li>
+            </div>
+        }
+        return (null);
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        return !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <div key={value.Id}>
+                    {this.renderChild(value)}
+                </div>)
+            )
+    }
+}
+
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
+
+    render() {
+        let titleStr = "";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== FieldWaiting) {
+            titleStr = title.Data;
+        }
+        return (
+            <div className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+                <h3>{titleStr}</h3>
+                <ul className="no-indent">
+                    <TreeView
+                        document={this.props.Document}
+                    />
+                </ul>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 83886f933..03e1f1fa4 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -11,15 +11,15 @@ 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;
@@ -102,6 +102,10 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 return (<CollectionDockingView {...this.props}
                     addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
                     CollectionView={this} />)
+            case CollectionViewType.Tree:
+                return (<CollectionTreeView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
             default:
                 return <div></div>
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f4ebfb4d8..3517dd0c6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -97,7 +97,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downX = e.clientX;
         this._downY = e.clientY;
         if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
             e.stopPropagation();
         } else {
             this._contextMenuCanOpen = true;
@@ -175,25 +175,22 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             return;
         }
 
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
+        ContextMenu.Instance.clearItems()
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+        ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
+        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) })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        if (!this.topMost) {
             // DocumentViews should stop propagation of this event
             e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            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: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
         }
+
+        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() {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 978cfe196..4e8abd682 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -12,7 +12,6 @@ import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { WebBox } from "./WebBox";
-import { DocumentView } from "./DocumentView";
 import { HtmlField } from "../../../fields/HtmlField";
 import { WebView } from "./WebView";
 
@@ -58,9 +57,14 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
-        } else if (field != FieldWaiting) {
-            return <p>{field.GetValue}</p>
-        } else
+        }
+        else if (field instanceof WebField) {
+            return <WebView {...this.props} />
+        }
+        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 0389a3f85..f06fdae24 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -9,8 +9,10 @@
 }
 
 .formattedTextBox-cont {
-    background: beige;
-    padding: 0;
+    background: rgb(218, 215, 215);
+    padding: 1;
+    border: black;
+    border-width: 10;
     overflow-y: scroll;
     overflow-x: hidden;
     color: initial;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 4fe73fb8d..e206bf8d5 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -9,7 +9,6 @@ import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
 import { observable, action } from 'mobx';
 import { KeyStore } from '../../../fields/KeyStore';
-import { element } from 'prop-types';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 9df984d68..e72b3c4da 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -2,7 +2,8 @@
 .webBox-cont {
     padding: 0vw;
     position: absolute;
-    width: 100%
+    width: 100%;
+    height: 100%;
 }
 
 .webBox-button {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 4f774bae2..0a198f059 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -1,15 +1,12 @@
-
-import Lightbox from 'react-image-lightbox';
-import { SelectionManager } from "../../util/SelectionManager";
 import "./WebBox.scss";
 import React = require("react")
 import { WebField } from '../../../fields/WebField';
 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 { observable, action, spy, computed } from 'mobx';
 import { KeyStore } from '../../../fields/KeyStore';
+import { HtmlField } from "../../../fields/HtmlField";
 
 @observer
 export class WebBox extends React.Component<FieldViewProps> {
@@ -59,15 +56,27 @@ export class WebBox extends React.Component<FieldViewProps> {
         e.stopPropagation();
     }
 
+    @computed
+    get html(): string {
+        return this.props.doc.GetData(KeyStore.Data, HtmlField, "" as string);
+    }
+
+
     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 nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
+
+        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" onPointerDown={this.onPointerDown} ref={this._ref}   >
-                <iframe src={path} width={nativeWidth}></iframe>
+                {content}
             </div>)
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/WebView.tsx b/src/client/views/nodes/WebView.tsx
index 717aa8bf5..5cc85eb28 100644
--- a/src/client/views/nodes/WebView.tsx
+++ b/src/client/views/nodes/WebView.tsx
@@ -3,9 +3,7 @@ import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { KeyStore } from "../../../fields/KeyStore";
 import React = require('react')
-import { TextField } from "../../../fields/TextField";
 import { HtmlField } from "../../../fields/HtmlField";
-import { RichTextField } from "../../../fields/RichTextField";
 
 @observer
 export class WebView extends React.Component<FieldViewProps> {
diff --git a/src/fields/BasicField 2.ts b/src/fields/BasicField 2.ts
deleted file mode 100644
index 437024d07..000000000
--- a/src/fields/BasicField 2.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Field } from "./Field"
-import { observable, computed, action } from "mobx";
-
-export abstract class BasicField<T> extends Field {
-    constructor(data: T) {
-        super();
-
-        this.data = data;
-    }
-
-    @observable
-    private data:T;
-
-    @computed
-    get Data(): T {
-        return this.data;
-    }
-
-    set Data(value: T) {
-        if(this.data === value) {
-            return;
-        }
-        this.data = value;
-    }
-
-    @action
-    TrySetValue(value: any): boolean {
-        if (typeof value == typeof this.data) {
-            this.Data = value;
-            return true;
-        }
-        return false;
-    }
-
-    GetValue(): any {
-        return this.Data;
-    }
-}
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index 08e72fdae..a53fb5d2b 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -10,6 +10,7 @@ import { Server } from './../client/Server';
 import { Types } from './Message';
 import { Utils } from '../Utils';
 import { HtmlField } from '../fields/HtmlField';
+import { WebField } from '../fields/WebField';
 
 export class ServerUtils {
     public static FromJson(json: any): Field {
@@ -30,6 +31,8 @@ export class ServerUtils {
                 return new TextField(data, id, false)
             case Types.Html:
                 return new HtmlField(data, id, false)
+            case Types.Web:
+                return new WebField(new URL(data), id, false)
             case Types.RichText:
                 return new RichTextField(data, id, false)
             case Types.Key: