Some dragging implemented. Like dragging from pres to workspace

3 files changed, 103 insertions, 53 deletions

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index d8953a4ae..79a27b4e9 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -12,6 +12,8 @@ import { faFile as fileSolid, faFileDownload, faLocationArrow, faArrowUp, faSear
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
 import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
+import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
 
 
 library.add(faArrowUp);
@@ -31,7 +33,8 @@ interface PresentationElementProps {
     presStatus: boolean;
     presButtonBackUp: Doc;
     presGroupBackUp: Doc;
-    setHeader: (header: React.RefObject<HTMLDivElement>) => void;
+    removeDocByRef(doc: Doc): boolean;
+
 }
 
 //enum for the all kinds of buttons a doc in presentation can have
@@ -53,15 +56,27 @@ export enum buttonIndex {
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
     @observable private selectedButtons: boolean[];
-    private headerTest?: React.RefObject<HTMLDivElement> = React.createRef();
+    private header?: HTMLDivElement | undefined;
+    private listdropDisposer?: DragManager.DragDropDisposer;
+    private presElRef: React.RefObject<HTMLDivElement>;
+
+
 
 
 
     constructor(props: PresentationElementProps) {
         super(props);
         this.selectedButtons = new Array(6);
+
+        this.presElRef = React.createRef();
     }
 
+
+    componentWillUnmount() {
+        this.listdropDisposer && this.listdropDisposer();
+    }
+
+
     /**
      * Getter to get the status of the buttons.
      */
@@ -74,6 +89,10 @@ export default class PresentationElement extends React.Component<PresentationEle
     async componentDidMount() {
         this.receiveButtonBackUp();
 
+        if (this.presElRef.current) {
+            this.header = this.presElRef.current;
+            this.createListDropTarget(this.presElRef.current);
+        }
     }
 
     //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
@@ -358,6 +377,70 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    protected createListDropTarget = (ele: HTMLDivElement) => {
+        this.listdropDisposer && this.listdropDisposer();
+        if (ele) {
+            this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } });
+        }
+    }
+
+    ScreenToLocalListTransform = (xCord: number, yCord: number) => {
+        let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return [yCord + scrollTop, xCord + scrollLeft];
+    }
+
+
+    listDrop = (e: Event, de: DragManager.DropEvent) => {
+        let x = this.ScreenToLocalListTransform(de.x, de.y);
+        let rect = this.header!.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(this.props.mainDocument, "data", doc, this.props.document, 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: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false)
+                : (de.data.moveDocument) ?
+                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.document, addDoc) || added, false)
+                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before), false);
+        }
+        return false;
+    }
+
+    onPointerEnter = (e: React.PointerEvent): void => {
+        //this.props.document.libraryBrush = true;
+        if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
+            //this.header!.className = "treeViewItem-header";
+            document.addEventListener("pointermove", this.onDragMove, true);
+        }
+    }
+    onPointerLeave = (e: React.PointerEvent): void => {
+        this.props.document.libraryBrush = false;
+        //this.header!.className = "treeViewItem-header";
+        document.removeEventListener("pointermove", this.onDragMove, true);
+    }
+
+    onDragMove = (e: PointerEvent): void => {
+        this.props.document.libraryBrush = false;
+        let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
+        let rect = this.header!.getBoundingClientRect();
+        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
+        let before = x[1] < bounds[1];
+        this.header!.className = "treeViewItem-header";
+        // if (before) this.header!.className += " treeViewItem-header-above";
+        // else if (!before) this.header!.className += " treeViewItem-header-below";
+        e.stopPropagation();
+    }
+
+    @action
+    move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
+        return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc);
+    }
+
+
 
     render() {
         let p = this.props;
@@ -373,10 +456,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
         let onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; };
         let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; };
+        let dropAction = StrCast(this.props.document.dropAction) as dropActionType;
+        let onItemDown = SetupDrag(this.presElRef, () => p.document, this.move, dropAction, this.props.mainDocument[Id], true);
         return (
             <div className={className} key={p.document[Id] + p.index}
-                ref={(e) => this.props.setHeader(e)}
+                ref={this.presElRef}
                 onPointerEnter={onEnter} onPointerLeave={onLeave}
+                onPointerDown={onItemDown}
                 style={{
                     outlineColor: "maroon",
                     outlineStyle: "dashed",
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index f14602cb3..760cc80f4 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -24,6 +24,8 @@ interface PresListProps {
     presStatus: boolean;
     presButtonBackUp: Doc;
     presGroupBackUp: Doc;
+    removeDocByRef(doc: Doc): boolean;
+
 }
 
 
@@ -33,17 +35,6 @@ 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
@@ -88,50 +79,13 @@ 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" ref={(e) => {
-                this.createListDropTarget(e!);
-                this.listContainer = e!;
-            }}>
+            <div className="presentationView-listCont" >
                 {children.map((doc: Doc, index: number) =>
                     <PresentationElement
                         ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }}
@@ -146,7 +100,7 @@ export default class PresentationViewList extends React.Component<PresListProps>
                         presStatus={this.props.presStatus}
                         presButtonBackUp={this.props.presButtonBackUp}
                         presGroupBackUp={this.props.presGroupBackUp}
-                        setHeader={(header: React.RefObject<HTMLDivElement>) => this.header = header}
+                        removeDocByRef={this.props.removeDocByRef}
                     />
                 )}
             </div>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 20d0e113a..cdd059cab 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -447,6 +447,15 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
 
+    public removeDocByRef = (doc: Doc) => {
+        let indexOfDoc = this.childrenDocs.indexOf(doc);
+        this.RemoveDoc(indexOfDoc);
+        if (indexOfDoc !== - 1) {
+            return true;
+        }
+        return false;
+    }
+
     //The function that is called when a document is clicked or reached through next or back.
     //it'll also execute the necessary actions if presentation is playing.
     @action
@@ -786,6 +795,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     presStatus={this.presStatus}
                     presButtonBackUp={this.presButtonBackUp}
                     presGroupBackUp={this.presGroupBackUp}
+                    removeDocByRef={this.removeDocByRef}
                 />
             </div>
         );