From 464096297d34bb824ed665aa50dfb58f268c1d12 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Tue, 4 Jun 2019 20:01:59 -0400
Subject: BUttons in Presentation CSSed and grouping up insertion done, removal
 almost done

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

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
new file mode 100644
index 000000000..5a7d38e28
--- /dev/null
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -0,0 +1,203 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action, runInAction, reaction } from "mobx";
+import "./PresentationView.scss";
+import { DocumentManager } from "../../util/DocumentManager";
+import { Utils } from "../../../Utils";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { listSpec } from "../../../new_fields/Schema";
+import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { List } from "../../../new_fields/List";
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
+import PresentationElement from "./PresentationElement";
+
+export interface PresViewProps {
+    Document: Doc;
+}
+
+interface PresListProps extends PresViewProps {
+    deleteDocument(index: number): void;
+    gotoDocument(index: number): void;
+    groupedMembers: [Doc[]];
+
+}
+
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class PresentationViewList extends React.Component<PresListProps> {
+
+
+    // onGroupClick = (document: Doc, index: number, buttonStatus: boolean[]) => {
+    //     if (buttonStatus[5]) {
+    //         buttonStatus[5] = false;
+    //         if (index >= 1) {
+    //             if (this.groupedMembers[index].length >= 0) {
+    //                 this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].slice(this.groupedMembers[index - 1].indexOf(doc), 1));
+    //             }
+    //         }
+    //     } else {
+    //         buttonStatus[5] = true;
+    //         console.log("reached!! ", buttonStatus[5]);
+    //         if (index >= 1) {
+    //             if (this.groupedMembers[index].length >= 0) {
+    //                 this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].push(doc));
+    //             }
+    //             this.groupedMembers[index - 1].push(document);
+    //         }
+    //     }
+    // }
+    @action
+    initializeGroupArrays = (docList: Doc[]) => {
+        docList.forEach((doc: Doc, index: number) => {
+            if (this.props.groupedMembers.length < index + 1) {
+                this.props.groupedMembers[index] = new Array();
+            }
+        });
+    }
+
+    // /**
+    //  * Renders a single child document. It will just append a list element.
+    //  * @param document The document to render.
+    //  */
+    // renderChild = (document: Doc, index: number) => {
+    //     let title = document.title;
+
+    //     //to get currently selected presentation doc
+    //     let selected = NumCast(this.props.Document.selectedDoc, 0);
+
+    //     let className = "presentationView-item";
+    //     if (selected === index) {
+    //         //this doc is selected
+    //         className += " presentationView-selected";
+    //     }
+    //     let selectedButtons: boolean[] = new Array(6);
+    //     let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; }
+    //     let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; }
+    //     return (
+    //         <div className={className} key={document[Id] + index}
+    //             onPointerEnter={onEnter} onPointerLeave={onLeave}
+    //             style={{
+    //                 outlineColor: "maroon",
+    //                 outlineStyle: "dashed",
+    //                 outlineWidth: BoolCast(document.libraryBrush, false) || BoolCast(document.protoBrush, false) ? `1px` : "0px",
+    //             }}
+    //             onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
+    //             <strong className="presentationView-name">
+    //                 {`${index + 1}. ${title}`}
+    //             </strong>
+    //             <button className="presentation-icon" onClick={e => { this.props.deleteDocument(index); e.stopPropagation(); }}>X</button>
+    //             <br></br>
+    //             <button className={selectedButtons[0] ? "presentation-interaction" : "presentation-interaction-selected"}>A</button>
+    //             <button className={selectedButtons[1] ? "presentation-interaction" : "presentation-interaction-selected"}>B</button>
+    //             <button className={selectedButtons[2] ? "presentation-interaction" : "presentation-interaction-selected"}>C</button>
+    //             <button className={selectedButtons[3] ? "presentation-interaction" : "presentation-interaction-selected"}>D</button>
+    //             <button className={selectedButtons[4] ? "presentation-interaction" : "presentation-interaction-selected"}>E</button>
+    //             <button className={selectedButtons[5] ? "presentation-interaction" : "presentation-interaction-selected"} onClick={() => this.onGroupClick(document, index, selectedButtons)}>F</button>
+
+    //         </div>
+    //     );
+
+    // }
+
+    render() {
+        const children = DocListCast(this.props.Document.data);
+        this.initializeGroupArrays(children);
+
+        return (
+            <div className="presentationView-listCont">
+                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupedMembers={this.props.groupedMembers} allListElements={children} />)}
+            </div>
+        );
+    }
+}
+
+
+@observer
+export class PresentationView extends React.Component<PresViewProps>  {
+    public static Instance: PresentationView;
+
+    @observable groupedMembers: [Doc[]] = [[]];
+
+
+    //observable means render is re-called every time variable is changed
+    @observable
+    collapsed: boolean = false;
+    closePresentation = action(() => this.props.Document.width = 0);
+    next = () => {
+        const current = NumCast(this.props.Document.selectedDoc);
+        this.gotoDocument(current + 1);
+
+    }
+    back = () => {
+        const current = NumCast(this.props.Document.selectedDoc);
+        this.gotoDocument(current - 1);
+    }
+
+    @action
+    public RemoveDoc = (index: number) => {
+        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (value) {
+            value.splice(index, 1);
+        }
+    }
+
+    public gotoDocument = async (index: number) => {
+        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (!list) {
+            return;
+        }
+        if (index < 0 || index >= list.length) {
+            return;
+        }
+
+        this.props.Document.selectedDoc = index;
+        const doc = await list[index];
+        DocumentManager.Instance.jumpToDocument(doc);
+    }
+
+    //initilize class variables
+    constructor(props: PresViewProps) {
+        super(props);
+        PresentationView.Instance = this;
+    }
+
+    /**
+     * Adds a document to the presentation view
+     **/
+    @action
+    public PinDoc(doc: Doc) {
+        //add this new doc to props.Document
+        const data = Cast(this.props.Document.data, listSpec(Doc));
+        if (data) {
+            data.push(doc);
+        } else {
+            this.props.Document.data = new List([doc]);
+        }
+
+        this.props.Document.width = 300;
+    }
+
+    render() {
+        let titleStr = StrCast(this.props.Document.title);
+        let width = NumCast(this.props.Document.width);
+
+        //TODO: next and back should be icons
+        return (
+            <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
+                <div className="presentationView-heading">
+                    <div className="presentationView-title">{titleStr}</div>
+                    <button className='presentation-icon' onClick={this.closePresentation}>X</button>
+                </div>
+                <div className="presentation-buttons">
+                    <button className="presentation-button" onClick={this.back}>back</button>
+                    <button className="presentation-button" onClick={this.next}>next</button>
+                </div>
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupedMembers={this.groupedMembers} />
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From efce6bf5ad2de96c8d4ee688ce0083608ecb541e Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Wed, 5 Jun 2019 14:29:38 -0400
Subject: Grouping done, insertion order should be checked

---
 .../views/presentationview/PresentationElement.tsx | 106 +++++++++++++++++++--
 .../views/presentationview/PresentationView.tsx    |   5 +-
 2 files changed, 103 insertions(+), 8 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 02d97ee4d..4d7f07154 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -41,14 +41,17 @@ export default class PresentationElement extends React.Component<PresentationEle
                 buttonStatus[5] = true;
                 if (index >= 1) {
                     if (p.groupedMembers[index].length >= 0) {
-                        p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1].push(doc));
+                        p.groupedMembers[index].forEach((doc: Doc) => { if (!p.groupedMembers[index - 1].includes(doc)) { p.groupedMembers[index - 1].push(doc); } });
+                    }
+                    if (!p.groupedMembers[index - 1].includes(document)) {
+                        p.groupedMembers[index - 1].push(document);
                     }
-                    p.groupedMembers[index - 1].push(document);
                     //this.onGroupClick()
                 }
             }
         } else {
             if (!buttonStatus) {
+                console.log("U reached me!");
                 if (p.groupedMembers[index].length >= 0) {
                     p.groupedMembers[index].forEach((doc: Doc) => p.groupedMembers[index - 1] = p.groupedMembers[index - 1].slice(p.groupedMembers[index - 1].indexOf(doc), 1));
                 }
@@ -62,11 +65,98 @@ export default class PresentationElement extends React.Component<PresentationEle
             }
         }
         if (index >= 2) {
-            this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 0);
+            this.onGroupClick(p.allListElements[index - 1], index - 1, p.groupedMembers[index - 2].length !== 1);
         }
 
         p.groupedMembers.forEach((docArray: Doc[], index: number) => console.log("Index: ", index, " size: ", docArray.length));
-        console.log("Group Size: ", p.groupedMembers[index - 1].length);
+        console.log("Group Size: ", p.groupedMembers[index - 1].length, "Index: ", index - 1);
+    }
+
+
+    @action
+    onGroupClickRec = (document: Doc, index: number, buttonStatus: boolean) => {
+        let p = this.props;
+        if (buttonStatus) {
+            if (index >= 1) {
+                if (p.groupedMembers[index].length >= 0) {
+                    p.groupedMembers[index].forEach((doc: Doc) => {
+                        if (!p.groupedMembers[index - 1].includes(doc)) {
+                            p.groupedMembers[index - 1].push(doc);
+                        }
+                    });
+                }
+
+                if (index >= 2) {
+                    let nextBool = p.groupedMembers[index - 2].length !== 1;
+                    if (nextBool === buttonStatus) {
+                        this.onGroupClickRec(document, index - 1, p.groupedMembers[index - 2].length !== 1);
+                    }
+                }
+
+            }
+        }
+        else {
+
+            if (index >= 1) {
+                let removeSize = p.groupedMembers[index].length;
+                if (p.groupedMembers[index].length >= 0) {
+                    p.groupedMembers[index].forEach((doc: Doc) => {
+                        p.groupedMembers[index - 1].pop(); console.log("Reached!!");
+                    });
+                }
+
+
+
+                if (index >= 2) {
+                    let nextBool = p.groupedMembers[index - 2].length !== 1;
+                    if (nextBool !== buttonStatus) {
+                        this.recursiveDeleteGroups(index - 1, removeSize);
+                    }
+                }
+            }
+        }
+
+    }
+
+    @action
+    recursiveDeleteGroups = (index: number, removeSize: number) => {
+        let p = this.props;
+        for (let i = 0; i < removeSize; i++) {
+            p.groupedMembers[index - 1].pop();
+        }
+        if (index >= 2) {
+
+            let nextBool = p.groupedMembers[index - 2].length !== 1;
+            if (nextBool === true) {
+                this.recursiveDeleteGroups(index - 1, removeSize);
+            }
+        }
+    }
+
+    @action
+    onGroupClickRec2 = (document: Doc, index: number, buttonStatus: boolean) => {
+        let p = this.props;
+        if (buttonStatus) {
+            if (index >= 1) {
+                p.groupedMembers[index - 1].push(document);
+                if (index >= 2) {
+                    this.onGroupClickRec2(document, index - 1, p.groupedMembers[index - 2].length !== 1);
+                }
+            }
+        }
+    }
+
+    @action
+    changeGroupStatus = () => {
+        if (this.selectedButtons[5]) {
+            this.selectedButtons[5] = false;
+        } else {
+            this.selectedButtons[5] = true;
+        }
+    }
+
+    printGroupSizes = () => {
+        this.props.groupedMembers.forEach((doc: Doc[], index: number) => console.log("Index: ", index, " size: ", doc.length));
     }
 
 
@@ -83,8 +173,8 @@ 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 onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; };
+        let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; };
         return (
             <div className={className} key={p.document[Id] + p.index}
                 onPointerEnter={onEnter} onPointerLeave={onLeave}
@@ -106,7 +196,9 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <button className={this.selectedButtons[4] ? "presentation-interaction-selected" : "presentation-interaction"}>E</button>
                 <button className={this.selectedButtons[5] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
-                    this.onGroupClick(p.document, p.index, this.selectedButtons);
+                    this.changeGroupStatus();
+                    this.onGroupClickRec(p.document, p.index, this.selectedButtons[5]);
+                    this.printGroupSizes();
                 }}>F</button>
 
             </div>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 5a7d38e28..9baf75ad3 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -52,9 +52,12 @@ class PresentationViewList extends React.Component<PresListProps> {
     // }
     @action
     initializeGroupArrays = (docList: Doc[]) => {
+        console.log("Starting len: ", this.props.groupedMembers.length);
         docList.forEach((doc: Doc, index: number) => {
-            if (this.props.groupedMembers.length < index + 1) {
+            if (this.props.groupedMembers.length < index + 2) {
                 this.props.groupedMembers[index] = new Array();
+                this.props.groupedMembers[index].push(docList[index]);
+
             }
         });
     }
-- 
cgit v1.2.3-70-g09d2


From a54e3b99c2c6d4c39cbdd935978b5e78015956ab Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Wed, 5 Jun 2019 17:29:43 -0400
Subject: Enums for buttons

---
 src/client/views/nodes/DocumentView.tsx            |  4 +-
 .../views/presentationview/PresentationElement.tsx | 45 +++++++++++++++++-----
 .../views/presentationview/PresentationView.tsx    |  5 +--
 3 files changed, 40 insertions(+), 14 deletions(-)

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

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 984cac9b9..449fa76a7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -83,6 +83,7 @@ const schema = createSchema({
     nativeWidth: "number",
     nativeHeight: "number",
     backgroundColor: "string",
+    opacity: "number"
 });
 
 export const positionSchema = createSchema({
@@ -464,7 +465,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     background: this.Document.backgroundColor || "",
                     width: nativeWidth,
                     height: nativeHeight,
-                    transform: `scale(${scaling}, ${scaling})`
+                    transform: `scale(${scaling}, ${scaling})`,
+                    opacity: NumCast(this.props.Document.opacity, 1)
                 }}
                 onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
 
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 08a663150..48e740c4b 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -19,6 +19,16 @@ interface PresentationElementProps {
 
 }
 
+enum buttonIndex {
+    Show = 0,
+    Navigate = 1,
+    HideTillPressed = 2,
+    FadeAfter = 3,
+    HideAfter = 4,
+    Group = 5,
+
+}
+
 @observer
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
@@ -84,10 +94,10 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     @action
     changeGroupStatus = () => {
-        if (this.selectedButtons[5]) {
-            this.selectedButtons[5] = false;
+        if (this.selectedButtons[buttonIndex.Group]) {
+            this.selectedButtons[buttonIndex.Group] = false;
         } else {
-            this.selectedButtons[5] = true;
+            this.selectedButtons[buttonIndex.Group] = true;
         }
     }
 
@@ -95,6 +105,21 @@ export default class PresentationElement extends React.Component<PresentationEle
         this.props.groupedMembers.forEach((doc: Doc[], index: number) => console.log("Index: ", index, " size: ", doc.length));
     }
 
+    @action
+    onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.selectedButtons[buttonIndex.HideTillPressed]) {
+            this.selectedButtons[buttonIndex.HideTillPressed] = false;
+
+        } else {
+            this.selectedButtons[buttonIndex.HideTillPressed] = true;
+        }
+    }
+
+    hideDocumentIfNotPressed = () => {
+        this.props.allListElements.forEach((doc: Doc) => doc.opacity = 0);
+    }
+
 
 
     render() {
@@ -125,15 +150,15 @@ export default class PresentationElement extends React.Component<PresentationEle
                 </strong>
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button className={this.selectedButtons[0] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
-                <button className={this.selectedButtons[1] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
-                <button className={this.selectedButtons[2] ? "presentation-interaction-selected" : "presentation-interaction"}>C</button>
-                <button className={this.selectedButtons[3] ? "presentation-interaction-selected" : "presentation-interaction"}>D</button>
-                <button className={this.selectedButtons[4] ? "presentation-interaction-selected" : "presentation-interaction"}>E</button>
-                <button className={this.selectedButtons[5] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
+                <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
+                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
+                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => { this.onHideDocumentUntilPressClick(e); this.hideDocumentIfNotPressed(); }}>C</button>
+                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>D</button>
+                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>E</button>
+                <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
-                    this.onGroupClickRec(p.document, p.index, this.selectedButtons[5]);
+                    this.onGroupClickRec(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
                     this.printGroupSizes();
                 }}>F</button>
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 9baf75ad3..b41149099 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -55,7 +55,7 @@ class PresentationViewList extends React.Component<PresListProps> {
         console.log("Starting len: ", this.props.groupedMembers.length);
         docList.forEach((doc: Doc, index: number) => {
             if (this.props.groupedMembers.length < index + 2) {
-                this.props.groupedMembers[index] = new Array();
+                this.props.groupedMembers[index] = [];
                 this.props.groupedMembers[index].push(docList[index]);
 
             }
@@ -123,8 +123,7 @@ class PresentationViewList extends React.Component<PresListProps> {
 export class PresentationView extends React.Component<PresViewProps>  {
     public static Instance: PresentationView;
 
-    @observable groupedMembers: [Doc[]] = [[]];
-
+    @observable groupedMembers: Doc[][] = [];
 
     //observable means render is re-called every time variable is changed
     @observable
-- 
cgit v1.2.3-70-g09d2


From 36cf1b38e5da3ec948fd85d5d751a65dd8ec44fb Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Wed, 5 Jun 2019 20:04:00 -0400
Subject: Grouping With GUIDs is mostly done

---
 .../views/presentationview/PresentationElement.tsx | 69 ++++++++++++++++++++--
 .../views/presentationview/PresentationView.tsx    |  9 +--
 2 files changed, 69 insertions(+), 9 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 48e740c4b..81be2c49f 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -1,10 +1,11 @@
 import { observer } from "mobx-react";
 import React = require("react");
 import { Doc } from "../../../new_fields/Doc";
-import { NumCast, BoolCast } from "../../../new_fields/Types";
+import { NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { observable, action } from "mobx";
 import "./PresentationView.scss";
+import { Utils } from "../../../Utils";
 
 
 
@@ -14,8 +15,9 @@ interface PresentationElementProps {
     index: number;
     deleteDocument(index: number): void;
     gotoDocument(index: number): void;
-    groupedMembers: [Doc[]];
+    groupedMembers: Doc[][];
     allListElements: Doc[];
+    groupMappings: Map<String, Doc[]>;
 
 }
 
@@ -34,6 +36,63 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     @observable selectedButtons: boolean[] = new Array(6);
 
+
+    @action
+    onGroupClick = (document: Doc, index: number, buttonStatus: boolean) => {
+        let p = this.props;
+        if (buttonStatus) {
+            if (index >= 1) {
+                let newGuid = Utils.GenerateGuid();
+                let aboveGuid = StrCast(p.allListElements[index - 1].presentId, undefined);
+                let docGuid = StrCast(document.presentId, undefined);
+                if (aboveGuid !== undefined) {
+                    if (p.groupMappings.has(aboveGuid)) {
+                        let aboveArray = p.groupMappings.get(aboveGuid)!;
+                        if (p.groupMappings.has(docGuid)) {
+                            let docsArray = p.groupMappings.get(docGuid)!;
+                            docsArray.forEach((doc: Doc) => {
+                                if (!aboveArray.includes(doc)) {
+                                    aboveArray.push(doc);
+                                }
+                            });
+                        } else {
+                            if (!aboveArray.includes(document)) {
+                                aboveArray.push(document);
+
+                            }
+
+                        }
+                    }
+                    document.presentId = aboveGuid;
+                } else {
+                    p.allListElements[index - 1].presentId = newGuid;
+                    let newAboveArray: Doc[] = [];
+                    if (p.groupMappings.has(docGuid)) {
+                        let docsArray = p.groupMappings.get(docGuid)!;
+                        docsArray.forEach((doc: Doc) => newAboveArray.push(doc));
+                    } else {
+                        newAboveArray.push(document);
+                    }
+                    document.presentId = newGuid;
+                    p.groupMappings.set(newGuid, newAboveArray);
+
+
+                }
+
+            }
+        } else {
+            let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!;
+            let targetIndex = curArray.indexOf(document);
+            let firstPart = curArray.slice(0, targetIndex);
+            let secondPart = curArray.slice(targetIndex);
+            p.groupMappings.set(StrCast(p.allListElements[index - 1].presentId, Utils.GenerateGuid()), firstPart);
+            p.groupMappings.set(StrCast(document.presentId, Utils.GenerateGuid()), secondPart);
+
+
+        }
+
+    }
+
     @action
     onGroupClickRec = (document: Doc, index: number, buttonStatus: boolean) => {
         let p = this.props;
@@ -117,7 +176,7 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     hideDocumentIfNotPressed = () => {
-        this.props.allListElements.forEach((doc: Doc) => doc.opacity = 0);
+        this.props.allListElements.forEach((doc: Doc) => doc.opacity = 1);
     }
 
 
@@ -158,8 +217,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
-                    this.onGroupClickRec(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
-                    this.printGroupSizes();
+                    this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
+                    //this.printGroupSizes();
                 }}>F</button>
 
             </div>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index b41149099..6cf908d01 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -19,8 +19,8 @@ export interface PresViewProps {
 interface PresListProps extends PresViewProps {
     deleteDocument(index: number): void;
     gotoDocument(index: number): void;
-    groupedMembers: [Doc[]];
-
+    groupedMembers: Doc[][];
+    groupMappings: Map<String, Doc[]>;
 }
 
 
@@ -112,7 +112,7 @@ class PresentationViewList extends React.Component<PresListProps> {
 
         return (
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupedMembers={this.props.groupedMembers} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupedMembers={this.props.groupedMembers} groupMappings={this.props.groupMappings} allListElements={children} />)}
             </div>
         );
     }
@@ -124,6 +124,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     public static Instance: PresentationView;
 
     @observable groupedMembers: Doc[][] = [];
+    @observable groupMappings: Map<String, Doc[]> = new Map();
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -198,7 +199,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button className="presentation-button" onClick={this.back}>back</button>
                     <button className="presentation-button" onClick={this.next}>next</button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupedMembers={this.groupedMembers} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupedMembers={this.groupedMembers} groupMappings={this.groupMappings} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From a794da35a96ba278e20a76591de86cac6ce44969 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Thu, 6 Jun 2019 16:08:18 -0400
Subject: Grouping done

---
 .../views/presentationview/PresentationElement.tsx | 95 ++++++++++++----------
 .../views/presentationview/PresentationView.tsx    | 11 +++
 2 files changed, 62 insertions(+), 44 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 2d14476d2..eb7002731 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -45,72 +45,79 @@ export default class PresentationElement extends React.Component<PresentationEle
                 let newGuid = Utils.GenerateGuid();
                 let aboveGuid = StrCast(p.allListElements[index - 1].presentId, null);
                 let docGuid = StrCast(document.presentId, null);
-                if (aboveGuid !== undefined) {
-                    if (p.groupMappings.has(aboveGuid)) {
-                        let aboveArray = p.groupMappings.get(aboveGuid)!;
-                        if (p.groupMappings.has(docGuid)) {
-                            console.log("Doc Guid: ", docGuid);
-                            console.log("Above Guid: ", aboveGuid);
-                            let docsArray = p.groupMappings.get(docGuid)!;
-                            docsArray.forEach((doc: Doc) => {
-                                if (!aboveArray.includes(doc)) {
-                                    aboveArray.push(doc);
-
-                                }
-                            });
-                            console.log("CAlled first one");
-
-                        } else {
-                            if (!aboveArray.includes(document)) {
-                                aboveArray.push(document);
-                                console.log("CAlled this one");
-                                console.log("Doc: ", document);
-
+                // if (aboveGuid !== undefined) {
+                if (p.groupMappings.has(aboveGuid)) {
+                    let aboveArray = p.groupMappings.get(aboveGuid)!;
+                    if (p.groupMappings.has(docGuid)) {
+                        console.log("Doc Guid: ", docGuid);
+                        console.log("Above Guid: ", aboveGuid);
+                        let docsArray = p.groupMappings.get(docGuid)!;
+                        docsArray.forEach((doc: Doc) => {
+                            if (!aboveArray.includes(doc)) {
+                                aboveArray.push(doc);
                             }
-
-                        }
-                        console.log("AboveArray Size: ", aboveArray.length);
+                            doc.presentId = aboveGuid;
+                        });
+                        console.log("CAlled first one");
+                        p.groupMappings.delete(docGuid);
                     } else {
-                        let newAboveArray: Doc[] = [];
-                        newAboveArray.push(p.allListElements[index - 1]);
-                        if (p.groupMappings.has(docGuid)) {
-                            let docsArray = p.groupMappings.get(docGuid)!;
-                            docsArray.forEach((doc: Doc) => {
-                                newAboveArray.push(doc);
-
-                            });
-                        } else {
-                            newAboveArray.push(document);
+                        if (!aboveArray.includes(document)) {
+                            aboveArray.push(document);
+                            console.log("CAlled this one");
+                            console.log("Doc: ", document);
 
                         }
-                        p.groupMappings.set(aboveGuid, newAboveArray);
-                        console.log("NewABove array size: ", newAboveArray.length);
-
-
 
                     }
-                    document.presentId = aboveGuid;
+                    console.log("AboveArray Size: ", aboveArray.length);
                 } else {
-                    p.allListElements[index - 1].presentId = newGuid;
                     let newAboveArray: Doc[] = [];
                     newAboveArray.push(p.allListElements[index - 1]);
                     if (p.groupMappings.has(docGuid)) {
                         let docsArray = p.groupMappings.get(docGuid)!;
-                        docsArray.forEach((doc: Doc) => newAboveArray.push(doc));
+                        docsArray.forEach((doc: Doc) => {
+                            newAboveArray.push(doc);
+                            doc.presentId = aboveGuid;
+                        });
+                        p.groupMappings.delete(docGuid);
                     } else {
                         newAboveArray.push(document);
+
                     }
-                    document.presentId = newGuid;
-                    p.groupMappings.set(newGuid, newAboveArray);
-                    console.log("New Array created");
+                    p.groupMappings.set(aboveGuid, newAboveArray);
+                    console.log("NewABove array size: ", newAboveArray.length);
+
 
 
                 }
+                document.presentId = aboveGuid;
+                // } else {
+                //     p.allListElements[index - 1].presentId = newGuid;
+                //     let newAboveArray: Doc[] = [];
+                //     newAboveArray.push(p.allListElements[index - 1]);
+                //     if (p.groupMappings.has(docGuid)) {
+                //         let docsArray = p.groupMappings.get(docGuid)!;
+                //         docsArray.forEach((doc: Doc) => {
+                //             doc.presentId = newGuid;
+                //             newAboveArray.push(doc);
+                //         });
+                //         p.groupMappings.delete(docGuid);
+                //     } else {
+                //         newAboveArray.push(document);
+                //     }
+                //     document.presentId = newGuid;
+                //     p.groupMappings.set(newGuid, newAboveArray);
+                //     console.log("New Array created");
+
+
+                // }
 
             } else {
                 let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!;
                 let targetIndex = curArray.indexOf(document);
                 let firstPart = curArray.slice(0, targetIndex);
+                let firstPartNewGuid = Utils.GenerateGuid();
+                firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
                 let secondPart = curArray.slice(targetIndex);
                 p.groupMappings.set(StrCast(p.allListElements[index - 1].presentId, Utils.GenerateGuid()), firstPart);
                 p.groupMappings.set(StrCast(document.presentId, Utils.GenerateGuid()), secondPart);
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 6cf908d01..79b7c1f15 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -62,6 +62,16 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
+    @action
+    initializeGroupIds = (docList: Doc[]) => {
+        docList.forEach((doc: Doc, index: number) => {
+            let docGuid = StrCast(doc.presentId, null);
+            if (docGuid === undefined) {
+                doc.presentId = Utils.GenerateGuid();
+            }
+        });
+    }
+
     // /**
     //  * Renders a single child document. It will just append a list element.
     //  * @param document The document to render.
@@ -109,6 +119,7 @@ class PresentationViewList extends React.Component<PresListProps> {
     render() {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupArrays(children);
+        this.initializeGroupIds(children);
 
         return (
             <div className="presentationView-listCont">
-- 
cgit v1.2.3-70-g09d2


From 51c59893afd84eb9f36669282cbf0479ee9d9f84 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Thu, 6 Jun 2019 16:45:32 -0400
Subject: Cleaned the ex implementation

---
 .../views/presentationview/PresentationElement.tsx | 88 ----------------------
 .../views/presentationview/PresentationView.tsx    | 17 +----
 2 files changed, 2 insertions(+), 103 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index eb7002731..f5220c564 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -15,7 +15,6 @@ interface PresentationElementProps {
     index: number;
     deleteDocument(index: number): void;
     gotoDocument(index: number): void;
-    groupedMembers: Doc[][];
     allListElements: Doc[];
     groupMappings: Map<String, Doc[]>;
 
@@ -45,12 +44,9 @@ export default class PresentationElement extends React.Component<PresentationEle
                 let newGuid = Utils.GenerateGuid();
                 let aboveGuid = StrCast(p.allListElements[index - 1].presentId, null);
                 let docGuid = StrCast(document.presentId, null);
-                // if (aboveGuid !== undefined) {
                 if (p.groupMappings.has(aboveGuid)) {
                     let aboveArray = p.groupMappings.get(aboveGuid)!;
                     if (p.groupMappings.has(docGuid)) {
-                        console.log("Doc Guid: ", docGuid);
-                        console.log("Above Guid: ", aboveGuid);
                         let docsArray = p.groupMappings.get(docGuid)!;
                         docsArray.forEach((doc: Doc) => {
                             if (!aboveArray.includes(doc)) {
@@ -91,27 +87,6 @@ export default class PresentationElement extends React.Component<PresentationEle
 
                 }
                 document.presentId = aboveGuid;
-                // } else {
-                //     p.allListElements[index - 1].presentId = newGuid;
-                //     let newAboveArray: Doc[] = [];
-                //     newAboveArray.push(p.allListElements[index - 1]);
-                //     if (p.groupMappings.has(docGuid)) {
-                //         let docsArray = p.groupMappings.get(docGuid)!;
-                //         docsArray.forEach((doc: Doc) => {
-                //             doc.presentId = newGuid;
-                //             newAboveArray.push(doc);
-                //         });
-                //         p.groupMappings.delete(docGuid);
-                //     } else {
-                //         newAboveArray.push(document);
-                //     }
-                //     document.presentId = newGuid;
-                //     p.groupMappings.set(newGuid, newAboveArray);
-                //     console.log("New Array created");
-
-
-                // }
-
             } else {
                 let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!;
                 let targetIndex = curArray.indexOf(document);
@@ -129,64 +104,6 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
-    @action
-    onGroupClickRec = (document: Doc, index: number, buttonStatus: boolean) => {
-        let p = this.props;
-        if (buttonStatus) {
-            if (index >= 1) {
-                if (p.groupedMembers[index].length >= 0) {
-                    p.groupedMembers[index].forEach((doc: Doc) => {
-                        if (!p.groupedMembers[index - 1].includes(doc)) {
-                            p.groupedMembers[index - 1].push(doc);
-                        }
-                    });
-                }
-
-                if (index >= 2) {
-                    let nextBool = p.groupedMembers[index - 2].length !== 1;
-                    if (nextBool === buttonStatus) {
-                        this.onGroupClickRec(document, index - 1, p.groupedMembers[index - 2].length !== 1);
-                    }
-                }
-
-            }
-        }
-        else {
-
-            if (index >= 1) {
-                let removeSize = p.groupedMembers[index].length;
-                if (p.groupedMembers[index].length >= 0) {
-                    p.groupedMembers[index].forEach((doc: Doc) => {
-                        p.groupedMembers[index - 1].pop(); console.log("Reached!!");
-                    });
-                }
-
-                if (index >= 2) {
-                    let nextBool = p.groupedMembers[index - 2].length !== 1;
-                    if (nextBool !== buttonStatus) {
-                        this.recursiveDeleteGroups(index - 1, removeSize);
-                    }
-                }
-            }
-        }
-
-    }
-
-    @action
-    recursiveDeleteGroups = (index: number, removeSize: number) => {
-        let p = this.props;
-        for (let i = 0; i < removeSize; i++) {
-            p.groupedMembers[index - 1].pop();
-        }
-        if (index >= 2) {
-
-            let nextBool = p.groupedMembers[index - 2].length !== 1;
-            if (nextBool === true) {
-                this.recursiveDeleteGroups(index - 1, removeSize);
-            }
-        }
-    }
-
     @action
     changeGroupStatus = () => {
         if (this.selectedButtons[buttonIndex.Group]) {
@@ -196,10 +113,6 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
-    printGroupSizes = () => {
-        this.props.groupedMembers.forEach((doc: Doc[], index: number) => console.log("Index: ", index, " size: ", doc.length));
-    }
-
     @action
     onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
         e.stopPropagation();
@@ -254,7 +167,6 @@ export default class PresentationElement extends React.Component<PresentationEle
                     e.stopPropagation();
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
-                    //this.printGroupSizes();
                 }}>F</button>
 
             </div>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 79b7c1f15..3263ea62e 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -19,7 +19,6 @@ export interface PresViewProps {
 interface PresListProps extends PresViewProps {
     deleteDocument(index: number): void;
     gotoDocument(index: number): void;
-    groupedMembers: Doc[][];
     groupMappings: Map<String, Doc[]>;
 }
 
@@ -50,17 +49,6 @@ class PresentationViewList extends React.Component<PresListProps> {
     //         }
     //     }
     // }
-    @action
-    initializeGroupArrays = (docList: Doc[]) => {
-        console.log("Starting len: ", this.props.groupedMembers.length);
-        docList.forEach((doc: Doc, index: number) => {
-            if (this.props.groupedMembers.length < index + 2) {
-                this.props.groupedMembers[index] = [];
-                this.props.groupedMembers[index].push(docList[index]);
-
-            }
-        });
-    }
 
     @action
     initializeGroupIds = (docList: Doc[]) => {
@@ -118,12 +106,11 @@ class PresentationViewList extends React.Component<PresListProps> {
 
     render() {
         const children = DocListCast(this.props.Document.data);
-        this.initializeGroupArrays(children);
         this.initializeGroupIds(children);
 
         return (
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupedMembers={this.props.groupedMembers} groupMappings={this.props.groupMappings} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
             </div>
         );
     }
@@ -210,7 +197,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button className="presentation-button" onClick={this.back}>back</button>
                     <button className="presentation-button" onClick={this.next}>next</button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupedMembers={this.groupedMembers} groupMappings={this.groupMappings} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From ecbf6dda7f410f866b1031966982b23b031e72ee Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Thu, 6 Jun 2019 18:47:48 -0400
Subject: Pres ELements mapped

---
 .../views/presentationview/PresentationElement.tsx       | 16 +++++++++-------
 src/client/views/presentationview/PresentationView.tsx   |  8 +++++---
 2 files changed, 14 insertions(+), 10 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index f5220c564..33c0289d7 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -3,7 +3,7 @@ import React = require("react");
 import { Doc } from "../../../new_fields/Doc";
 import { NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
-import { observable, action } from "mobx";
+import { observable, action, computed } from "mobx";
 import "./PresentationView.scss";
 import { Utils } from "../../../Utils";
 
@@ -35,6 +35,10 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     @observable selectedButtons: boolean[] = new Array(6);
 
+    @computed
+    get selected() {
+        return this.selectedButtons;
+    }
 
     @action
     onGroupClick = (document: Doc, index: number, buttonStatus: boolean) => {
@@ -118,18 +122,16 @@ export default class PresentationElement extends React.Component<PresentationEle
         e.stopPropagation();
         if (this.selectedButtons[buttonIndex.HideTillPressed]) {
             this.selectedButtons[buttonIndex.HideTillPressed] = false;
+            this.props.document.opacity = 1;
 
         } else {
             this.selectedButtons[buttonIndex.HideTillPressed] = true;
-        }
-    }
+            this.props.document.opacity = 0;
 
-    hideDocumentIfNotPressed = () => {
-        this.props.allListElements.forEach((doc: Doc) => doc.opacity = 1);
+        }
     }
 
 
-
     render() {
         let p = this.props;
         let title = p.document.title;
@@ -160,7 +162,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <br></br>
                 <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
                 <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
-                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => { this.onHideDocumentUntilPressClick(e); this.hideDocumentIfNotPressed(); }}>C</button>
+                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}>C</button>
                 <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>D</button>
                 <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>E</button>
                 <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 3263ea62e..0655418f4 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -20,6 +20,7 @@ interface PresListProps extends PresViewProps {
     deleteDocument(index: number): void;
     gotoDocument(index: number): void;
     groupMappings: Map<String, Doc[]>;
+    presElementsMappings: Map<Doc, PresentationElement>;
 }
 
 
@@ -107,10 +108,10 @@ class PresentationViewList extends React.Component<PresListProps> {
     render() {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupIds(children);
-
         return (
+
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => this.props.presElementsMappings.set(doc, e!)} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
             </div>
         );
     }
@@ -123,6 +124,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     @observable groupedMembers: Doc[][] = [];
     @observable groupMappings: Map<String, Doc[]> = new Map();
+    @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -197,7 +199,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button className="presentation-button" onClick={this.back}>back</button>
                     <button className="presentation-button" onClick={this.next}>next</button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 3473a78055d657829efb8818b643a5348c15fffc Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Thu, 6 Jun 2019 19:47:45 -0400
Subject: ...

---
 src/client/views/presentationview/PresentationView.tsx | 2 ++
 1 file changed, 2 insertions(+)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 0655418f4..6089665fe 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -132,6 +132,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
     closePresentation = action(() => this.props.Document.width = 0);
     next = () => {
         const current = NumCast(this.props.Document.selectedDoc);
+        // let currentPresId = StrCast(current.presentId);
+        // this.groupMappings.get(current.presentId);
         this.gotoDocument(current + 1);
 
     }
-- 
cgit v1.2.3-70-g09d2


From 8699b8bb3a3b93e2ec5eff7ca239bccbdccab8ae Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 12:23:34 -0400
Subject: Next and Prev adjusted to groups

---
 .../views/presentationview/PresentationView.tsx    | 54 ++++++++++++++++++++--
 1 file changed, 50 insertions(+), 4 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 6089665fe..bede2dd66 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -130,16 +130,62 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable
     collapsed: boolean = false;
     closePresentation = action(() => this.props.Document.width = 0);
-    next = () => {
+    next = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
         // let currentPresId = StrCast(current.presentId);
+        let docAtCurrent = await this.getDocAtIndex(current);
+        if (docAtCurrent === undefined) {
+            return;
+        }
+        let curPresId = StrCast(docAtCurrent.presentId);
+        let nextSelected = current + 1;
+
+        if (this.groupMappings.has(curPresId)) {
+            let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
+            console.log("It reaches here");
+            console.log("CurArray Len: ", currentsArray.length)
+            //nextSelected = current + currentsArray.length - current - 1;
+            nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1;
+            if (nextSelected === current) nextSelected = current + 1;
+        }
+
         // this.groupMappings.get(current.presentId);
-        this.gotoDocument(current + 1);
+        this.gotoDocument(nextSelected);
 
     }
-    back = () => {
+    back = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
-        this.gotoDocument(current - 1);
+        let docAtCurrent = await this.getDocAtIndex(current);
+        if (docAtCurrent === undefined) {
+            return;
+        }
+        let curPresId = StrCast(docAtCurrent.presentId);
+        let prevSelected = current - 1;
+
+        if (this.groupMappings.has(curPresId)) {
+            let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
+            prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent));
+            if (prevSelected === current) prevSelected = current - 1;
+
+
+        }
+
+
+        this.gotoDocument(prevSelected);
+    }
+
+    getDocAtIndex = async (index: number) => {
+        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (!list) {
+            return undefined;
+        }
+        if (index < 0 || index >= list.length) {
+            return undefined;
+        }
+
+        this.props.Document.selectedDoc = index;
+        const doc = await list[index];
+        return doc;
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 6a905a729cbb59add629a305f99e1e225f958ea3 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 15:00:52 -0400
Subject: Guid Updatae

Guids will only be assigned to docs that are not in groups
---
 src/client/views/presentationview/PresentationView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index bede2dd66..9acdea98e 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -55,8 +55,9 @@ class PresentationViewList extends React.Component<PresListProps> {
     initializeGroupIds = (docList: Doc[]) => {
         docList.forEach((doc: Doc, index: number) => {
             let docGuid = StrCast(doc.presentId, null);
-            if (docGuid === undefined) {
+            if (!this.props.groupMappings.has(docGuid)) {
                 doc.presentId = Utils.GenerateGuid();
+
             }
         });
     }
-- 
cgit v1.2.3-70-g09d2


From ecac03b032c4d1484408b892024135a814cd3265 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 15:53:21 -0400
Subject: Hide Until Presented Is Done

---
 .../views/presentationview/PresentationElement.tsx |  9 +++---
 .../views/presentationview/PresentationView.tsx    | 37 ++++++++++++++++++++--
 2 files changed, 39 insertions(+), 7 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 33c0289d7..2621b92a3 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -20,7 +20,7 @@ interface PresentationElementProps {
 
 }
 
-enum buttonIndex {
+export enum buttonIndex {
     Show = 0,
     Navigate = 1,
     HideTillPressed = 2,
@@ -120,14 +120,15 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideTillPressed]) {
             this.selectedButtons[buttonIndex.HideTillPressed] = false;
             this.props.document.opacity = 1;
-
         } else {
             this.selectedButtons[buttonIndex.HideTillPressed] = true;
-            this.props.document.opacity = 0;
-
+            if (this.props.index > current) {
+                this.props.document.opacity = 0;
+            }
         }
     }
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 9acdea98e..4fcc0b523 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -10,7 +10,7 @@ import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../.
 import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
-import PresentationElement from "./PresentationElement";
+import PresentationElement, { buttonIndex } from "./PresentationElement";
 
 export interface PresViewProps {
     Document: Doc;
@@ -21,6 +21,7 @@ interface PresListProps extends PresViewProps {
     gotoDocument(index: number): void;
     groupMappings: Map<String, Doc[]>;
     presElementsMappings: Map<Doc, PresentationElement>;
+    setChildrenDocs: (docList: Doc[]) => void;
 }
 
 
@@ -57,7 +58,6 @@ class PresentationViewList extends React.Component<PresListProps> {
             let docGuid = StrCast(doc.presentId, null);
             if (!this.props.groupMappings.has(docGuid)) {
                 doc.presentId = Utils.GenerateGuid();
-
             }
         });
     }
@@ -109,6 +109,7 @@ class PresentationViewList extends React.Component<PresListProps> {
     render() {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupIds(children);
+        this.props.setChildrenDocs(children);
         return (
 
             <div className="presentationView-listCont">
@@ -126,6 +127,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable groupedMembers: Doc[][] = [];
     @observable groupMappings: Map<String, Doc[]> = new Map();
     @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
+    @observable childrenDocs: Doc[] = [];
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -175,6 +177,26 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.gotoDocument(prevSelected);
     }
 
+    showAfterPresented = (index: number) => {
+        this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
+            if (presElem.selected[buttonIndex.HideTillPressed]) {
+                if (this.childrenDocs.indexOf(key) <= index) {
+                    key.opacity = 1;
+                }
+            }
+        });
+    }
+
+    hideIfNotPresented = (index: number) => {
+        this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
+            if (presElem.selected[buttonIndex.HideTillPressed]) {
+                if (this.childrenDocs.indexOf(key) > index) {
+                    key.opacity = 0;
+                }
+            }
+        });
+    }
+
     getDocAtIndex = async (index: number) => {
         const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (!list) {
@@ -209,6 +231,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.props.Document.selectedDoc = index;
         const doc = await list[index];
         DocumentManager.Instance.jumpToDocument(doc);
+        this.hideIfNotPresented(index);
+        this.showAfterPresented(index);
+
+
     }
 
     //initilize class variables
@@ -233,6 +259,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.props.Document.width = 300;
     }
 
+    @action
+    setChildrenDocs = (docList: Doc[]) => {
+        this.childrenDocs = docList;
+    }
+
     render() {
         let titleStr = StrCast(this.props.Document.title);
         let width = NumCast(this.props.Document.width);
@@ -248,7 +279,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button className="presentation-button" onClick={this.back}>back</button>
                     <button className="presentation-button" onClick={this.next}>next</button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 213cd917b20a8955ebfa0a4127e2853614314087 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 16:43:26 -0400
Subject: HideAfter Presented Done

---
 .../views/presentationview/PresentationElement.tsx       | 12 +++++++++++-
 src/client/views/presentationview/PresentationView.tsx   | 16 ++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 2621b92a3..bf09efaf2 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -132,6 +132,16 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    @action
+    onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.selectedButtons[buttonIndex.HideAfter]) {
+            this.selectedButtons[buttonIndex.HideAfter] = false;
+        } else {
+            this.selectedButtons[buttonIndex.HideAfter] = true;
+        }
+    }
+
 
     render() {
         let p = this.props;
@@ -165,7 +175,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
                 <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}>C</button>
                 <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>D</button>
-                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>E</button>
+                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}>E</button>
                 <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 4fcc0b523..e996765f0 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -179,17 +179,29 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     showAfterPresented = (index: number) => {
         this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
-            if (presElem.selected[buttonIndex.HideTillPressed]) {
+            let selectedButtons: boolean[] = presElem.selected;
+            if (selectedButtons[buttonIndex.HideTillPressed]) {
                 if (this.childrenDocs.indexOf(key) <= index) {
                     key.opacity = 1;
                 }
             }
+            if (selectedButtons[buttonIndex.HideAfter]) {
+                if (this.childrenDocs.indexOf(key) < index) {
+                    key.opacity = 0;
+                }
+            }
         });
     }
 
     hideIfNotPresented = (index: number) => {
         this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
-            if (presElem.selected[buttonIndex.HideTillPressed]) {
+            let selectedButtons: boolean[] = presElem.selected;
+            if (selectedButtons[buttonIndex.HideAfter]) {
+                if (this.childrenDocs.indexOf(key) <= index) {
+                    key.opacity = 1;
+                }
+            }
+            if (selectedButtons[buttonIndex.HideTillPressed]) {
                 if (this.childrenDocs.indexOf(key) > index) {
                     key.opacity = 0;
                 }
-- 
cgit v1.2.3-70-g09d2


From cd15824429fbac94c8342af15acb7ec472506715 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 17:37:25 -0400
Subject: Fade After Presented Done

---
 .../views/presentationview/PresentationElement.tsx     | 18 +++++++++++++++++-
 src/client/views/presentationview/PresentationView.tsx | 15 ++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index bf09efaf2..e821c9478 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -138,10 +138,26 @@ export default class PresentationElement extends React.Component<PresentationEle
         if (this.selectedButtons[buttonIndex.HideAfter]) {
             this.selectedButtons[buttonIndex.HideAfter] = false;
         } else {
+            if (this.selectedButtons[buttonIndex.FadeAfter]) {
+                this.selectedButtons[buttonIndex.FadeAfter] = false;
+            }
             this.selectedButtons[buttonIndex.HideAfter] = true;
         }
     }
 
+    @action
+    onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.selectedButtons[buttonIndex.FadeAfter]) {
+            this.selectedButtons[buttonIndex.FadeAfter] = false;
+        } else {
+            if (this.selectedButtons[buttonIndex.HideAfter]) {
+                this.selectedButtons[buttonIndex.HideAfter] = false;
+            }
+            this.selectedButtons[buttonIndex.FadeAfter] = true;
+        }
+    }
+
 
     render() {
         let p = this.props;
@@ -174,7 +190,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
                 <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
                 <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}>C</button>
-                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"}>D</button>
+                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}>D</button>
                 <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}>E</button>
                 <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index e996765f0..efc333ee3 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -190,6 +190,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     key.opacity = 0;
                 }
             }
+            if (selectedButtons[buttonIndex.FadeAfter]) {
+                if (this.childrenDocs.indexOf(key) < index) {
+                    key.opacity = 0.5;
+                }
+            }
         });
     }
 
@@ -197,12 +202,20 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
             let selectedButtons: boolean[] = presElem.selected;
             if (selectedButtons[buttonIndex.HideAfter]) {
-                if (this.childrenDocs.indexOf(key) <= index) {
+                if (this.childrenDocs.indexOf(key) >= index) {
+                    console.log("CAlled this right");
+                    key.opacity = 1;
+                }
+            }
+            if (selectedButtons[buttonIndex.FadeAfter]) {
+                if (this.childrenDocs.indexOf(key) >= index) {
                     key.opacity = 1;
                 }
             }
             if (selectedButtons[buttonIndex.HideTillPressed]) {
                 if (this.childrenDocs.indexOf(key) > index) {
+                    console.log("KeyIndex: ", this.childrenDocs.indexOf(key));
+                    console.log("Cur index: ", index);
                     key.opacity = 0;
                 }
             }
-- 
cgit v1.2.3-70-g09d2


From f88bb6cb27d84041637ac31d8b4b82a710367dfb Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 18:08:18 -0400
Subject: Navigation done

---
 .../views/presentationview/PresentationElement.tsx | 13 +++++++++-
 .../views/presentationview/PresentationView.tsx    | 29 +++++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index e821c9478..c89cd4309 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -158,6 +158,17 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    @action
+    onNavigateDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.selectedButtons[buttonIndex.Navigate]) {
+            this.selectedButtons[buttonIndex.Navigate] = false;
+
+        } else {
+            this.selectedButtons[buttonIndex.Navigate] = true;
+        }
+    }
+
 
     render() {
         let p = this.props;
@@ -188,7 +199,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
                 <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
-                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"}>B</button>
+                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}>B</button>
                 <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}>C</button>
                 <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}>D</button>
                 <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}>E</button>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index efc333ee3..cbfad56d1 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -222,6 +222,32 @@ export class PresentationView extends React.Component<PresViewProps>  {
         });
     }
 
+    navigateToElement = (curDoc: Doc) => {
+        let docToJump: Doc = curDoc;
+        let curDocPresId = StrCast(curDoc.presentId, null);
+
+        if (curDocPresId !== undefined) {
+            if (this.groupMappings.has(curDocPresId)) {
+                let currentDocGroup = this.groupMappings.get(curDocPresId)!;
+                currentDocGroup.forEach((doc: Doc, index: number) => {
+                    let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected;
+                    if (selectedButtons[buttonIndex.Navigate]) {
+                        docToJump = doc;
+                    }
+                });
+            }
+
+        }
+        if (docToJump === curDoc) {
+            if (this.presElementsMappings.get(curDoc)!.selected[buttonIndex.Navigate]) {
+                DocumentManager.Instance.jumpToDocument(curDoc);
+            } else {
+                return;
+            }
+        }
+        DocumentManager.Instance.jumpToDocument(docToJump);
+    }
+
     getDocAtIndex = async (index: number) => {
         const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (!list) {
@@ -255,7 +281,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         this.props.Document.selectedDoc = index;
         const doc = await list[index];
-        DocumentManager.Instance.jumpToDocument(doc);
+        // DocumentManager.Instance.jumpToDocument(doc);
+        this.navigateToElement(doc);
         this.hideIfNotPresented(index);
         this.showAfterPresented(index);
 
-- 
cgit v1.2.3-70-g09d2


From 91614b758e937113a39ab3490b8ec379ee0e03c1 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 19:04:04 -0400
Subject: Icons for buttons and next and back is added

---
 package.json                                       |  2 ++
 .../views/presentationview/PresentationElement.tsx | 23 ++++++++++++++++------
 .../views/presentationview/PresentationView.tsx    | 10 ++++++++--
 3 files changed, 27 insertions(+), 8 deletions(-)

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

diff --git a/package.json b/package.json
index df0767b50..de4e7b37e 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
     "dependencies": {
         "@fortawesome/fontawesome-free-solid": "^5.0.13",
         "@fortawesome/fontawesome-svg-core": "^1.2.15",
+        "@fortawesome/free-brands-svg-icons": "^5.9.0",
+        "@fortawesome/free-regular-svg-icons": "^5.9.0",
         "@fortawesome/free-solid-svg-icons": "^5.7.2",
         "@fortawesome/react-fontawesome": "^0.1.4",
         "@hig/flyout": "^1.0.3",
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index c89cd4309..1a3f35d44 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -6,9 +6,20 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { observable, action, computed } from "mobx";
 import "./PresentationView.scss";
 import { Utils } from "../../../Utils";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
 
 
 
+
+library.add(faArrowUp);
+library.add(fileSolid);
+library.add(fileRegular);
+library.add(faLocationArrow);
+library.add(faSearch);
+
 interface PresentationElementProps {
     mainDocument: Doc;
     document: Doc;
@@ -198,16 +209,16 @@ export default class PresentationElement extends React.Component<PresentationEle
                 </strong>
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}>A</button>
-                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}>B</button>
-                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}>C</button>
-                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}>D</button>
-                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}>E</button>
+                <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
+                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
+                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
                 <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
-                }}>F</button>
+                }}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
 
             </div>
         );
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index cbfad56d1..e3a879833 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -11,6 +11,12 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import PresentationElement, { buttonIndex } from "./PresentationElement";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faArrowLeft);
+library.add(faArrowRight);
 
 export interface PresViewProps {
     Document: Doc;
@@ -328,8 +334,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button className='presentation-icon' onClick={this.closePresentation}>X</button>
                 </div>
                 <div className="presentation-buttons">
-                    <button className="presentation-button" onClick={this.back}>back</button>
-                    <button className="presentation-button" onClick={this.next}>next</button>
+                    <button className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                    <button className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
                 <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} />
             </div>
-- 
cgit v1.2.3-70-g09d2


From cfb4470fa457581a78ea93fc53519c09f2516669 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 19:35:01 -0400
Subject: unnecessary console.logs and comments removed

---
 .../views/presentationview/PresentationElement.tsx |  7 --
 .../views/presentationview/PresentationView.tsx    | 76 +---------------------
 2 files changed, 1 insertion(+), 82 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 1a3f35d44..ee423c90a 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -69,18 +69,14 @@ export default class PresentationElement extends React.Component<PresentationEle
                             }
                             doc.presentId = aboveGuid;
                         });
-                        console.log("CAlled first one");
                         p.groupMappings.delete(docGuid);
                     } else {
                         if (!aboveArray.includes(document)) {
                             aboveArray.push(document);
-                            console.log("CAlled this one");
-                            console.log("Doc: ", document);
 
                         }
 
                     }
-                    console.log("AboveArray Size: ", aboveArray.length);
                 } else {
                     let newAboveArray: Doc[] = [];
                     newAboveArray.push(p.allListElements[index - 1]);
@@ -96,9 +92,6 @@ export default class PresentationElement extends React.Component<PresentationEle
 
                     }
                     p.groupMappings.set(aboveGuid, newAboveArray);
-                    console.log("NewABove array size: ", newAboveArray.length);
-
-
 
                 }
                 document.presentId = aboveGuid;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index e3a879833..c7839a384 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -37,27 +37,6 @@ interface PresListProps extends PresViewProps {
  */
 class PresentationViewList extends React.Component<PresListProps> {
 
-
-    // onGroupClick = (document: Doc, index: number, buttonStatus: boolean[]) => {
-    //     if (buttonStatus[5]) {
-    //         buttonStatus[5] = false;
-    //         if (index >= 1) {
-    //             if (this.groupedMembers[index].length >= 0) {
-    //                 this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].slice(this.groupedMembers[index - 1].indexOf(doc), 1));
-    //             }
-    //         }
-    //     } else {
-    //         buttonStatus[5] = true;
-    //         console.log("reached!! ", buttonStatus[5]);
-    //         if (index >= 1) {
-    //             if (this.groupedMembers[index].length >= 0) {
-    //                 this.groupedMembers[index].forEach((doc: Doc) => this.groupedMembers[index - 1].push(doc));
-    //             }
-    //             this.groupedMembers[index - 1].push(document);
-    //         }
-    //     }
-    // }
-
     @action
     initializeGroupIds = (docList: Doc[]) => {
         docList.forEach((doc: Doc, index: number) => {
@@ -68,50 +47,6 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
-    // /**
-    //  * Renders a single child document. It will just append a list element.
-    //  * @param document The document to render.
-    //  */
-    // renderChild = (document: Doc, index: number) => {
-    //     let title = document.title;
-
-    //     //to get currently selected presentation doc
-    //     let selected = NumCast(this.props.Document.selectedDoc, 0);
-
-    //     let className = "presentationView-item";
-    //     if (selected === index) {
-    //         //this doc is selected
-    //         className += " presentationView-selected";
-    //     }
-    //     let selectedButtons: boolean[] = new Array(6);
-    //     let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; }
-    //     let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; }
-    //     return (
-    //         <div className={className} key={document[Id] + index}
-    //             onPointerEnter={onEnter} onPointerLeave={onLeave}
-    //             style={{
-    //                 outlineColor: "maroon",
-    //                 outlineStyle: "dashed",
-    //                 outlineWidth: BoolCast(document.libraryBrush, false) || BoolCast(document.protoBrush, false) ? `1px` : "0px",
-    //             }}
-    //             onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
-    //             <strong className="presentationView-name">
-    //                 {`${index + 1}. ${title}`}
-    //             </strong>
-    //             <button className="presentation-icon" onClick={e => { this.props.deleteDocument(index); e.stopPropagation(); }}>X</button>
-    //             <br></br>
-    //             <button className={selectedButtons[0] ? "presentation-interaction" : "presentation-interaction-selected"}>A</button>
-    //             <button className={selectedButtons[1] ? "presentation-interaction" : "presentation-interaction-selected"}>B</button>
-    //             <button className={selectedButtons[2] ? "presentation-interaction" : "presentation-interaction-selected"}>C</button>
-    //             <button className={selectedButtons[3] ? "presentation-interaction" : "presentation-interaction-selected"}>D</button>
-    //             <button className={selectedButtons[4] ? "presentation-interaction" : "presentation-interaction-selected"}>E</button>
-    //             <button className={selectedButtons[5] ? "presentation-interaction" : "presentation-interaction-selected"} onClick={() => this.onGroupClick(document, index, selectedButtons)}>F</button>
-
-    //         </div>
-    //     );
-
-    // }
-
     render() {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupIds(children);
@@ -119,7 +54,7 @@ class PresentationViewList extends React.Component<PresListProps> {
         return (
 
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => this.props.presElementsMappings.set(doc, e!)} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
             </div>
         );
     }
@@ -141,7 +76,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
     closePresentation = action(() => this.props.Document.width = 0);
     next = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
-        // let currentPresId = StrCast(current.presentId);
         let docAtCurrent = await this.getDocAtIndex(current);
         if (docAtCurrent === undefined) {
             return;
@@ -151,14 +85,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         if (this.groupMappings.has(curPresId)) {
             let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
-            console.log("It reaches here");
-            console.log("CurArray Len: ", currentsArray.length)
-            //nextSelected = current + currentsArray.length - current - 1;
             nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1;
             if (nextSelected === current) nextSelected = current + 1;
         }
 
-        // this.groupMappings.get(current.presentId);
         this.gotoDocument(nextSelected);
 
     }
@@ -209,7 +139,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
             let selectedButtons: boolean[] = presElem.selected;
             if (selectedButtons[buttonIndex.HideAfter]) {
                 if (this.childrenDocs.indexOf(key) >= index) {
-                    console.log("CAlled this right");
                     key.opacity = 1;
                 }
             }
@@ -220,8 +149,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
             }
             if (selectedButtons[buttonIndex.HideTillPressed]) {
                 if (this.childrenDocs.indexOf(key) > index) {
-                    console.log("KeyIndex: ", this.childrenDocs.indexOf(key));
-                    console.log("Cur index: ", index);
                     key.opacity = 0;
                 }
             }
@@ -287,7 +214,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         this.props.Document.selectedDoc = index;
         const doc = await list[index];
-        // DocumentManager.Instance.jumpToDocument(doc);
         this.navigateToElement(doc);
         this.hideIfNotPresented(index);
         this.showAfterPresented(index);
-- 
cgit v1.2.3-70-g09d2


From 24730e6fe8114828a96c6c0ce9c170ff2488e423 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 7 Jun 2019 19:56:35 -0400
Subject: Documentation

---
 .../views/presentationview/PresentationElement.tsx | 46 ++++++++++++++++++++-
 .../views/presentationview/PresentationView.tsx    | 47 +++++++++++++++++++++-
 2 files changed, 91 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index ee423c90a..dfe078a8e 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -31,6 +31,7 @@ interface PresentationElementProps {
 
 }
 
+//enum for the all kinds of buttons a doc in presentation can have
 export enum buttonIndex {
     Show = 0,
     Navigate = 1,
@@ -41,26 +42,41 @@ export enum buttonIndex {
 
 }
 
+/**
+ * This class models the view a document added to presentation will have in the presentation.
+ * It involves some functionality for its buttons and options.
+ */
 @observer
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
     @observable selectedButtons: boolean[] = new Array(6);
 
+    /**
+     * Getter to get the status of the buttons.
+     */
     @computed
     get selected() {
         return this.selectedButtons;
     }
 
+    /**
+     * The function that is called to group docs together. It tries to group a doc
+     * that turned grouping option with the above document. If that doc is grouped with
+     * other documents. Those other documents will be grouped with doc's above document as well.
+     */
     @action
     onGroupClick = (document: Doc, index: number, buttonStatus: boolean) => {
         let p = this.props;
         if (index >= 1) {
+            //checking if options was turned true
             if (buttonStatus) {
-                let newGuid = Utils.GenerateGuid();
+                //getting the id of the above-doc and the doc
                 let aboveGuid = StrCast(p.allListElements[index - 1].presentId, null);
                 let docGuid = StrCast(document.presentId, null);
+                //the case where above-doc is already in group
                 if (p.groupMappings.has(aboveGuid)) {
                     let aboveArray = p.groupMappings.get(aboveGuid)!;
+                    //case where doc is already in group
                     if (p.groupMappings.has(docGuid)) {
                         let docsArray = p.groupMappings.get(docGuid)!;
                         docsArray.forEach((doc: Doc) => {
@@ -70,6 +86,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                             doc.presentId = aboveGuid;
                         });
                         p.groupMappings.delete(docGuid);
+                        //the case where doc was not in group
                     } else {
                         if (!aboveArray.includes(document)) {
                             aboveArray.push(document);
@@ -77,9 +94,12 @@ export default class PresentationElement extends React.Component<PresentationEle
                         }
 
                     }
+                    //the case where above-doc was not in group
                 } else {
                     let newAboveArray: Doc[] = [];
                     newAboveArray.push(p.allListElements[index - 1]);
+
+                    //the case where doc is in group
                     if (p.groupMappings.has(docGuid)) {
                         let docsArray = p.groupMappings.get(docGuid)!;
                         docsArray.forEach((doc: Doc) => {
@@ -87,6 +107,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                             doc.presentId = aboveGuid;
                         });
                         p.groupMappings.delete(docGuid);
+
+                        //the case where doc is not in a group
                     } else {
                         newAboveArray.push(document);
 
@@ -95,6 +117,8 @@ export default class PresentationElement extends React.Component<PresentationEle
 
                 }
                 document.presentId = aboveGuid;
+
+                //when grouping is turned off
             } else {
                 let curArray = p.groupMappings.get(StrCast(document.presentId, Utils.GenerateGuid()))!;
                 let targetIndex = curArray.indexOf(document);
@@ -112,6 +136,9 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    /**
+     * Function that is called on click to change the group status of a docus, by turning the option on/off.
+     */
     @action
     changeGroupStatus = () => {
         if (this.selectedButtons[buttonIndex.Group]) {
@@ -121,6 +148,10 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    /**
+     * The function that is called on click to turn Hiding document till press option on/off.
+     * It also sets the beginning and end opacitys.
+     */
     @action
     onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
         e.stopPropagation();
@@ -136,6 +167,11 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    /**
+     * The function that is called on click to turn Hiding document after presented option on/off.
+     * It also makes sure that the option swithches from fade-after to this one, since both
+     * can't coexist.
+     */
     @action
     onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
@@ -149,6 +185,11 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    /**
+     * The function that is called on click to turn fading document after presented option on/off.
+     * It also makes sure that the option swithches from hide-after to this one, since both
+     * can't coexist.
+     */
     @action
     onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
@@ -162,6 +203,9 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
+    /**
+     * The function that is called on click to turn navigation option of docs on/off.
+     */
     @action
     onNavigateDocumentClick = (e: React.MouseEvent) => {
         e.stopPropagation();
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index c7839a384..e987d12f6 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -37,10 +37,17 @@ interface PresListProps extends PresViewProps {
  */
 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 = (docList: Doc[]) => {
         docList.forEach((doc: Doc, index: number) => {
             let docGuid = StrCast(doc.presentId, null);
+            //checking if part of group
             if (!this.props.groupMappings.has(docGuid)) {
                 doc.presentId = Utils.GenerateGuid();
             }
@@ -65,9 +72,11 @@ class PresentationViewList extends React.Component<PresListProps> {
 export class PresentationView extends React.Component<PresViewProps>  {
     public static Instance: PresentationView;
 
-    @observable groupedMembers: Doc[][] = [];
+    //Mapping from presentation ids to a list of doc that represent a group
     @observable groupMappings: Map<String, Doc[]> = new Map();
+    //mapping from docs to their rendered component
     @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
+    //variable that holds all the docs in the presentation
     @observable childrenDocs: Doc[] = [];
 
     //observable means render is re-called every time variable is changed
@@ -76,16 +85,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
     closePresentation = action(() => this.props.Document.width = 0);
     next = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
+        //asking to get document at current index
         let docAtCurrent = await this.getDocAtIndex(current);
         if (docAtCurrent === undefined) {
             return;
         }
+        //asking for it's presentation id
         let curPresId = StrCast(docAtCurrent.presentId);
         let nextSelected = current + 1;
 
+        //if curDoc is in a group, selection slides until last one, if not it's next one
         if (this.groupMappings.has(curPresId)) {
             let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
             nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1;
+
+            //end of grup so go beyond
             if (nextSelected === current) nextSelected = current + 1;
         }
 
@@ -94,16 +108,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
     }
     back = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
+        //requesting for the doc at current index
         let docAtCurrent = await this.getDocAtIndex(current);
         if (docAtCurrent === undefined) {
             return;
         }
+
+        //asking for its presentation id.
         let curPresId = StrCast(docAtCurrent.presentId);
         let prevSelected = current - 1;
 
+        //checking if this presentation id is mapped to a group, if so chosing the first element in group
         if (this.groupMappings.has(curPresId)) {
             let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
             prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent));
+            //end of grup so go beyond
             if (prevSelected === current) prevSelected = current - 1;
 
 
@@ -113,9 +132,15 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.gotoDocument(prevSelected);
     }
 
+    /**
+     * This is the method that checks for the actions that need to be performed
+     * after the document has been presented, which involves 3 button options:
+     * Hide Until Presented, Hide After Presented, Fade After Presented
+     */
     showAfterPresented = (index: number) => {
         this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
             let selectedButtons: boolean[] = presElem.selected;
+            //the order of cases is aligned based on priority
             if (selectedButtons[buttonIndex.HideTillPressed]) {
                 if (this.childrenDocs.indexOf(key) <= index) {
                     key.opacity = 1;
@@ -134,9 +159,17 @@ export class PresentationView extends React.Component<PresViewProps>  {
         });
     }
 
+    /**
+     * This is the method that checks for the actions that need to be performed
+     * before the document has been presented, which involves 3 button options:
+     * Hide Until Presented, Hide After Presented, Fade After Presented
+     */
     hideIfNotPresented = (index: number) => {
         this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
             let selectedButtons: boolean[] = presElem.selected;
+
+            //the order of cases is aligned based on priority
+
             if (selectedButtons[buttonIndex.HideAfter]) {
                 if (this.childrenDocs.indexOf(key) >= index) {
                     key.opacity = 1;
@@ -155,10 +188,16 @@ export class PresentationView extends React.Component<PresViewProps>  {
         });
     }
 
+    /**
+     * This method makes sure that cursor navigates to the element that
+     * has the option open and last in the group. If not in the group, and it has
+     * te option open, navigates to that element.
+     */
     navigateToElement = (curDoc: Doc) => {
         let docToJump: Doc = curDoc;
         let curDocPresId = StrCast(curDoc.presentId, null);
 
+        //checking if in group
         if (curDocPresId !== undefined) {
             if (this.groupMappings.has(curDocPresId)) {
                 let currentDocGroup = this.groupMappings.get(curDocPresId)!;
@@ -171,7 +210,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
             }
 
         }
+        //docToJump stayed same meaning, it was not in the group or was the last element in the group
         if (docToJump === curDoc) {
+            //checking if curDoc has navigation open
             if (this.presElementsMappings.get(curDoc)!.selected[buttonIndex.Navigate]) {
                 DocumentManager.Instance.jumpToDocument(curDoc);
             } else {
@@ -181,6 +222,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
         DocumentManager.Instance.jumpToDocument(docToJump);
     }
 
+    /**
+     * Async function that supposedly return the doc that is located at given index.
+     */
     getDocAtIndex = async (index: number) => {
         const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (!list) {
@@ -191,6 +235,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
 
         this.props.Document.selectedDoc = index;
+        //awaiting async call to finish to get Doc instance
         const doc = await list[index];
         return doc;
     }
-- 
cgit v1.2.3-70-g09d2


From cd483361f9b372dc79a001e3182fdac459e229ec Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Mon, 10 Jun 2019 13:34:42 -0400
Subject: Start/Reset and interaction while playin added

---
 .../views/presentationview/PresentationElement.tsx | 42 ++++++++++---
 .../views/presentationview/PresentationView.scss   |  4 +-
 .../views/presentationview/PresentationView.tsx    | 69 +++++++++++++++++++---
 3 files changed, 97 insertions(+), 18 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index dfe078a8e..f346940a2 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -28,6 +28,8 @@ interface PresentationElementProps {
     gotoDocument(index: number): void;
     allListElements: Doc[];
     groupMappings: Map<String, Doc[]>;
+    presStatus: boolean;
+
 
 }
 
@@ -158,11 +160,15 @@ export default class PresentationElement extends React.Component<PresentationEle
         const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideTillPressed]) {
             this.selectedButtons[buttonIndex.HideTillPressed] = false;
-            this.props.document.opacity = 1;
+            if (this.props.index >= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             this.selectedButtons[buttonIndex.HideTillPressed] = true;
-            if (this.props.index > current) {
-                this.props.document.opacity = 0;
+            if (this.props.presStatus) {
+                if (this.props.index > current) {
+                    this.props.document.opacity = 0;
+                }
             }
         }
     }
@@ -175,13 +181,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideAfter]) {
             this.selectedButtons[buttonIndex.HideAfter] = false;
+            if (this.props.index <= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             if (this.selectedButtons[buttonIndex.FadeAfter]) {
                 this.selectedButtons[buttonIndex.FadeAfter] = false;
             }
             this.selectedButtons[buttonIndex.HideAfter] = true;
+            if (this.props.presStatus) {
+                if (this.props.index < current) {
+                    this.props.document.opacity = 0;
+                }
+            }
         }
     }
 
@@ -193,13 +208,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.FadeAfter]) {
             this.selectedButtons[buttonIndex.FadeAfter] = false;
+            if (this.props.index <= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             if (this.selectedButtons[buttonIndex.HideAfter]) {
                 this.selectedButtons[buttonIndex.HideAfter] = false;
             }
             this.selectedButtons[buttonIndex.FadeAfter] = true;
+            if (this.props.presStatus) {
+                if (this.props.index < current) {
+                    this.props.document.opacity = 0.5;
+                }
+            }
         }
     }
 
@@ -246,12 +270,12 @@ export default class PresentationElement extends React.Component<PresentationEle
                 </strong>
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
-                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
-                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
-                <button 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"}><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={fileRegular} color={"gray"} /></button>
+                <button title="Hide Document After Presented" className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
+                <button title="Group With Up" className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 07c3e69fd..5f2b80474 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -68,8 +68,8 @@
 }
 
 .presentation-button {
-    margin-right: 12.5%;
-    margin-left: 12.5%;
+    margin-right: 2.5%;
+    margin-left: 2.5%;
     width: 25%;
 }
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index e987d12f6..93c084dfd 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -13,10 +13,12 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
+library.add(faPlay);
+library.add(faStop);
 
 export interface PresViewProps {
     Document: Doc;
@@ -28,6 +30,7 @@ interface PresListProps extends PresViewProps {
     groupMappings: Map<String, Doc[]>;
     presElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
+    presStatus: boolean;
 }
 
 
@@ -61,7 +64,7 @@ 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={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} />)}
             </div>
         );
     }
@@ -78,6 +81,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
     //variable that holds all the docs in the presentation
     @observable childrenDocs: Doc[] = [];
+    //variable to hold if presentation is started
+    @observable presStatus: boolean = false;
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -259,10 +264,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         this.props.Document.selectedDoc = index;
         const doc = await list[index];
-        this.navigateToElement(doc);
-        this.hideIfNotPresented(index);
-        this.showAfterPresented(index);
-
+        if (this.presStatus) {
+            this.navigateToElement(doc);
+            this.hideIfNotPresented(index);
+            this.showAfterPresented(index);
+        }
 
     }
 
@@ -293,6 +299,54 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.childrenDocs = docList;
     }
 
+    renderPlayPauseButton = () => {
+        if (this.presStatus) {
+            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
+        } else {
+            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
+        }
+    }
+
+    @action
+    startOrResetPres = () => {
+        if (this.presStatus) {
+            this.presStatus = false;
+            this.resetPresentation();
+        } else {
+            this.presStatus = true;
+            this.startPresentation();
+        }
+    }
+
+    @action
+    resetPresentation = () => {
+        this.groupMappings = new Map();
+        let selectedButtons: boolean[];
+        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+            selectedButtons = component.selected;
+            selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
+            doc.presentId = Utils.GenerateGuid();
+            doc.opacity = 1;
+        });
+        this.props.Document.selectedDoc = 0;
+
+    }
+
+    startPresentation = () => {
+        this.props.Document.selectedDoc = 0;
+        let selectedButtons: boolean[];
+        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+            selectedButtons = component.selected;
+            if (selectedButtons[buttonIndex.HideTillPressed]) {
+                if (this.childrenDocs.indexOf(doc) > 0) {
+                    doc.opacity = 0;
+                }
+
+            }
+        });
+
+    }
+
     render() {
         let titleStr = StrCast(this.props.Document.title);
         let width = NumCast(this.props.Document.width);
@@ -306,9 +360,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 </div>
                 <div className="presentation-buttons">
                     <button className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                    {this.renderPlayPauseButton()}
                     <button className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 6339ce36664b008c4274dc51fc2e7851b9dabf89 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Mon, 10 Jun 2019 14:03:33 -0400
Subject: Next And Back Fixed For groups

---
 .../views/presentationview/PresentationView.tsx    | 49 ++++++++++++++--------
 1 file changed, 32 insertions(+), 17 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 93c084dfd..8d1be6af1 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -91,18 +91,18 @@ export class PresentationView extends React.Component<PresViewProps>  {
     next = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
         //asking to get document at current index
-        let docAtCurrent = await this.getDocAtIndex(current);
-        if (docAtCurrent === undefined) {
+        let docAtCurrentNext = await this.getDocAtIndex(current + 1);
+        if (docAtCurrentNext === undefined) {
             return;
         }
         //asking for it's presentation id
-        let curPresId = StrCast(docAtCurrent.presentId);
+        let curNextPresId = StrCast(docAtCurrentNext.presentId);
         let nextSelected = current + 1;
 
         //if curDoc is in a group, selection slides until last one, if not it's next one
-        if (this.groupMappings.has(curPresId)) {
-            let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
-            nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrent) - 1;
+        if (this.groupMappings.has(curNextPresId)) {
+            let currentsArray = this.groupMappings.get(StrCast(docAtCurrentNext.presentId))!;
+            nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrentNext);
 
             //end of grup so go beyond
             if (nextSelected === current) nextSelected = current + 1;
@@ -126,7 +126,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         //checking if this presentation id is mapped to a group, if so chosing the first element in group
         if (this.groupMappings.has(curPresId)) {
             let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
-            prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent));
+            prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)) - 1;
             //end of grup so go beyond
             if (prevSelected === current) prevSelected = current - 1;
 
@@ -252,7 +252,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             value.splice(index, 1);
         }
     }
-
+    @action
     public gotoDocument = async (index: number) => {
         const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (!list) {
@@ -261,8 +261,13 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (index < 0 || index >= list.length) {
             return;
         }
-
         this.props.Document.selectedDoc = index;
+
+        if (!this.presStatus) {
+            this.presStatus = true;
+            this.startPresentation(index);
+        }
+
         const doc = await list[index];
         if (this.presStatus) {
             this.navigateToElement(doc);
@@ -301,9 +306,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     renderPlayPauseButton = () => {
         if (this.presStatus) {
-            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
+            return <button title="Reset Presentation" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
         } else {
-            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
+            return <button title="Start Presentation From Start" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
         }
     }
 
@@ -314,7 +319,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             this.resetPresentation();
         } else {
             this.presStatus = true;
-            this.startPresentation();
+            this.startPresentation(0);
         }
     }
 
@@ -332,17 +337,27 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
-    startPresentation = () => {
-        this.props.Document.selectedDoc = 0;
+    startPresentation = (startIndex: number) => {
         let selectedButtons: boolean[];
         this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
             selectedButtons = component.selected;
             if (selectedButtons[buttonIndex.HideTillPressed]) {
-                if (this.childrenDocs.indexOf(doc) > 0) {
+                if (this.childrenDocs.indexOf(doc) > startIndex) {
                     doc.opacity = 0;
                 }
 
             }
+            if (selectedButtons[buttonIndex.HideAfter]) {
+                if (this.childrenDocs.indexOf(doc) < startIndex) {
+                    doc.opacity = 0;
+                }
+            }
+            if (selectedButtons[buttonIndex.FadeAfter]) {
+                if (this.childrenDocs.indexOf(doc) < startIndex) {
+                    doc.opacity = 0.5;
+                }
+            }
+
         });
 
     }
@@ -359,9 +374,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button className='presentation-icon' onClick={this.closePresentation}>X</button>
                 </div>
                 <div className="presentation-buttons">
-                    <button className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                    <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
                     {this.renderPlayPauseButton()}
-                    <button className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                    <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
                 <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} />
             </div>
-- 
cgit v1.2.3-70-g09d2


From caf61bef345db0addd37c03bf2d0b0d2dd724c47 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Mon, 10 Jun 2019 14:17:27 -0400
Subject: Edge Case For Starting Presentation Fixed

Navigation happens when u start document
---
 src/client/views/presentationview/PresentationView.tsx | 1 +
 1 file changed, 1 insertion(+)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 8d1be6af1..40e6885f0 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -320,6 +320,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         } else {
             this.presStatus = true;
             this.startPresentation(0);
+            this.gotoDocument(0);
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From f9b472e6d69fcb99b8139cfcd6c36a8277962251 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Tue, 11 Jun 2019 17:52:18 -0400
Subject: Saving PresStatus Not Done, THere are bugs

---
 .../views/presentationview/PresentationElement.tsx | 41 +++++++++++++++-
 .../views/presentationview/PresentationView.tsx    | 54 +++++++++++++++++++---
 2 files changed, 86 insertions(+), 9 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index f346940a2..7928722f2 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import React = require("react");
-import { Doc } from "../../../new_fields/Doc";
-import { NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { NumCast, BoolCast, StrCast, Cast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { observable, action, computed } from "mobx";
 import "./PresentationView.scss";
@@ -10,6 +10,8 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
+import { List } from "../../../new_fields/List";
+import { listSpec } from "../../../new_fields/Schema";
 
 
 
@@ -29,6 +31,8 @@ interface PresentationElementProps {
     allListElements: Doc[];
     groupMappings: Map<String, Doc[]>;
     presStatus: boolean;
+    presButtonBackUp: Doc;
+    presGroupBackUp: Doc;
 
 
 }
@@ -60,6 +64,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     get selected() {
         return this.selectedButtons;
     }
+    @action
+    componentDidMount() {
+        // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List<List<boolean>>;
+        let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
+        if (castedList.length !== 0) {
+            // this.selectedButtons = castedList;
+            let selectedButtonOfDoc = Cast(castedList[this.props.index].selectedButtons, listSpec("boolean"), null);
+            if (selectedButtonOfDoc !== undefined) {
+                this.selectedButtons = selectedButtonOfDoc;
+            }
+            console.log("Entered!!");
+
+        }
+        console.log("Mounted!!");
+        //this.props.presButtonBackUp.elIndex = this.props.index;
+    }
 
     /**
      * The function that is called to group docs together. It tries to group a doc
@@ -171,6 +191,16 @@ export default class PresentationElement extends React.Component<PresentationEle
                 }
             }
         }
+        this.autoSaveButtonChange(buttonIndex.HideTillPressed);
+    }
+
+    @action
+    autoSaveButtonChange = (index: buttonIndex) => {
+        // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List<List<boolean>>;
+        let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
+        castedList[this.props.index].selectedButtons = new List(this.selectedButtons);
+
+        //this.props.mainDocument.presButtonBackUp = this.props.presButtonBackUp;
     }
 
     /**
@@ -198,6 +228,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                 }
             }
         }
+        this.autoSaveButtonChange(buttonIndex.HideAfter);
+
     }
 
     /**
@@ -225,6 +257,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                 }
             }
         }
+        this.autoSaveButtonChange(buttonIndex.FadeAfter);
+
     }
 
     /**
@@ -239,6 +273,9 @@ export default class PresentationElement extends React.Component<PresentationEle
         } else {
             this.selectedButtons[buttonIndex.Navigate] = true;
         }
+
+        this.autoSaveButtonChange(buttonIndex.Navigate);
+
     }
 
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 40e6885f0..8b0b919fd 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -31,6 +31,8 @@ interface PresListProps extends PresViewProps {
     presElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
     presStatus: boolean;
+    presButtonBackUp: Doc;
+    presGroupBackUp: Doc;
 }
 
 
@@ -57,14 +59,30 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
+    @action
+    initializeSelectedButtonDocs = (docList: Doc[]) => {
+
+        let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
+        if (castedList.length === 0) {
+            let newDocArray: List<Doc> = new List();
+            newDocArray.push(new Doc());
+            this.props.presButtonBackUp.selectedButtonDocs = newDocArray;
+        } else {
+            castedList.push(new Doc());
+        }
+
+
+    }
+
     render() {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupIds(children);
         this.props.setChildrenDocs(children);
+        this.initializeSelectedButtonDocs(children);
         return (
 
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} 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>
         );
     }
@@ -83,6 +101,28 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable childrenDocs: Doc[] = [];
     //variable to hold if presentation is started
     @observable presStatus: boolean = false;
+    //back-up so that presentation stays the way it's when refreshed
+    @observable presGroupBackUp: Doc = new Doc();
+    @observable presButtonBackUp: Doc = new Doc();
+
+    @action
+    componentDidMount() {
+        let castedGroupBackUp: Doc = Cast(this.props.Document.presGroupBackUp, Doc, new Doc());
+        let castedButtonBackUp: Doc = Cast(this.props.Document.presButtonBackUp, Doc, new Doc());
+        // if (castedButtonBackUp === undefined) {
+        //     this.props.Document.presButtonBackUp = new Doc();
+        // } else {
+        this.presButtonBackUp = castedButtonBackUp;
+        // }
+        // if (castedGroupBackUp === undefined) {
+        //     this.props.Document.presGroupBackUp = new Doc();
+        // } else {
+        this.presGroupBackUp = castedGroupBackUp;
+        // 
+
+        // }
+
+    }
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -326,12 +366,12 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     @action
     resetPresentation = () => {
-        this.groupMappings = new Map();
-        let selectedButtons: boolean[];
+        //this.groupMappings = new Map();
+        //let selectedButtons: boolean[];
         this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
-            selectedButtons = component.selected;
-            selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
-            doc.presentId = Utils.GenerateGuid();
+            //selectedButtons = component.selected;
+            //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
+            //doc.presentId = Utils.GenerateGuid();
             doc.opacity = 1;
         });
         this.props.Document.selectedDoc = 0;
@@ -379,7 +419,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     {this.renderPlayPauseButton()}
                     <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} presButtonBackUp={this.presButtonBackUp} presGroupBackUp={this.presGroupBackUp} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 9a93306ba382018ebf3c686117bd4301beda61ef Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Wed, 12 Jun 2019 15:33:51 -0400
Subject: BUtton status and pres status saved on refresh, only groups left

---
 src/client/views/MainView.tsx                      |  7 ++-
 .../views/presentationview/PresentationElement.tsx | 42 ++++++++++------
 .../views/presentationview/PresentationView.tsx    | 57 ++++++++++++++++------
 3 files changed, 73 insertions(+), 33 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c98e6e8fb..3d772916e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -200,12 +200,15 @@ export class MainView extends React.Component {
                 whenActiveChanged={emptyFunction}
                 bringToFront={emptyFunction}
                 ContainingCollectionView={undefined} />;
-        const pres = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
+        let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
+        console.log("GETTING mainContent()");
+        console.log(castRes instanceof Promise);
+        console.log(castRes);
         return <Measure offset onResize={this.onResize}>
             {({ measureRef }) =>
                 <div ref={measureRef} id="mainContent-div">
                     {content}
-                    {pres ? <PresentationView Document={pres} key="presentation" /> : null}
+                    {castRes ? <PresentationView Document={castRes} key="presentation" /> : null}
                 </div>
             }
         </Measure>;
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 7928722f2..9fe69c2e3 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import React = require("react");
-import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { NumCast, BoolCast, StrCast, Cast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
-import { observable, action, computed } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
 import "./PresentationView.scss";
 import { Utils } from "../../../Utils";
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -64,21 +64,33 @@ export default class PresentationElement extends React.Component<PresentationEle
     get selected() {
         return this.selectedButtons;
     }
-    @action
-    componentDidMount() {
+
+    async componentDidMount() {
         // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List<List<boolean>>;
-        let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
-        if (castedList.length !== 0) {
-            // this.selectedButtons = castedList;
-            let selectedButtonOfDoc = Cast(castedList[this.props.index].selectedButtons, listSpec("boolean"), null);
+        let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
+        if (!castedList) {
+            this.props.presButtonBackUp.selectedButtonDocs = castedList = new List<Doc>();
+        }
+        // let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
+
+        console.log("Mounted!!");
+        console.log("CastedList Len: ", castedList.length);
+        console.log("Index of doc: ", this.props.index);
+
+        if (castedList.length <= this.props.index) {
+            console.log("Entered here by index : ", this.props.index);
+            castedList.push(new Doc());
+        } else {
+            let curDoc: Doc = await castedList[this.props.index];
+            let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
+            console.log("Entered First Place");
             if (selectedButtonOfDoc !== undefined) {
-                this.selectedButtons = selectedButtonOfDoc;
+                runInAction(() => this.selectedButtons = selectedButtonOfDoc);
+                console.log("Entered Second Place");
             }
-            console.log("Entered!!");
-
         }
-        console.log("Mounted!!");
-        //this.props.presButtonBackUp.elIndex = this.props.index;
+
+
     }
 
     /**
@@ -195,9 +207,9 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     @action
-    autoSaveButtonChange = (index: buttonIndex) => {
+    autoSaveButtonChange = async (index: buttonIndex) => {
         // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List<List<boolean>>;
-        let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
+        let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!;
         castedList[this.props.index].selectedButtons = new List(this.selectedButtons);
 
         //this.props.mainDocument.presButtonBackUp = this.props.presButtonBackUp;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 8b0b919fd..b872181ae 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -78,7 +78,7 @@ class PresentationViewList extends React.Component<PresListProps> {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupIds(children);
         this.props.setChildrenDocs(children);
-        this.initializeSelectedButtonDocs(children);
+        //this.initializeSelectedButtonDocs(children);
         return (
 
             <div className="presentationView-listCont">
@@ -105,23 +105,47 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presGroupBackUp: Doc = new Doc();
     @observable presButtonBackUp: Doc = new Doc();
 
-    @action
+
+
     componentDidMount() {
-        let castedGroupBackUp: Doc = Cast(this.props.Document.presGroupBackUp, Doc, new Doc());
-        let castedButtonBackUp: Doc = Cast(this.props.Document.presButtonBackUp, Doc, new Doc());
-        // if (castedButtonBackUp === undefined) {
-        //     this.props.Document.presButtonBackUp = new Doc();
-        // } else {
-        this.presButtonBackUp = castedButtonBackUp;
-        // }
-        // if (castedGroupBackUp === undefined) {
-        //     this.props.Document.presGroupBackUp = new Doc();
-        // } else {
-        this.presGroupBackUp = castedGroupBackUp;
-        // 
-
-        // }
+        // let newDoc = new Doc();
+        // let newDoc2 = new Doc();
+        let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc);
+        let castedButtonBackUp = Cast(this.props.Document.presButtonBackUp, Doc);
+        if (castedGroupBackUp instanceof Promise) {
+            castedGroupBackUp.then(doc => {
+                let toAssign = doc ? doc : new Doc();
+                this.props.Document.presGroupBackUp = toAssign;
+                runInAction(() => this.presGroupBackUp = toAssign);
+            });
+        } else {
+            runInAction(() => {
+                let toAssign = new Doc();
+                this.presGroupBackUp = toAssign;
+                this.props.Document.presGroupBackUp = toAssign;
+
+            });
+
+        }
+
+        if (castedButtonBackUp instanceof Promise) {
+            castedButtonBackUp.then(doc => {
+                let toAssign = doc ? doc : new Doc();
+                this.props.Document.presButtonBackUp = toAssign;
+                runInAction(() => this.presButtonBackUp = toAssign);
+            });
+
+        } else {
+            runInAction(() => {
+                let toAssign = new Doc();
+                this.presButtonBackUp = toAssign;
+                this.props.Document.presButtonBackUp = toAssign;
+            });
+
+        }
 
+        let presStatusBackUp = BoolCast(this.props.Document.presStatus, null);
+        runInAction(() => this.presStatus = presStatusBackUp);
     }
 
     //observable means render is re-called every time variable is changed
@@ -362,6 +386,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             this.startPresentation(0);
             this.gotoDocument(0);
         }
+        this.props.Document.presStatus = this.presStatus;
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 5c60cd95b3f766a18dee95ead388dd9f9603d138 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Wed, 12 Jun 2019 18:49:37 -0400
Subject: Groups saving on refresh done

---
 .../views/presentationview/PresentationElement.tsx | 25 ++++++++++-----
 .../views/presentationview/PresentationView.tsx    | 36 ++++++++++++++++++++--
 2 files changed, 50 insertions(+), 11 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 9fe69c2e3..53e6f903b 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -71,22 +71,14 @@ export default class PresentationElement extends React.Component<PresentationEle
         if (!castedList) {
             this.props.presButtonBackUp.selectedButtonDocs = castedList = new List<Doc>();
         }
-        // let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
-
-        console.log("Mounted!!");
-        console.log("CastedList Len: ", castedList.length);
-        console.log("Index of doc: ", this.props.index);
 
         if (castedList.length <= this.props.index) {
-            console.log("Entered here by index : ", this.props.index);
             castedList.push(new Doc());
         } else {
             let curDoc: Doc = await castedList[this.props.index];
             let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-            console.log("Entered First Place");
             if (selectedButtonOfDoc !== undefined) {
                 runInAction(() => this.selectedButtons = selectedButtonOfDoc);
-                console.log("Entered Second Place");
             }
         }
 
@@ -167,6 +159,21 @@ export default class PresentationElement extends React.Component<PresentationEle
             }
 
         }
+        this.autoSaveGroupChanges();
+
+    }
+
+
+    @action
+    autoSaveGroupChanges = () => {
+        let castedList: List<Doc> = new List<Doc>();
+        this.props.presGroupBackUp.groupDocs = castedList;
+        this.props.groupMappings.forEach((docArray: Doc[], id: String) => {
+            let newGroupDoc = new Doc();
+            castedList.push(newGroupDoc);
+            newGroupDoc.presentIdStore = id.toString();
+            newGroupDoc.grouping = new List(docArray);
+        });
 
     }
 
@@ -180,6 +187,8 @@ export default class PresentationElement extends React.Component<PresentationEle
         } else {
             this.selectedButtons[buttonIndex.Group] = true;
         }
+        this.autoSaveButtonChange(buttonIndex.Group);
+
     }
 
     /**
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index b872181ae..0ba14e8ab 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -49,11 +49,22 @@ class PresentationViewList extends React.Component<PresListProps> {
      * docs that are in the group, so that mapping won't be disrupted.
      */
     @action
-    initializeGroupIds = (docList: Doc[]) => {
-        docList.forEach((doc: Doc, index: number) => {
+    initializeGroupIds = async (docList: Doc[]) => {
+        docList.forEach(async (doc: Doc, index: number) => {
             let docGuid = StrCast(doc.presentId, null);
             //checking if part of group
-            if (!this.props.groupMappings.has(docGuid)) {
+            let storedGuids: string[] = [];
+            let castedGroupDocs = await DocListCastAsync(this.props.presGroupBackUp.groupDocs);
+            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();
             }
         });
@@ -117,6 +128,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 let toAssign = doc ? doc : new Doc();
                 this.props.Document.presGroupBackUp = toAssign;
                 runInAction(() => this.presGroupBackUp = toAssign);
+                if (doc) {
+                    if (toAssign[Id] === doc[Id]) {
+                        this.retrieveGroupMappings();
+                    }
+                }
             });
         } else {
             runInAction(() => {
@@ -148,6 +164,20 @@ export class PresentationView extends React.Component<PresViewProps>  {
         runInAction(() => this.presStatus = presStatusBackUp);
     }
 
+    retrieveGroupMappings = async () => {
+        //runInAction(() => this.groupMappings = new Map());
+        let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
+        if (castedGroupDocs !== undefined) {
+            castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
+                let castedGrouping = await DocListCastAsync(groupDoc.grouping);
+                let castedKey = StrCast(groupDoc.presentIdStore, null);
+                if (castedGrouping !== undefined && castedKey !== undefined) {
+                    this.groupMappings.set(castedKey, castedGrouping);
+                }
+            });
+        }
+    }
+
     //observable means render is re-called every time variable is changed
     @observable
     collapsed: boolean = false;
-- 
cgit v1.2.3-70-g09d2


From 7de0db8000aab06ccc8f973a50734cfdee93a388 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Thu, 13 Jun 2019 11:43:21 -0400
Subject: Documentation for saving and loading presentation state

---
 .../views/presentationview/PresentationElement.tsx | 16 ++++++++---
 .../views/presentationview/PresentationView.tsx    | 31 +++++++++-------------
 2 files changed, 24 insertions(+), 23 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 53e6f903b..c58570798 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -66,14 +66,15 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     async componentDidMount() {
-        // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List<List<boolean>>;
+        //get the list that stores docs that keep track of buttons
         let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
         if (!castedList) {
             this.props.presButtonBackUp.selectedButtonDocs = castedList = new List<Doc>();
         }
-
+        //if this is the first time this doc mounts, push a doc for it to store
         if (castedList.length <= this.props.index) {
             castedList.push(new Doc());
+            //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);
@@ -164,14 +165,20 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
 
+    /**
+     * This function is called at the end of each group update to update the group updates.
+     */
     @action
     autoSaveGroupChanges = () => {
         let castedList: List<Doc> = new List<Doc>();
         this.props.presGroupBackUp.groupDocs = castedList;
         this.props.groupMappings.forEach((docArray: Doc[], id: String) => {
+            //create a new doc for each group
             let newGroupDoc = new Doc();
             castedList.push(newGroupDoc);
+            //store the id of the group in the doc
             newGroupDoc.presentIdStore = id.toString();
+            //store the doc array which represents the group in the doc
             newGroupDoc.grouping = new List(docArray);
         });
 
@@ -215,13 +222,14 @@ export default class PresentationElement extends React.Component<PresentationEle
         this.autoSaveButtonChange(buttonIndex.HideTillPressed);
     }
 
+    /**
+     * This function is called to get the updates for the changed buttons.
+     */
     @action
     autoSaveButtonChange = async (index: buttonIndex) => {
-        // let castedList = Cast(this.props.presButtonBackUp.selectedButtons, listSpec(Doc), null) as any as List<List<boolean>>;
         let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!;
         castedList[this.props.index].selectedButtons = new List(this.selectedButtons);
 
-        //this.props.mainDocument.presButtonBackUp = this.props.presButtonBackUp;
     }
 
     /**
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 0ba14e8ab..d3365725b 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -55,6 +55,7 @@ class PresentationViewList extends React.Component<PresListProps> {
             //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);
@@ -70,26 +71,10 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
-    @action
-    initializeSelectedButtonDocs = (docList: Doc[]) => {
-
-        let castedList = DocListCast(this.props.presButtonBackUp.selectedButtonDocs);
-        if (castedList.length === 0) {
-            let newDocArray: List<Doc> = new List();
-            newDocArray.push(new Doc());
-            this.props.presButtonBackUp.selectedButtonDocs = newDocArray;
-        } else {
-            castedList.push(new Doc());
-        }
-
-
-    }
-
     render() {
         const children = DocListCast(this.props.Document.data);
         this.initializeGroupIds(children);
         this.props.setChildrenDocs(children);
-        //this.initializeSelectedButtonDocs(children);
         return (
 
             <div className="presentationView-listCont">
@@ -119,10 +104,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
 
     componentDidMount() {
-        // let newDoc = new Doc();
-        // let newDoc2 = new Doc();
+        //getting both backUp documents
         let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc);
         let castedButtonBackUp = Cast(this.props.Document.presButtonBackUp, Doc);
+        //if instantiated before 
         if (castedGroupBackUp instanceof Promise) {
             castedGroupBackUp.then(doc => {
                 let toAssign = doc ? doc : new Doc();
@@ -134,6 +119,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     }
                 }
             });
+            //if never instantiated a store doc yet
         } else {
             runInAction(() => {
                 let toAssign = new Doc();
@@ -143,6 +129,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             });
 
         }
+        //if instantiated before 
 
         if (castedButtonBackUp instanceof Promise) {
             castedButtonBackUp.then(doc => {
@@ -151,6 +138,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 runInAction(() => this.presButtonBackUp = toAssign);
             });
 
+            //if never instantiated a store doc yet
         } else {
             runInAction(() => {
                 let toAssign = new Doc();
@@ -160,12 +148,17 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         }
 
+
+        //storing the presentation status,ie. whether it was stopped or playing
         let presStatusBackUp = BoolCast(this.props.Document.presStatus, null);
         runInAction(() => this.presStatus = presStatusBackUp);
     }
 
+    /**
+     * This is the function that is called to retrieve the groups that have been stored and
+     * push them to the groupMappings.
+     */
     retrieveGroupMappings = async () => {
-        //runInAction(() => this.groupMappings = new Map());
         let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
         if (castedGroupDocs !== undefined) {
             castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
-- 
cgit v1.2.3-70-g09d2


From 218c8b6476621ef0ffe151014f77bb1d506705a3 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Fri, 14 Jun 2019 18:24:01 -0400
Subject: Zooming added to presentation, and done

---
 src/client/util/DocumentManager.ts                 | 31 +++++++-
 src/client/util/TooltipTextMenu.tsx                |  2 +-
 src/client/views/MainOverlayTextBox.tsx            |  2 +-
 src/client/views/MainView.tsx                      |  5 +-
 src/client/views/SearchItem.tsx                    |  2 +-
 .../views/collections/CollectionDockingView.tsx    |  6 +-
 .../views/collections/CollectionSchemaView.tsx     |  4 +-
 .../views/collections/CollectionStackingView.tsx   |  2 +
 .../views/collections/CollectionTreeView.tsx       |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 31 +++++---
 src/client/views/nodes/DocumentView.tsx            | 10 ++-
 src/client/views/nodes/FieldView.tsx               |  5 +-
 .../views/presentationview/PresentationElement.tsx | 31 +++++++-
 .../views/presentationview/PresentationView.tsx    | 93 +++++++++++++++++++---
 14 files changed, 184 insertions(+), 42 deletions(-)

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

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 65c4b9e4b..a613625cb 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,4 +1,4 @@
-import { computed, observable } from 'mobx';
+import { computed, observable, action } from 'mobx';
 import { DocumentView } from '../views/nodes/DocumentView';
 import { Doc, DocListCast, Opt } from '../../new_fields/Doc';
 import { FieldValue, Cast, NumCast, BoolCast } from '../../new_fields/Types';
@@ -115,7 +115,7 @@ export class DocumentManager {
     }
 
     @undoBatch
-    public jumpToDocument = async (docDelegate: Doc, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void, linkPage?: number): Promise<void> => {
+    public jumpToDocument = async (docDelegate: Doc, willZoom: boolean, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void, linkPage?: number): Promise<void> => {
         let doc = Doc.GetProto(docDelegate);
         const contextDoc = await Cast(doc.annotationOn, Doc);
         if (contextDoc) {
@@ -128,7 +128,7 @@ export class DocumentManager {
         if (!forceDockFunc && (docView = DocumentManager.Instance.getDocumentView(doc))) {
             docView.props.Document.libraryBrush = true;
             if (linkPage !== undefined) docView.props.Document.curPage = linkPage;
-            docView.props.focus(docView.props.Document);
+            docView.props.focus(docView.props.Document, willZoom);
         } else {
             if (!contextDoc) {
                 const actualDoc = Doc.MakeAlias(docDelegate);
@@ -140,11 +140,34 @@ export class DocumentManager {
                 docDelegate.libraryBrush = true;
                 if (!forceDockFunc && (contextView = DocumentManager.Instance.getDocumentView(contextDoc))) {
                     contextDoc.panTransformType = "Ease";
-                    contextView.props.focus(contextDoc);
+                    contextView.props.focus(contextDoc, willZoom);
                 } else {
                     (dockFunc || CollectionDockingView.Instance.AddRightSplit)(contextDoc);
                 }
             }
         }
     }
+
+    @action
+    zoomIntoScale = (docDelegate: Doc, scale: number) => {
+        let doc = Doc.GetProto(docDelegate);
+
+        let docView: DocumentView | null;
+        docView = DocumentManager.Instance.getDocumentView(doc);
+        if (docView) {
+            docView.props.zoomToScale(scale);
+        }
+    }
+
+    getScaleOfDocView = (docDelegate: Doc) => {
+        let doc = Doc.GetProto(docDelegate);
+
+        let docView: DocumentView | null;
+        docView = DocumentManager.Instance.getDocumentView(doc);
+        if (docView) {
+            return docView.props.getScale();
+        } else {
+            return 1;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index f517f757a..34785446b 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -192,7 +192,7 @@ export class TooltipTextMenu {
                         DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
                             if (f instanceof Doc) {
                                 if (DocumentManager.Instance.getDocumentView(f)) {
-                                    DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
+                                    DocumentManager.Instance.getDocumentView(f)!.props.focus(f, false);
                                 }
                                 else if (CollectionDockingView.Instance) CollectionDockingView.Instance.AddRightSplit(f);
                             }
diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 24327b995..d1224febe 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -102,6 +102,6 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
                 </div>
             </ div>;
         }
-        else return (null); Z
+        else return (null);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 3d772916e..f78879efe 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -199,7 +199,10 @@ export class MainView extends React.Component {
                 parentActive={returnTrue}
                 whenActiveChanged={emptyFunction}
                 bringToFront={emptyFunction}
-                ContainingCollectionView={undefined} />;
+                ContainingCollectionView={undefined}
+                zoomToScale={emptyFunction}
+                getScale={returnOne}
+            />;
         let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
         console.log("GETTING mainContent()");
         console.log(castRes instanceof Promise);
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 01c7316d6..101d893de 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -24,7 +24,7 @@ library.add(faFilm);
 export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
-        DocumentManager.Instance.jumpToDocument(this.props.doc);
+        DocumentManager.Instance.jumpToDocument(this.props.doc, false);
     }
 
     //needs help
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index dcc1bd95d..81f574a6c 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -9,7 +9,7 @@ import { Doc, Field, Opt, DocListCast } from "../../../new_fields/Doc";
 import { FieldId } from "../../../new_fields/RefField";
 import { listSpec } from "../../../new_fields/Schema";
 import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
-import { emptyFunction, returnTrue, Utils } from "../../../Utils";
+import { emptyFunction, returnTrue, Utils, returnOne } from "../../../Utils";
 import { DocServer } from "../../DocServer";
 import { DragLinksAsDocuments, DragManager } from "../../util/DragManager";
 import { Transform } from '../../util/Transform';
@@ -483,7 +483,9 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     whenActiveChanged={emptyFunction}
                     focus={emptyFunction}
                     addDocTab={this.addDocTab}
-                    ContainingCollectionView={undefined} />
+                    ContainingCollectionView={undefined}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne} />
             </div >);
     }
 
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 11d71d023..715faafd0 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
 import { MAX_ROW_HEIGHT } from '../../views/globalCssVariables.scss';
 import "react-table/react-table.css";
-import { emptyFunction, returnFalse, returnZero } from "../../../Utils";
+import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils";
 import { SetupDrag } from "../../util/DragManager";
 import { CompileScript } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
@@ -451,6 +451,8 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
                         bringToFront={emptyFunction}
                         addDocTab={this.props.addDocTab}
                         collapseToPoint={this.collapseToPoint}
+                        zoomToScale={emptyFunction}
+                        getScale={returnOne}
                     />
                 </div>)}
             {input}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index da7ea50c6..e1453c658 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -146,6 +146,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     bringToFront={emptyFunction}
                     whenActiveChanged={this.props.whenActiveChanged}
                     collapseToPoint={this.collapseToPoint}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}
                 />
             </div>);
         })
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 2814c0502..c80bd8fce 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -147,7 +147,7 @@ class TreeView extends React.Component<TreeViewProps> {
                 ContextMenu.Instance.addItem({ description: "Open Tab", event: () => this.props.addDocTab(this.props.document, "inTab"), icon: "folder" });
                 ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, "onRight"), icon: "caret-square-right" });
                 if (DocumentManager.Instance.getDocumentViews(this.props.document).length) {
-                    ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) });
+                    ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document, false)) });
                 }
                 ContextMenu.Instance.addItem({ description: "Delete Item", event: undoBatch(() => this.props.deleteDoc(this.props.document)) });
             } else {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 5d26cb0c2..419d95b5f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -244,7 +244,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         doc.zIndex = docs.length + 1;
     }
 
-    focusDocument = (doc: Doc) => {
+    focusDocument = (doc: Doc, willZoom: boolean) => {
         const panX = this.Document.panX;
         const panY = this.Document.panY;
         const id = this.Document[Id];
@@ -271,9 +271,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         newState.initializers[id] = { panX: newPanX, panY: newPanY };
         HistoryUtil.pushState(newState);
         this.setPan(newPanX, newPanY);
+
         this.props.Document.panTransformType = "Ease";
         this.props.focus(this.props.Document);
-        //this.setScaleToZoom(doc);
+        if (willZoom) {
+            this.setScaleToZoom(doc);
+        }
 
     }
 
@@ -281,21 +284,29 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         let p = this.props;
         let PanelHeight = p.PanelHeight();
         let panelWidth = p.PanelWidth();
-        // let heightDif: number = PanelHeight - NumCast(doc.height);
-        // let widthDif: number = panelWidth - NumCast(doc.width);
+
         let docHeight = NumCast(doc.height);
         let docWidth = NumCast(doc.width);
-        let targetHeight = 0.8 * PanelHeight;
-        let targetWidth = 0.8 * panelWidth;
+        let targetHeight = 0.5 * PanelHeight;
+        let targetWidth = 0.5 * panelWidth;
 
         let maxScaleX: number = targetWidth / docWidth;
         let maxScaleY: number = targetHeight / docHeight;
-        // let maxScaleX: number = NumCast(doc.width) / (panelWidth - 10);
-        // let maxScaleY: number = NumCast(doc.height) / (PanelHeight - 10);
         let maxApplicableScale = Math.min(maxScaleX, maxScaleY);
         this.Document.scale = maxApplicableScale;
     }
 
+    zoomToScale = (scale: number) => {
+        this.Document.scale = scale;
+    }
+
+    getScale = () => {
+        if (this.Document.scale) {
+            return this.Document.scale;
+        }
+        return 1;
+    }
+
 
     getDocumentViewProps(document: Doc): DocumentViewProps {
         return {
@@ -315,6 +326,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             whenActiveChanged: this.props.whenActiveChanged,
             bringToFront: this.bringToFront,
             addDocTab: this.props.addDocTab,
+            zoomToScale: this.zoomToScale,
+            getScale: this.getScale
         };
     }
 
@@ -346,7 +359,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     private childViews = () => [
         <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />,
         ...this.views
-    ];
+    ]
     render() {
         const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
         const easing = () => this.props.Document.panTransformType === "Ease";
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 449fa76a7..fb7657b68 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -69,13 +69,15 @@ export interface DocumentViewProps {
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
-    focus: (doc: Doc) => void;
+    focus: (doc: Doc, willZoom: boolean) => void;
     selectOnLoad: boolean;
     parentActive: () => boolean;
     whenActiveChanged: (isActive: boolean) => void;
     bringToFront: (doc: Doc) => void;
     addDocTab: (doc: Doc, where: string) => void;
     collapseToPoint?: (scrpt: number[], expandedDocs: Doc[] | undefined) => void;
+    zoomToScale: (scale: number) => void;
+    getScale: () => number;
 }
 
 const schema = createSchema({
@@ -302,8 +304,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._lastTap = Date.now();
     }
 
-    deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); }
-    fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }), "onRight") };
+    deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); };
+    fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }), "onRight"); };
     makeBtnClicked = (): void => {
         let doc = Doc.GetProto(this.props.Document);
         doc.isButton = !BoolCast(doc.isButton, false);
@@ -422,7 +424,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 this.props.addDocTab && this.props.addDocTab(Docs.SchemaDocument(["title"], aliases, {}), "onRight");
             }, icon: "search"
         });
-        cm.addItem({ description: "Center View", event: () => this.props.focus(this.props.Document), icon: "crosshairs" });
+        cm.addItem({ description: "Center View", event: () => this.props.focus(this.props.Document, false), icon: "crosshairs" });
         cm.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])), icon: "link" });
         cm.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]), icon: "fingerprint" });
         cm.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" });
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 7b642b299..3047d55a3 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -103,7 +103,10 @@ export class FieldView extends React.Component<FieldViewProps> {
                     ContainingCollectionView={this.props.ContainingCollectionView}
                     parentActive={this.props.active}
                     whenActiveChanged={this.props.whenActiveChanged}
-                    bringToFront={emptyFunction} />
+                    bringToFront={emptyFunction}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}
+                />
             );
         }
         else if (field instanceof List) {
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index c58570798..00dc07921 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -12,6 +12,7 @@ import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fort
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
 import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
+import { DocumentManager } from "../../util/DocumentManager";
 
 
 
@@ -27,7 +28,7 @@ interface PresentationElementProps {
     document: Doc;
     index: number;
     deleteDocument(index: number): void;
-    gotoDocument(index: number): void;
+    gotoDocument(index: number, fromDoc: number): Promise<void>;
     allListElements: Doc[];
     groupMappings: Map<String, Doc[]>;
     presStatus: boolean;
@@ -300,6 +301,9 @@ export default class PresentationElement extends React.Component<PresentationEle
             this.selectedButtons[buttonIndex.Navigate] = false;
 
         } else {
+            if (this.selectedButtons[buttonIndex.Show]) {
+                this.selectedButtons[buttonIndex.Show] = false;
+            }
             this.selectedButtons[buttonIndex.Navigate] = true;
         }
 
@@ -307,6 +311,27 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    /**
+    * The function that is called on click to turn zoom option of docs on/off.
+    */
+    @action
+    onZoomDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.selectedButtons[buttonIndex.Show]) {
+            this.selectedButtons[buttonIndex.Show] = false;
+            this.props.document.viewScale = 1;
+
+        } else {
+            if (this.selectedButtons[buttonIndex.Navigate]) {
+                this.selectedButtons[buttonIndex.Navigate] = false;
+            }
+            this.selectedButtons[buttonIndex.Show] = true;
+        }
+
+        this.autoSaveButtonChange(buttonIndex.Show);
+
+    }
+
 
     render() {
         let p = this.props;
@@ -330,13 +355,13 @@ export default class PresentationElement extends React.Component<PresentationEle
                     outlineStyle: "dashed",
                     outlineWidth: BoolCast(p.document.libraryBrush, false) || BoolCast(p.document.protoBrush, false) ? `1px` : "0px",
                 }}
-                onClick={e => { p.gotoDocument(p.index); e.stopPropagation(); }}>
+                onClick={e => { p.gotoDocument(p.index, NumCast(this.props.mainDocument.selectedDoc)); e.stopPropagation(); }}>
                 <strong className="presentationView-name">
                     {`${p.index + 1}. ${title}`}
                 </strong>
                 <button className="presentation-icon" 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"}><FontAwesomeIcon icon={"search"} /></button>
+                <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={fileRegular} color={"gray"} /></button>
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index d3365725b..6cf5fad7e 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -26,7 +26,7 @@ export interface PresViewProps {
 
 interface PresListProps extends PresViewProps {
     deleteDocument(index: number): void;
-    gotoDocument(index: number): void;
+    gotoDocument(index: number, fromDoc: number): Promise<void>;
     groupMappings: Map<String, Doc[]>;
     presElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
@@ -71,9 +71,24 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
+    /**
+     * 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.Document.data);
         this.initializeGroupIds(children);
+        this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
         return (
 
@@ -102,7 +117,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presButtonBackUp: Doc = new Doc();
 
 
-
     componentDidMount() {
         //getting both backUp documents
         let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc);
@@ -195,7 +209,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             if (nextSelected === current) nextSelected = current + 1;
         }
 
-        this.gotoDocument(nextSelected);
+        this.gotoDocument(nextSelected, current);
 
     }
     back = async () => {
@@ -209,6 +223,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         //asking for its presentation id.
         let curPresId = StrCast(docAtCurrent.presentId);
         let prevSelected = current - 1;
+        let zoomOut: boolean = false;
 
         //checking if this presentation id is mapped to a group, if so chosing the first element in group
         if (this.groupMappings.has(curPresId)) {
@@ -217,11 +232,29 @@ export class PresentationView extends React.Component<PresViewProps>  {
             //end of grup so go beyond
             if (prevSelected === current) prevSelected = current - 1;
 
+            //checking if any of the group members had used zooming in
+            currentsArray.forEach((doc: Doc) => {
+                if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) {
+                    zoomOut = true;
+                    return;
+                }
+            });
 
         }
 
+        // if a group set that flag to zero or a single element
+        //If so making sure to zoom out, which goes back to state before zooming action
+        if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) {
+            let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null);
+            let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]);
+            if (prevScale !== undefined) {
+                if (prevScale !== curScale) {
+                    DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale);
+                }
+            }
+        }
+        this.gotoDocument(prevSelected, current);
 
-        this.gotoDocument(prevSelected);
     }
 
     /**
@@ -285,9 +318,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
      * has the option open and last in the group. If not in the group, and it has
      * te option open, navigates to that element.
      */
-    navigateToElement = (curDoc: Doc) => {
+    navigateToElement = async (curDoc: Doc, fromDoc: number) => {
         let docToJump: Doc = curDoc;
         let curDocPresId = StrCast(curDoc.presentId, null);
+        let willZoom: boolean = false;
 
         //checking if in group
         if (curDocPresId !== undefined) {
@@ -297,6 +331,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     let selectedButtons: boolean[] = this.presElementsMappings.get(doc)!.selected;
                     if (selectedButtons[buttonIndex.Navigate]) {
                         docToJump = doc;
+                        willZoom = false;
+                    }
+                    if (selectedButtons[buttonIndex.Show]) {
+                        docToJump = doc;
+                        willZoom = true;
                     }
                 });
             }
@@ -305,13 +344,35 @@ export class PresentationView extends React.Component<PresViewProps>  {
         //docToJump stayed same meaning, it was not in the group or was the last element in the group
         if (docToJump === curDoc) {
             //checking if curDoc has navigation open
-            if (this.presElementsMappings.get(curDoc)!.selected[buttonIndex.Navigate]) {
-                DocumentManager.Instance.jumpToDocument(curDoc);
-            } else {
-                return;
+            let curDocButtons = this.presElementsMappings.get(curDoc)!.selected;
+            if (curDocButtons[buttonIndex.Navigate]) {
+                DocumentManager.Instance.jumpToDocument(curDoc, false);
+            } else if (curDocButtons[buttonIndex.Show]) {
+                let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
+                //awaiting jump so that new scale can be found, since jumping is async
+                await DocumentManager.Instance.jumpToDocument(curDoc, true);
+                let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
+                curDoc.viewScale = newScale;
+
+                //saving the scale user was on before zooming in
+                if (curScale !== 1) {
+                    this.childrenDocs[fromDoc].viewScale = curScale;
+                }
+
             }
+            return;
+        }
+        let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
+
+        //awaiting jump so that new scale can be found, since jumping is async
+        await DocumentManager.Instance.jumpToDocument(docToJump, willZoom);
+        let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
+        curDoc.viewScale = newScale;
+        //saving the scale that user was on
+        if (curScale !== 1) {
+            this.childrenDocs[fromDoc].viewScale = curScale;
         }
-        DocumentManager.Instance.jumpToDocument(docToJump);
+
     }
 
     /**
@@ -340,7 +401,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
     @action
-    public gotoDocument = async (index: number) => {
+    public gotoDocument = async (index: number, fromDoc: number) => {
         const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (!list) {
             return;
@@ -357,7 +418,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         const doc = await list[index];
         if (this.presStatus) {
-            this.navigateToElement(doc);
+            this.navigateToElement(doc, fromDoc);
             this.hideIfNotPresented(index);
             this.showAfterPresented(index);
         }
@@ -407,7 +468,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
         } else {
             this.presStatus = true;
             this.startPresentation(0);
-            this.gotoDocument(0);
+            const current = NumCast(this.props.Document.selectedDoc);
+            this.gotoDocument(0, current);
         }
         this.props.Document.presStatus = this.presStatus;
     }
@@ -423,6 +485,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
             doc.opacity = 1;
         });
         this.props.Document.selectedDoc = 0;
+        if (this.childrenDocs.length === 0) {
+            return;
+        }
+        DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1);
+        this.childrenDocs[0].viewScale = 1;
 
     }
 
-- 
cgit v1.2.3-70-g09d2


From ae86fd1237873e7aa3144e7a0c6890ae60507d66 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Mon, 17 Jun 2019 20:03:03 -0400
Subject: Presentation Selection UI a bit, with bugs

---
 src/client/views/MainView.tsx                      |   7 +-
 .../views/presentationview/PresentationView.tsx    | 117 ++++++++++++++-------
 2 files changed, 85 insertions(+), 39 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f78879efe..7d2aa3199 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -32,6 +32,7 @@ import { listSpec } from '../../new_fields/Schema';
 import { Id } from '../../new_fields/FieldSymbols';
 import { HistoryUtil } from '../util/History';
 import { CollectionBaseView } from './collections/CollectionBaseView';
+import { List } from '../../new_fields/List';
 
 
 @observer
@@ -46,7 +47,7 @@ export class MainView extends React.Component {
     private set mainContainer(doc: Opt<Doc>) {
         if (doc) {
             if (!("presentationView" in doc)) {
-                doc.presentationView = Docs.TreeDocument([], { title: "Presentation" });
+                doc.presentationView = new List<Doc>([Docs.TreeDocument([], { title: "Presentation" })]);
             }
             CurrentUserUtils.UserDocument.activeWorkspace = doc;
         }
@@ -203,7 +204,7 @@ export class MainView extends React.Component {
                 zoomToScale={emptyFunction}
                 getScale={returnOne}
             />;
-        let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
+        let castRes = mainCont ? FieldValue(Cast(mainCont.presentationView, listSpec(Doc))) : undefined;
         console.log("GETTING mainContent()");
         console.log(castRes instanceof Promise);
         console.log(castRes);
@@ -211,7 +212,7 @@ export class MainView extends React.Component {
             {({ measureRef }) =>
                 <div ref={measureRef} id="mainContent-div">
                     {content}
-                    {castRes ? <PresentationView Document={castRes} key="presentation" /> : null}
+                    {castRes ? <PresentationView Documents={castRes} key="presentation" /> : null}
                 </div>
             }
         </Measure>;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 6cf5fad7e..ff5c6df9c 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -13,18 +13,22 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Docs } from "../../documents/Documents";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
 library.add(faPlay);
 library.add(faStop);
+library.add(faPlus);
+library.add(faTimes);
 
 export interface PresViewProps {
-    Document: Doc;
+    Documents: List<Doc>;
 }
 
-interface PresListProps extends PresViewProps {
+interface PresListProps {
+    mainDocument: Doc;
     deleteDocument(index: number): void;
     gotoDocument(index: number, fromDoc: number): Promise<void>;
     groupMappings: Map<String, Doc[]>;
@@ -85,15 +89,17 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
+
+
     render() {
-        const children = DocListCast(this.props.Document.data);
+        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={index} mainDocument={this.props.Document} 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={index} 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>
         );
     }
@@ -115,17 +121,32 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //back-up so that presentation stays the way it's when refreshed
     @observable presGroupBackUp: Doc = new Doc();
     @observable presButtonBackUp: Doc = new Doc();
+    @observable curPresentation: Doc = new Doc();
+    @observable presentationsMapping: Map<String, Doc> = new Map();
+    @observable selectedPresentation: HTMLSelectElement = new HTMLSelectElement();
+
+
+    //initilize class variables
+    constructor(props: PresViewProps) {
+        super(props);
+        PresentationView.Instance = this;
+    }
 
 
+    async componentWillMount() {
+        let docAtZero = await this.props.Documents[0];
+        runInAction(() => this.curPresentation = docAtZero);
+    }
+
     componentDidMount() {
         //getting both backUp documents
-        let castedGroupBackUp = Cast(this.props.Document.presGroupBackUp, Doc);
-        let castedButtonBackUp = Cast(this.props.Document.presButtonBackUp, Doc);
+        let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc);
+        let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc);
         //if instantiated before 
         if (castedGroupBackUp instanceof Promise) {
             castedGroupBackUp.then(doc => {
                 let toAssign = doc ? doc : new Doc();
-                this.props.Document.presGroupBackUp = toAssign;
+                this.curPresentation.presGroupBackUp = toAssign;
                 runInAction(() => this.presGroupBackUp = toAssign);
                 if (doc) {
                     if (toAssign[Id] === doc[Id]) {
@@ -138,7 +159,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             runInAction(() => {
                 let toAssign = new Doc();
                 this.presGroupBackUp = toAssign;
-                this.props.Document.presGroupBackUp = toAssign;
+                this.curPresentation.presGroupBackUp = toAssign;
 
             });
 
@@ -148,7 +169,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (castedButtonBackUp instanceof Promise) {
             castedButtonBackUp.then(doc => {
                 let toAssign = doc ? doc : new Doc();
-                this.props.Document.presButtonBackUp = toAssign;
+                this.curPresentation.presButtonBackUp = toAssign;
                 runInAction(() => this.presButtonBackUp = toAssign);
             });
 
@@ -157,14 +178,14 @@ export class PresentationView extends React.Component<PresViewProps>  {
             runInAction(() => {
                 let toAssign = new Doc();
                 this.presButtonBackUp = toAssign;
-                this.props.Document.presButtonBackUp = toAssign;
+                this.curPresentation.presButtonBackUp = toAssign;
             });
 
         }
 
 
         //storing the presentation status,ie. whether it was stopped or playing
-        let presStatusBackUp = BoolCast(this.props.Document.presStatus, null);
+        let presStatusBackUp = BoolCast(this.curPresentation.presStatus, null);
         runInAction(() => this.presStatus = presStatusBackUp);
     }
 
@@ -188,9 +209,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //observable means render is re-called every time variable is changed
     @observable
     collapsed: boolean = false;
-    closePresentation = action(() => this.props.Document.width = 0);
+    closePresentation = action(() => this.curPresentation.width = 0);
     next = async () => {
-        const current = NumCast(this.props.Document.selectedDoc);
+        const current = NumCast(this.curPresentation.selectedDoc);
         //asking to get document at current index
         let docAtCurrentNext = await this.getDocAtIndex(current + 1);
         if (docAtCurrentNext === undefined) {
@@ -213,7 +234,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
     back = async () => {
-        const current = NumCast(this.props.Document.selectedDoc);
+        const current = NumCast(this.curPresentation.selectedDoc);
         //requesting for the doc at current index
         let docAtCurrent = await this.getDocAtIndex(current);
         if (docAtCurrent === undefined) {
@@ -379,7 +400,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
      * Async function that supposedly return the doc that is located at given index.
      */
     getDocAtIndex = async (index: number) => {
-        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
         if (!list) {
             return undefined;
         }
@@ -387,7 +408,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             return undefined;
         }
 
-        this.props.Document.selectedDoc = index;
+        this.curPresentation.selectedDoc = index;
         //awaiting async call to finish to get Doc instance
         const doc = await list[index];
         return doc;
@@ -395,21 +416,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     @action
     public RemoveDoc = (index: number) => {
-        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
         if (value) {
             value.splice(index, 1);
         }
     }
     @action
     public gotoDocument = async (index: number, fromDoc: number) => {
-        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
         if (!list) {
             return;
         }
         if (index < 0 || index >= list.length) {
             return;
         }
-        this.props.Document.selectedDoc = index;
+        this.curPresentation.selectedDoc = index;
 
         if (!this.presStatus) {
             this.presStatus = true;
@@ -425,11 +446,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
-    //initilize class variables
-    constructor(props: PresViewProps) {
-        super(props);
-        PresentationView.Instance = this;
-    }
+
 
     /**
      * Adds a document to the presentation view
@@ -437,14 +454,14 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @action
     public PinDoc(doc: Doc) {
         //add this new doc to props.Document
-        const data = Cast(this.props.Document.data, listSpec(Doc));
+        const data = Cast(this.curPresentation.data, listSpec(Doc));
         if (data) {
             data.push(doc);
         } else {
-            this.props.Document.data = new List([doc]);
+            this.curPresentation.data = new List([doc]);
         }
 
-        this.props.Document.width = 300;
+        this.curPresentation.width = 300;
     }
 
     @action
@@ -468,10 +485,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         } else {
             this.presStatus = true;
             this.startPresentation(0);
-            const current = NumCast(this.props.Document.selectedDoc);
+            const current = NumCast(this.curPresentation.selectedDoc);
             this.gotoDocument(0, current);
         }
-        this.props.Document.presStatus = this.presStatus;
+        this.curPresentation.presStatus = this.presStatus;
     }
 
     @action
@@ -484,7 +501,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             //doc.presentId = Utils.GenerateGuid();
             doc.opacity = 1;
         });
-        this.props.Document.selectedDoc = 0;
+        this.curPresentation.selectedDoc = 0;
         if (this.childrenDocs.length === 0) {
             return;
         }
@@ -518,23 +535,51 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
+    @action
+    addNewPresentation = () => {
+        let title = "Presentation " + (this.props.Documents.length + 1);
+        let newPresentationDoc = Docs.TreeDocument([], { title: title });
+        this.props.Documents.push(newPresentationDoc);
+        this.curPresentation = newPresentationDoc;
+    }
+
+    @action
+    getSelectedPresentation = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        this.curPresentation = this.presentationsMapping.get(e.target.value)!;
+    }
+
+
     render() {
-        let titleStr = StrCast(this.props.Document.title);
-        let width = NumCast(this.props.Document.width);
+        let titleStr = StrCast(this.curPresentation.title);
+        let width = NumCast(this.curPresentation.width);
+        let presentationList = DocListCast(this.props.Documents);
+
+
+        console.log("width: ", width);
+        console.log("title : ", titleStr);
 
         //TODO: next and back should be icons
         return (
             <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
                 <div className="presentationView-heading">
-                    <div className="presentationView-title">{titleStr}</div>
-                    <button className='presentation-icon' onClick={this.closePresentation}>X</button>
+                    {/* <div className="presentationView-title">{titleStr}</div> */}
+                    <select className="presentationView-title" onChange={this.getSelectedPresentation} ref={(e) => this.selectedPresentation = e!}>
+                        {presentationList.map((doc: Doc, index: number) => {
+                            let newGuid = Utils.GenerateGuid();
+                            this.presentationsMapping.set(newGuid, doc);
+                            return <option key={index} value={newGuid}>{StrCast(doc.title)}</option>;
+                        })}
+                    </select>
+                    <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
+                    <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={this.addNewPresentation}><FontAwesomeIcon icon={"plus"} /></button>
+
                 </div>
                 <div className="presentation-buttons">
                     <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
                     {this.renderPlayPauseButton()}
                     <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} presButtonBackUp={this.presButtonBackUp} presGroupBackUp={this.presGroupBackUp} />
+                <PresentationViewList mainDocument={this.curPresentation} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} presButtonBackUp={this.presButtonBackUp} presGroupBackUp={this.presGroupBackUp} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 4ffcff69a2fc767c6a03d46d7296b6a8c7ffd281 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Tue, 18 Jun 2019 19:13:45 -0400
Subject: Presentations Listed, Option to Change Added, and

---
 .../views/presentationview/PresentationElement.tsx | 28 ++++++++-
 .../views/presentationview/PresentationView.tsx    | 69 +++++++++++++++++++---
 2 files changed, 85 insertions(+), 12 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 00dc07921..8ec6348f2 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -56,7 +56,13 @@ export enum buttonIndex {
 @observer
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
-    @observable selectedButtons: boolean[] = new Array(6);
+    @observable selectedButtons: boolean[];
+
+
+    constructor(props: PresentationElementProps) {
+        super(props);
+        this.selectedButtons = new Array(6);
+    }
 
     /**
      * Getter to get the status of the buttons.
@@ -67,6 +73,16 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     async componentDidMount() {
+        this.receiveButtonBackUp();
+
+    }
+
+    async componentDidUpdate() {
+        this.receiveButtonBackUp();
+    }
+
+    receiveButtonBackUp = async () => {
+
         //get the list that stores docs that keep track of buttons
         let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
         if (!castedList) {
@@ -74,17 +90,21 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
         //if this is the first time this doc mounts, push a doc for it to store
         if (castedList.length <= this.props.index) {
-            castedList.push(new Doc());
+            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);
+            console.log("Debug Selected Buttons: ", this.selectedButtons, " and the selectedButtonOfDoc: ", selectedButtonOfDoc);
             if (selectedButtonOfDoc !== undefined) {
                 runInAction(() => this.selectedButtons = selectedButtonOfDoc);
+                console.log("New Selected Buttons: ", this.selectedButtons);
             }
         }
 
-
     }
 
     /**
@@ -337,6 +357,8 @@ export default class PresentationElement extends React.Component<PresentationEle
         let p = this.props;
         let title = p.document.title;
 
+        console.log("Re-rendered");
+
         //to get currently selected presentation doc
         let selected = NumCast(p.mainDocument.selectedDoc, 0);
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index ff5c6df9c..01cddbc45 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -96,6 +96,7 @@ class PresentationViewList extends React.Component<PresListProps> {
         this.initializeGroupIds(children);
         this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
+        console.log(this.props.mainDocument, " re-rendering");
         return (
 
             <div className="presentationView-listCont">
@@ -123,7 +124,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presButtonBackUp: Doc = new Doc();
     @observable curPresentation: Doc = new Doc();
     @observable presentationsMapping: Map<String, Doc> = new Map();
-    @observable selectedPresentation: HTMLSelectElement = new HTMLSelectElement();
+    @observable presentationsKeyMapping: Map<Doc, String> = new Map();
+    @observable selectedPresentation: HTMLSelectElement | undefined;
+    @observable currentSelectedPresValue: string | undefined;
 
 
     //initilize class variables
@@ -134,12 +137,32 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
 
     async componentWillMount() {
+        this.props.Documents.forEach(async (doc, index: number) => {
+            let curDoc: Doc = await doc;
+            let newGuid = Utils.GenerateGuid();
+            this.presentationsKeyMapping.set(curDoc, newGuid);
+            this.presentationsMapping.set(newGuid, curDoc);
+            if (index === 0) {
+                runInAction(() => this.currentSelectedPresValue = newGuid);
+                runInAction(() => this.curPresentation = curDoc);
+            }
+        });
+    }
+
+    async componentDidMount() {
+
         let docAtZero = await this.props.Documents[0];
         runInAction(() => this.curPresentation = docAtZero);
+
+        this.setPresentationBackUps();
+
+
     }
 
-    componentDidMount() {
+
+    setPresentationBackUps = async () => {
         //getting both backUp documents
+
         let castedGroupBackUp = Cast(this.curPresentation.presGroupBackUp, Doc);
         let castedButtonBackUp = Cast(this.curPresentation.presButtonBackUp, Doc);
         //if instantiated before 
@@ -154,7 +177,12 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     }
                 }
             });
+
             //if never instantiated a store doc yet
+        } else if (castedGroupBackUp instanceof Doc) {
+            let castedDoc: Doc = await castedGroupBackUp;
+            runInAction(() => this.presGroupBackUp = castedDoc);
+            this.retrieveGroupMappings();
         } else {
             runInAction(() => {
                 let toAssign = new Doc();
@@ -170,10 +198,16 @@ export class PresentationView extends React.Component<PresViewProps>  {
             castedButtonBackUp.then(doc => {
                 let toAssign = doc ? doc : new Doc();
                 this.curPresentation.presButtonBackUp = toAssign;
+                console.log("Called the promise one!!");
                 runInAction(() => this.presButtonBackUp = toAssign);
             });
 
             //if never instantiated a store doc yet
+        } else if (castedButtonBackUp instanceof Doc) {
+            let castedDoc: Doc = await castedButtonBackUp;
+            runInAction(() => this.presButtonBackUp = castedDoc);
+            console.log("Called the important action");
+
         } else {
             runInAction(() => {
                 let toAssign = new Doc();
@@ -541,11 +575,30 @@ export class PresentationView extends React.Component<PresViewProps>  {
         let newPresentationDoc = Docs.TreeDocument([], { title: title });
         this.props.Documents.push(newPresentationDoc);
         this.curPresentation = newPresentationDoc;
+        let newGuid = Utils.GenerateGuid();
+        this.presentationsMapping.set(newGuid, newPresentationDoc);
+        this.presentationsKeyMapping.set(newPresentationDoc, newGuid);
+        this.currentSelectedPresValue = newGuid;
+        this.setPresentationBackUps();
+
+        // if (this.selectedPresentation) {
+        //     this.selectedPresentation.selectedIndex = 1;
+        //     console.log("Selected Pres: ", this.selectedPresentation);
+        //     console.log("New value: ", this.selectedPresentation.value);
+        //     console.log("New Index: ", this.selectedPresentation.selectedIndex);
+
+
+        // }
+
     }
 
     @action
     getSelectedPresentation = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        this.curPresentation = this.presentationsMapping.get(e.target.value)!;
+        let selectedGuid = e.target.value;
+        this.curPresentation = this.presentationsMapping.get(selectedGuid)!;
+        this.currentSelectedPresValue = selectedGuid;
+        this.setPresentationBackUps();
+
     }
 
 
@@ -555,19 +608,17 @@ export class PresentationView extends React.Component<PresViewProps>  {
         let presentationList = DocListCast(this.props.Documents);
 
 
-        console.log("width: ", width);
-        console.log("title : ", titleStr);
 
         //TODO: next and back should be icons
         return (
             <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
                 <div className="presentationView-heading">
                     {/* <div className="presentationView-title">{titleStr}</div> */}
-                    <select className="presentationView-title" onChange={this.getSelectedPresentation} ref={(e) => this.selectedPresentation = e!}>
+                    <select value={this.currentSelectedPresValue} id="pres_selector" className="presentationView-title" onChange={this.getSelectedPresentation} ref={(e: HTMLSelectElement) => this.selectedPresentation = e}>
                         {presentationList.map((doc: Doc, index: number) => {
-                            let newGuid = Utils.GenerateGuid();
-                            this.presentationsMapping.set(newGuid, doc);
-                            return <option key={index} value={newGuid}>{StrCast(doc.title)}</option>;
+                            let mappedGuid = this.presentationsKeyMapping.get(doc);
+                            let docGuid: string = mappedGuid ? mappedGuid.toString() : "";
+                            return <option key={index} value={docGuid}>{StrCast(doc.title)}</option>;
                         })}
                     </select>
                     <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
-- 
cgit v1.2.3-70-g09d2


From fb62f3b2e39bbe2dd3da5eaffedbaa8e60f06dbb Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 19 Jun 2019 12:35:54 -0400
Subject: Grouping for different presentations fixed

---
 .../views/presentationview/PresentationView.tsx    | 39 ++++++++++++++++++++++
 1 file changed, 39 insertions(+)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 01cddbc45..2ebbb84ea 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -233,6 +233,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
             castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
                 let castedGrouping = await DocListCastAsync(groupDoc.grouping);
                 let castedKey = StrCast(groupDoc.presentIdStore, null);
+                if (castedGrouping) {
+                    castedGrouping.forEach((doc: Doc) => {
+                        doc.presentId = castedKey;
+                    });
+                }
                 if (castedGrouping !== undefined && castedKey !== undefined) {
                     this.groupMappings.set(castedKey, castedGrouping);
                 }
@@ -481,6 +486,38 @@ export class PresentationView extends React.Component<PresViewProps>  {
     }
 
 
+    resetGroupIds = async () => {
+        let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
+        if (castedGroupDocs !== undefined) {
+            castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
+                let castedGrouping = await DocListCastAsync(groupDoc.grouping);
+                if (castedGrouping) {
+                    castedGrouping.forEach((doc: Doc) => {
+                        doc.presentId = Utils.GenerateGuid();
+                    });
+                }
+                // let castedKey = StrCast(groupDoc.presentIdStore, null);
+                // if (castedGrouping !== undefined && castedKey !== undefined) {
+                //     this.groupMappings.set(castedKey, castedGrouping);
+                // }
+            });
+        }
+    }
+
+    // reloadGroupIds = async () => {
+    //     let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
+    //     if (castedGroupDocs !== undefined) {
+    //         castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
+    //             let castedGrouping = await DocListCastAsync(groupDoc.grouping);
+    //             let castedKey = StrCast(groupDoc.presentIdStore, null);
+    //             if (castedGrouping !== undefined && castedKey !== undefined) {
+    //                 this.groupMappings.set(castedKey, castedGrouping);
+    //             }
+    //         });
+    //     }
+    // }
+
+
 
     /**
      * Adds a document to the presentation view
@@ -578,6 +615,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         let newGuid = Utils.GenerateGuid();
         this.presentationsMapping.set(newGuid, newPresentationDoc);
         this.presentationsKeyMapping.set(newPresentationDoc, newGuid);
+        this.resetGroupIds();
         this.currentSelectedPresValue = newGuid;
         this.setPresentationBackUps();
 
@@ -596,6 +634,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     getSelectedPresentation = (e: React.ChangeEvent<HTMLSelectElement>) => {
         let selectedGuid = e.target.value;
         this.curPresentation = this.presentationsMapping.get(selectedGuid)!;
+        this.resetGroupIds();
         this.currentSelectedPresValue = selectedGuid;
         this.setPresentationBackUps();
 
-- 
cgit v1.2.3-70-g09d2


From a288a2fd0a30a3a16dd01bc4e12dcf6bc117c766 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 19 Jun 2019 15:25:24 -0400
Subject: Navigation and Zoom Option For Manual Selection Added and New
 Presentation TItle Naming Added

Now, You can manually click on navigate or zoom and navigate to that document if current was their index. A way to manually disregard groups, and just navigate to that doc.
---
 .../views/presentationview/PresentationElement.tsx | 11 ++-
 .../views/presentationview/PresentationView.tsx    | 89 +++++++++++++++-------
 2 files changed, 70 insertions(+), 30 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 8ec6348f2..a74cbbd65 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -98,10 +98,8 @@ export default class PresentationElement extends React.Component<PresentationEle
         } else {
             let curDoc: Doc = await castedList[this.props.index];
             let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-            console.log("Debug Selected Buttons: ", this.selectedButtons, " and the selectedButtonOfDoc: ", selectedButtonOfDoc);
             if (selectedButtonOfDoc !== undefined) {
                 runInAction(() => this.selectedButtons = selectedButtonOfDoc);
-                console.log("New Selected Buttons: ", this.selectedButtons);
             }
         }
 
@@ -325,6 +323,10 @@ export default class PresentationElement extends React.Component<PresentationEle
                 this.selectedButtons[buttonIndex.Show] = false;
             }
             this.selectedButtons[buttonIndex.Navigate] = true;
+            const current = NumCast(this.props.mainDocument.selectedDoc);
+            if (current === this.props.index) {
+                this.props.gotoDocument(this.props.index, this.props.index);
+            }
         }
 
         this.autoSaveButtonChange(buttonIndex.Navigate);
@@ -346,6 +348,10 @@ export default class PresentationElement extends React.Component<PresentationEle
                 this.selectedButtons[buttonIndex.Navigate] = false;
             }
             this.selectedButtons[buttonIndex.Show] = true;
+            const current = NumCast(this.props.mainDocument.selectedDoc);
+            if (current === this.props.index) {
+                this.props.gotoDocument(this.props.index, this.props.index);
+            }
         }
 
         this.autoSaveButtonChange(buttonIndex.Show);
@@ -357,7 +363,6 @@ export default class PresentationElement extends React.Component<PresentationEle
         let p = this.props;
         let title = p.document.title;
 
-        console.log("Re-rendered");
 
         //to get currently selected presentation doc
         let selected = NumCast(p.mainDocument.selectedDoc, 0);
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 2ebbb84ea..97ec4e2fa 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -46,12 +46,15 @@ interface PresListProps {
  */
 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) => {
@@ -89,14 +92,11 @@ class PresentationViewList extends React.Component<PresListProps> {
         });
     }
 
-
-
     render() {
         const children = DocListCast(this.props.mainDocument.data);
         this.initializeGroupIds(children);
         this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
-        console.log(this.props.mainDocument, " re-rendering");
         return (
 
             <div className="presentationView-listCont">
@@ -125,8 +125,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable curPresentation: Doc = new Doc();
     @observable presentationsMapping: Map<String, Doc> = new Map();
     @observable presentationsKeyMapping: Map<Doc, String> = new Map();
-    @observable selectedPresentation: HTMLSelectElement | undefined;
     @observable currentSelectedPresValue: string | undefined;
+    @observable PresTitleInputOpen: boolean = false;
+    @observable titleInputElement: HTMLInputElement | undefined;
+    //@observable presTitle: string =  "Presentation";
 
 
     //initilize class variables
@@ -156,7 +158,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         this.setPresentationBackUps();
 
-
     }
 
 
@@ -198,7 +199,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
             castedButtonBackUp.then(doc => {
                 let toAssign = doc ? doc : new Doc();
                 this.curPresentation.presButtonBackUp = toAssign;
-                console.log("Called the promise one!!");
                 runInAction(() => this.presButtonBackUp = toAssign);
             });
 
@@ -206,7 +206,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
         } else if (castedButtonBackUp instanceof Doc) {
             let castedDoc: Doc = await castedButtonBackUp;
             runInAction(() => this.presButtonBackUp = castedDoc);
-            console.log("Called the important action");
 
         } else {
             runInAction(() => {
@@ -551,7 +550,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @action
     startOrResetPres = () => {
         if (this.presStatus) {
-            this.presStatus = false;
+            //this.presStatus = false;
             this.resetPresentation();
         } else {
             this.presStatus = true;
@@ -566,18 +565,28 @@ export class PresentationView extends React.Component<PresViewProps>  {
     resetPresentation = () => {
         //this.groupMappings = new Map();
         //let selectedButtons: boolean[];
-        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
-            //selectedButtons = component.selected;
-            //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
-            //doc.presentId = Utils.GenerateGuid();
+        // this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+        //     //selectedButtons = component.selected;
+        //     //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
+        //     //doc.presentId = Utils.GenerateGuid();
+        //     doc.opacity = 1;
+        //     doc.viewScale = 1;
+        // });
+
+
+        this.childrenDocs.forEach((doc: Doc) => {
             doc.opacity = 1;
+            doc.viewScale = 1;
         });
         this.curPresentation.selectedDoc = 0;
+        this.presStatus = false;
+        this.curPresentation.presStatus = this.presStatus;
         if (this.childrenDocs.length === 0) {
             return;
         }
         DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1);
-        this.childrenDocs[0].viewScale = 1;
+
+        // this.childrenDocs[0].viewScale = 1;
 
     }
 
@@ -607,18 +616,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
     }
 
     @action
-    addNewPresentation = () => {
-        let title = "Presentation " + (this.props.Documents.length + 1);
-        let newPresentationDoc = Docs.TreeDocument([], { title: title });
+    addNewPresentation = (presTitle: string) => {
+        //let title = "Presentation " + (this.props.Documents.length + 1);
+        let newPresentationDoc = Docs.TreeDocument([], { title: presTitle });
         this.props.Documents.push(newPresentationDoc);
         this.curPresentation = newPresentationDoc;
         let newGuid = Utils.GenerateGuid();
         this.presentationsMapping.set(newGuid, newPresentationDoc);
         this.presentationsKeyMapping.set(newPresentationDoc, newGuid);
         this.resetGroupIds();
+        this.resetPresentation();
         this.currentSelectedPresValue = newGuid;
         this.setPresentationBackUps();
 
+
+
         // if (this.selectedPresentation) {
         //     this.selectedPresentation.selectedIndex = 1;
         //     console.log("Selected Pres: ", this.selectedPresentation);
@@ -635,16 +647,44 @@ export class PresentationView extends React.Component<PresViewProps>  {
         let selectedGuid = e.target.value;
         this.curPresentation = this.presentationsMapping.get(selectedGuid)!;
         this.resetGroupIds();
+        this.resetPresentation();
         this.currentSelectedPresValue = selectedGuid;
         this.setPresentationBackUps();
 
+
+    }
+
+    renderSelectOrPresSelection = () => {
+        let presentationList = DocListCast(this.props.Documents);
+        if (this.PresTitleInputOpen) {
+            return <input ref={(e) => this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />;
+        } else {
+            return <select value={this.currentSelectedPresValue} id="pres_selector" className="presentationView-title" onChange={this.getSelectedPresentation}>
+                {presentationList.map((doc: Doc, index: number) => {
+                    let mappedGuid = this.presentationsKeyMapping.get(doc);
+                    let docGuid: string = mappedGuid ? mappedGuid.toString() : "";
+                    return <option key={index} value={docGuid}>{StrCast(doc.title)}</option>;
+                })}
+            </select>;
+        }
+    }
+
+    @action
+    submitPresentationTitle = (e: React.KeyboardEvent) => {
+        if (e.keyCode === 13) {
+            let presTitle = this.titleInputElement!.value;
+            this.titleInputElement!.value = "";
+            this.PresTitleInputOpen = false;
+            if (presTitle === "") {
+                presTitle = "Presentation";
+            }
+            this.addNewPresentation(presTitle);
+        }
     }
 
 
     render() {
-        let titleStr = StrCast(this.curPresentation.title);
         let width = NumCast(this.curPresentation.width);
-        let presentationList = DocListCast(this.props.Documents);
 
 
 
@@ -652,16 +692,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
         return (
             <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
                 <div className="presentationView-heading">
-                    {/* <div className="presentationView-title">{titleStr}</div> */}
-                    <select value={this.currentSelectedPresValue} id="pres_selector" className="presentationView-title" onChange={this.getSelectedPresentation} ref={(e: HTMLSelectElement) => this.selectedPresentation = e}>
-                        {presentationList.map((doc: Doc, index: number) => {
-                            let mappedGuid = this.presentationsKeyMapping.get(doc);
-                            let docGuid: string = mappedGuid ? mappedGuid.toString() : "";
-                            return <option key={index} value={docGuid}>{StrCast(doc.title)}</option>;
-                        })}
-                    </select>
+                    {this.renderSelectOrPresSelection()}
                     <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
-                    <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={this.addNewPresentation}><FontAwesomeIcon icon={"plus"} /></button>
+                    <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                        runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
+                    }}><FontAwesomeIcon icon={"plus"} /></button>
 
                 </div>
                 <div className="presentation-buttons">
-- 
cgit v1.2.3-70-g09d2


From 4c1383e47f2203a00bc7f3d73c209f3149d6a772 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 19 Jun 2019 15:53:05 -0400
Subject: ...

---
 src/client/views/presentationview/PresentationElement.tsx | 2 +-
 src/client/views/presentationview/PresentationView.tsx    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index a74cbbd65..a84bbbf3c 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -56,7 +56,7 @@ export enum buttonIndex {
 @observer
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
-    @observable selectedButtons: boolean[];
+    @observable private selectedButtons: boolean[];
 
 
     constructor(props: PresentationElementProps) {
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 97ec4e2fa..ad3a4bffe 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -453,10 +453,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
     }
 
     @action
-    public RemoveDoc = (index: number) => {
+    public RemoveDoc = async (index: number) => {
         const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
         if (value) {
-            value.splice(index, 1);
+            let removedDoc = await value.splice(index, 1)[0];
+            this.presElementsMappings.delete(removedDoc);
         }
     }
     @action
-- 
cgit v1.2.3-70-g09d2


From 6fc6054dc7aea144fd967a8cb3fe7d8fe5ec6d6d Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 19 Jun 2019 19:13:30 -0400
Subject: Width of the presentations fixed, removal of presentations option
 added, backUP group and normal groups updated when a doc is removed from
 presentation by removing it from both

---
 .../views/presentationview/PresentationView.tsx    | 71 +++++++++++++++++-----
 1 file changed, 55 insertions(+), 16 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index ad3a4bffe..2b3f5e199 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -13,7 +13,7 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus } from '@fortawesome/free-solid-svg-icons';
 import { Docs } from "../../documents/Documents";
 
 library.add(faArrowLeft);
@@ -22,6 +22,7 @@ library.add(faPlay);
 library.add(faStop);
 library.add(faPlus);
 library.add(faTimes);
+library.add(faMinus);
 
 export interface PresViewProps {
     Documents: List<Doc>;
@@ -100,7 +101,7 @@ 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={index} 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>
         );
     }
@@ -458,6 +459,40 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (value) {
             let removedDoc = await value.splice(index, 1)[0];
             this.presElementsMappings.delete(removedDoc);
+
+            let removedDocPresentId = StrCast(removedDoc.presentId);
+            if (this.groupMappings.has(removedDocPresentId)) {
+                let removedDocsGroup = this.groupMappings.get(removedDocPresentId);
+                if (removedDocsGroup) {
+                    removedDocsGroup.splice(removedDocsGroup.indexOf(removedDoc), 1);
+                    if (removedDocsGroup.length === 0) {
+                        this.groupMappings.delete(removedDocPresentId);
+                    }
+                }
+            }
+            let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
+            if (castedList) {
+                castedList.splice(index, 1);
+            }
+            let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
+            if (castedGroupDocs) {
+                castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
+                    let castedKey = StrCast(groupDoc.presentIdStore, null);
+                    if (castedKey === removedDocPresentId) {
+                        let castedGrouping = await DocListCastAsync(groupDoc.grouping);
+                        if (castedGrouping) {
+                            castedGrouping.splice(castedGrouping.indexOf(removedDoc), 1);
+                            if (castedGrouping.length === 0) {
+                                castedGroupDocs!.splice(castedGroupDocs!.indexOf(groupDoc), 1);
+                            }
+                        }
+                    }
+
+                });
+
+            }
+
+
         }
     }
     @action
@@ -532,7 +567,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             this.curPresentation.data = new List([doc]);
         }
 
-        this.curPresentation.width = 300;
+        this.curPresentation.width = 400;
     }
 
     @action
@@ -630,17 +665,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.currentSelectedPresValue = newGuid;
         this.setPresentationBackUps();
 
-
-
-        // if (this.selectedPresentation) {
-        //     this.selectedPresentation.selectedIndex = 1;
-        //     console.log("Selected Pres: ", this.selectedPresentation);
-        //     console.log("New value: ", this.selectedPresentation.value);
-        //     console.log("New Index: ", this.selectedPresentation.selectedIndex);
-
-
-        // }
-
     }
 
     @action
@@ -664,7 +688,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 {presentationList.map((doc: Doc, index: number) => {
                     let mappedGuid = this.presentationsKeyMapping.get(doc);
                     let docGuid: string = mappedGuid ? mappedGuid.toString() : "";
-                    return <option key={index} value={docGuid}>{StrCast(doc.title)}</option>;
+                    return <option key={docGuid} value={docGuid}>{StrCast(doc.title)}</option>;
                 })}
             </select>;
         }
@@ -683,10 +707,24 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
 
+    @action
+    removePresentation = () => {
+        if (this.presentationsMapping.size !== 1) {
+            let presentationList = Cast(this.props.Documents, listSpec(Doc));
+            let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!);
+            this.presentationsKeyMapping.delete(removedDoc!);
+            this.presentationsMapping.delete(this.currentSelectedPresValue!);
+            let remainingPresentations = this.presentationsMapping.values();
+            let nextDoc = remainingPresentations.next().value;
+            this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
+            presentationList!.splice(presentationList!.indexOf(removedDoc!), 1);
+        }
+    }
+
 
     render() {
-        let width = NumCast(this.curPresentation.width);
 
+        let width = NumCast(this.curPresentation.width);
 
 
         //TODO: next and back should be icons
@@ -698,6 +736,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
                         runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
                     }}><FontAwesomeIcon icon={"plus"} /></button>
+                    <button title="Remove Presentation" className='presentation-icon' style={{ marginRight: 10 }} onClick={this.removePresentation}><FontAwesomeIcon icon={"minus"} /></button>
 
                 </div>
                 <div className="presentation-buttons">
-- 
cgit v1.2.3-70-g09d2


From 711abbeba69e4d9afc634b8edf019b12b6dff915 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Thu, 20 Jun 2019 12:54:41 -0400
Subject: Documentation and reset Presentation at removal fixed

---
 .../views/presentationview/PresentationElement.tsx |   3 +-
 .../views/presentationview/PresentationView.tsx    | 123 +++++++++++++--------
 2 files changed, 79 insertions(+), 47 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index a84bbbf3c..b12dfd9d5 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -12,7 +12,6 @@ import { faFile as fileSolid, faLocationArrow, faArrowUp, faSearch } from '@fort
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
 import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
-import { DocumentManager } from "../../util/DocumentManager";
 
 
 
@@ -72,11 +71,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         return this.selectedButtons;
     }
 
+    //Lifecycle function that makes sure that button BackUp is received when mounted.
     async componentDidMount() {
         this.receiveButtonBackUp();
 
     }
 
+    //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
     async componentDidUpdate() {
         this.receiveButtonBackUp();
     }
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 2b3f5e199..474001523 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -123,14 +123,19 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //back-up so that presentation stays the way it's when refreshed
     @observable presGroupBackUp: Doc = new Doc();
     @observable presButtonBackUp: Doc = new Doc();
+
+    //Keeping track of the doc for the current presentation
     @observable curPresentation: Doc = new Doc();
+    //Mapping of guids to presentations.
     @observable presentationsMapping: Map<String, Doc> = new Map();
+    //Mapping of presentations to guid, so that select option values can be given.
     @observable presentationsKeyMapping: Map<Doc, String> = new Map();
+    //Variable to keep track of guid of the current presentation
     @observable currentSelectedPresValue: string | undefined;
+    //A flag to keep track if title input is open, which is used in rendering.
     @observable PresTitleInputOpen: boolean = false;
+    //Variable that holds reference to title input, so that new presentations get titles assigned.
     @observable titleInputElement: HTMLInputElement | undefined;
-    //@observable presTitle: string =  "Presentation";
-
 
     //initilize class variables
     constructor(props: PresViewProps) {
@@ -138,13 +143,17 @@ export class PresentationView extends React.Component<PresViewProps>  {
         PresentationView.Instance = this;
     }
 
-
+    //The first lifecycle function that gets called to set up the current presentation.
     async componentWillMount() {
         this.props.Documents.forEach(async (doc, index: number) => {
+
+            //For each presentation received from mainContainer, a mapping is created.
             let curDoc: Doc = await doc;
             let newGuid = Utils.GenerateGuid();
             this.presentationsKeyMapping.set(curDoc, newGuid);
             this.presentationsMapping.set(newGuid, curDoc);
+
+            //The Presentation at first index gets set as default start presentation
             if (index === 0) {
                 runInAction(() => this.currentSelectedPresValue = newGuid);
                 runInAction(() => this.curPresentation = curDoc);
@@ -152,8 +161,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
         });
     }
 
+    //Second lifecycle function that gets called when component mounts. It makes sure to
+    //get the back-up information from previous session for the current presentation.
     async componentDidMount() {
-
         let docAtZero = await this.props.Documents[0];
         runInAction(() => this.curPresentation = docAtZero);
 
@@ -162,6 +172,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
     }
 
 
+    /**
+     * The function that retrieves the backUps for the current Presentation if present,
+     * otherwise initializes.
+     */
     setPresentationBackUps = async () => {
         //getting both backUp documents
 
@@ -195,7 +209,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         }
         //if instantiated before 
-
         if (castedButtonBackUp instanceof Promise) {
             castedButtonBackUp.then(doc => {
                 let toAssign = doc ? doc : new Doc();
@@ -304,12 +317,14 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         // if a group set that flag to zero or a single element
         //If so making sure to zoom out, which goes back to state before zooming action
-        if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) {
-            let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null);
-            let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]);
-            if (prevScale !== undefined) {
-                if (prevScale !== curScale) {
-                    DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale);
+        if (current > 0) {
+            if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) {
+                let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null);
+                let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]);
+                if (prevScale !== undefined) {
+                    if (prevScale !== curScale) {
+                        DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale);
+                    }
                 }
             }
         }
@@ -453,14 +468,22 @@ export class PresentationView extends React.Component<PresViewProps>  {
         return doc;
     }
 
+    /**
+     * The function that removes a doc from a presentation. It also makes sure to
+     * do necessary updates to backUps and mappings stored locally.
+     */
     @action
     public RemoveDoc = async (index: number) => {
         const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
         if (value) {
             let removedDoc = await value.splice(index, 1)[0];
+
+            //removing the Presentation Element stored for it
             this.presElementsMappings.delete(removedDoc);
 
             let removedDocPresentId = StrCast(removedDoc.presentId);
+
+            //Removing it from local mapping of the groups
             if (this.groupMappings.has(removedDocPresentId)) {
                 let removedDocsGroup = this.groupMappings.get(removedDocPresentId);
                 if (removedDocsGroup) {
@@ -470,10 +493,14 @@ 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);
             }
+
+            //removing it from the backup of groups
             let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
             if (castedGroupDocs) {
                 castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
@@ -495,6 +522,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         }
     }
+
+    //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
     public gotoDocument = async (index: number, fromDoc: number) => {
         const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
@@ -520,7 +550,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
-
+    //Function that is called to resetGroupIds, so that documents get new groupIds at
+    //first load, when presentation is changed.
     resetGroupIds = async () => {
         let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
         if (castedGroupDocs !== undefined) {
@@ -531,29 +562,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
                         doc.presentId = Utils.GenerateGuid();
                     });
                 }
-                // let castedKey = StrCast(groupDoc.presentIdStore, null);
-                // if (castedGrouping !== undefined && castedKey !== undefined) {
-                //     this.groupMappings.set(castedKey, castedGrouping);
-                // }
             });
         }
     }
 
-    // reloadGroupIds = async () => {
-    //     let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
-    //     if (castedGroupDocs !== undefined) {
-    //         castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
-    //             let castedGrouping = await DocListCastAsync(groupDoc.grouping);
-    //             let castedKey = StrCast(groupDoc.presentIdStore, null);
-    //             if (castedGrouping !== undefined && castedKey !== undefined) {
-    //                 this.groupMappings.set(castedKey, castedGrouping);
-    //             }
-    //         });
-    //     }
-    // }
-
-
-
     /**
      * Adds a document to the presentation view
      **/
@@ -570,11 +582,14 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.curPresentation.width = 400;
     }
 
+    //Function that sets the store of the children docs.
     @action
     setChildrenDocs = (docList: Doc[]) => {
         this.childrenDocs = docList;
     }
 
+    //The function that is called to render the play or pause button depending on
+    //if presentation is running or not.
     renderPlayPauseButton = () => {
         if (this.presStatus) {
             return <button title="Reset Presentation" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
@@ -583,10 +598,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
 
+    //The function that starts or resets presentaton functionally, depending on status flag.
     @action
     startOrResetPres = () => {
         if (this.presStatus) {
-            //this.presStatus = false;
             this.resetPresentation();
         } else {
             this.presStatus = true;
@@ -597,19 +612,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.curPresentation.presStatus = this.presStatus;
     }
 
+    //The function that resets the presentation by removing every action done by it. It also
+    //stops the presentaton.
     @action
     resetPresentation = () => {
-        //this.groupMappings = new Map();
-        //let selectedButtons: boolean[];
-        // this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
-        //     //selectedButtons = component.selected;
-        //     //selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
-        //     //doc.presentId = Utils.GenerateGuid();
-        //     doc.opacity = 1;
-        //     doc.viewScale = 1;
-        // });
-
-
         this.childrenDocs.forEach((doc: Doc) => {
             doc.opacity = 1;
             doc.viewScale = 1;
@@ -621,11 +627,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
             return;
         }
         DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1);
-
-        // this.childrenDocs[0].viewScale = 1;
-
     }
 
+
+    //The function that starts the presentation, also checking if actions should be applied
+    //directly at start.
     startPresentation = (startIndex: number) => {
         let selectedButtons: boolean[];
         this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
@@ -651,6 +657,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
+    /**
+     * The function that is called to add a new presentation to the presentationView.
+     * It sets up te mappings and local copies of it. Resets the groupings and presentation.
+     * Makes the new presentation current selected, and retrieve the back-Ups if present.
+     */
     @action
     addNewPresentation = (presTitle: string) => {
         //let title = "Presentation " + (this.props.Documents.length + 1);
@@ -667,6 +678,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
+    /**
+     * The function that is called to change the current selected presentation.
+     * Changes the presentation, also resetting groupings and presentation in process.
+     * Plus retrieving the backUps for the newly selected presentation.
+     */
     @action
     getSelectedPresentation = (e: React.ChangeEvent<HTMLSelectElement>) => {
         let selectedGuid = e.target.value;
@@ -679,6 +695,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
+    /**
+     * The function that is called to render either select for presentations, or title inputting.
+     */
     renderSelectOrPresSelection = () => {
         let presentationList = DocListCast(this.props.Documents);
         if (this.PresTitleInputOpen) {
@@ -694,6 +713,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
 
+    /**
+     * The function that is called on enter press of title input. It gives the
+     * new presentation the title user entered. If nothing is entered, gives a default title.
+     */
     @action
     submitPresentationTitle = (e: React.KeyboardEvent) => {
         if (e.keyCode === 13) {
@@ -707,6 +730,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
 
+    /**
+     * The function that is called to remove a presentation from all its copies, and the main Container's
+     * list. Sets up the next presentation as current.
+     */
     @action
     removePresentation = () => {
         if (this.presentationsMapping.size !== 1) {
@@ -716,7 +743,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
             this.presentationsMapping.delete(this.currentSelectedPresValue!);
             let remainingPresentations = this.presentationsMapping.values();
             let nextDoc = remainingPresentations.next().value;
+            this.curPresentation = nextDoc;
+            this.resetGroupIds();
+            this.resetPresentation();
             this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
+            this.setPresentationBackUps();
             presentationList!.splice(presentationList!.indexOf(removedDoc!), 1);
         }
     }
-- 
cgit v1.2.3-70-g09d2


From e88538bb8af2ba648da2326d0f6edd3e0186766e Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Thu, 20 Jun 2019 15:45:07 -0400
Subject: Title changing to presentations added

---
 .../views/presentationview/PresentationView.tsx    | 38 +++++++++++++++++-----
 1 file changed, 30 insertions(+), 8 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 474001523..905117cd1 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -13,7 +13,7 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { Docs } from "../../documents/Documents";
 
 library.add(faArrowLeft);
@@ -23,6 +23,8 @@ library.add(faStop);
 library.add(faPlus);
 library.add(faTimes);
 library.add(faMinus);
+library.add(faEdit);
+
 
 export interface PresViewProps {
     Documents: List<Doc>;
@@ -136,6 +138,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable PresTitleInputOpen: boolean = false;
     //Variable that holds reference to title input, so that new presentations get titles assigned.
     @observable titleInputElement: HTMLInputElement | undefined;
+    @observable PresTitleChangeOpen: boolean = false;
 
     //initilize class variables
     constructor(props: PresViewProps) {
@@ -664,7 +667,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
      */
     @action
     addNewPresentation = (presTitle: string) => {
-        //let title = "Presentation " + (this.props.Documents.length + 1);
         let newPresentationDoc = Docs.TreeDocument([], { title: presTitle });
         this.props.Documents.push(newPresentationDoc);
         this.curPresentation = newPresentationDoc;
@@ -700,7 +702,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
      */
     renderSelectOrPresSelection = () => {
         let presentationList = DocListCast(this.props.Documents);
-        if (this.PresTitleInputOpen) {
+        if (this.PresTitleInputOpen || this.PresTitleChangeOpen) {
             return <input ref={(e) => this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />;
         } else {
             return <select value={this.currentSelectedPresValue} id="pres_selector" className="presentationView-title" onChange={this.getSelectedPresentation}>
@@ -722,11 +724,16 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (e.keyCode === 13) {
             let presTitle = this.titleInputElement!.value;
             this.titleInputElement!.value = "";
-            this.PresTitleInputOpen = false;
-            if (presTitle === "") {
-                presTitle = "Presentation";
+            if (this.PresTitleInputOpen) {
+                if (presTitle === "") {
+                    presTitle = "Presentation";
+                }
+                this.PresTitleInputOpen = false;
+                this.addNewPresentation(presTitle);
+            } else if (this.PresTitleChangeOpen) {
+                this.PresTitleChangeOpen = false;
+                this.changePresentationTitle(presTitle);
             }
-            this.addNewPresentation(presTitle);
         }
     }
 
@@ -752,6 +759,17 @@ export class PresentationView extends React.Component<PresViewProps>  {
         }
     }
 
+    /**
+     * The function that is called to change title of presentation to what user entered.
+     */
+    @action
+    changePresentationTitle = (newTitle: string) => {
+        if (newTitle === "") {
+            return;
+        }
+        this.curPresentation.title = newTitle;
+    }
+
 
     render() {
 
@@ -765,10 +783,14 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     {this.renderSelectOrPresSelection()}
                     <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
                     <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                        runInAction(() => { if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; } });
                         runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
                     }}><FontAwesomeIcon icon={"plus"} /></button>
                     <button title="Remove Presentation" className='presentation-icon' style={{ marginRight: 10 }} onClick={this.removePresentation}><FontAwesomeIcon icon={"minus"} /></button>
-
+                    <button title="Change Presentation Title" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                        runInAction(() => { if (this.PresTitleInputOpen) { this.PresTitleInputOpen = false; } });
+                        runInAction(() => this.PresTitleChangeOpen ? this.PresTitleChangeOpen = false : this.PresTitleChangeOpen = true);
+                    }}><FontAwesomeIcon icon={"edit"} /></button>
                 </div>
                 <div className="presentation-buttons">
                     <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
-- 
cgit v1.2.3-70-g09d2


From f4b75a7c921181faeeee04fbd57cd24fbd57523e Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Thu, 20 Jun 2019 19:16:42 -0400
Subject: Undo/Redo First Version

---
 .../views/presentationview/PresentationView.tsx    | 36 ++++++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 905117cd1..03e33dad7 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -15,6 +15,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { Docs } from "../../documents/Documents";
+import { undoBatch, UndoManager } from "../../util/UndoManager";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -560,11 +561,13 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (castedGroupDocs !== undefined) {
             castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
                 let castedGrouping = await DocListCastAsync(groupDoc.grouping);
+                // UndoManager.RunInBatch(() => {
                 if (castedGrouping) {
                     castedGrouping.forEach((doc: Doc) => {
                         doc.presentId = Utils.GenerateGuid();
                     });
                 }
+                // }, "guid assignment");
             });
         }
     }
@@ -742,27 +745,54 @@ export class PresentationView extends React.Component<PresViewProps>  {
      * list. Sets up the next presentation as current.
      */
     @action
-    removePresentation = () => {
+    removePresentation = async () => {
         if (this.presentationsMapping.size !== 1) {
             let presentationList = Cast(this.props.Documents, listSpec(Doc));
+            let batch = UndoManager.StartBatch("presRemoval");
             let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!);
+            presentationList!.splice(presentationList!.indexOf(removedDoc!), 1);
             this.presentationsKeyMapping.delete(removedDoc!);
             this.presentationsMapping.delete(this.currentSelectedPresValue!);
             let remainingPresentations = this.presentationsMapping.values();
             let nextDoc = remainingPresentations.next().value;
+
+
+            let curGuid = this.currentSelectedPresValue!;
+            let curPresStatus = this.presStatus;
+            UndoManager.AddEvent({
+                undo: action(() => {
+                    this.curPresentation = removedDoc!;
+                    this.presStatus = curPresStatus;
+                    this.presentationsMapping.set(curGuid, removedDoc!);
+                    this.presentationsKeyMapping.set(removedDoc!, curGuid);
+                    this.currentSelectedPresValue = curGuid;
+                    this.setPresentationBackUps();
+
+                }),
+                redo: action(() => {
+                    this.curPresentation = nextDoc;
+                    this.presStatus = false;
+                    this.presentationsKeyMapping.delete(removedDoc!);
+                    this.presentationsMapping.delete(curGuid);
+                    this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
+                    this.setPresentationBackUps();
+
+                }),
+            });
+
             this.curPresentation = nextDoc;
             this.resetGroupIds();
             this.resetPresentation();
             this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
             this.setPresentationBackUps();
-            presentationList!.splice(presentationList!.indexOf(removedDoc!), 1);
+            batch.end();
         }
     }
 
     /**
      * The function that is called to change title of presentation to what user entered.
      */
-    @action
+    @undoBatch
     changePresentationTitle = (newTitle: string) => {
         if (newTitle === "") {
             return;
-- 
cgit v1.2.3-70-g09d2


From 542f25d4af36cf0948696d45afba2e9e19f5bc37 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 21 Jun 2019 14:47:11 -0400
Subject: Redo Grouping Fixed

---
 .../views/presentationview/PresentationView.tsx    | 25 ++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 03e33dad7..f3e1d32fa 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -247,6 +247,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     retrieveGroupMappings = async () => {
         let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
         if (castedGroupDocs !== undefined) {
+            //runInAction(() => this.groupMappings = new Map());
             castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
                 let castedGrouping = await DocListCastAsync(groupDoc.grouping);
                 let castedKey = StrCast(groupDoc.presentIdStore, null);
@@ -570,6 +571,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 // }, "guid assignment");
             });
         }
+        runInAction(() => this.groupMappings = new Map());
     }
 
     /**
@@ -678,6 +680,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.presentationsKeyMapping.set(newPresentationDoc, newGuid);
         this.resetGroupIds();
         this.resetPresentation();
+        this.presElementsMappings = new Map();
         this.currentSelectedPresValue = newGuid;
         this.setPresentationBackUps();
 
@@ -694,6 +697,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.curPresentation = this.presentationsMapping.get(selectedGuid)!;
         this.resetGroupIds();
         this.resetPresentation();
+        this.presElementsMappings = new Map();
         this.currentSelectedPresValue = selectedGuid;
         this.setPresentationBackUps();
 
@@ -759,13 +763,25 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
             let curGuid = this.currentSelectedPresValue!;
             let curPresStatus = this.presStatus;
+
+            this.curPresentation = nextDoc;
+            this.resetGroupIds();
+            this.resetPresentation();
+            this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
+            this.setPresentationBackUps();
+            let currentGroups = this.groupMappings;
+            let curPresElemMapping = this.presElementsMappings;
             UndoManager.AddEvent({
                 undo: action(() => {
                     this.curPresentation = removedDoc!;
-                    this.presStatus = curPresStatus;
                     this.presentationsMapping.set(curGuid, removedDoc!);
                     this.presentationsKeyMapping.set(removedDoc!, curGuid);
                     this.currentSelectedPresValue = curGuid;
+                    //this.resetGroupIds();
+                    //this.resetPresentation();
+                    this.presStatus = curPresStatus;
+                    this.groupMappings = currentGroups;
+                    this.presElementsMappings = curPresElemMapping;
                     this.setPresentationBackUps();
 
                 }),
@@ -775,16 +791,13 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     this.presentationsKeyMapping.delete(removedDoc!);
                     this.presentationsMapping.delete(curGuid);
                     this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
+                    //this.resetGroupIds();
+                    // this.resetPresentation();
                     this.setPresentationBackUps();
 
                 }),
             });
 
-            this.curPresentation = nextDoc;
-            this.resetGroupIds();
-            this.resetPresentation();
-            this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
-            this.setPresentationBackUps();
             batch.end();
         }
     }
-- 
cgit v1.2.3-70-g09d2


From e1f5f341854944c533efdb7d36306edd1e1dc747 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 21 Jun 2019 14:53:08 -0400
Subject: Some More documentation

---
 .../views/presentationview/PresentationView.tsx    | 31 ++++++++++++++++++----
 1 file changed, 26 insertions(+), 5 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index f3e1d32fa..83ca7dbe0 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -672,12 +672,19 @@ export class PresentationView extends React.Component<PresViewProps>  {
      */
     @action
     addNewPresentation = (presTitle: string) => {
+        //creating a new presentation doc
         let newPresentationDoc = Docs.TreeDocument([], { title: presTitle });
         this.props.Documents.push(newPresentationDoc);
+
+        //setting that new doc as current
         this.curPresentation = newPresentationDoc;
+
+        //storing the doc in local copies for easier access
         let newGuid = Utils.GenerateGuid();
         this.presentationsMapping.set(newGuid, newPresentationDoc);
         this.presentationsKeyMapping.set(newPresentationDoc, newGuid);
+
+        //resetting the previous presentation's actions so that new presentation can be loaded.
         this.resetGroupIds();
         this.resetPresentation();
         this.presElementsMappings = new Map();
@@ -693,8 +700,12 @@ export class PresentationView extends React.Component<PresViewProps>  {
      */
     @action
     getSelectedPresentation = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        //get the guid of the selected presentation
         let selectedGuid = e.target.value;
+        //set that as current presentation
         this.curPresentation = this.presentationsMapping.get(selectedGuid)!;
+
+        //reset current Presentations local things so that new one can be loaded
         this.resetGroupIds();
         this.resetPresentation();
         this.presElementsMappings = new Map();
@@ -753,32 +764,44 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (this.presentationsMapping.size !== 1) {
             let presentationList = Cast(this.props.Documents, listSpec(Doc));
             let batch = UndoManager.StartBatch("presRemoval");
+
+            //getting the presentation that will be removed
             let removedDoc = this.presentationsMapping.get(this.currentSelectedPresValue!);
+            //that presentation is removed
             presentationList!.splice(presentationList!.indexOf(removedDoc!), 1);
+
+            //its mappings are removed from local copies
             this.presentationsKeyMapping.delete(removedDoc!);
             this.presentationsMapping.delete(this.currentSelectedPresValue!);
+
+            //the next presentation is set as current
             let remainingPresentations = this.presentationsMapping.values();
             let nextDoc = remainingPresentations.next().value;
+            this.curPresentation = nextDoc;
 
 
+            //Storing these for being able to undo changes
             let curGuid = this.currentSelectedPresValue!;
             let curPresStatus = this.presStatus;
 
-            this.curPresentation = nextDoc;
+            //resetting the groups and presentation actions so that next presentation gets loaded
             this.resetGroupIds();
             this.resetPresentation();
             this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
             this.setPresentationBackUps();
+
+            //Storing for undo
             let currentGroups = this.groupMappings;
             let curPresElemMapping = this.presElementsMappings;
+
+            //Event to undo actions that are not related to doc directly, aka. local things
             UndoManager.AddEvent({
                 undo: action(() => {
                     this.curPresentation = removedDoc!;
                     this.presentationsMapping.set(curGuid, removedDoc!);
                     this.presentationsKeyMapping.set(removedDoc!, curGuid);
                     this.currentSelectedPresValue = curGuid;
-                    //this.resetGroupIds();
-                    //this.resetPresentation();
+
                     this.presStatus = curPresStatus;
                     this.groupMappings = currentGroups;
                     this.presElementsMappings = curPresElemMapping;
@@ -791,8 +814,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     this.presentationsKeyMapping.delete(removedDoc!);
                     this.presentationsMapping.delete(curGuid);
                     this.currentSelectedPresValue = this.presentationsKeyMapping.get(nextDoc)!.toString();
-                    //this.resetGroupIds();
-                    // this.resetPresentation();
                     this.setPresentationBackUps();
 
                 }),
-- 
cgit v1.2.3-70-g09d2


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/PresentationElement.tsx |  1 -
 .../views/presentationview/PresentationList.tsx    | 89 ++++++++++++++++++++++
 .../views/presentationview/PresentationView.tsx    | 87 +--------------------
 3 files changed, 90 insertions(+), 87 deletions(-)
 create mode 100644 src/client/views/presentationview/PresentationList.tsx

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index b12dfd9d5..07cdcd43a 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -364,7 +364,6 @@ export default class PresentationElement extends React.Component<PresentationEle
         let p = this.props;
         let title = p.document.title;
 
-
         //to get currently selected presentation doc
         let selected = NumCast(p.mainDocument.selectedDoc, 0);
 
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
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 83ca7dbe0..50defa197 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -9,13 +9,13 @@ import { listSpec } from "../../../new_fields/Schema";
 import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
-import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { Docs } from "../../documents/Documents";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
+import PresentationViewList from "./PresentationList";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -31,86 +31,6 @@ export interface PresViewProps {
     Documents: List<Doc>;
 }
 
-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.
- */
-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>
-        );
-    }
-}
-
-
 @observer
 export class PresentationView extends React.Component<PresViewProps>  {
     public static Instance: PresentationView;
@@ -247,7 +167,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
     retrieveGroupMappings = async () => {
         let castedGroupDocs = await DocListCastAsync(this.presGroupBackUp.groupDocs);
         if (castedGroupDocs !== undefined) {
-            //runInAction(() => this.groupMappings = new Map());
             castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
                 let castedGrouping = await DocListCastAsync(groupDoc.grouping);
                 let castedKey = StrCast(groupDoc.presentIdStore, null);
@@ -562,13 +481,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (castedGroupDocs !== undefined) {
             castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
                 let castedGrouping = await DocListCastAsync(groupDoc.grouping);
-                // UndoManager.RunInBatch(() => {
                 if (castedGrouping) {
                     castedGrouping.forEach((doc: Doc) => {
                         doc.presentId = Utils.GenerateGuid();
                     });
                 }
-                // }, "guid assignment");
             });
         }
         runInAction(() => this.groupMappings = new Map());
@@ -839,8 +756,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         let width = NumCast(this.curPresentation.width);
 
-
-        //TODO: next and back should be icons
         return (
             <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
                 <div className="presentationView-heading">
-- 
cgit v1.2.3-70-g09d2


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

---
 src/client/views/presentationview/PresentationView.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 50defa197..20d0e113a 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -776,8 +776,18 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     {this.renderPlayPauseButton()}
                     <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
-                <PresentationViewList mainDocument={this.curPresentation} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} presButtonBackUp={this.presButtonBackUp} presGroupBackUp={this.presGroupBackUp} />
+                <PresentationViewList
+                    mainDocument={this.curPresentation}
+                    deleteDocument={this.RemoveDoc}
+                    gotoDocument={this.gotoDocument}
+                    groupMappings={this.groupMappings}
+                    presElementsMappings={this.presElementsMappings}
+                    setChildrenDocs={this.setChildrenDocs}
+                    presStatus={this.presStatus}
+                    presButtonBackUp={this.presButtonBackUp}
+                    presGroupBackUp={this.presGroupBackUp}
+                />
             </div>
         );
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From db34b52b66311a72f986a0406acdb935369d264f Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 1 Jul 2019 12:38:51 -0400
Subject: added some context menu undo's

---
 src/client/views/TemplateMenu.tsx                   |  2 ++
 src/client/views/nodes/DocumentView.tsx             | 21 ++++++++++++++++++---
 .../views/presentationview/PresentationView.tsx     |  1 +
 3 files changed, 21 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index a9bc4d3d2..a53c8749a 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -6,6 +6,7 @@ import './DocumentDecorations.scss';
 import { DocumentView } from "./nodes/DocumentView";
 import { Template } from "./Templates";
 import React = require("react");
+import { undoBatch } from "../util/UndoManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -39,6 +40,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
         super(props);
     }
 
+    @undoBatch
     @action
     toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
         if (event.target.checked) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9edde896f..a6f324a04 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -393,8 +393,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._lastTap = Date.now();
     }
 
-    deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); };
-    fieldsClicked = (): void => { let kvp = Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }); this.props.addDocTab(kvp, this.dataDoc, "onRight"); };
+    @undoBatch
+    deleteClicked = (): void => { SelectionManager.DeselectAll(); this.props.removeDocument && this.props.removeDocument(this.props.Document); }
+
+    @undoBatch
+    fieldsClicked = (): void => { let kvp = Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }); this.props.addDocTab(kvp, this.dataDoc, "onRight"); }
+
+    @undoBatch
     makeBtnClicked = (): void => {
         let doc = Doc.GetProto(this.props.Document);
         doc.isButton = !BoolCast(doc.isButton, false);
@@ -407,6 +412,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             doc.nativeWidth = doc.nativeHeight = undefined;
         }
     }
+
+    @undoBatch
     public fullScreenClicked = (): void => {
         CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(this);
         SelectionManager.DeselectAll();
@@ -467,6 +474,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this.templates = this.templates;
     }
 
+    @undoBatch
+    @action
     freezeNativeDimensions = (): void => {
         let proto = Doc.GetProto(this.props.Document);
         if (proto.ignoreAspect === undefined && !proto.nativeWidth) {
@@ -477,6 +486,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         proto.ignoreAspect = !BoolCast(proto.ignoreAspect, false);
     }
 
+    @undoBatch
+    @action
+    toggleLockPosition = (): void => {
+        this.props.Document.lockedPosition = BoolCast(this.props.Document.lockedPosition) ? undefined : true;
+    }
+
     @action
     onContextMenu = async (e: React.MouseEvent): Promise<void> => {
         e.persist();
@@ -499,7 +514,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         cm.addItem({ description: "Open...", subitems: subitems, icon: "external-link-alt" });
         cm.addItem({ description: BoolCast(this.props.Document.ignoreAspect, false) || !this.props.Document.nativeWidth || !this.props.Document.nativeHeight ? "Freeze" : "Unfreeze", event: this.freezeNativeDimensions, icon: "edit" });
         cm.addItem({ description: "Pin to Pres", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" });
-        cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Pos" : "Lock Pos", event: () => this.props.Document.lockedPosition = BoolCast(this.props.Document.lockedPosition) ? undefined : true, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" });
+        cm.addItem({ description: BoolCast(this.props.Document.lockedPosition) ? "Unlock Pos" : "Lock Pos", event: this.toggleLockPosition, icon: BoolCast(this.props.Document.lockedPosition) ? "unlock" : "lock" });
         cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeBtnClicked, icon: "concierge-bell" });
         cm.addItem({
             description: "Find aliases", event: async () => {
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 20d0e113a..a3fa553b7 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -494,6 +494,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     /**
      * Adds a document to the presentation view
      **/
+    @undoBatch
     @action
     public PinDoc(doc: Doc) {
         //add this new doc to props.Document
-- 
cgit v1.2.3-70-g09d2

