just one more bug to fix with docking...

3 files changed, 39 insertions, 31 deletions

diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index 5a854c76d..a864a2bbe 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -6,7 +6,14 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
 import { Document } from "../fields/Document";
 
 export namespace DragManager {
-    export let rootId = "root";
+    export function Root() {
+        const root = document.getElementById("root");
+        if (!root) {
+            throw new Error("No root element found");
+        }
+        return root;
+    }
+
     let dragDiv: HTMLDivElement;
 
     export enum DragButtons {
@@ -63,12 +70,8 @@ export namespace DragManager {
     let _lastPointerY: number = 0;
     export function StartDrag(ele: HTMLElement, dragData: { [ id: string ]: any }, options: DragOptions) {
         if (!dragDiv) {
-            const root = document.getElementById(rootId);
-            if (!root) {
-                throw new Error("No root element found");
-            }
             dragDiv = document.createElement("div");
-            root.appendChild(dragDiv);
+            DragManager.Root().appendChild(dragDiv);
         }
         const w = ele.offsetWidth, h = ele.offsetHeight;
         const rect = ele.getBoundingClientRect();
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 8fc8e879b..b64e4179d 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -121,30 +121,36 @@ 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;
+    private static _dragElement: HTMLDivElement;
+    private static _dragFakeElement: HTMLDivElement;
     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._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
-        this._dragDiv.appendChild(dragElement);
+        // bcz: we want to copy this document into the header, not move it there.
+        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
+
+        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
+        this._dragDiv = document.createElement("div");
+        this._dragDiv.style.opacity = 0;
+        DragManager.Root().appendChild(this._dragDiv);
+        CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+
+        //   - add our document to that div so that GoldenLayout will get the move events its listening for
+        this._dragDiv.appendChild(this._dragElement);
+
+        //   - add a duplicate of our document to the original document's container 
+        //     (GoldenLayout will be removing our original one)
+        this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement;
+        this._dragParent!.appendChild(this._dragFakeElement);
+
+        // all of this must be undone when the document has been dropped (see registerComponent())
     }
     goldenLayoutFactory() {
         CollectionDockingView.myLayout = this.modelForGoldenLayout;
@@ -162,11 +168,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
 
         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);
-                }
+                CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
+                CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement);
+                CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement);
+                DragManager.Root().removeChild(CollectionDockingView._dragDiv);
+                CollectionDockingView._dragDiv = null;
             }
             tab.setTitle(tab.contentItem.config.componentState.doc.Title);
             tab.closeElement.off('click') //unbind the current click handler
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 657cd62c9..7e2635438 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -16,12 +16,13 @@ import { FieldTextBox } from "../nodes/FieldTextBox";
 import "./NodeView.scss";
 import React = require("react");
 import { cpus } from "os";
+import { relative } from "path";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
     Document: Document;
     ContainingCollectionView: Opt<CollectionView>;
-    ContainingDocumentView: Opt<DocumentView>
+    ContainingDocumentView: Opt<DocumentView>;
 }
 
 export interface CollectionViewProps {
@@ -75,10 +76,7 @@ class DocumentContents extends React.Component<DocumentViewProps> {
             showWarnings={true}
             onError={(test: any) => { console.log(test) }}
         />
-
-
     }
-
 }
 
 @observer
@@ -232,7 +230,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downX = e.clientX;
         this._downY = e.clientY;
         var me = this;
-        if (e.shiftKey) {
+        if (e.shiftKey && e.buttons === 1) {
             CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
             e.stopPropagation();
             return;
@@ -320,6 +318,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 transform: freestyling ? this.transform : "",
                 width: freestyling ? this.width : "100%",
                 height: freestyling ? this.height : "100%",
+                position: freestyling ? "absolute" : "relative",
             }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>