Still trying to figure out DragManager

2 files changed, 73 insertions, 20 deletions

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 4afc0210f..d8953a4ae 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -31,8 +31,7 @@ interface PresentationElementProps {
     presStatus: boolean;
     presButtonBackUp: Doc;
     presGroupBackUp: Doc;
-
-
+    setHeader: (header: React.RefObject<HTMLDivElement>) => void;
 }
 
 //enum for the all kinds of buttons a doc in presentation can have
@@ -54,6 +53,8 @@ export enum buttonIndex {
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
     @observable private selectedButtons: boolean[];
+    private headerTest?: React.RefObject<HTMLDivElement> = React.createRef();
+
 
 
     constructor(props: PresentationElementProps) {
@@ -374,6 +375,7 @@ export default class PresentationElement extends React.Component<PresentationEle
         let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; };
         return (
             <div className={className} key={p.document[Id] + p.index}
+                ref={(e) => this.props.setHeader(e)}
                 onPointerEnter={onEnter} onPointerLeave={onLeave}
                 style={{
                     outlineColor: "maroon",
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index 7abd3e366..f14602cb3 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -7,6 +7,9 @@ import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { NumCast, StrCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
 import PresentationElement, { buttonIndex } from "./PresentationElement";
+import { DragManager } from "../../util/DragManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import "../../../new_fields/Doc";
 
 
 
@@ -30,6 +33,17 @@ interface PresListProps {
  */
 export default class PresentationViewList extends React.Component<PresListProps> {
 
+    private listdropDisposer?: DragManager.DragDropDisposer;
+    private header?: React.RefObject<HTMLDivElement> = React.createRef();
+    private listContainer: HTMLDivElement | undefined;
+
+
+    componentWillUnmount() {
+        this.listdropDisposer && this.listdropDisposer();
+    }
+
+
+
     /**
      * Method that initializes presentation ids for the
      * docs that is in the presentation, when presentation list
@@ -74,30 +88,67 @@ export default class PresentationViewList extends React.Component<PresListProps>
         });
     }
 
+    protected createListDropTarget = (ele: HTMLDivElement) => {
+        this.listdropDisposer && this.listdropDisposer();
+        if (ele) {
+            this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } });
+        }
+    }
+
+    listDrop = (e: Event, de: DragManager.DropEvent) => {
+        let x = this.ScreenToLocalListTransform(de.x, de.y);
+        let rect = this.header!.current!.getBoundingClientRect();
+        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
+        let before = x[1] < bounds[1];
+        if (de.data instanceof DragManager.DocumentDragData) {
+            let addDoc = (doc: Doc) => doc.AddDocToList(doc, "data", this.resolvedDataDoc, before);
+            e.stopPropagation();
+            //where does treeViewId come from
+            let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            return (de.data.dropAction || de.data.userDropAction) ?
+                de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDocument(d, this.resolvedDataDoc, before) || added, false)
+                : (de.data.moveDocument) ?
+                    movedDocs.reduce((added: boolean, d) => de.data.moveDocument(d, this.resolvedDataDoc, addDoc) || added, false)
+                    : de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDocument(d, this.resolvedDataDoc, before), false);
+        }
+        return false;
+    }
+
+    ScreenToLocalListTransform = (xCord: number, yCord: number) => {
+        let rect = this.listContainer!.getBoundingClientRect(),
+            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+            scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return [rect.top + scrollTop, rect.left + scrollLeft];
+    }
+
+
     render() {
         const children = DocListCast(this.props.mainDocument.data);
         this.initializeGroupIds(children);
         this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
         return (
-
-            <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => 
-                              <PresentationElement
-                                  ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }}
-                                  key={doc[Id]}
-                                  mainDocument={this.props.mainDocument}
-                                  document={doc}
-                                  index={index}
-                                  deleteDocument={this.props.deleteDocument}
-                                  gotoDocument={this.props.gotoDocument}
-                                  groupMappings={this.props.groupMappings}
-                                  allListElements={children}
-                                  presStatus={this.props.presStatus}
-                                  presButtonBackUp={this.props.presButtonBackUp}
-                                  presGroupBackUp={this.props.presGroupBackUp}
-                              />
-                 )}
+            <div className="presentationView-listCont" ref={(e) => {
+                this.createListDropTarget(e!);
+                this.listContainer = e!;
+            }}>
+                {children.map((doc: Doc, index: number) =>
+                    <PresentationElement
+                        ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }}
+                        key={doc[Id]}
+                        mainDocument={this.props.mainDocument}
+                        document={doc}
+                        index={index}
+                        deleteDocument={this.props.deleteDocument}
+                        gotoDocument={this.props.gotoDocument}
+                        groupMappings={this.props.groupMappings}
+                        allListElements={children}
+                        presStatus={this.props.presStatus}
+                        presButtonBackUp={this.props.presButtonBackUp}
+                        presGroupBackUp={this.props.presGroupBackUp}
+                        setHeader={(header: React.RefObject<HTMLDivElement>) => this.header = header}
+                    />
+                )}
             </div>
         );
     }