1 files changed, 35 insertions, 49 deletions

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 31824763d..f154909bb 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action } from "mobx";
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
@@ -28,32 +28,39 @@ export const COLLECTION_BORDER_WIDTH = 2;
 export class CollectionView extends React.Component<CollectionViewProps> {
 
     public static LayoutString(fieldKey: string = "DataKey") {
-        return `<CollectionView Document={Document}
+        return `<${CollectionView.name} 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;
+
+    public active: () => boolean = () => CollectionView.Active(this);
+    addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
+    removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
+    get subView() { return CollectionView.SubView(this); }
+
+    public static Active(self: CollectionView): boolean {
+        var isSelected = self.props.isSelected();
+        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self);
+        var topMost = self.props.isTopMost;
         return isSelected || childSelected || topMost;
     }
+
     @action
-    addDocument = (doc: Document): void => {
-        if (this.props.Document.Get(this.props.fieldKey) instanceof Field) {
+    public static AddDocument(props: CollectionViewProps, doc: Document) {
+        doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, 0));
+        if (props.Document.Get(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>())
+            const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
             value.push(doc);
         } else {
-            this.props.Document.SetData(this.props.fieldKey, [doc], ListField);
+            props.Document.SetData(props.fieldKey, [doc], ListField);
         }
     }
 
-
     @action
-    removeDocument = (doc: Document): boolean => {
+    public static RemoveDocument(props: CollectionViewProps, 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>())
+        const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
         let index = -1;
         for (let i = 0; i < value.length; i++) {
             if (value[i].Id == doc.Id) {
@@ -84,13 +91,8 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         }
     }
 
-    set collectionViewType(type: CollectionViewType) {
-        let Document = this.props.Document;
-        Document.SetData(KeyStore.ViewType, type, NumberField);
-    }
-
     specificContextMenu = (e: React.MouseEvent): void => {
-        if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+        if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             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) })
@@ -98,36 +100,20 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         }
     }
 
-    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;
+    public static SubView(self: CollectionView) {
+        let subProps = { ...self.props, addDocument: self.addDocument, removeDocument: self.removeDocument, active: self.active, CollectionView: self }
+        switch (self.collectionViewType) {
+            case CollectionViewType.Freeform: return (<CollectionFreeFormView {...subProps} />)
+            case CollectionViewType.Schema: return (<CollectionSchemaView {...subProps} />)
+            case CollectionViewType.Docking: return (<CollectionDockingView {...subProps} />)
+            case CollectionViewType.Tree: return (<CollectionTreeView {...subProps} />)
         }
-        return (<div onContextMenu={this.specificContextMenu}>
-            {subView}
+        return (null);
+    }
+
+    render() {
+        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+            {this.subView}
         </div>)
     }
-}
\ No newline at end of file
+}