added golden layout. doesn't work much better than the flex layout.

5 files changed, 155 insertions, 16 deletions

diff --git a/package-lock.json b/package-lock.json
index b04a31ccd..192a10f9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,14 @@
       "integrity": "sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==",
       "dev": true
     },
+    "@types/jquery": {
+      "version": "3.3.29",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
+      "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==",
+      "requires": {
+        "@types/sizzle": "2.3.2"
+      }
+    },
     "@types/mocha": {
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.5.tgz",
@@ -136,6 +144,11 @@
         "@types/react": "16.7.17"
       }
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
+    },
     "@types/uuid": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.4.tgz",
@@ -4331,6 +4344,11 @@
         "to-regex": "3.0.2"
       }
     },
+    "native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE="
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -8314,6 +8332,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-mosaic": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/react-mosaic/-/react-mosaic-0.0.20.tgz",
+      "integrity": "sha1-pSSr8uzyi5r2sh1NNQ/veCLvMJ4=",
+      "requires": {
+        "prop-types": "15.6.2",
+        "threads": "0.8.1"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -9490,6 +9517,22 @@
         }
       }
     },
+    "threads": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/threads/-/threads-0.8.1.tgz",
+      "integrity": "sha1-40ARW1lHMW0vfuMSPEwsW/nHbXI=",
+      "requires": {
+        "eventemitter3": "2.0.3",
+        "native-promise-only": "0.8.1"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
diff --git a/package.json b/package.json
index f0ab9ab35..3dfa158d8 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
+    "@types/jquery": "^3.3.29",
     "@types/prosemirror-commands": "^1.0.1",
     "@types/prosemirror-history": "^1.0.1",
     "@types/prosemirror-keymap": "^1.0.1",
@@ -57,6 +58,7 @@
     "react-dom": "^16.7.0",
     "react-golden-layout": "^1.0.6",
     "react-jsx-parser": "^1.13.0",
+    "react-mosaic": "0.0.20",
     "uuid": "^3.3.2"
   }
 }
diff --git a/src/Main.tsx b/src/Main.tsx
index c636ee42e..118e745cd 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -44,7 +44,8 @@ ReactDOM.render((
         <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
-    </div>), document.getElementById('root'));
+    </div>),
+    document.getElementById('root'));
 
 runInAction(() => {
     let doc1 = Documents.TextDocument("Hello world");
@@ -63,7 +64,7 @@ runInAction(() => {
     });
     let docset2 = new Array<Document>(doc4, doc1, doc3);
     let doc6 = Documents.DockDocument(docset2, {
-        x: 350, y: 100
+        x: 350, y: 100, width: 600, height: 600
     });
     let mainNodes = mainContainer.GetFieldT(KeyStore.Data, ListField);
     if (!mainNodes) {
@@ -72,9 +73,9 @@ runInAction(() => {
     }
     // mainNodes.Data.push(doc1);
     // mainNodes.Data.push(doc2);
-    mainNodes.Data.push(doc4);
+    //mainNodes.Data.push(doc4);
     // mainNodes.Data.push(doc3);
-    mainNodes.Data.push(doc5);
+    //mainNodes.Data.push(doc5);
     // mainNodes.Data.push(doc1);
     // mainNodes.Data.push(doc2);
     mainNodes.Data.push(doc6);
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 19b212bde..8dabe4490 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -13,7 +13,9 @@ import { ContextMenu } from "../ContextMenu";
 import "./CollectionDockingView.scss"
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-// import GoldenLayout, { Row, Stack, createGoldenLayoutComponent } from '../../../node_modules/react-golden-layout/src/internal/';
+import * as GoldenLayout from "golden-layout";
+import { CollectionFreeFormView } from './CollectionFreeFormView';
+import * as ReactDOM from 'react-dom';
 
 @observer
 export class CollectionDockingView extends React.Component<CollectionViewProps> {
@@ -87,15 +89,86 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         return isSelected || childSelected || topMost;
     }
 
+    myLayout: any = null;
     componentDidMount() {
-        // if (this._containerRef.current) {
-        //     DragManager.MakeDropTarget(this._containerRef.current, {
-        //         handlers: {
-        //             drop: this.drop
-        //         }
-        //     });
-        // }
+
+        const { fieldKey, Document: Document } = this.props;
+
+        const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
+        if (this._containerRef.current) {
+            if (this.myLayout == null) {
+                this.myLayout = new GoldenLayout({
+                    content: [ {
+                        type: 'row',
+                        content: [ {
+                            type: 'component',
+                            componentName: 'documentViewComponent',
+                            componentState: { x: 0 }
+                        }, {
+                            type: 'component',
+                            componentName: 'documentViewComponent',
+                            componentState: { x: 1 }
+                        } ]
+                    } ]
+                });
+
+                this.myLayout.on('stackCreated', function (stack: any) {
+                    stack
+                        .header
+                        .controlsContainer
+                        .find('.lm_close') //get the close icon
+                        .off('click') //unbind the current click handler
+                        .click(function () {
+                            //add your own
+                            if (confirm('really close this?')) {
+                                stack.remove();
+                            }
+                        });
+                });
+
+                this.myLayout.on('tabCreated', function (tab: any) {
+                    tab
+                        .closeElement
+                        .off('click') //unbind the current click handler
+                        .click(function () {
+                            //add your own
+                            if (confirm('really close this?')) {
+                                tab.contentItem.remove();
+                            }
+                        });
+                });
+
+                var me = this;
+                var cv = this.props.ContainingDocumentView;
+                this.myLayout.registerComponent('documentViewComponent', this.registerComponentWithCallback);
+
+                this.myLayout.container = this._containerRef.current;
+                this.myLayout.init();
+            }
+        }
     }
+    private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
+
+    private registerComponentWithCallback = (container: any, state: any) => {
+        const { fieldKey, Document: Document } = this.props;
+        const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
+        var containingDiv = "component_" + this.nextId();
+        container.getElement().html("<div id='" + containingDiv + "'></div>");
+        // var new_state = Object.assign({}, state);
+        // new_state[ "location" ] = containingDiv;
+        // container.setState(new_state);
+        var me = this;
+        var docToRender = value[ state.x ];
+        setTimeout(function () {
+            ReactDOM.render((
+                <div style={{ display: "grid" }}>
+                    <DocumentView key={docToRender.Id} Document={docToRender} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} />
+                </div>
+            ),
+                document.getElementById(containingDiv)
+            )
+        }, 1);
+    };
 
 
     @action
@@ -148,7 +221,9 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         }
     }
 
+
     render() {
+
         const { fieldKey, Document: Document } = this.props;
 
         const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
@@ -157,6 +232,8 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s;
         var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s;
 
+
+
         return (
             <div className="border" style={{
                 borderStyle: "solid",
@@ -164,12 +241,25 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             }}>
                 <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
                     style={{
-                        width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH,
-                        height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH
+                        width: "100%",
+                        height: "100%"
                     }} >
-                    <FlexLayout.Layout model={this._model} factory={this.factory} />
                 </div>
             </div>
         );
+        // return (
+        //     <div className="border" style={{
+        //         borderStyle: "solid",
+        //         borderWidth: `${CollectionDockingView.BORDER_WIDTH}px`,
+        //     }}>
+        //         <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+        //             style={{
+        //                 width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH,
+        //                 height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH
+        //             }} >
+        //             <FlexLayout.Layout model={this._model} factory={this.factory} />
+        //         </div>
+        //     </div>
+        // );
     }
 }
\ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 7ba62e0b8..38e695ed2 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -93,6 +93,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     private _downX: number = 0;
     private _downY: number = 0;
 
+    constructor(props: DocumentViewProps) {
+        super(props);
+    }
     get screenRect(): ClientRect | DOMRect {
         if (this._mainCont.current) {
             return this._mainCont.current.getBoundingClientRect();
@@ -223,7 +226,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downX = e.clientX;
         this._downY = e.clientY;
         this._contextMenuCanOpen = e.button == 2;
-        if (this.active) {
+        if (this.active && !e.isDefaultPrevented()) {
             e.stopPropagation();
             if (e.buttons === 2) {
                 e.preventDefault();