From bb418216efa9cc2e191b970e4cbe5080f4fd2b87 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 17:00:31 -0500
Subject: drag and drop of main buttons.

---
 src/client/util/DragManager.ts                     |   2 +
 src/client/views/Main.tsx                          | 116 +++++++++------------
 .../views/collections/CollectionDockingView.tsx    |   8 +-
 .../views/collections/CollectionSchemaView.scss    |   1 +
 4 files changed, 58 insertions(+), 69 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index fd026992b..aab23f91c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -75,6 +75,8 @@ export namespace DragManager {
         let dragElement = ele.cloneNode(true) as HTMLElement;
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
+        dragElement.style.bottom = "";
+        dragElement.style.left = "";
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.zIndex = "1000";
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 661a2ac20..61ad66c72 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -17,6 +17,7 @@ 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';
 
 
 configure({
@@ -77,31 +78,47 @@ Documents.initProtos(() => {
             }, 0);
         }
 
-        let addImageNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addTextNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addColNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.FreeformDocument([], {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addSchemaNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.SchemaDocument([Documents.TextDocument()], {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
+        let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
+        let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+        let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" }));
+        let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+        let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+            width: 200, height: 200, title: "an image of a cat"
+        }));
 
-        let clearDatabase = action(() => {
-            Utils.Emit(Server.Socket, MessageStore.DeleteAll, {});
-        })
+        let addClick = (creator: any) => action(() => {
+            var img = creator();
+            img.SetNumber(KeyStore.X, 0);
+            img.SetNumber(KeyStore.Y, 0);
+            mainfreeform.GetList<Document>(KeyStore.Data, []).push(img);
+        });
 
+        let imgRef = React.createRef<HTMLDivElement>();
+        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}
@@ -113,48 +130,17 @@ Documents.initProtos(() => {
                     ContainingCollectionView={undefined} />
                 <DocumentDecorations />
                 <ContextMenu />
-                <button style={{
-                    position: 'absolute',
-                    bottom: '0px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addImageNode}>Add Image</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '25px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addTextNode}>Add Text</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '50px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addColNode}>Add Collection</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '100',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addSchemaNode}>Add Schema</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '75px',
-                    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>
+                <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
+                    <button onPointerDown={onRowDown(addImageNode, imgRef)} 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>
+                <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
+                    <button onPointerDown={onRowDown(addColNode, colRef)} 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 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>
             </div>),
             document.getElementById('root'));
     })
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a0f457ef2..8926f4aca 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -36,8 +36,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     private _goldenLayout: any = null;
     private _dragDiv: any = null;
     private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLDivElement | undefined;
-    private _dragFakeElement: HTMLDivElement | undefined;
+    private _dragElement: HTMLElement | undefined;
+    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -48,7 +48,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).ReactDOM = ReactDOM;
     }
 
-    public StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+    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.
@@ -65,7 +65,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
         //   - 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._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)
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 3bf84f3cd..74aa20e8b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -67,6 +67,7 @@
         border-bottom: grey;
         border-bottom-style: solid;
         border-bottom-width: 1;
+        height: auto;
     }
     .documentView-node:first-child {
         background: grey;
-- 
cgit v1.2.3-70-g09d2