From 3ff149e05a76fa0a0ace32a1b0c9876c4850aa2a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 26 Feb 2019 12:32:52 -0500
Subject: extended CollectionTreeView to support drag and drop.  updated
 CollectionSchemaView's drag drop

---
 src/client/util/DragManager.ts | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

(limited to 'src/client/util')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index aab23f91c..8adadee0f 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,4 +1,37 @@
 import { DocumentDecorations } from "../views/DocumentDecorations";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../../fields/Document"
+import { action } from "mobx";
+
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, _dragDocument: Document) {
+    let onRowMove = action((e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+        DragManager.StartDrag(_reference.current!, { document: _dragDocument });
+    });
+    let onRowUp = action((e: PointerEvent): void => {
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+    });
+    let onItemDown = (e: React.PointerEvent) => {
+        // if (this.props.isSelected() || this.props.isTopMost) {
+        if (e.button == 0) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument);
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
+        //}
+    }
+    return onItemDown;
+}
 
 export namespace DragManager {
     export function Root() {
-- 
cgit v1.2.3-70-g09d2


From bd54526065428de2e931d7254776352199f6e55a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 26 Feb 2019 16:56:04 -0500
Subject: fixed shift-dragging!!

---
 src/client/util/DragManager.ts                     |  8 ++--
 src/client/views/Main.tsx                          | 33 +++--------------
 .../views/collections/CollectionDockingView.tsx    | 43 ++++------------------
 .../views/collections/CollectionSchemaView.tsx     |  4 +-
 .../views/collections/CollectionTreeView.tsx       |  2 +-
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 6 files changed, 21 insertions(+), 71 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 8adadee0f..0d76d2640 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -3,14 +3,14 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
 import { Document } from "../../fields/Document"
 import { action } from "mobx";
 
-export function setupDrag(_reference: React.RefObject<HTMLDivElement>, _dragDocument: Document) {
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
     let onRowMove = action((e: PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
 
         document.removeEventListener("pointermove", onRowMove);
         document.removeEventListener('pointerup', onRowUp);
-        DragManager.StartDrag(_reference.current!, { document: _dragDocument });
+        DragManager.StartDrag(_reference.current!, { document: docFunc() });
     });
     let onRowUp = action((e: PointerEvent): void => {
         document.removeEventListener("pointermove", onRowMove);
@@ -20,10 +20,10 @@ export function setupDrag(_reference: React.RefObject<HTMLDivElement>, _dragDocu
         // if (this.props.isSelected() || this.props.isTopMost) {
         if (e.button == 0) {
             e.stopPropagation();
-            e.preventDefault();
             if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument);
+                CollectionDockingView.Instance.StartOtherDrag(docFunc(), e);
             } else {
+                e.preventDefault();
                 document.addEventListener("pointermove", onRowMove);
                 document.addEventListener('pointerup', onRowUp);
             }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 17dda899d..7ef4b6132 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -15,9 +15,8 @@ import { ServerUtils } from '../../server/ServerUtil';
 import { MessageStore, DocumentTransfer } from '../../server/Message';
 import { Transform } from '../util/Transform';
 import { CollectionDockingView } from './collections/CollectionDockingView';
-import { FieldWaiting } from '../../fields/Field';
 import { UndoManager } from '../util/UndoManager';
-import { DragManager } from '../util/DragManager';
+import { setupDrag } from '../util/DragManager';
 
 
 configure({
@@ -30,7 +29,6 @@ window.addEventListener("dragover", function (e) {
     e.preventDefault();
 }, false)
 document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-    console.log(ContextMenu);
     if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
         ContextMenu.Instance.clearItems()
     }
@@ -98,28 +96,7 @@ Documents.initProtos(() => {
         let textRef = React.createRef<HTMLDivElement>();
         let schemaRef = React.createRef<HTMLDivElement>();
         let colRef = React.createRef<HTMLDivElement>();
-        let curMoveListener: any = null
-        let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
 
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(dragRef.current!, { document: creator() });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", curMoveListener);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => {
-            if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator());
-                e.stopPropagation();
-            } else {
-                document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef));
-                document.addEventListener('pointerup', onRowUp);
-            }
-        }
         ReactDOM.render((
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
@@ -132,13 +109,13 @@ Documents.initProtos(() => {
                 <DocumentDecorations />
                 <ContextMenu />
                 <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
-                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
                 <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
-                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
                 <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
-                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
                 <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
-                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
                 <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
                 <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
                 <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5fb632469..3d7e46a01 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -10,7 +10,6 @@ import { FieldId, Opt, Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { Utils } from "../../../Utils";
 import { Server } from "../../Server";
-import { DragManager } from "../../util/DragManager";
 import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
@@ -34,10 +33,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
 
     private _goldenLayout: any = null;
-    private _dragDiv: any = null;
-    private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLElement | undefined;
-    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -47,28 +42,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).React = React;
         (window as any).ReactDOM = ReactDOM;
     }
-
-    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
-        this._dragElement = dragElement;
-        this._dragParent = dragElement.parentElement;
-        // 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);
-        this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc));
-
-        //   - 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 HTMLElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
     }
 
     @action
@@ -98,7 +73,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
     @action
-    public AddRightSplit(document: Document) {
+    public AddRightSplit(document: Document, minimize: boolean = false) {
         this._goldenLayout.emit('stateChanged');
         let newItemStackConfig = {
             type: 'stack',
@@ -121,10 +96,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             collayout.config["width"] = 50;
             newContentItem.config["width"] = 50;
         }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
         newContentItem.callDownwards('_$init');
         this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
         this._goldenLayout.emit('stateChanged');
         this.stateChanged();
+        return newContentItem;
     }
 
     setupGoldenLayout() {
@@ -218,13 +198,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        if (this._dragDiv) {
-            this._dragDiv.removeChild(this._dragElement);
-            this._dragParent!.removeChild(this._dragFakeElement!);
-            this._dragParent!.appendChild(this._dragElement!);
-            DragManager.Root().removeChild(this._dragDiv);
-            this._dragDiv = null;
-        }
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
                 tab.contentItem.remove();
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 106a5c4f5..03110a9c7 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -45,9 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase {
             <FieldView {...props} />
         )
         let reference = React.createRef<HTMLDivElement>();
-        let onItemDown = setupDrag(reference, props.doc);
+        let onItemDown = setupDrag(reference, () => props.doc);
         return (
-            <div onPointerDown={onItemDown} ref={reference}>
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
                 <EditableView contents={contents}
                     height={36} GetValue={() => {
                         let field = props.doc.Get(props.fieldKey);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 64f4c0970..55c804337 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -33,7 +33,7 @@ class TreeView extends React.Component<TreeViewProps> {
 
         var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
         let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
-        let onItemDown = setupDrag(reference, childDocument);
+        let onItemDown = setupDrag(reference, () => childDocument);
 
         if (title && title != FieldWaiting) {
             let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c579b7142..feecde921 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -96,7 +96,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downX = e.clientX;
         this._downY = e.clientY;
         if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
             e.stopPropagation();
         } else {
             this._contextMenuCanOpen = true;
-- 
cgit v1.2.3-70-g09d2


From 04ee2ad6e7ca887c3cfc7277c4b382f936c0fa6d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 26 Feb 2019 17:32:07 -0500
Subject: can switch into drag-as-dockingframe using shift after drag starts. 
 changed scrollbars globally .

---
 src/client/util/DragManager.ts                         | 18 ++++++++++++++----
 src/client/views/Main.scss                             | 11 ++++++++++-
 .../views/collections/CollectionFreeFormView.scss      | 10 ----------
 src/client/views/collections/CollectionSchemaView.scss |  9 ---------
 4 files changed, 24 insertions(+), 24 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 0d76d2640..6b4b8ca57 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -2,6 +2,7 @@ import { DocumentDecorations } from "../views/DocumentDecorations";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { Document } from "../../fields/Document"
 import { action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
 
 export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document) {
     let onRowMove = action((e: PointerEvent): void => {
@@ -23,7 +24,6 @@ export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc:
             if (e.shiftKey) {
                 CollectionDockingView.Instance.StartOtherDrag(docFunc(), e);
             } else {
-                e.preventDefault();
                 document.addEventListener("pointermove", onRowMove);
                 document.addEventListener('pointerup', onRowUp);
             }
@@ -139,22 +139,32 @@ export namespace DragManager {
             e.preventDefault();
             x += e.movementX;
             y += e.movementY;
+            if (e.shiftKey) {
+                abortDrag();
+                const docView: DocumentView = dragData["documentView"];
+                const doc: Document = docView ? docView.props.Document : dragData["document"];
+                CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 });
+            }
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         };
-        const upHandler = (e: PointerEvent) => {
+
+        const abortDrag = () => {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
-            FinishDrag(dragElement, e, dragData, options);
+            dragDiv.removeChild(dragElement);
             if (hideSource && !wasHidden) {
                 ele.hidden = false;
             }
+        }
+        const upHandler = (e: PointerEvent) => {
+            abortDrag();
+            FinishDrag(dragElement, e, dragData, options);
         };
         document.addEventListener("pointermove", moveHandler, true);
         document.addEventListener("pointerup", upHandler);
     }
 
     function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) {
-        dragDiv.removeChild(dragEle);
         const target = document.elementFromPoint(e.x, e.y);
         if (!target) {
             return;
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index e73f62904..6540af5b2 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -28,4 +28,13 @@ h1 {
 p {
     margin: 0px;
     padding: 0px;
-}
\ No newline at end of file
+}
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    height:5px;
+    width:5px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: rgba(0,0,0,.5);
+}
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 737f28318..e86295c26 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,15 +1,5 @@
 .collectionfreeformview-container {
 
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        height:5px;
-        width:5px;
-    }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background-color: rgba(0,0,0,.5);
-    }
-    
     .collectionfreeformview > .jsx-parser{
         position:absolute;
         height: 100%;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 995d60f74..d40e6d314 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -6,15 +6,6 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        height:5px;
-        width:5px;
-    }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 2px;
-        background-color: rgba(0,0,0,.5);
-    }
     .collectionSchemaView-previewRegion {
         position: relative; 
         background: black; 
-- 
cgit v1.2.3-70-g09d2