drag drop fixes for docking

6 files changed, 75 insertions, 22 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
index 73fc06941..2770ccff2 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -46,14 +46,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.SetField(KS.X, new NumberField(150));
     doc2.SetField(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 450, y: 500
+        x: 450, y: 500, title: "cat 1"
     });
     let docset = new Array<Document>(doc1, doc2, doc3);
     let doc4 = Documents.CollectionDocument(docset, {
         x: 0, y: 400, title: "mini collection"
     });
     let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 650, y: 500, width: 600, height: 600, title: "cat"
+        x: 650, y: 500, width: 600, height: 600, title: "cat 2"
     });
     let docset2 = new Array<Document>(doc4, doc1, doc3);
     let doc6 = Documents.CollectionDocument(docset2, {
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index ca5b6c0ea..5a854c76d 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -2,6 +2,8 @@ import { Opt } from "../fields/Field";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { DocumentDecorations } from "../DocumentDecorations";
 import { SelectionManager } from "./SelectionManager";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../fields/Document";
 
 export namespace DragManager {
     export let rootId = "root";
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
index 43af7c538..249f837f7 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/views/collections/CollectionDockingView.scss
@@ -5,9 +5,11 @@
     left: 0;
     overflow: hidden;
     .flexlayout__layout {
-        width: 100%;
-        height: 100%;
-        position: relative;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
         overflow:hidden;
     }
     
@@ -79,9 +81,10 @@
     
     .flexlayout__tab {
         overflow: auto;
-        position: absolute;
+        position:absolute;
         box-sizing: border-box;
         background-color: #222;
+        color:black;
     }
     
     .flexlayout__tab_button {
@@ -137,7 +140,7 @@
     
     .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
     .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
-        //background: transparent url("../images/close_white.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     
     .flexlayout__tab_button_overflow {
@@ -150,7 +153,7 @@
         font-size: 10px;
         color:lightgray;
         font-family: Arial, sans-serif;
-        //background: transparent url("../images/more.png") no-repeat left;
+        background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
     }
     
     .flexlayout__tabset_header
@@ -185,12 +188,12 @@
     
     .flexlayout__tabset-selected
     {
-        //background-image: linear-gradient(#111, #444);
+        background-image: linear-gradient(#111, #444);
     }
     
     .flexlayout__tabset-maximized
     {
-        //background-image: linear-gradient(#666, #333);
+        background-image: linear-gradient(#666, #333);
     }
     
     .flexlayout__tab_toolbar {
@@ -208,7 +211,7 @@
         height:20px;
         border:none;
         outline-width: 0;
-        //background: transparent url("../images/maximize.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
     
     }
     .flexlayout__tab_toolbar_button-max {
@@ -216,7 +219,7 @@
         height:20px;
         border:none;
         outline-width: 0;
-        //background: transparent url("../images/restore.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
     }
     
     .flexlayout__popup_menu {
@@ -339,7 +342,7 @@
     
     .flexlayout__border_button:hover .flexlayout__border_button_trailing,
     .flexlayout__border_button--selected .flexlayout__border_button_trailing{
-        //background: transparent url("../images/close_white.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     
     
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index f08bdaab4..8fc8e879b 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -15,6 +15,7 @@ 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 { DragManager } from "../../util/DragManager";
 
 @observer
 export class CollectionDockingView extends React.Component<CollectionViewProps> {
@@ -46,7 +47,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             var d = { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
             return d;
         });
-        return new GoldenLayout({ content: [ { type: 'row', content: docs } ] });
+        return new GoldenLayout({
+            settings: {
+                selectionEnabled: true
+            }, content: [ { type: 'row', content: docs } ]
+        });
     }
     constructor(props: CollectionViewProps) {
         super(props);
@@ -114,10 +119,38 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         }
     }
 
+    public static myLayout: any = null;
+
+    private static _dragSource: any = null;
+    private static _dragDiv: any = null;
+    private static _dragParent: HTMLElement | null = null;
+    public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+        var newItemConfig = {
+            type: 'component',
+            componentName: 'documentViewComponent',
+            componentState: { doc: dragDoc }
+        };
+        const root = document.getElementById(DragManager.rootId);
+        if (!this._dragDiv) {
+            if (!root) {
+                throw new Error("No root element found");
+            }
+            this._dragDiv = document.createElement("div");
+            this._dragSource = CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+            root.appendChild(this._dragDiv);
+        }
+        // var r = dragElement.getBoundingClientRect();
+        // var x = root!.getBoundingClientRect();
+        //this._dragDiv.style.transform = `translate(${r.left - x.left}px, ${r.top - x.top}px)`;
+        this._dragSource._itemConfig = newItemConfig;
+        this._dragParent = dragElement.parentElement;
+        this._dragDiv.appendChild(dragElement);
+    }
     goldenLayoutFactory() {
-        var myLayout = this.modelForGoldenLayout;
+        CollectionDockingView.myLayout = this.modelForGoldenLayout;
 
-        myLayout.on('stackCreated', function (stack: any) {
+        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
+            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 () {
@@ -127,7 +160,14 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                 });
         });
 
-        myLayout.on('tabCreated', function (tab: any) {
+        CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
+            if (CollectionDockingView._dragDiv) {
+                for (var i = 0; i < CollectionDockingView._dragDiv.childElementCount; i++) {
+                    var child = CollectionDockingView._dragDiv.childNodes[ CollectionDockingView._dragDiv.childElementCount - i - 1 ];
+                    CollectionDockingView._dragDiv.removeChild(child);
+                    CollectionDockingView._dragParent!.appendChild(child);
+                }
+            }
             tab.setTitle(tab.contentItem.config.componentState.doc.Title);
             tab.closeElement.off('click') //unbind the current click handler
                 .click(function () {
@@ -138,7 +178,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         });
 
         var me = this;
-        myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
+        CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
             // bcz: this is crufty
             // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. 
             // Apparently, we need to wait to allow a live html div element to actually be instantiated.
@@ -150,11 +190,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                     <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} />
                 ),
                     document.getElementById(containingDiv)
-                )
+                );
             }, 0);
         });
-        myLayout.container = this._containerRef.current;
-        myLayout.init();
+        CollectionDockingView.myLayout.container = this._containerRef.current;
+        CollectionDockingView.myLayout.init();
     }
 
 
@@ -176,7 +216,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                 borderStyle: "solid",
                 borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
             }}>
-                <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                <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
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 58e694698..b118f7ac8 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -181,6 +181,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
         const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+        console.log("DocsR " + value.length);
         return (
             <div className="border" style={{
                 borderStyle: "solid",
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 3c4dfa36f..657cd62c9 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -15,6 +15,7 @@ import { ContextMenu } from "../ContextMenu";
 import { FieldTextBox } from "../nodes/FieldTextBox";
 import "./NodeView.scss";
 import React = require("react");
+import { cpus } from "os";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
@@ -230,6 +231,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
+        var me = this;
+        if (e.shiftKey) {
+            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            e.stopPropagation();
+            return;
+        }
         this._contextMenuCanOpen = e.button == 2;
         if (this.active && !e.isDefaultPrevented()) {
             e.stopPropagation();