Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into improveText

6 files changed, 268 insertions, 114 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 037b85712..1653994cf 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,19 +1,20 @@
-import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/Key";
-import React = require("react");
 import FlexLayout from "flexlayout-react";
-import { action, observable, computed } from "mobx";
-import { Document } from "../../../fields/Document";
-import { DocumentView } from "../nodes/DocumentView";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import "./CollectionDockingView.scss"
+import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import * as GoldenLayout from "golden-layout";
-import * as ReactDOM from 'react-dom';
+import { action, computed, reaction, observable } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/Key";
+import { ListField } from "../../../fields/ListField";
 import { DragManager } from "../../util/DragManager";
+import { Transform } from "../../util/Transform";
+import { DocumentView } from "../nodes/DocumentView";
+import "./CollectionDockingView.scss";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import React = require("react");
+import * as ReactDOM from 'react-dom';
+import Measure from "react-measure";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -42,7 +43,7 @@ export class CollectionDockingView extends CollectionViewBase {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         var docs = value.map(doc => {
-            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
+            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } };
         });
         return new GoldenLayout({
             settings: {
@@ -65,7 +66,6 @@ export class CollectionDockingView extends CollectionViewBase {
     }
     private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
 
-
     @action
     onResize = (event: any) => {
         var cur = this.props.ContainingDocumentView!.MainContent.current;
@@ -95,7 +95,11 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         for (var i: number = 0; i < value.length; i++) {
             if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} Scaling={1} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
+                return (<DocumentView key={value[i].Id} Document={value[i]}
+                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                    GetTransform={() => Transform.Identity}
+                    ParentScaling={1}
+                    ContainingCollectionView={this} DocumentView={undefined} />);
             }
         }
         if (component === "text") {
@@ -113,7 +117,7 @@ export class CollectionDockingView extends CollectionViewBase {
         var newItemConfig = {
             type: 'component',
             componentName: 'documentViewComponent',
-            componentState: { doc: dragDoc }
+            componentState: { doc: dragDoc, scaling: 1 }
         };
         this._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
@@ -154,7 +158,6 @@ export class CollectionDockingView extends CollectionViewBase {
             CollectionDockingView.myLayout._maximizedStack = null;
         }
     }
-
     //
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
@@ -235,13 +238,19 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
-                ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Scaling={1} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
-                ),
-                    document.getElementById(containingDiv)
-                );
-                if (CollectionDockingView.myLayout._maxstack != null) {
-                    CollectionDockingView.myLayout._maxstack.click();
+                let divContainer = document.getElementById(containingDiv);
+                if (divContainer) {
+                    let props: DockingProps = {
+                        ContainingDiv: containingDiv,
+                        Document: state.doc,
+                        Container: container,
+                        CollectionDockingView: me,
+                        HtmlElement: divContainer
+                    }
+                    ReactDOM.render((<RenderClass {...props} />), divContainer);
+                    if (CollectionDockingView.myLayout._maxstack) {
+                        CollectionDockingView.myLayout._maxstack.click();
+                    }
                 }
             }, 0);
         });
@@ -255,8 +264,8 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
         var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
-        var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s;
-        var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s;
+        var w = Document.GetNumber(KeyStore.Width, 0) / s;
+        var h = Document.GetNumber(KeyStore.Height, 0) / s;
 
         var chooseLayout = () => {
             if (!CollectionDockingView.UseGoldenLayout)
@@ -264,18 +273,50 @@ export class CollectionDockingView extends CollectionViewBase {
         }
 
         return (
-            <div className="border" style={{
-                borderStyle: "solid",
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-            }}>
-                <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
-                    style={{
-                        width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
-                        height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH
-                    }} >
-                    {chooseLayout()}
-                </div>
+            <div className="collectiondockingview-container" id="menuContainer"
+                onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                style={{
+                    width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
+                    height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH,
+                    borderStyle: "solid",
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }} >
+                {chooseLayout()}
             </div>
         );
     }
+}
+
+interface DockingProps {
+    ContainingDiv: string,
+    Document: Document,
+    Container: any,
+    HtmlElement: HTMLElement,
+    CollectionDockingView: CollectionDockingView
+}
+@observer
+export class RenderClass extends React.Component<DockingProps> {
+    @observable
+    private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+
+    render() {
+        let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        var layout = this.props.Document.GetText(KeyStore.Layout, "");
+        var content =
+            <DocumentView key={this.props.Document.Id} Document={this.props.Document}
+                AddDocument={this.props.CollectionDockingView.addDocument}
+                RemoveDocument={this.props.CollectionDockingView.removeDocument}
+                GetTransform={() => Transform.Identity}
+                ParentScaling={this._parentScaling}
+                ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} />
+
+        if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) {
+            return <Measure onResize={
+                action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}
+            >
+                {({ measureRef }) => <div ref={measureRef}> {content} </div>}
+            </Measure>
+        }
+        return <div> {content} </div>
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 78d332322..fa1372925 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,4 +1,6 @@
 .collectionfreeformview-container {
+    border-style: solid;
+    box-sizing: border-box;
     position: relative;
     top: 0;
     left: 0;
@@ -10,6 +12,7 @@
         top: 0;
         left: 0;
     }
+<<<<<<< HEAD
 }
 
 .border {
@@ -28,4 +31,6 @@
 
 #prevCursor {
     animation: blink 1s infinite;
+=======
+>>>>>>> 3f98d6ec6050e7faa15179871f0d9669c1188a78
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 1393557cd..af1889c3f 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -14,14 +14,13 @@ import { NumberField } from "../../../fields/NumberField";
 import { Documents } from "../../documents/Documents";
 import { FieldWaiting } from "../../../fields/Field";
 import { Server } from "tls";
-var FontAwesomeIcon = require('react-fontawesome');
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
+    public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); }
     private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
-    private _nodeContainerRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
     private _lastY: number = 0;
     private _downX: number = 0;
@@ -38,6 +37,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @computed
     get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed
+    get nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); }
 
     @computed
     get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); }
@@ -60,10 +61,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
             const screenX = de.x - xOffset;
             const screenY = de.y - yOffset;
-            const docX = (screenX - translateX) / currScale;
-            const docY = (screenY - translateY) / currScale;
-            doc.x = docX;
-            doc.y = docY;
+            doc.props.Document.SetNumber(KeyStore.X, (screenX - translateX) / currScale);
+            doc.props.Document.SetNumber(KeyStore.Y, (screenY - translateY) / currScale);
             this.bringToFront(doc);
         }
         e.stopPropagation();
@@ -134,10 +133,16 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
-
-        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
-
-        var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
+        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, LocalY, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+        var Xx = this.props.ContainingDocumentView!.LeftCorner();
+        var Yy = this.props.ContainingDocumentView!.TopCorner();
+        var deltaScale = (1 - (e.deltaY / coefficient)) * this.props.ContainingDocumentView!.props.Document.GetNumber(KeyStore.Scale, 1);
         var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
 
         this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
@@ -146,8 +151,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     private SetPan(panX: number, panY: number) {
-        const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX));
-        const newPanY = Math.min(0, panY);
+        const 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.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
         this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
@@ -159,8 +164,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
         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));
+        const panx: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+        const pany: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
         let x = e.pageX - panx
         let y = e.pageY - pany
 
@@ -196,7 +201,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
             if (this._previewCursorVisible) {
                 //make textbox
-                let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+                let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
                 let newBox = Documents.TextDocument({ width: 200, height: 100, x: LocalX, y: LocalY, title: "new" });
                 this.addDocument(newBox);
             }
@@ -221,47 +226,65 @@ export class CollectionFreeFormView extends CollectionViewBase {
         }
     }
 
+    @computed
+    get translate(): [number, number] {
+        const x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+        const y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+        return [x, y];
+    }
+
+    @computed
+    get scale(): number {
+        return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
+    }
+
+    getTransform = (): Transform => {
+        const [x, y] = this.translate;
+        return this.props.GetTransform().scaled(this.scale).translate(x, y);
+    }
+
     render() {
         const 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);
+        var me = this;
 
         let cursor = null;
         //toggle for preview cursor -> will be on when user taps freeform
         if (this._previewCursorVisible) {
             //get local position and place cursor there!
-            let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+            let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
             cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", transform: `translate(${LocalX}px, ${LocalY}px)` }}>I</div>
         }
 
 
 
         return (
-            <div className="border" style={{
-                borderWidth: `${COLLECTION_BORDER_WIDTH} px`,
-            }}>
-                <div
-                    className="collectionfreeformview-container"
-                    onPointerDown={this.onPointerDown}
-                    onWheel={this.onPointerWheel}
-                    onContextMenu={(e) => e.preventDefault()}
-                    onDrop={this.onDrop}
-                    onDragOver={this.onDragOver}
-                    onKeyPress={this.onKeyDown}
-                    ref={this._containerRef}>
-                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
-                        {this.props.BackgroundView}
-                        <div className="node-container" ref={this._nodeContainerRef} onKeyPress={this.onKeyDown}>
-
-
-                            {cursor}
-
-                            {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView Scaling={this.resizeScaling} key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
-                            })}
-                        </div>
-                    </div>
+            <div className="collectionfreeformview-container"
+                onPointerDown={this.onPointerDown}
+                onWheel={this.onPointerWheel}
+                onContextMenu={(e) => e.preventDefault()}
+                onDrop={this.onDrop}
+                onDragOver={this.onDragOver}
+                style={{
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }}
+                ref={this._containerRef}>
+                <div className="collectionfreeformview"
+                    style={{ width: "100%", transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
+                    ref={this._canvasRef}>
+
+                    {this.props.BackgroundView}
+                    {cursor}
+                    {value.map(doc => {
+                        return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                            AddDocument={this.addDocument}
+                            RemoveDocument={this.removeDocument}
+                            GetTransform={this.getTransform}
+                            ParentScaling={1}
+                            ContainingCollectionView={this} DocumentView={undefined} />);
+                    })}
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 707b44db6..633e3ca1b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,3 +1,62 @@
+
+.collectionSchemaView-container {
+    border-style: solid;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .collectionfreeformview-container {
+        border-width: 0px;
+        .collectionfreeformview > .jsx-parser{
+            position:absolute
+        }
+    }
+    .imageBox-cont {
+        position:relative;
+        max-height:100%;
+    }
+    .ReactTable {
+        position: absolute;
+        display: inline-block;
+        width: 100%;
+        overflow: auto;
+        height: 100%;
+        background: white;
+        box-sizing: border-box;
+    }
+    .ReactTable .rt-thead.-header {
+            background:grey;
+        }
+    .ReactTable .rt-th, .ReactTable .rt-td {
+        max-height: 75px;
+    }
+    .ReactTable .rt-tbody .rt-tr-group:last-child {
+        border-bottom: grey;
+        border-bottom-style: solid;
+        border-bottom-width: 1;
+    }
+    .ReactTable .rt-td {
+        border-width: 1;
+        border-right-color: #aaa
+    }
+    .ReactTable .rt-tr-group {
+        border-width: 1;
+        border-bottom-color: #aaa
+    }
+    .imageBox-cont img {
+        object-fit: contain;
+        height: 100%
+    }
+    .documentView-node:first-child {
+        background: grey;
+        .imageBox-cont img {
+            object-fit: contain;
+            max-width: 100%;
+            height: 100%
+        }
+    }
+}
+
 .Resizer {
     box-sizing: border-box;
     background: #000;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b2ee2f5f2..76706f520 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -7,13 +7,15 @@ 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 { CollectionViewBase, COLLECTION_BORDER_WIDTH } 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 { KeyStore as KS, Key, KeyStore } from "../../../fields/Key";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
+import { Transform } from "../../util/Transform";
+import Measure from "react-measure";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -26,13 +28,13 @@ export class CollectionSchemaView extends CollectionViewBase {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
             fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined
+            DocumentViewForField: undefined,
         }
         let contents = (
             <FieldView {...props} />
         )
         return (
-            <EditableView contents={contents} GetValue={() => {
+            <EditableView contents={contents} height={36} GetValue={() => {
                 let field = props.doc.Get(props.fieldKey);
                 if (field && field instanceof Field) {
                     return field.ToScriptString();
@@ -97,47 +99,62 @@ export class CollectionSchemaView extends CollectionViewBase {
         }
     }
 
+
+    @observable
+    private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
     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;
+        var me = this;
         if (this.selectedIndex != -1) {
             content = (
-                <DocumentView Scaling={1} Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+                <Measure onResize={action((r: any) => {
+                    var doc = children[this.selectedIndex];
+                    var n = doc.GetNumber(KeyStore.NativeWidth, 0);
+                    if (n > 0 && r.entry.width > 0) {
+                        this._parentScaling = r.entry.width / n;
+                    }
+                })}>
+                    {({ measureRef }) =>
+                        <div ref={measureRef}>
+                            <DocumentView Document={children[this.selectedIndex]}
+                                AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                                GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
+                                ParentScaling={this._parentScaling}
+                                DocumentView={undefined} ContainingCollectionView={me} />
+                        </div>
+                    }
+                </Measure>
             )
         } else {
             content = <div />
         }
         return (
-            <div onPointerDown={this.onPointerDown} >
-                <SplitPane split={"vertical"} defaultSize="60%">
-                    <ScrollBox>
-                        <ReactTable
-                            data={children}
-                            pageSize={children.length}
-                            page={0}
-                            showPagination={false}
-                            style={{
-                                display: "inline-block",
-                                width: "100%"
-                            }}
-                            columns={columns.map(col => {
-                                return (
-                                    {
-                                        Header: col.Name,
-                                        accessor: (doc: Document) => [doc, col],
-                                        id: col.Id
-                                    })
-                            })}
-                            column={{
-                                ...ReactTableDefaults.column,
-                                Cell: this.renderCell
-                            }}
-                            getTrProps={this.getTrProps}
-                        />
-                    </ScrollBox>
+            <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container"
+                style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} >
+                <SplitPane split={"vertical"} defaultSize="60%" style={{ height: "100%", position: "relative", overflow: "none" }}>
+                    <ReactTable
+                        data={children}
+                        pageSize={children.length}
+                        page={0}
+                        showPagination={false}
+                        columns={columns.map(col => {
+                            return (
+                                {
+                                    Header: col.Name,
+                                    accessor: (doc: Document) => [doc, col],
+                                    id: col.Id
+                                })
+                        })}
+                        column={{
+                            ...ReactTableDefaults.column,
+                            Cell: this.renderCell
+                        }}
+                        getTrProps={this.getTrProps}
+                    />
                     {content}
                 </SplitPane>
             </div>
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 274f26ecc..2f304f666 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -10,15 +10,21 @@ import React = require("react");
 import { DocumentView } from "../nodes/DocumentView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { Transform } from "../../util/Transform";
 
 
 export interface CollectionViewProps {
     CollectionFieldKey: Key;
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
+    GetTransform: () => Transform;
     BackgroundView: Opt<DocumentView>;
+<<<<<<< HEAD
     DownX: number;
     DownY: number;
+=======
+    ParentScaling: number;
+>>>>>>> 3f98d6ec6050e7faa15179871f0d9669c1188a78
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -26,8 +32,8 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
-    public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+    public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
+        return `<${collectionType} ParentScaling={ParentScaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
     }
     @computed
     public get active(): boolean {
@@ -46,15 +52,18 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
     }
 
     @action
-    removeDocument = (doc: Document): void => {
+    removeDocument = (doc: Document): boolean => {
         //TODO This won't create the field if it doesn't already exist
         const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        if (value.indexOf(doc) !== -1) {
-            value.splice(value.indexOf(doc), 1)
+        let index = value.indexOf(doc);
+        if (index !== -1) {
+            value.splice(index, 1)
 
             SelectionManager.DeselectAll()
             ContextMenu.Instance.clearItems()
+            return true;
         }
+        return false
     }
 
 }
\ No newline at end of file