From e18662f2fa9e1d3dd1b0eb3b5531092258d05972 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Mon, 24 Jun 2019 12:42:44 -0400
Subject: Refactoring

---
 .../views/presentationview/PresentationList.tsx    | 89 ++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/client/views/presentationview/PresentationList.tsx

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

diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
new file mode 100644
index 000000000..e2ec343d3
--- /dev/null
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -0,0 +1,89 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { action } from "mobx";
+import "./PresentationView.scss";
+import { Utils } from "../../../Utils";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { NumCast, StrCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+import PresentationElement, { buttonIndex } from "./PresentationElement";
+
+
+
+
+interface PresListProps {
+    mainDocument: Doc;
+    deleteDocument(index: number): void;
+    gotoDocument(index: number, fromDoc: number): Promise<void>;
+    groupMappings: Map<String, Doc[]>;
+    presElementsMappings: Map<Doc, PresentationElement>;
+    setChildrenDocs: (docList: Doc[]) => void;
+    presStatus: boolean;
+    presButtonBackUp: Doc;
+    presGroupBackUp: Doc;
+}
+
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+export default class PresentationViewList extends React.Component<PresListProps> {
+
+    /**
+     * Method that initializes presentation ids for the
+     * docs that is in the presentation, when presentation list
+     * gets re-rendered. It makes sure to not assign ids to the
+     * docs that are in the group, so that mapping won't be disrupted.
+     */
+
+    @action
+    initializeGroupIds = async (docList: Doc[]) => {
+        docList.forEach(async (doc: Doc, index: number) => {
+            let docGuid = StrCast(doc.presentId, null);
+            //checking if part of group
+            let storedGuids: string[] = [];
+            let castedGroupDocs = await DocListCastAsync(this.props.presGroupBackUp.groupDocs);
+            //making sure the docs that were in groups, which were stored, to not get new guids.
+            if (castedGroupDocs !== undefined) {
+                castedGroupDocs.forEach((doc: Doc) => {
+                    let storedGuid = StrCast(doc.presentIdStore, null);
+                    if (storedGuid) {
+                        storedGuids.push(storedGuid);
+                    }
+
+                });
+            }
+            if (!this.props.groupMappings.has(docGuid) && !storedGuids.includes(docGuid)) {
+                doc.presentId = Utils.GenerateGuid();
+            }
+        });
+    }
+
+    /**
+     * Initially every document starts with a viewScale 1, which means
+     * that they will be displayed in a canvas with scale 1.
+     */
+    @action
+    initializeScaleViews = (docList: Doc[]) => {
+        docList.forEach((doc: Doc) => {
+            let curScale = NumCast(doc.viewScale, null);
+            if (curScale === undefined) {
+                doc.viewScale = 1;
+            }
+        });
+    }
+
+    render() {
+        const children = DocListCast(this.props.mainDocument.data);
+        this.initializeGroupIds(children);
+        this.initializeScaleViews(children);
+        this.props.setChildrenDocs(children);
+        return (
+
+            <div className="presentationView-listCont">
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={doc[Id]} mainDocument={this.props.mainDocument} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)}
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From f0632e4f6b608d05ef6d9f77d93da259c58c1e8d Mon Sep 17 00:00:00 2001
From: Sam Wilkins <35748010+samwilkins333@users.noreply.github.com>
Date: Wed, 26 Jun 2019 12:33:16 -0400
Subject: long line wrap

---
 .../views/presentationview/PresentationList.tsx       | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index e2ec343d3..7abd3e366 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -82,8 +82,23 @@ export default class PresentationViewList extends React.Component<PresListProps>
         return (
 
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={doc[Id]} mainDocument={this.props.mainDocument} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} />)}
+                {children.map((doc: Doc, index: number) => 
+                              <PresentationElement
+                                  ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }}
+                                  key={doc[Id]}
+                                  mainDocument={this.props.mainDocument}
+                                  document={doc}
+                                  index={index}
+                                  deleteDocument={this.props.deleteDocument}
+                                  gotoDocument={this.props.gotoDocument}
+                                  groupMappings={this.props.groupMappings}
+                                  allListElements={children}
+                                  presStatus={this.props.presStatus}
+                                  presButtonBackUp={this.props.presButtonBackUp}
+                                  presGroupBackUp={this.props.presGroupBackUp}
+                              />
+                 )}
             </div>
         );
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


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

---
 .../views/presentationview/PresentationElement.tsx |  6 +-
 .../views/presentationview/PresentationList.tsx    | 87 +++++++++++++++++-----
 2 files changed, 73 insertions(+), 20 deletions(-)

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

