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

3 files changed, 110 insertions, 16 deletions

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();