From bcd8589f9319221dceb23f5c1aad35fd6373194b Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Mon, 1 Jul 2019 17:23:30 -0400
Subject: Still trying to figure out DragManager

---
 src/client/views/presentationview/PresentationElement.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

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",
-- 
cgit v1.2.3-70-g09d2


From 66e4851757894dcb43fb9baada0fa21fbd43164a Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 2 Jul 2019 16:58:43 -0400
Subject: Some dragging implemented. Like dragging from pres to workspace

---
 .../views/presentationview/PresentationElement.tsx | 92 +++++++++++++++++++++-
 .../views/presentationview/PresentationList.tsx    | 54 +------------
 .../views/presentationview/PresentationView.tsx    | 10 +++
 3 files changed, 103 insertions(+), 53 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

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>
         );
-- 
cgit v1.2.3-70-g09d2


From 118ca303bb18648451fe9c349c79594833d95001 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 3 Jul 2019 18:30:09 -0400
Subject: Reordering Done, Back-up protecting should be added

---
 .../views/presentationview/PresentationElement.tsx | 51 +++++++++++++++++-----
 .../views/presentationview/PresentationView.scss   |  8 ++++
 2 files changed, 48 insertions(+), 11 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 79a27b4e9..23031f02c 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -98,6 +98,10 @@ export default class PresentationElement extends React.Component<PresentationEle
     //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
     async componentDidUpdate() {
         this.receiveButtonBackUp();
+        if (this.presElRef.current) {
+            this.header = this.presElRef.current;
+            this.createListDropTarget(this.presElRef.current);
+        }
     }
 
     receiveButtonBackUp = async () => {
@@ -385,9 +389,9 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     ScreenToLocalListTransform = (xCord: number, yCord: number) => {
-        let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        return [yCord + scrollTop, xCord + scrollLeft];
+        // let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return [xCord, yCord];
     }
 
 
@@ -401,25 +405,46 @@ export default class PresentationElement extends React.Component<PresentationEle
             e.stopPropagation();
             //where does treeViewId come from
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            document.removeEventListener("pointermove", this.onDragMove, true);
             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);
         }
+        document.removeEventListener("pointermove", this.onDragMove, true);
+
         return false;
     }
 
     onPointerEnter = (e: React.PointerEvent): void => {
-        //this.props.document.libraryBrush = true;
+        this.props.document.libraryBrush = true;
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
-            //this.header!.className = "treeViewItem-header";
+            let selected = NumCast(this.props.mainDocument.selectedDoc, 0);
+
+            this.header!.className = "presentationView-item";
+
+
+            if (selected === this.props.index) {
+                //this doc is selected
+                this.header!.className = "presentationView-item presentationView-selected";
+            }
             document.addEventListener("pointermove", this.onDragMove, true);
         }
     }
     onPointerLeave = (e: React.PointerEvent): void => {
         this.props.document.libraryBrush = false;
-        //this.header!.className = "treeViewItem-header";
+        //to get currently selected presentation doc
+        let selected = NumCast(this.props.mainDocument.selectedDoc, 0);
+
+        this.header!.className = "presentationView-item";
+
+
+        if (selected === this.props.index) {
+            //this doc is selected
+            this.header!.className = "presentationView-item presentationView-selected";
+
+        }
         document.removeEventListener("pointermove", this.onDragMove, true);
     }
 
@@ -429,9 +454,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         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";
+        this.header!.className = "presentationView-item";
+        if (before) {
+            this.header!.className += " presentationView-item-above";
+        }
+        else if (!before) {
+            this.header!.className += " presentationView-item-below";
+        }
         e.stopPropagation();
     }
 
@@ -449,7 +478,7 @@ export default class PresentationElement extends React.Component<PresentationEle
         //to get currently selected presentation doc
         let selected = NumCast(p.mainDocument.selectedDoc, 0);
 
-        let className = "presentationView-item";
+        let className = " presentationView-item";
         if (selected === p.index) {
             //this doc is selected
             className += " presentationView-selected";
@@ -461,7 +490,7 @@ export default class PresentationElement extends React.Component<PresentationEle
         return (
             <div className={className} key={p.document[Id] + p.index}
                 ref={this.presElRef}
-                onPointerEnter={onEnter} onPointerLeave={onLeave}
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
                 onPointerDown={onItemDown}
                 style={{
                     outlineColor: "maroon",
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index a35a5849b..2bb0ec8c8 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -21,6 +21,14 @@
     transition: all .1s;
 }
 
+.presentationView-item-above {
+    border-top: black 2px solid;
+}
+
+.presentationView-item-below {
+    border-bottom: black 2px solid;
+}
+
 .presentationView-listCont {
     padding-left: 10px;
     padding-right: 10px;
-- 
cgit v1.2.3-70-g09d2


From 38a5856acd992657f735728aef91d459526364db Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 5 Jul 2019 15:41:17 -0400
Subject: Reodering mostly done. Refactored button backUps, and wrote function
 to update groups.  Gotta find where to call it!

---
 .../views/presentationview/PresentationElement.tsx | 74 ++++++++++++++++++----
 .../views/presentationview/PresentationView.tsx    | 12 +++-
 2 files changed, 73 insertions(+), 13 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 23031f02c..656ec62a0 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -14,6 +14,7 @@ import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
 import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
+import { indexOf } from "typescript-collections/dist/lib/arrays";
 
 
 library.add(faArrowUp);
@@ -59,6 +60,7 @@ export default class PresentationElement extends React.Component<PresentationEle
     private header?: HTMLDivElement | undefined;
     private listdropDisposer?: DragManager.DragDropDisposer;
     private presElRef: React.RefObject<HTMLDivElement>;
+    private backUpDoc: Doc | undefined;
 
 
 
@@ -97,7 +99,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
     async componentDidUpdate() {
-        this.receiveButtonBackUp();
+        //this.receiveButtonBackUp();
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
@@ -111,21 +113,47 @@ export default class PresentationElement extends React.Component<PresentationEle
         if (!castedList) {
             this.props.presButtonBackUp.selectedButtonDocs = castedList = new List<Doc>();
         }
+
+        let foundDoc: boolean = false;
+
         //if this is the first time this doc mounts, push a doc for it to store
-        if (castedList.length <= this.props.index) {
+        await castedList.forEach(async (doc) => {
+            let curDoc = await doc;
+            let curDocId = StrCast(curDoc.docId);
+            if (curDocId === this.props.document[Id]) {
+                let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
+                if (selectedButtonOfDoc !== undefined) {
+                    runInAction(() => this.selectedButtons = selectedButtonOfDoc);
+                    foundDoc = true;
+                    this.backUpDoc = curDoc;
+                    return;
+                }
+            }
+        });
+
+        if (!foundDoc) {
             let newDoc = new Doc();
             let defaultBooleanArray: boolean[] = new Array(6);
             newDoc.selectedButtons = new List(defaultBooleanArray);
+            newDoc.docId = this.props.document[Id];
             castedList.push(newDoc);
-            //otherwise update the selected buttons depending on storage.
-        } else {
-            let curDoc: Doc = await castedList[this.props.index];
-            let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-            if (selectedButtonOfDoc !== undefined) {
-                runInAction(() => this.selectedButtons = selectedButtonOfDoc);
-            }
+            this.backUpDoc = newDoc;
         }
 
+        // if (castedList.length <= this.props.index) {
+        //     let newDoc = new Doc();
+        //     let defaultBooleanArray: boolean[] = new Array(6);
+        //     newDoc.selectedButtons = new List(defaultBooleanArray);
+        //     castedList.push(newDoc);
+        //     //otherwise update the selected buttons depending on storage.
+        // } else {
+        //     let curDoc: Doc = await castedList[this.props.index];
+        //     let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
+        //     if (selectedButtonOfDoc !== undefined) {
+        //         runInAction(() => this.selectedButtons = selectedButtonOfDoc);
+        //     }
+        // }
+
     }
 
     /**
@@ -269,9 +297,18 @@ export default class PresentationElement extends React.Component<PresentationEle
      */
     @action
     autoSaveButtonChange = async (index: buttonIndex) => {
-        let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!;
-        castedList[this.props.index].selectedButtons = new List(this.selectedButtons);
-
+        // let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!;
+        // // let hasBackupDoc: boolean = false;
+        // castedList.forEach((doc: Doc) => {
+        //     let docId = StrCast(doc.docId);
+        //     if (docId === this.props.document[Id]) {
+        //         doc.selectedButtons = new List(this.selectedButtons);
+        //     }
+        // });
+        // castedList[this.props.index].selectedButtons = new List(this.selectedButtons);
+        if (this.backUpDoc) {
+            this.backUpDoc.selectedButtons = new List(this.selectedButtons);
+        }
     }
 
     /**
@@ -417,6 +454,19 @@ export default class PresentationElement extends React.Component<PresentationEle
         return false;
     }
 
+    updateGroupsOnDrop = () => {
+        let p = this.props;
+        let curDocGuid = StrCast(p.document.presentId, null);
+        if (curDocGuid) {
+            if (p.groupMappings.has(curDocGuid)) {
+                let groupArray = this.props.groupMappings.get(curDocGuid)!;
+                groupArray.splice(groupArray.indexOf(p.document), 1);
+            }
+        }
+
+        this.onGroupClick(p.document, p.index, true);
+    }
+
     onPointerEnter = (e: React.PointerEvent): void => {
         this.props.document.libraryBrush = true;
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index cdd059cab..ba248a8aa 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -421,7 +421,17 @@ export class PresentationView extends React.Component<PresViewProps>  {
             //removing it from the backUp of selected Buttons
             let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
             if (castedList) {
-                castedList.splice(index, 1);
+                castedList.forEach(async (doc, indexOfDoc) => {
+                    let curDoc = await doc;
+                    let curDocId = StrCast(curDoc.docId);
+                    if (curDocId === removedDoc[Id]) {
+                        if (castedList) {
+                            castedList.splice(indexOfDoc, 1);
+                            return;
+                        }
+                    }
+                });
+
             }
 
             //removing it from the backup of groups
-- 
cgit v1.2.3-70-g09d2


From edf530d1524cc1896ceeb0289f946ee31b16a938 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 5 Jul 2019 18:52:31 -0400
Subject: Some factorization and group building in drop fixed

---
 .../views/presentationview/PresentationElement.tsx | 61 +++++++++++++++++-----
 .../views/presentationview/PresentationList.tsx    |  4 +-
 .../views/presentationview/PresentationView.tsx    |  7 ++-
 3 files changed, 55 insertions(+), 17 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 656ec62a0..fcddb2ad4 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -442,6 +442,8 @@ export default class PresentationElement extends React.Component<PresentationEle
             e.stopPropagation();
             //where does treeViewId come from
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            //console.log("How is this causing an issue");
+            this.updateGroupsOnDrop(de.data.droppedDocuments[0]);
             document.removeEventListener("pointermove", this.onDragMove, true);
             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)
@@ -454,17 +456,48 @@ export default class PresentationElement extends React.Component<PresentationEle
         return false;
     }
 
-    updateGroupsOnDrop = () => {
+    updateGroupsOnDrop = async (droppedDoc: Doc) => {
         let p = this.props;
-        let curDocGuid = StrCast(p.document.presentId, null);
-        if (curDocGuid) {
-            if (p.groupMappings.has(curDocGuid)) {
-                let groupArray = this.props.groupMappings.get(curDocGuid)!;
-                groupArray.splice(groupArray.indexOf(p.document), 1);
+        let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
+        if (droppedDocSelectedButtons[buttonIndex.Group]) {
+            let curDocGuid = StrCast(droppedDoc.presentId, null);
+            if (curDocGuid) {
+                if (p.groupMappings.has(curDocGuid)) {
+                    let groupArray = this.props.groupMappings.get(curDocGuid)!;
+                    groupArray.splice(groupArray.indexOf(droppedDoc), 1);
+                }
+            }
+
+            let aboveDocGuid = StrCast(p.document.presentId, null);
+            if (p.groupMappings.has(aboveDocGuid)) {
+                p.groupMappings.get(aboveDocGuid)!.push(droppedDoc);
+            } else {
+                let newGroup: Doc[] = [];
+                newGroup.push(p.document);
+                newGroup.push(droppedDoc);
+                droppedDoc.presentId = aboveDocGuid;
+                p.groupMappings.set(aboveDocGuid, newGroup);
             }
+
         }
+    }
+
+    getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
+        let p = this.props;
+
+        let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
+        let foundSelectedButtons: boolean[] = new Array(6);
+        //if this is the first time this doc mounts, push a doc for it to store
+        await castedList!.forEach(async (doc) => {
+            let curDoc = await doc;
+            let curDocId = StrCast(curDoc.docId);
+            if (curDocId === paramDoc[Id]) {
+                foundSelectedButtons = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
+                return;
+            }
+        });
+        return foundSelectedButtons;
 
-        this.onGroupClick(p.document, p.index, true);
     }
 
     onPointerEnter = (e: React.PointerEvent): void => {
@@ -551,14 +584,14 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <strong className="presentationView-name">
                     {`${p.index + 1}. ${title}`}
                 </strong>
-                <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
+                <button className="presentation-icon" onPointerDown={(e) => e.stopPropagation()} onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
-                <button title="Navigate" className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button title="Hide Document Till Presented" className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button title="Fade Document After Presented" className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} color={"gray"} /></button>
-                <button title="Hide Document After Presented" className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
+                <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Document Till Presented" className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade Document After Presented" className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} color={"gray"} /></button>
+                <button title="Hide Document After Presented" className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index 760cc80f4..35af451dd 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -19,7 +19,7 @@ interface PresListProps {
     deleteDocument(index: number): void;
     gotoDocument(index: number, fromDoc: number): Promise<void>;
     groupMappings: Map<String, Doc[]>;
-    presElementsMappings: Map<Doc, PresentationElement>;
+    setPresElementsMappings: (keyDoc: Doc, elem: PresentationElement) => void;
     setChildrenDocs: (docList: Doc[]) => void;
     presStatus: boolean;
     presButtonBackUp: Doc;
@@ -88,7 +88,7 @@ export default class PresentationViewList extends React.Component<PresListProps>
             <div className="presentationView-listCont" >
                 {children.map((doc: Doc, index: number) =>
                     <PresentationElement
-                        ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }}
+                        ref={(e) => { if (e) { this.props.setPresElementsMappings(doc, e); } }}
                         key={doc[Id]}
                         mainDocument={this.props.mainDocument}
                         document={doc}
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index ba248a8aa..c1f5fac60 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -231,6 +231,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
             //checking if any of the group members had used zooming in
             currentsArray.forEach((doc: Doc) => {
+                //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc);
                 if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) {
                     zoomOut = true;
                     return;
@@ -770,6 +771,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.curPresentation.title = newTitle;
     }
 
+    addPressElem = (keyDoc: Doc, elem: PresentationElement) => {
+        this.presElementsMappings.set(keyDoc, elem);
+    }
+
 
     render() {
 
@@ -800,7 +805,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     deleteDocument={this.RemoveDoc}
                     gotoDocument={this.gotoDocument}
                     groupMappings={this.groupMappings}
-                    presElementsMappings={this.presElementsMappings}
+                    setPresElementsMappings={this.addPressElem}
                     setChildrenDocs={this.setChildrenDocs}
                     presStatus={this.presStatus}
                     presButtonBackUp={this.presButtonBackUp}
-- 
cgit v1.2.3-70-g09d2


From 288198ab8aa8127bb69928ab9a827af146287cb2 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 5 Jul 2019 19:26:32 -0400
Subject: error with presElem disappearing

---
 src/client/views/presentationview/PresentationElement.tsx | 6 +++++-
 src/client/views/presentationview/PresentationList.tsx    | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index fcddb2ad4..95e949b87 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -35,6 +35,8 @@ interface PresentationElementProps {
     presButtonBackUp: Doc;
     presGroupBackUp: Doc;
     removeDocByRef(doc: Doc): boolean;
+    setPresElementsMappings: (keyDoc: Doc, elem: PresentationElement) => void;
+
 
 }
 
@@ -90,7 +92,7 @@ export default class PresentationElement extends React.Component<PresentationEle
     //Lifecycle function that makes sure that button BackUp is received when mounted.
     async componentDidMount() {
         this.receiveButtonBackUp();
-
+        //this.props.setPresElementsMappings(this.props.document, this);
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
@@ -100,6 +102,8 @@ export default class PresentationElement extends React.Component<PresentationEle
     //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
     async componentDidUpdate() {
         //this.receiveButtonBackUp();
+        //this.props.setPresElementsMappings(this.props.document, this);
+
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index 35af451dd..90a163f20 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -88,7 +88,11 @@ export default class PresentationViewList extends React.Component<PresListProps>
             <div className="presentationView-listCont" >
                 {children.map((doc: Doc, index: number) =>
                     <PresentationElement
-                        ref={(e) => { if (e) { this.props.setPresElementsMappings(doc, e); } }}
+                        ref={(e) => {
+                            if (e) {
+                                this.props.setPresElementsMappings(doc, e);
+                            }
+                        }}
                         key={doc[Id]}
                         mainDocument={this.props.mainDocument}
                         document={doc}
@@ -101,6 +105,7 @@ export default class PresentationViewList extends React.Component<PresListProps>
                         presButtonBackUp={this.props.presButtonBackUp}
                         presGroupBackUp={this.props.presGroupBackUp}
                         removeDocByRef={this.props.removeDocByRef}
+                        setPresElementsMappings={this.props.setPresElementsMappings}
                     />
                 )}
             </div>
-- 
cgit v1.2.3-70-g09d2


From bfd6e4cfbe79f75ba68e94e29e858611ec8f9f9c Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Mon, 8 Jul 2019 19:19:25 -0400
Subject: SOme bugs fixed but still buggy

---
 .../views/presentationview/PresentationElement.tsx | 86 +++++++++++++++++++---
 .../views/presentationview/PresentationList.tsx    | 10 ++-
 .../views/presentationview/PresentationView.tsx    |  9 ++-
 3 files changed, 87 insertions(+), 18 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 95e949b87..83fca88da 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -35,7 +35,7 @@ interface PresentationElementProps {
     presButtonBackUp: Doc;
     presGroupBackUp: Doc;
     removeDocByRef(doc: Doc): boolean;
-    setPresElementsMappings: (keyDoc: Doc, elem: PresentationElement) => void;
+    PresElementsMappings: Map<Doc, PresentationElement>;
 
 
 }
@@ -103,6 +103,9 @@ export default class PresentationElement extends React.Component<PresentationEle
     async componentDidUpdate() {
         //this.receiveButtonBackUp();
         //this.props.setPresElementsMappings(this.props.document, this);
+        if (!this.props.PresElementsMappings.has(this.props.document)) {
+            this.props.PresElementsMappings.set(this.props.document, this);
+        }
 
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
@@ -447,7 +450,8 @@ export default class PresentationElement extends React.Component<PresentationEle
             //where does treeViewId come from
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
             //console.log("How is this causing an issue");
-            this.updateGroupsOnDrop(de.data.droppedDocuments[0]);
+            let droppedDoc: Doc = de.data.droppedDocuments[0];
+            this.updateGroupsOnDrop(droppedDoc);
             document.removeEventListener("pointermove", this.onDragMove, true);
             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)
@@ -463,27 +467,85 @@ export default class PresentationElement extends React.Component<PresentationEle
     updateGroupsOnDrop = async (droppedDoc: Doc) => {
         let p = this.props;
         let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
+        let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
+        let curDocGuid = StrCast(droppedDoc.presentId, null);
         if (droppedDocSelectedButtons[buttonIndex.Group]) {
-            let curDocGuid = StrCast(droppedDoc.presentId, null);
             if (curDocGuid) {
                 if (p.groupMappings.has(curDocGuid)) {
+                    console.log("Splicing from a group");
                     let groupArray = this.props.groupMappings.get(curDocGuid)!;
                     groupArray.splice(groupArray.indexOf(droppedDoc), 1);
+                    droppedDoc.presentId = Utils.GenerateGuid();
+                }
+            }
+            let aboveDocIndex: number;
+            if (droppedDocIndex >= 1) {
+                aboveDocIndex = droppedDocIndex - 1;
+
+                let aboveDoc: Doc = this.props.allListElements[aboveDocIndex];
+                let aboveDocGuid = StrCast(aboveDoc.presentId, null);
+                console.log("Above document: ", aboveDoc, " has presentId: ", aboveDocGuid);
+                console.log("Dropped document: ", droppedDoc, " has presentId: ", curDocGuid);
+
+                if (p.groupMappings.has(aboveDocGuid)) {
+                    p.groupMappings.get(aboveDocGuid)!.push(droppedDoc);
+                    droppedDoc.presentId = aboveDocGuid;
+                    console.log("First case got called!");
+                } else {
+                    let newGroup: Doc[] = [];
+                    newGroup.push(p.document);
+                    newGroup.push(droppedDoc);
+                    droppedDoc.presentId = aboveDocGuid;
+                    p.groupMappings.set(aboveDocGuid, newGroup);
+                    console.log("Second case got called!");
                 }
             }
+        } else {
 
-            let aboveDocGuid = StrCast(p.document.presentId, null);
-            if (p.groupMappings.has(aboveDocGuid)) {
-                p.groupMappings.get(aboveDocGuid)!.push(droppedDoc);
-            } else {
-                let newGroup: Doc[] = [];
-                newGroup.push(p.document);
-                newGroup.push(droppedDoc);
-                droppedDoc.presentId = aboveDocGuid;
-                p.groupMappings.set(aboveDocGuid, newGroup);
+            if (p.groupMappings.has(curDocGuid)) {
+                droppedDoc.presentId = Utils.GenerateGuid();
             }
+            if (droppedDocIndex < this.props.allListElements.length - 1) {
+                let belowDoc = this.props.allListElements[droppedDocIndex + 1];
+                let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc);
+
+                if (belowDocSelectedButtons[buttonIndex.Group]) {
+                    if (droppedDocIndex >= 1) {
+                        let aboveDocIndex = droppedDocIndex - 1;
+
+                        let aboveDoc: Doc = this.props.allListElements[aboveDocIndex];
+                        let aboveDocGuid = StrCast(aboveDoc.presentId, null);
+                        let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!;
+                        let aboveDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveDoc);
+
+                        if (aboveDocSelectedButtons[buttonIndex.Group]) {
+
+                            let targetIndex = aboveGroupArray.indexOf(aboveDoc);
+                            let firstPart = aboveGroupArray.slice(0, targetIndex + 1);
+                            let firstPartNewGuid = Utils.GenerateGuid();
+                            firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
+                            let secondPart = aboveGroupArray.slice(targetIndex + 1);
+                            p.groupMappings.set(StrCast(aboveDoc.presentId, Utils.GenerateGuid()), firstPart);
+                            p.groupMappings.set(StrCast(belowDoc.presentId, Utils.GenerateGuid()), secondPart);
+
+                        } else {
+                            let belowDocPresentId = StrCast(belowDoc.presentId);
+                            let groupArray: Doc[] = this.props.groupMappings.get(belowDocPresentId)!;
+                            groupArray.splice(groupArray.indexOf(aboveDoc), 1);
+                            aboveDoc.presentId = Utils.GenerateGuid();
+                            droppedDoc.presentId = belowDocPresentId;
+                            groupArray.push(droppedDoc);
+                        }
 
+                    }
+                }
+
+
+
+            }
         }
+
+        console.log("New Groups: ", p.groupMappings);
     }
 
     getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index 90a163f20..2d63d41b5 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -19,12 +19,13 @@ interface PresListProps {
     deleteDocument(index: number): void;
     gotoDocument(index: number, fromDoc: number): Promise<void>;
     groupMappings: Map<String, Doc[]>;
-    setPresElementsMappings: (keyDoc: Doc, elem: PresentationElement) => void;
+    PresElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
     presStatus: boolean;
     presButtonBackUp: Doc;
     presGroupBackUp: Doc;
     removeDocByRef(doc: Doc): boolean;
+    clearElemMap(): void;
 
 }
 
@@ -84,13 +85,14 @@ export default class PresentationViewList extends React.Component<PresListProps>
         this.initializeGroupIds(children);
         this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
+        this.props.clearElemMap();
         return (
             <div className="presentationView-listCont" >
                 {children.map((doc: Doc, index: number) =>
                     <PresentationElement
                         ref={(e) => {
-                            if (e) {
-                                this.props.setPresElementsMappings(doc, e);
+                            if (e && e !== null) {
+                                this.props.PresElementsMappings.set(doc, e);
                             }
                         }}
                         key={doc[Id]}
@@ -105,7 +107,7 @@ export default class PresentationViewList extends React.Component<PresListProps>
                         presButtonBackUp={this.props.presButtonBackUp}
                         presGroupBackUp={this.props.presGroupBackUp}
                         removeDocByRef={this.props.removeDocByRef}
-                        setPresElementsMappings={this.props.setPresElementsMappings}
+                        PresElementsMappings={this.props.PresElementsMappings}
                     />
                 )}
             </div>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index c1f5fac60..5db87a692 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import React = require("react");
-import { observable, action, runInAction, reaction } from "mobx";
+import { observable, action, runInAction, reaction, autorun } from "mobx";
 import "./PresentationView.scss";
 import { DocumentManager } from "../../util/DocumentManager";
 import { Utils } from "../../../Utils";
@@ -65,6 +65,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     constructor(props: PresViewProps) {
         super(props);
         PresentationView.Instance = this;
+        // autorun(() => console.log("Updated: ", this.presElementsMappings));
     }
 
     //The first lifecycle function that gets called to set up the current presentation.
@@ -327,6 +328,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (curDocPresId !== undefined) {
             if (this.groupMappings.has(curDocPresId)) {
                 let currentDocGroup = this.groupMappings.get(curDocPresId)!;
+                Array.from(this.presElementsMappings.keys()).map(doc => console.log(doc[Id]));
+                console.log("\n");
                 currentDocGroup.forEach((doc: Doc, index: number) => {
                     let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected;
                     if (selectedButtons[buttonIndex.Navigate]) {
@@ -773,6 +776,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     addPressElem = (keyDoc: Doc, elem: PresentationElement) => {
         this.presElementsMappings.set(keyDoc, elem);
+        // console.log(keyDoc, " : ", elem, " => ", this.presElementsMappings.size);
     }
 
 
@@ -805,12 +809,13 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     deleteDocument={this.RemoveDoc}
                     gotoDocument={this.gotoDocument}
                     groupMappings={this.groupMappings}
-                    setPresElementsMappings={this.addPressElem}
+                    PresElementsMappings={this.presElementsMappings}
                     setChildrenDocs={this.setChildrenDocs}
                     presStatus={this.presStatus}
                     presButtonBackUp={this.presButtonBackUp}
                     presGroupBackUp={this.presGroupBackUp}
                     removeDocByRef={this.removeDocByRef}
+                    clearElemMap={() => this.presElementsMappings.clear()}
                 />
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From bf11cba65e877229597edff8b689a8b41b7028b6 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 9 Jul 2019 19:30:38 -0400
Subject: Before is used for groups now

---
 .../views/presentationview/PresentationElement.tsx | 185 ++++++++++++++++++++-
 1 file changed, 176 insertions(+), 9 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 83fca88da..a38288109 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -15,6 +15,7 @@ import { listSpec } from "../../../new_fields/Schema";
 import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { indexOf } from "typescript-collections/dist/lib/arrays";
+import { map } from "bluebird";
 
 
 library.add(faArrowUp);
@@ -124,21 +125,24 @@ export default class PresentationElement extends React.Component<PresentationEle
         let foundDoc: boolean = false;
 
         //if this is the first time this doc mounts, push a doc for it to store
-        await castedList.forEach(async (doc) => {
+
+        for (let doc of castedList) {
             let curDoc = await doc;
             let curDocId = StrCast(curDoc.docId);
             if (curDocId === this.props.document[Id]) {
+                //console.log(`curDocId: ${curDocId}, document[id]: ${this.props.document[Id]}`);
                 let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
                 if (selectedButtonOfDoc !== undefined) {
                     runInAction(() => this.selectedButtons = selectedButtonOfDoc);
                     foundDoc = true;
                     this.backUpDoc = curDoc;
-                    return;
+                    break;
                 }
             }
-        });
+        }
 
         if (!foundDoc) {
+            //console.log("Adding a new fucker!!");
             let newDoc = new Doc();
             let defaultBooleanArray: boolean[] = new Array(6);
             newDoc.selectedButtons = new List(defaultBooleanArray);
@@ -439,7 +443,7 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
 
-    listDrop = (e: Event, de: DragManager.DropEvent) => {
+    listDrop = async (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);
@@ -451,7 +455,7 @@ export default class PresentationElement extends React.Component<PresentationEle
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
             //console.log("How is this causing an issue");
             let droppedDoc: Doc = de.data.droppedDocuments[0];
-            this.updateGroupsOnDrop(droppedDoc);
+            await this.updateGroupsOnDrop2(droppedDoc, de);
             document.removeEventListener("pointermove", this.onDragMove, true);
             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)
@@ -510,6 +514,16 @@ export default class PresentationElement extends React.Component<PresentationEle
                 let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc);
 
                 if (belowDocSelectedButtons[buttonIndex.Group]) {
+
+                    if (curDocGuid) {
+                        if (p.groupMappings.has(curDocGuid)) {
+                            console.log("Splicing from a group");
+                            let groupArray = this.props.groupMappings.get(curDocGuid)!;
+                            groupArray.splice(groupArray.indexOf(droppedDoc), 1);
+                            droppedDoc.presentId = Utils.GenerateGuid();
+                        }
+                    }
+
                     if (droppedDocIndex >= 1) {
                         let aboveDocIndex = droppedDocIndex - 1;
 
@@ -548,20 +562,173 @@ export default class PresentationElement extends React.Component<PresentationEle
         console.log("New Groups: ", p.groupMappings);
     }
 
+    updateGroupsOnDrop2 = async (droppedDoc: Doc, de: DragManager.DropEvent) => {
+        let p = this.props;
+        let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
+        let curDocGuid = StrCast(droppedDoc.presentId, null);
+
+        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 (p.groupMappings.has(curDocGuid)) {
+            console.log("Splicing from a group");
+            let groupArray = this.props.groupMappings.get(curDocGuid)!;
+            groupArray.splice(groupArray.indexOf(droppedDoc), 1);
+            droppedDoc.presentId = Utils.GenerateGuid();
+        }
+
+        if (droppedDocSelectedButtons[buttonIndex.Group]) {
+
+            if (before) {
+                if (this.props.index > 0) {
+                    let aboveDoc = this.props.allListElements[this.props.index - 1];
+                    let aboveDocGuid = StrCast(aboveDoc.presentId);
+                    if (this.props.groupMappings.has(aboveDocGuid)) {
+                        let groupArray = this.props.groupMappings.get(aboveDocGuid)!;
+                        let tempStack: Doc[] = [];
+                        while (groupArray[groupArray.length - 1] !== aboveDoc) {
+                            tempStack.push(groupArray.pop()!);
+                        }
+                        groupArray.push(droppedDoc);
+                        while (tempStack.length !== 0) {
+                            groupArray.push(tempStack.pop()!);
+                        }
+                    } else {
+                        let newGroup: Doc[] = [];
+                        newGroup.push(aboveDoc);
+                        newGroup.push(droppedDoc);
+                        droppedDoc.presentId = aboveDocGuid;
+                        p.groupMappings.set(aboveDocGuid, newGroup);
+                    }
+                }
+            } else {
+                let propsDocGuid = StrCast(this.props.document.presentId);
+                if (this.props.groupMappings.has(propsDocGuid)) {
+                    let groupArray = this.props.groupMappings.get(propsDocGuid)!;
+                    let tempStack: Doc[] = [];
+
+                    while (groupArray[groupArray.length - 1] !== this.props.document) {
+                        tempStack.push(groupArray.pop()!);
+                    }
+                    groupArray.push(droppedDoc);
+                    while (tempStack.length !== 0) {
+                        groupArray.push(tempStack.pop()!);
+                    }
+
+                } else {
+                    let newGroup: Doc[] = [];
+                    newGroup.push(this.props.document);
+                    newGroup.push(droppedDoc);
+                    droppedDoc.presentId = propsDocGuid;
+                    p.groupMappings.set(propsDocGuid, newGroup);
+                }
+            }
+
+
+
+        } else {
+            if (before) {
+                if (this.props.index > 0) {
+
+                    let aboveDoc = this.props.allListElements[this.props.index - 1];
+                    let aboveDocGuid = StrCast(aboveDoc.presentId);
+                    let aboveDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveDoc);
+
+
+                    if (this.selectedButtons[buttonIndex.Group]) {
+                        if (aboveDocSelectedButtons[buttonIndex.Group]) {
+                            let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!;
+
+
+                            let targetIndex = aboveGroupArray.indexOf(aboveDoc);
+                            let firstPart = aboveGroupArray.slice(0, targetIndex + 1);
+                            let firstPartNewGuid = Utils.GenerateGuid();
+                            firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
+                            let secondPart = aboveGroupArray.slice(targetIndex + 1);
+                            p.groupMappings.set(StrCast(aboveDoc.presentId, Utils.GenerateGuid()), firstPart);
+                            p.groupMappings.set(StrCast(this.props.document.presentId, Utils.GenerateGuid()), secondPart);
+
+
+                        } else {
+                            let belowPresentId = StrCast(this.props.document.presentId);
+                            let belowGroup = this.props.groupMappings.get(belowPresentId)!;
+                            belowGroup.splice(belowGroup.indexOf(aboveDoc), 1);
+                            aboveDoc.presentId = Utils.GenerateGuid();
+                        }
+
+
+                    }
+                } else {
+                    let propsPresId = StrCast(this.props.document.presentId);
+                    if (this.props.groupMappings.has(propsPresId)) {
+                        let propsArray = this.props.groupMappings.get(propsPresId)!;
+                        propsArray.push(droppedDoc);
+                        droppedDoc.presentId = propsPresId;
+                    }
+                }
+            } else {
+                if (this.props.index < this.props.allListElements.length - 1) {
+                    let belowDoc = this.props.allListElements[this.props.index - 1];
+                    let belowDocGuid = StrCast(belowDoc.presentId);
+                    let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc);
+
+                    let propsDocGuid = StrCast(this.props.document.presentId);
+
+                    if (belowDocSelectedButtons[buttonIndex.Group]) {
+                        let belowGroupArray = this.props.groupMappings.get(belowDocGuid)!;
+                        if (this.selectedButtons[buttonIndex.Group]) {
+
+                            let propsGroupArray = this.props.groupMappings.get(propsDocGuid)!;
+
+                            let targetIndex = propsGroupArray.indexOf(this.props.document);
+                            let firstPart = propsGroupArray.slice(0, targetIndex + 1);
+                            let firstPartNewGuid = Utils.GenerateGuid();
+                            firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
+                            let secondPart = propsGroupArray.slice(targetIndex + 1);
+                            p.groupMappings.set(firstPartNewGuid, firstPart);
+                            p.groupMappings.set(StrCast(belowDocGuid, Utils.GenerateGuid()), secondPart);
+
+                        } else {
+                            belowGroupArray.push(droppedDoc);
+                            droppedDoc.presentId = belowDocGuid;
+                        }
+                    }
+
+
+
+                }
+            }
+        }
+    }
+
     getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
         let p = this.props;
 
         let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
         let foundSelectedButtons: boolean[] = new Array(6);
         //if this is the first time this doc mounts, push a doc for it to store
-        await castedList!.forEach(async (doc) => {
+        // await castedList!.forEach(async (doc) => {
+        //     let curDoc = await doc;
+        //     let curDocId = StrCast(curDoc.docId);
+        //     if (curDocId === paramDoc[Id]) {
+        //         foundSelectedButtons = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
+        //         return;
+        //     }
+        // });
+
+        for (let doc of castedList!) {
             let curDoc = await doc;
             let curDocId = StrCast(curDoc.docId);
             if (curDocId === paramDoc[Id]) {
-                foundSelectedButtons = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-                return;
+                let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
+                if (selectedButtonOfDoc !== undefined) {
+                    return selectedButtonOfDoc;
+                }
             }
-        });
+        }
+
         return foundSelectedButtons;
 
     }
-- 
cgit v1.2.3-70-g09d2


From 04131bec301084070595a545920886f63eca161f Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 10 Jul 2019 19:50:19 -0400
Subject: Most bugs fixed. More testing needed. Refactoring needed.

---
 .../views/presentationview/PresentationElement.tsx | 80 +++++++++++++++++++---
 .../views/presentationview/PresentationView.tsx    | 34 ++++++---
 2 files changed, 96 insertions(+), 18 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index a38288109..2b9b73e45 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -104,9 +104,9 @@ export default class PresentationElement extends React.Component<PresentationEle
     async componentDidUpdate() {
         //this.receiveButtonBackUp();
         //this.props.setPresElementsMappings(this.props.document, this);
-        if (!this.props.PresElementsMappings.has(this.props.document)) {
-            this.props.PresElementsMappings.set(this.props.document, this);
-        }
+        // if (!this.props.PresElementsMappings.has(this.props.document)) {
+        //     this.props.PresElementsMappings.set(this.props.document, this);
+        // }
 
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
@@ -479,6 +479,9 @@ export default class PresentationElement extends React.Component<PresentationEle
                     console.log("Splicing from a group");
                     let groupArray = this.props.groupMappings.get(curDocGuid)!;
                     groupArray.splice(groupArray.indexOf(droppedDoc), 1);
+                    if (groupArray.length === 0) {
+                        this.props.groupMappings.delete(curDocGuid);
+                    }
                     droppedDoc.presentId = Utils.GenerateGuid();
                 }
             }
@@ -563,6 +566,18 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     updateGroupsOnDrop2 = async (droppedDoc: Doc, de: DragManager.DropEvent) => {
+
+        let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
+
+        let dropIndexDiff = Math.abs(this.props.index - droppedDocIndex);
+
+        if (dropIndexDiff <= 1) {
+            return;
+        }
+
+
+
+
         let p = this.props;
         let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
         let curDocGuid = StrCast(droppedDoc.presentId, null);
@@ -572,13 +587,47 @@ export default class PresentationElement extends React.Component<PresentationEle
         let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
         let before = x[1] < bounds[1];
 
+
+
+        //Splicing the doc from its current group, since it's moved
         if (p.groupMappings.has(curDocGuid)) {
             console.log("Splicing from a group");
             let groupArray = this.props.groupMappings.get(curDocGuid)!;
             groupArray.splice(groupArray.indexOf(droppedDoc), 1);
+            if (groupArray.length === 0) {
+                this.props.groupMappings.delete(curDocGuid);
+            }
             droppedDoc.presentId = Utils.GenerateGuid();
+            //let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
+            let indexOfBelow = droppedDocIndex + 1;
+            if (indexOfBelow < this.props.allListElements.length && indexOfBelow > 1) {
+                let selectedButtonsOrigBelow: boolean[] = await this.getSelectedButtonsOfDoc(this.props.allListElements[indexOfBelow]);
+                let aboveBelowDoc: Doc = this.props.allListElements[droppedDocIndex - 1];
+                let aboveBelowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveBelowDoc);
+                let belowDoc: Doc = this.props.allListElements[indexOfBelow];
+                let belowDocPresId = StrCast(belowDoc.presentId);
+                if (selectedButtonsOrigBelow[buttonIndex.Group]) {
+                    let belowDocGroup: Doc[] = this.props.groupMappings.get(belowDocPresId)!;
+                    if (aboveBelowDocSelectedButtons[buttonIndex.Group]) {
+                        let aboveBelowDocPresId = StrCast(aboveBelowDoc.presentId);
+                        if (this.props.groupMappings.has(aboveBelowDocPresId)) {
+                            let aboveBelowDocGroup: Doc[] = this.props.groupMappings.get(aboveBelowDocPresId)!;
+                            aboveBelowDocGroup.unshift(...belowDocGroup);
+                            this.props.groupMappings.delete(belowDocPresId);
+                            belowDocGroup.forEach((doc: Doc) => doc.presentId = aboveBelowDocPresId);
+                        }
+                    } else {
+                        belowDocGroup.unshift(aboveBelowDoc);
+                        aboveBelowDoc.presentId = belowDocPresId;
+                    }
+
+
+                }
+            }
+
         }
 
+
         if (droppedDocSelectedButtons[buttonIndex.Group]) {
 
             if (before) {
@@ -592,6 +641,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                             tempStack.push(groupArray.pop()!);
                         }
                         groupArray.push(droppedDoc);
+                        droppedDoc.presentId = aboveDocGuid;
                         while (tempStack.length !== 0) {
                             groupArray.push(tempStack.pop()!);
                         }
@@ -613,6 +663,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                         tempStack.push(groupArray.pop()!);
                     }
                     groupArray.push(droppedDoc);
+                    droppedDoc.presentId = propsDocGuid;
                     while (tempStack.length !== 0) {
                         groupArray.push(tempStack.pop()!);
                     }
@@ -647,6 +698,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                             let firstPartNewGuid = Utils.GenerateGuid();
                             firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
                             let secondPart = aboveGroupArray.slice(targetIndex + 1);
+                            secondPart.unshift(droppedDoc);
+                            droppedDoc.presentId = StrCast(this.props.document.presentId);
                             p.groupMappings.set(StrCast(aboveDoc.presentId, Utils.GenerateGuid()), firstPart);
                             p.groupMappings.set(StrCast(this.props.document.presentId, Utils.GenerateGuid()), secondPart);
 
@@ -655,22 +708,26 @@ export default class PresentationElement extends React.Component<PresentationEle
                             let belowPresentId = StrCast(this.props.document.presentId);
                             let belowGroup = this.props.groupMappings.get(belowPresentId)!;
                             belowGroup.splice(belowGroup.indexOf(aboveDoc), 1);
+                            belowGroup.unshift(droppedDoc);
+                            droppedDoc.presentId = belowPresentId;
                             aboveDoc.presentId = Utils.GenerateGuid();
                         }
 
+                        //
+
 
                     }
                 } else {
                     let propsPresId = StrCast(this.props.document.presentId);
-                    if (this.props.groupMappings.has(propsPresId)) {
+                    if (this.selectedButtons[buttonIndex.Group]) {
                         let propsArray = this.props.groupMappings.get(propsPresId)!;
-                        propsArray.push(droppedDoc);
+                        propsArray.unshift(droppedDoc);
                         droppedDoc.presentId = propsPresId;
                     }
                 }
             } else {
                 if (this.props.index < this.props.allListElements.length - 1) {
-                    let belowDoc = this.props.allListElements[this.props.index - 1];
+                    let belowDoc = this.props.allListElements[this.props.index + 1];
                     let belowDocGuid = StrCast(belowDoc.presentId);
                     let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc);
 
@@ -681,26 +738,29 @@ export default class PresentationElement extends React.Component<PresentationEle
                         if (this.selectedButtons[buttonIndex.Group]) {
 
                             let propsGroupArray = this.props.groupMappings.get(propsDocGuid)!;
-
                             let targetIndex = propsGroupArray.indexOf(this.props.document);
                             let firstPart = propsGroupArray.slice(0, targetIndex + 1);
                             let firstPartNewGuid = Utils.GenerateGuid();
                             firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
                             let secondPart = propsGroupArray.slice(targetIndex + 1);
+                            secondPart.unshift(droppedDoc);
+                            droppedDoc.presentId = StrCast(this.props.document.presentId);
                             p.groupMappings.set(firstPartNewGuid, firstPart);
                             p.groupMappings.set(StrCast(belowDocGuid, Utils.GenerateGuid()), secondPart);
 
                         } else {
-                            belowGroupArray.push(droppedDoc);
+                            belowGroupArray.splice(belowGroupArray.indexOf(this.props.document), 1);
+                            this.props.document.presentId = Utils.GenerateGuid();
+                            belowGroupArray.unshift(droppedDoc);
                             droppedDoc.presentId = belowDocGuid;
                         }
                     }
 
-
-
                 }
             }
         }
+        this.autoSaveGroupChanges();
+
     }
 
     getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 5db87a692..1a73f70cb 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -423,19 +423,33 @@ export class PresentationView extends React.Component<PresViewProps>  {
             }
 
             //removing it from the backUp of selected Buttons
+            // let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
+            // if (castedList) {
+            //     castedList.forEach(async (doc, indexOfDoc) => {
+            //         let curDoc = await doc;
+            //         let curDocId = StrCast(curDoc.docId);
+            //         if (curDocId === removedDoc[Id]) {
+            //             if (castedList) {
+            //                 castedList.splice(indexOfDoc, 1);
+            //                 return;
+            //             }
+            //         }
+            //     });
+
+            // }
+            //removing it from the backUp of selected Buttons
+
             let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
             if (castedList) {
-                castedList.forEach(async (doc, indexOfDoc) => {
+                for (let doc of castedList) {
                     let curDoc = await doc;
                     let curDocId = StrCast(curDoc.docId);
                     if (curDocId === removedDoc[Id]) {
-                        if (castedList) {
-                            castedList.splice(indexOfDoc, 1);
-                            return;
-                        }
-                    }
-                });
+                        castedList.splice(castedList.indexOf(curDoc), 1);
+                        break;
 
+                    }
+                }
             }
 
             //removing it from the backup of groups
@@ -463,7 +477,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     public removeDocByRef = (doc: Doc) => {
         let indexOfDoc = this.childrenDocs.indexOf(doc);
-        this.RemoveDoc(indexOfDoc);
+        const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
+        if (value) {
+            value.splice(indexOfDoc, 1)[0];
+        }
+        //this.RemoveDoc(indexOfDoc, true);
         if (indexOfDoc !== - 1) {
             return true;
         }
-- 
cgit v1.2.3-70-g09d2


From 7f136c6826ee7adcd25ba28decd1f8bbf5668de1 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Thu, 11 Jul 2019 12:58:36 -0400
Subject: Couple of more case fixes

---
 .../views/presentationview/PresentationElement.tsx | 24 +++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 2b9b73e45..0ba03d78a 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -567,11 +567,19 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     updateGroupsOnDrop2 = async (droppedDoc: Doc, 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];
+
         let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
 
         let dropIndexDiff = Math.abs(this.props.index - droppedDocIndex);
 
-        if (dropIndexDiff <= 1) {
+        if (dropIndexDiff <= 1 && before) {
+            return;
+        }
+        if (dropIndexDiff === 0 && !before) {
             return;
         }
 
@@ -582,10 +590,7 @@ export default class PresentationElement extends React.Component<PresentationEle
         let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
         let curDocGuid = StrCast(droppedDoc.presentId, null);
 
-        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];
+
 
 
 
@@ -593,6 +598,8 @@ export default class PresentationElement extends React.Component<PresentationEle
         if (p.groupMappings.has(curDocGuid)) {
             console.log("Splicing from a group");
             let groupArray = this.props.groupMappings.get(curDocGuid)!;
+
+            //Error here: You Should splice the beforehand things as well, if present!!
             groupArray.splice(groupArray.indexOf(droppedDoc), 1);
             if (groupArray.length === 0) {
                 this.props.groupMappings.delete(curDocGuid);
@@ -652,6 +659,13 @@ export default class PresentationElement extends React.Component<PresentationEle
                         droppedDoc.presentId = aboveDocGuid;
                         p.groupMappings.set(aboveDocGuid, newGroup);
                     }
+                } else {
+                    let propsPresId = StrCast(this.props.document.presentId);
+                    if (this.selectedButtons[buttonIndex.Group]) {
+                        let propsArray = this.props.groupMappings.get(propsPresId)!;
+                        propsArray.unshift(droppedDoc);
+                        droppedDoc.presentId = propsPresId;
+                    }
                 }
             } else {
                 let propsDocGuid = StrCast(this.props.document.presentId);
-- 
cgit v1.2.3-70-g09d2


From 95a58544cfd3d9baa824b07eec8fa8a63f2f8c8a Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Thu, 11 Jul 2019 17:12:51 -0400
Subject: Documentation and refactoring left

---
 .../views/presentationview/PresentationElement.tsx | 27 ++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 0ba03d78a..733bbff13 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -574,12 +574,16 @@ export default class PresentationElement extends React.Component<PresentationEle
 
         let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
 
-        let dropIndexDiff = Math.abs(this.props.index - droppedDocIndex);
+        let dropIndexDiff = droppedDocIndex - this.props.index;
 
-        if (dropIndexDiff <= 1 && before) {
+        if (droppedDocIndex === this.props.index) {
             return;
         }
-        if (dropIndexDiff === 0 && !before) {
+
+        if (dropIndexDiff === 1 && !before) {
+            return;
+        }
+        if (dropIndexDiff === -1 && before) {
             return;
         }
 
@@ -599,12 +603,25 @@ export default class PresentationElement extends React.Component<PresentationEle
             console.log("Splicing from a group");
             let groupArray = this.props.groupMappings.get(curDocGuid)!;
 
+            if (droppedDocSelectedButtons[buttonIndex.Group]) {
+                let groupIndexOfDrop = groupArray.indexOf(droppedDoc);
+                let firstPart = groupArray.splice(0, groupIndexOfDrop);
+                //let secondPart = groupArray.slice(groupIndexOfDrop + 1);
+
+                if (firstPart.length > 1) {
+                    let newGroupGuid = Utils.GenerateGuid();
+                    firstPart.forEach((doc: Doc) => doc.presentId = newGroupGuid);
+                    this.props.groupMappings.set(newGroupGuid, firstPart);
+                }
+            }
+
             //Error here: You Should splice the beforehand things as well, if present!!
             groupArray.splice(groupArray.indexOf(droppedDoc), 1);
             if (groupArray.length === 0) {
                 this.props.groupMappings.delete(curDocGuid);
             }
             droppedDoc.presentId = Utils.GenerateGuid();
+
             //let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
             let indexOfBelow = droppedDocIndex + 1;
             if (indexOfBelow < this.props.allListElements.length && indexOfBelow > 1) {
@@ -613,15 +630,17 @@ export default class PresentationElement extends React.Component<PresentationEle
                 let aboveBelowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveBelowDoc);
                 let belowDoc: Doc = this.props.allListElements[indexOfBelow];
                 let belowDocPresId = StrCast(belowDoc.presentId);
+
                 if (selectedButtonsOrigBelow[buttonIndex.Group]) {
                     let belowDocGroup: Doc[] = this.props.groupMappings.get(belowDocPresId)!;
                     if (aboveBelowDocSelectedButtons[buttonIndex.Group]) {
                         let aboveBelowDocPresId = StrCast(aboveBelowDoc.presentId);
                         if (this.props.groupMappings.has(aboveBelowDocPresId)) {
                             let aboveBelowDocGroup: Doc[] = this.props.groupMappings.get(aboveBelowDocPresId)!;
-                            aboveBelowDocGroup.unshift(...belowDocGroup);
+                            aboveBelowDocGroup.push(...belowDocGroup);
                             this.props.groupMappings.delete(belowDocPresId);
                             belowDocGroup.forEach((doc: Doc) => doc.presentId = aboveBelowDocPresId);
+
                         }
                     } else {
                         belowDocGroup.unshift(aboveBelowDoc);
-- 
cgit v1.2.3-70-g09d2


From 3593c1c4a67e8fb398e5a456ad4d758305294625 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 16 Jul 2019 12:37:04 -0400
Subject: Uncommented code

---
 package.json                                              |  4 ++--
 src/client/views/presentationview/PresentationElement.tsx | 15 ---------------
 2 files changed, 2 insertions(+), 17 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/package.json b/package.json
index dc829a045..7aff71b57 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
         "ts-node-dev": "^1.0.0-pre.32",
         "tslint": "^5.15.0",
         "tslint-loader": "^3.5.4",
-        "typescript": "^3.4.1",
+        "typescript": "^3.5.3",
         "webpack": "^4.29.6",
         "webpack-cli": "^3.2.3",
         "webpack-dev-middleware": "^3.6.1",
@@ -196,4 +196,4 @@
         "uuid": "^3.3.2",
         "xoauth2": "^1.2.0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 733bbff13..55bcbfcd7 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -142,7 +142,6 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
 
         if (!foundDoc) {
-            //console.log("Adding a new fucker!!");
             let newDoc = new Doc();
             let defaultBooleanArray: boolean[] = new Array(6);
             newDoc.selectedButtons = new List(defaultBooleanArray);
@@ -151,20 +150,6 @@ export default class PresentationElement extends React.Component<PresentationEle
             this.backUpDoc = newDoc;
         }
 
-        // if (castedList.length <= this.props.index) {
-        //     let newDoc = new Doc();
-        //     let defaultBooleanArray: boolean[] = new Array(6);
-        //     newDoc.selectedButtons = new List(defaultBooleanArray);
-        //     castedList.push(newDoc);
-        //     //otherwise update the selected buttons depending on storage.
-        // } else {
-        //     let curDoc: Doc = await castedList[this.props.index];
-        //     let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-        //     if (selectedButtonOfDoc !== undefined) {
-        //         runInAction(() => this.selectedButtons = selectedButtonOfDoc);
-        //     }
-        // }
-
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2


From b36a345889965b9f8d8026e535f8c99d9d7bf3ee Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 16 Jul 2019 15:45:35 -0400
Subject: Refactoring groupUpdate

---
 .../views/presentationview/PresentationElement.tsx | 238 ++++-----------------
 1 file changed, 46 insertions(+), 192 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 9f5f6b9bd..a66bf34ce 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -92,7 +92,6 @@ export default class PresentationElement extends React.Component<PresentationEle
     //Lifecycle function that makes sure that button BackUp is received when mounted.
     async componentDidMount() {
         this.receiveButtonBackUp();
-        //this.props.setPresElementsMappings(this.props.document, this);
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
@@ -101,12 +100,6 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
     async componentDidUpdate() {
-        //this.receiveButtonBackUp();
-        //this.props.setPresElementsMappings(this.props.document, this);
-        // if (!this.props.PresElementsMappings.has(this.props.document)) {
-        //     this.props.PresElementsMappings.set(this.props.document, this);
-        // }
-
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
@@ -129,7 +122,6 @@ export default class PresentationElement extends React.Component<PresentationEle
             let curDoc = await doc;
             let curDocId = StrCast(curDoc.docId);
             if (curDocId === this.props.document[Id]) {
-                //console.log(`curDocId: ${curDocId}, document[id]: ${this.props.document[Id]}`);
                 let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
                 if (selectedButtonOfDoc !== undefined) {
                     runInAction(() => this.selectedButtons = selectedButtonOfDoc);
@@ -292,15 +284,6 @@ export default class PresentationElement extends React.Component<PresentationEle
      */
     @action
     autoSaveButtonChange = async (index: buttonIndex) => {
-        // let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!;
-        // // let hasBackupDoc: boolean = false;
-        // castedList.forEach((doc: Doc) => {
-        //     let docId = StrCast(doc.docId);
-        //     if (docId === this.props.document[Id]) {
-        //         doc.selectedButtons = new List(this.selectedButtons);
-        //     }
-        // });
-        // castedList[this.props.index].selectedButtons = new List(this.selectedButtons);
         if (this.backUpDoc) {
             this.backUpDoc.selectedButtons = new List(this.selectedButtons);
         }
@@ -421,8 +404,6 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     ScreenToLocalListTransform = (xCord: number, yCord: number) => {
-        // let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         return [xCord, yCord];
     }
 
@@ -452,102 +433,6 @@ export default class PresentationElement extends React.Component<PresentationEle
         return false;
     }
 
-    updateGroupsOnDrop = async (droppedDoc: Doc) => {
-        let p = this.props;
-        let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
-        let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
-        let curDocGuid = StrCast(droppedDoc.presentId, null);
-        if (droppedDocSelectedButtons[buttonIndex.Group]) {
-            if (curDocGuid) {
-                if (p.groupMappings.has(curDocGuid)) {
-                    console.log("Splicing from a group");
-                    let groupArray = this.props.groupMappings.get(curDocGuid)!;
-                    groupArray.splice(groupArray.indexOf(droppedDoc), 1);
-                    if (groupArray.length === 0) {
-                        this.props.groupMappings.delete(curDocGuid);
-                    }
-                    droppedDoc.presentId = Utils.GenerateGuid();
-                }
-            }
-            let aboveDocIndex: number;
-            if (droppedDocIndex >= 1) {
-                aboveDocIndex = droppedDocIndex - 1;
-
-                let aboveDoc: Doc = this.props.allListElements[aboveDocIndex];
-                let aboveDocGuid = StrCast(aboveDoc.presentId, null);
-                console.log("Above document: ", aboveDoc, " has presentId: ", aboveDocGuid);
-                console.log("Dropped document: ", droppedDoc, " has presentId: ", curDocGuid);
-
-                if (p.groupMappings.has(aboveDocGuid)) {
-                    p.groupMappings.get(aboveDocGuid)!.push(droppedDoc);
-                    droppedDoc.presentId = aboveDocGuid;
-                    console.log("First case got called!");
-                } else {
-                    let newGroup: Doc[] = [];
-                    newGroup.push(p.document);
-                    newGroup.push(droppedDoc);
-                    droppedDoc.presentId = aboveDocGuid;
-                    p.groupMappings.set(aboveDocGuid, newGroup);
-                    console.log("Second case got called!");
-                }
-            }
-        } else {
-
-            if (p.groupMappings.has(curDocGuid)) {
-                droppedDoc.presentId = Utils.GenerateGuid();
-            }
-            if (droppedDocIndex < this.props.allListElements.length - 1) {
-                let belowDoc = this.props.allListElements[droppedDocIndex + 1];
-                let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc);
-
-                if (belowDocSelectedButtons[buttonIndex.Group]) {
-
-                    if (curDocGuid) {
-                        if (p.groupMappings.has(curDocGuid)) {
-                            console.log("Splicing from a group");
-                            let groupArray = this.props.groupMappings.get(curDocGuid)!;
-                            groupArray.splice(groupArray.indexOf(droppedDoc), 1);
-                            droppedDoc.presentId = Utils.GenerateGuid();
-                        }
-                    }
-
-                    if (droppedDocIndex >= 1) {
-                        let aboveDocIndex = droppedDocIndex - 1;
-
-                        let aboveDoc: Doc = this.props.allListElements[aboveDocIndex];
-                        let aboveDocGuid = StrCast(aboveDoc.presentId, null);
-                        let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!;
-                        let aboveDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveDoc);
-
-                        if (aboveDocSelectedButtons[buttonIndex.Group]) {
-
-                            let targetIndex = aboveGroupArray.indexOf(aboveDoc);
-                            let firstPart = aboveGroupArray.slice(0, targetIndex + 1);
-                            let firstPartNewGuid = Utils.GenerateGuid();
-                            firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
-                            let secondPart = aboveGroupArray.slice(targetIndex + 1);
-                            p.groupMappings.set(StrCast(aboveDoc.presentId, Utils.GenerateGuid()), firstPart);
-                            p.groupMappings.set(StrCast(belowDoc.presentId, Utils.GenerateGuid()), secondPart);
-
-                        } else {
-                            let belowDocPresentId = StrCast(belowDoc.presentId);
-                            let groupArray: Doc[] = this.props.groupMappings.get(belowDocPresentId)!;
-                            groupArray.splice(groupArray.indexOf(aboveDoc), 1);
-                            aboveDoc.presentId = Utils.GenerateGuid();
-                            droppedDoc.presentId = belowDocPresentId;
-                            groupArray.push(droppedDoc);
-                        }
-
-                    }
-                }
-
-
-
-            }
-        }
-
-        console.log("New Groups: ", p.groupMappings);
-    }
 
     updateGroupsOnDrop2 = async (droppedDoc: Doc, de: DragManager.DropEvent) => {
 
@@ -560,6 +445,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
         let dropIndexDiff = droppedDocIndex - this.props.index;
 
+        //checking if the position it's dropped corresponds to current location with 3 cases.
         if (droppedDocIndex === this.props.index) {
             return;
         }
@@ -571,26 +457,17 @@ export default class PresentationElement extends React.Component<PresentationEle
             return;
         }
 
-
-
-
         let p = this.props;
         let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
         let curDocGuid = StrCast(droppedDoc.presentId, null);
 
-
-
-
-
         //Splicing the doc from its current group, since it's moved
         if (p.groupMappings.has(curDocGuid)) {
-            console.log("Splicing from a group");
             let groupArray = this.props.groupMappings.get(curDocGuid)!;
 
             if (droppedDocSelectedButtons[buttonIndex.Group]) {
                 let groupIndexOfDrop = groupArray.indexOf(droppedDoc);
                 let firstPart = groupArray.splice(0, groupIndexOfDrop);
-                //let secondPart = groupArray.slice(groupIndexOfDrop + 1);
 
                 if (firstPart.length > 1) {
                     let newGroupGuid = Utils.GenerateGuid();
@@ -599,14 +476,12 @@ export default class PresentationElement extends React.Component<PresentationEle
                 }
             }
 
-            //Error here: You Should splice the beforehand things as well, if present!!
             groupArray.splice(groupArray.indexOf(droppedDoc), 1);
             if (groupArray.length === 0) {
                 this.props.groupMappings.delete(curDocGuid);
             }
             droppedDoc.presentId = Utils.GenerateGuid();
 
-            //let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
             let indexOfBelow = droppedDocIndex + 1;
             if (indexOfBelow < this.props.allListElements.length && indexOfBelow > 1) {
                 let selectedButtonsOrigBelow: boolean[] = await this.getSelectedButtonsOfDoc(this.props.allListElements[indexOfBelow]);
@@ -645,22 +520,9 @@ export default class PresentationElement extends React.Component<PresentationEle
                     let aboveDoc = this.props.allListElements[this.props.index - 1];
                     let aboveDocGuid = StrCast(aboveDoc.presentId);
                     if (this.props.groupMappings.has(aboveDocGuid)) {
-                        let groupArray = this.props.groupMappings.get(aboveDocGuid)!;
-                        let tempStack: Doc[] = [];
-                        while (groupArray[groupArray.length - 1] !== aboveDoc) {
-                            tempStack.push(groupArray.pop()!);
-                        }
-                        groupArray.push(droppedDoc);
-                        droppedDoc.presentId = aboveDocGuid;
-                        while (tempStack.length !== 0) {
-                            groupArray.push(tempStack.pop()!);
-                        }
+                        this.protectOrderAndPush(aboveDocGuid, aboveDoc, droppedDoc);
                     } else {
-                        let newGroup: Doc[] = [];
-                        newGroup.push(aboveDoc);
-                        newGroup.push(droppedDoc);
-                        droppedDoc.presentId = aboveDocGuid;
-                        p.groupMappings.set(aboveDocGuid, newGroup);
+                        this.createNewGroup(aboveDoc, droppedDoc, aboveDocGuid, p);
                     }
                 } else {
                     let propsPresId = StrCast(this.props.document.presentId);
@@ -673,24 +535,10 @@ export default class PresentationElement extends React.Component<PresentationEle
             } else {
                 let propsDocGuid = StrCast(this.props.document.presentId);
                 if (this.props.groupMappings.has(propsDocGuid)) {
-                    let groupArray = this.props.groupMappings.get(propsDocGuid)!;
-                    let tempStack: Doc[] = [];
-
-                    while (groupArray[groupArray.length - 1] !== this.props.document) {
-                        tempStack.push(groupArray.pop()!);
-                    }
-                    groupArray.push(droppedDoc);
-                    droppedDoc.presentId = propsDocGuid;
-                    while (tempStack.length !== 0) {
-                        groupArray.push(tempStack.pop()!);
-                    }
+                    this.protectOrderAndPush(propsDocGuid, this.props.document, droppedDoc);
 
                 } else {
-                    let newGroup: Doc[] = [];
-                    newGroup.push(this.props.document);
-                    newGroup.push(droppedDoc);
-                    droppedDoc.presentId = propsDocGuid;
-                    p.groupMappings.set(propsDocGuid, newGroup);
+                    this.createNewGroup(this.props.document, droppedDoc, propsDocGuid, p);
                 }
             }
 
@@ -708,18 +556,9 @@ export default class PresentationElement extends React.Component<PresentationEle
                     if (this.selectedButtons[buttonIndex.Group]) {
                         if (aboveDocSelectedButtons[buttonIndex.Group]) {
                             let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!;
+                            let propsDocPresId = StrCast(this.props.document.presentId);
 
-
-                            let targetIndex = aboveGroupArray.indexOf(aboveDoc);
-                            let firstPart = aboveGroupArray.slice(0, targetIndex + 1);
-                            let firstPartNewGuid = Utils.GenerateGuid();
-                            firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
-                            let secondPart = aboveGroupArray.slice(targetIndex + 1);
-                            secondPart.unshift(droppedDoc);
-                            droppedDoc.presentId = StrCast(this.props.document.presentId);
-                            p.groupMappings.set(StrCast(aboveDoc.presentId, Utils.GenerateGuid()), firstPart);
-                            p.groupMappings.set(StrCast(this.props.document.presentId, Utils.GenerateGuid()), secondPart);
-
+                            this.halveGroupArray(aboveDoc, aboveGroupArray, droppedDoc, p, propsDocPresId);
 
                         } else {
                             let belowPresentId = StrCast(this.props.document.presentId);
@@ -730,8 +569,6 @@ export default class PresentationElement extends React.Component<PresentationEle
                             aboveDoc.presentId = Utils.GenerateGuid();
                         }
 
-                        //
-
 
                     }
                 } else {
@@ -755,15 +592,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                         if (this.selectedButtons[buttonIndex.Group]) {
 
                             let propsGroupArray = this.props.groupMappings.get(propsDocGuid)!;
-                            let targetIndex = propsGroupArray.indexOf(this.props.document);
-                            let firstPart = propsGroupArray.slice(0, targetIndex + 1);
-                            let firstPartNewGuid = Utils.GenerateGuid();
-                            firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
-                            let secondPart = propsGroupArray.slice(targetIndex + 1);
-                            secondPart.unshift(droppedDoc);
-                            droppedDoc.presentId = StrCast(this.props.document.presentId);
-                            p.groupMappings.set(firstPartNewGuid, firstPart);
-                            p.groupMappings.set(StrCast(belowDocGuid, Utils.GenerateGuid()), secondPart);
+
+                            this.halveGroupArray(this.props.document, propsGroupArray, droppedDoc, p, belowDocGuid);
 
                         } else {
                             belowGroupArray.splice(belowGroupArray.indexOf(this.props.document), 1);
@@ -785,16 +615,8 @@ export default class PresentationElement extends React.Component<PresentationEle
 
         let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
         let foundSelectedButtons: boolean[] = new Array(6);
-        //if this is the first time this doc mounts, push a doc for it to store
-        // await castedList!.forEach(async (doc) => {
-        //     let curDoc = await doc;
-        //     let curDocId = StrCast(curDoc.docId);
-        //     if (curDocId === paramDoc[Id]) {
-        //         foundSelectedButtons = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-        //         return;
-        //     }
-        // });
 
+        //if this is the first time this doc mounts, push a doc for it to store
         for (let doc of castedList!) {
             let curDoc = await doc;
             let curDocId = StrCast(curDoc.docId);
@@ -864,6 +686,42 @@ export default class PresentationElement extends React.Component<PresentationEle
 
 
 
+    private halveGroupArray(targetDoc: Doc, propsGroupArray: Doc[], droppedDoc: Doc, p: Readonly<PresentationElementProps> & Readonly<{ children?: React.ReactNode; }>, belowDocGuid: string) {
+        let targetIndex = propsGroupArray.indexOf(targetDoc);
+        let firstPart = propsGroupArray.slice(0, targetIndex + 1);
+        let firstPartNewGuid = Utils.GenerateGuid();
+        firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
+        let secondPart = propsGroupArray.slice(targetIndex + 1);
+        secondPart.unshift(droppedDoc);
+        droppedDoc.presentId = belowDocGuid;
+        p.groupMappings.set(firstPartNewGuid, firstPart);
+        p.groupMappings.set(belowDocGuid, secondPart);
+    }
+
+    private createNewGroup(aboveDoc: Doc, droppedDoc: Doc, aboveDocGuid: string, p: Readonly<PresentationElementProps> & Readonly<{ children?: React.ReactNode; }>) {
+        let newGroup: Doc[] = [];
+        newGroup.push(aboveDoc);
+        newGroup.push(droppedDoc);
+        droppedDoc.presentId = aboveDocGuid;
+        p.groupMappings.set(aboveDocGuid, newGroup);
+    }
+
+    private protectOrderAndPush(aboveDocGuid: string, aboveDoc: Doc, droppedDoc: Doc) {
+        let groupArray = this.props.groupMappings.get(aboveDocGuid)!;
+        let tempStack: Doc[] = [];
+        while (groupArray[groupArray.length - 1] !== aboveDoc) {
+            tempStack.push(groupArray.pop()!);
+        }
+        groupArray.push(droppedDoc);
+        droppedDoc.presentId = aboveDocGuid;
+        while (tempStack.length !== 0) {
+            groupArray.push(tempStack.pop()!);
+        }
+    }
+
+
+
+
     render() {
         let p = this.props;
         let title = p.document.title;
@@ -877,13 +735,9 @@ export default class PresentationElement extends React.Component<PresentationEle
             className += " presentationView-selected";
         }
         let onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; };
-<<<<<<< HEAD
         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);
-=======
-        let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = undefined; };
->>>>>>> 03deba08d6af54bfc4235ed7c5ac26b8f673607a
         return (
             <div className={className} key={p.document[Id] + p.index}
                 ref={this.presElRef}
-- 
cgit v1.2.3-70-g09d2


From 7a9c7c74ce364e4b5ee4af35241870fea31c5cca Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 16 Jul 2019 16:04:23 -0400
Subject: Documentation

---
 .../views/presentationview/PresentationElement.tsx | 83 +++++++++++++++++-----
 1 file changed, 65 insertions(+), 18 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index a66bf34ce..a3c5a969b 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -396,6 +396,9 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    /**
+     * Creating a drop target for drag and drop when called.
+     */
     protected createListDropTarget = (ele: HTMLDivElement) => {
         this.listdropDisposer && this.listdropDisposer();
         if (ele) {
@@ -403,11 +406,18 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    /**
+     * Returns a local transformed coordinate array for given coordinates.
+     */
     ScreenToLocalListTransform = (xCord: number, yCord: number) => {
         return [xCord, yCord];
     }
 
-
+    /**
+     * This method is called when a element is dropped on a already esstablished target.
+     * It makes sure to do appropirate action depending on if the item is dropped before
+     * or after the target.
+     */
     listDrop = async (e: Event, de: DragManager.DropEvent) => {
         let x = this.ScreenToLocalListTransform(de.x, de.y);
         let rect = this.header!.getBoundingClientRect();
@@ -420,7 +430,7 @@ export default class PresentationElement extends React.Component<PresentationEle
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
             //console.log("How is this causing an issue");
             let droppedDoc: Doc = de.data.droppedDocuments[0];
-            await this.updateGroupsOnDrop2(droppedDoc, de);
+            await this.updateGroupsOnDrop(droppedDoc, de);
             document.removeEventListener("pointermove", this.onDragMove, true);
             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)
@@ -433,8 +443,12 @@ export default class PresentationElement extends React.Component<PresentationEle
         return false;
     }
 
-
-    updateGroupsOnDrop2 = async (droppedDoc: Doc, de: DragManager.DropEvent) => {
+    /**
+     * This method is called to update groups when the user drags and drops an
+     * element to a different place. It follows the default behaviour and reconstructs
+     * the groups in the way they would appear if clicked by user.
+     */
+    updateGroupsOnDrop = async (droppedDoc: Doc, de: DragManager.DropEvent) => {
 
         let x = this.ScreenToLocalListTransform(de.x, de.y);
         let rect = this.header!.getBoundingClientRect();
@@ -482,6 +496,8 @@ export default class PresentationElement extends React.Component<PresentationEle
             }
             droppedDoc.presentId = Utils.GenerateGuid();
 
+            //making sure to correct to groups after splicing, in case the dragged element
+            //had the grouping on.
             let indexOfBelow = droppedDocIndex + 1;
             if (indexOfBelow < this.props.allListElements.length && indexOfBelow > 1) {
                 let selectedButtonsOrigBelow: boolean[] = await this.getSelectedButtonsOfDoc(this.props.allListElements[indexOfBelow]);
@@ -512,9 +528,8 @@ export default class PresentationElement extends React.Component<PresentationEle
 
         }
 
-
+        //Case, when the dropped doc had the group button clicked.
         if (droppedDocSelectedButtons[buttonIndex.Group]) {
-
             if (before) {
                 if (this.props.index > 0) {
                     let aboveDoc = this.props.allListElements[this.props.index - 1];
@@ -543,7 +558,7 @@ export default class PresentationElement extends React.Component<PresentationEle
             }
 
 
-
+            //if the group button of the element was not clicked.
         } else {
             if (before) {
                 if (this.props.index > 0) {
@@ -610,9 +625,11 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    /**
+     * This method returns the selectedButtons boolean array of the passed in doc,
+     * retrieving it from the back-up.
+     */
     getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
-        let p = this.props;
-
         let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
         let foundSelectedButtons: boolean[] = new Array(6);
 
@@ -632,6 +649,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    //This is used to add dragging as an event.
     onPointerEnter = (e: React.PointerEvent): void => {
         this.props.document.libraryBrush = true;
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
@@ -647,6 +665,8 @@ export default class PresentationElement extends React.Component<PresentationEle
             document.addEventListener("pointermove", this.onDragMove, true);
         }
     }
+
+    //This is used to remove the dragging when dropped.
     onPointerLeave = (e: React.PointerEvent): void => {
         this.props.document.libraryBrush = false;
         //to get currently selected presentation doc
@@ -663,6 +683,10 @@ export default class PresentationElement extends React.Component<PresentationEle
         document.removeEventListener("pointermove", this.onDragMove, true);
     }
 
+    /**
+     * This method is passed in to be used when dragging a document.
+     * It makes it possible to show dropping lines on drop targets.
+     */
     onDragMove = (e: PointerEvent): void => {
         this.props.document.libraryBrush = false;
         let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
@@ -679,14 +703,24 @@ export default class PresentationElement extends React.Component<PresentationEle
         e.stopPropagation();
     }
 
+    /**
+     * This method is passed in to on down event of presElement, so that drag and
+     * drop can be completed with DragManager functionality.
+     */
     @action
     move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
         return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc);
     }
 
-
-
-    private halveGroupArray(targetDoc: Doc, propsGroupArray: Doc[], droppedDoc: Doc, p: Readonly<PresentationElementProps> & Readonly<{ children?: React.ReactNode; }>, belowDocGuid: string) {
+    /**
+     * Helper method that gets called to divide a group array into two different groups
+     * including the targetDoc in first part.
+     * @param targetDoc document that is targeted as slicing point
+     * @param propsGroupArray the array that gets divided into 2
+     * @param droppedDoc the dropped document
+     * @param belowDocGuid presentId of the belowGroup
+     */
+    private halveGroupArray(targetDoc: Doc, propsGroupArray: Doc[], droppedDoc: Doc, belowDocGuid: string) {
         let targetIndex = propsGroupArray.indexOf(targetDoc);
         let firstPart = propsGroupArray.slice(0, targetIndex + 1);
         let firstPartNewGuid = Utils.GenerateGuid();
@@ -694,18 +728,33 @@ export default class PresentationElement extends React.Component<PresentationEle
         let secondPart = propsGroupArray.slice(targetIndex + 1);
         secondPart.unshift(droppedDoc);
         droppedDoc.presentId = belowDocGuid;
-        p.groupMappings.set(firstPartNewGuid, firstPart);
-        p.groupMappings.set(belowDocGuid, secondPart);
+        this.props.groupMappings.set(firstPartNewGuid, firstPart);
+        this.props.groupMappings.set(belowDocGuid, secondPart);
     }
 
-    private createNewGroup(aboveDoc: Doc, droppedDoc: Doc, aboveDocGuid: string, p: Readonly<PresentationElementProps> & Readonly<{ children?: React.ReactNode; }>) {
+    /**
+     * Helper method that creates a new group, pushing above document first,
+     * and dropped document second.
+     * @param aboveDoc the document above dropped document
+     * @param droppedDoc the dropped document itself
+     * @param aboveDocGuid above document's presentId
+     */
+    private createNewGroup(aboveDoc: Doc, droppedDoc: Doc, aboveDocGuid: string) {
         let newGroup: Doc[] = [];
         newGroup.push(aboveDoc);
         newGroup.push(droppedDoc);
         droppedDoc.presentId = aboveDocGuid;
-        p.groupMappings.set(aboveDocGuid, newGroup);
+        this.props.groupMappings.set(aboveDocGuid, newGroup);
     }
 
+    /**
+      * Helper method that finds the above document's group, and pushes the
+      * dropped document into that group, protecting the visual order of the
+      * presentation elements.
+      * @param aboveDoc the document above dropped document
+      * @param droppedDoc the dropped document itself
+      * @param aboveDocGuid above document's presentId
+      */
     private protectOrderAndPush(aboveDocGuid: string, aboveDoc: Doc, droppedDoc: Doc) {
         let groupArray = this.props.groupMappings.get(aboveDocGuid)!;
         let tempStack: Doc[] = [];
@@ -734,8 +783,6 @@ export default class PresentationElement extends React.Component<PresentationEle
             //this doc is selected
             className += " presentationView-selected";
         }
-        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 (
-- 
cgit v1.2.3-70-g09d2


From e0bff91b9a700decf13ef5d6da439fa6f8868be7 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 16 Jul 2019 16:15:43 -0400
Subject: parameter updated

---
 src/client/views/presentationview/PresentationElement.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/client/views/presentationview/PresentationElement.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index a3c5a969b..329630875 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -537,7 +537,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                     if (this.props.groupMappings.has(aboveDocGuid)) {
                         this.protectOrderAndPush(aboveDocGuid, aboveDoc, droppedDoc);
                     } else {
-                        this.createNewGroup(aboveDoc, droppedDoc, aboveDocGuid, p);
+                        this.createNewGroup(aboveDoc, droppedDoc, aboveDocGuid);
                     }
                 } else {
                     let propsPresId = StrCast(this.props.document.presentId);
@@ -553,7 +553,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                     this.protectOrderAndPush(propsDocGuid, this.props.document, droppedDoc);
 
                 } else {
-                    this.createNewGroup(this.props.document, droppedDoc, propsDocGuid, p);
+                    this.createNewGroup(this.props.document, droppedDoc, propsDocGuid);
                 }
             }
 
@@ -573,7 +573,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                             let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!;
                             let propsDocPresId = StrCast(this.props.document.presentId);
 
-                            this.halveGroupArray(aboveDoc, aboveGroupArray, droppedDoc, p, propsDocPresId);
+                            this.halveGroupArray(aboveDoc, aboveGroupArray, droppedDoc, propsDocPresId);
 
                         } else {
                             let belowPresentId = StrCast(this.props.document.presentId);
@@ -608,7 +608,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
                             let propsGroupArray = this.props.groupMappings.get(propsDocGuid)!;
 
-                            this.halveGroupArray(this.props.document, propsGroupArray, droppedDoc, p, belowDocGuid);
+                            this.halveGroupArray(this.props.document, propsGroupArray, droppedDoc, belowDocGuid);
 
                         } else {
                             belowGroupArray.splice(belowGroupArray.indexOf(this.props.document), 1);
-- 
cgit v1.2.3-70-g09d2

