From 0e4729a8d634c67a3575761784b840a28694ba7a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 19 Aug 2019 15:55:36 -0400
Subject: fixed treeview dragging.  got rid of extra stuff from
 presentationview

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

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index d98b66324..912970a50 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -15,7 +15,7 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { ContextMenu } from "../ContextMenu";
 import { Transform } from "../../util/Transform";
 import { DocumentView } from "../nodes/DocumentView";
-import { DocumentType } from "../../documents/Documents";
+import { DocumentType } from "../../documents/DocumentTypes";
 import React = require("react");
 
 
@@ -839,6 +839,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                     removeDocument={returnFalse}
                     ScreenToLocalTransform={Transform.Identity}
                     addDocTab={returnFalse}
+                    pinToPres={returnFalse}
                     renderDepth={1}
                     PanelWidth={() => 350}
                     PanelHeight={() => 90}
-- 
cgit v1.2.3-70-g09d2


From 3e33c2f1642195e023673cf669c4b5820fe2aeba Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 21 Aug 2019 15:46:23 -0400
Subject: restructed presentationview

---
 src/client/views/nodes/PresBox.tsx                 | 279 ++--------
 .../views/presentationview/PresentationElement.tsx | 611 ++-------------------
 .../views/presentationview/PresentationList.tsx    |  47 +-
 .../views/presentationview/PresentationView.scss   |  10 +-
 src/new_fields/Doc.ts                              |   3 +
 5 files changed, 128 insertions(+), 822 deletions(-)

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

diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 112d39c32..cf222601f 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -12,7 +12,7 @@ import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_field
 import { Utils } from "../../../Utils";
 import { DocumentManager } from "../../util/DocumentManager";
 import { undoBatch } from "../../util/UndoManager";
-import PresentationElement, { buttonIndex } from "../presentationview/PresentationElement";
+import PresentationElement from "../presentationview/PresentationElement";
 import PresentationViewList from "../presentationview/PresentationList";
 import "../presentationview/PresentationView.scss";
 import { FieldView, FieldViewProps } from './FieldView';
@@ -45,17 +45,12 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
     //Keeping track of the doc for the current presentation -- bcz: keeping a list of current presentations shouldn't be needed.  Let users create them, store them, as they see fit.
     @computed get curPresentation() { return this.props.Document; }
 
-    //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[] = [];
     //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();
     //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.
@@ -102,87 +97,11 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      * otherwise initializes.
      */
     setPresentationBackUps = async () => {
-        //getting both backUp documents
-
-        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.curPresentation.presGroupBackUp = toAssign;
-                runInAction(() => this.presGroupBackUp = toAssign);
-                if (doc) {
-                    if (toAssign[Id] === doc[Id]) {
-                        this.retrieveGroupMappings();
-                    }
-                }
-            });
-
-            //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();
-                this.presGroupBackUp = toAssign;
-                this.curPresentation.presGroupBackUp = toAssign;
-
-            });
-
-        }
-        //if instantiated before 
-        if (castedButtonBackUp instanceof Promise) {
-            castedButtonBackUp.then(doc => {
-                let toAssign = doc ? doc : new Doc();
-                this.curPresentation.presButtonBackUp = toAssign;
-                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);
-
-        } else {
-            runInAction(() => {
-                let toAssign = new Doc();
-                this.presButtonBackUp = toAssign;
-                this.curPresentation.presButtonBackUp = toAssign;
-            });
-
-        }
-
-
         //storing the presentation status,ie. whether it was stopped or playing
         let presStatusBackUp = BoolCast(this.curPresentation.presStatus);
         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 () => {
-        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) {
-                    castedGrouping.forEach((doc: Doc) => {
-                        doc.presentId = castedKey;
-                    });
-                }
-                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;
@@ -193,17 +112,13 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
         if (docAtCurrentNext === undefined) {
             return;
         }
-        //asking for it's presentation id
-        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(curNextPresId)) {
-            let currentsArray = this.groupMappings.get(StrCast(docAtCurrentNext.presentId))!;
-            nextSelected = current + currentsArray.length - currentsArray.indexOf(docAtCurrentNext);
+        let presDocs = DocListCast(this.curPresentation.data);
+        for (; nextSelected < presDocs.length - 1; nextSelected++) {
+            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton)
+                break;
 
-            //end of grup so go beyond
-            if (nextSelected === current) nextSelected = current + 1;
         }
 
         this.gotoDocument(nextSelected, current);
@@ -219,31 +134,31 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
 
         //asking for its presentation id.
         let curPresId = StrCast(docAtCurrent.presentId);
-        let prevSelected = current - 1;
+        let prevSelected = current;
         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)) {
-            let currentsArray = this.groupMappings.get(StrCast(docAtCurrent.presentId))!;
-            prevSelected = current - currentsArray.length + (currentsArray.length - currentsArray.indexOf(docAtCurrent)) - 1;
-            //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) => {
-                //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc);
-                if (this.presElementsMappings.get(doc)!.selected[buttonIndex.Show]) {
-                    zoomOut = true;
-                    return;
-                }
-            });
-
+        let presDocs = DocListCast(this.curPresentation.data);
+        let currentsArray: Doc[] = [];
+        for (; prevSelected > 0 && presDocs[prevSelected].groupButton; prevSelected--) {
+            currentsArray.push(presDocs[prevSelected]);
         }
+        prevSelected = Math.max(0, prevSelected - 1);
+
+        //checking if any of the group members had used zooming in
+        currentsArray.forEach((doc: Doc) => {
+            //let presElem: PresentationElement | undefined = this.presElementsMappings.get(doc);
+            if (this.presElementsMappings.get(doc)!.props.document.showButton) {
+                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 (current > 0) {
-            if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.selected[buttonIndex.Show]) {
+            if (zoomOut || this.presElementsMappings.get(docAtCurrent)!.showButton) {
                 let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null);
                 let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]);
                 if (prevScale !== undefined) {
@@ -264,19 +179,18 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      */
     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 (presElem.props.document.hideTillShownButton) {
                 if (this.childrenDocs.indexOf(key) <= index) {
                     key.opacity = 1;
                 }
             }
-            if (selectedButtons[buttonIndex.HideAfter]) {
+            if (presElem.props.document.hideAfterButton) {
                 if (this.childrenDocs.indexOf(key) < index) {
                     key.opacity = 0;
                 }
             }
-            if (selectedButtons[buttonIndex.FadeAfter]) {
+            if (presElem.props.document.fadeButton) {
                 if (this.childrenDocs.indexOf(key) < index) {
                     key.opacity = 0.5;
                 }
@@ -291,21 +205,19 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      */
     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 (presElem.props.document.hideAfterButton) {
                 if (this.childrenDocs.indexOf(key) >= index) {
                     key.opacity = 1;
                 }
             }
-            if (selectedButtons[buttonIndex.FadeAfter]) {
+            if (presElem.props.document.fadeButton) {
                 if (this.childrenDocs.indexOf(key) >= index) {
                     key.opacity = 1;
                 }
             }
-            if (selectedButtons[buttonIndex.HideTillPressed]) {
+            if (presElem.props.document.hideTillShownButton) {
                 if (this.childrenDocs.indexOf(key) > index) {
                     key.opacity = 0;
                 }
@@ -320,34 +232,35 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      */
     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) {
-            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;
-                        willZoom = false;
-                    }
-                    if (selectedButtons[buttonIndex.Show]) {
-                        docToJump = doc;
-                        willZoom = true;
-                    }
-                });
-            }
 
+        let presDocs = DocListCast(this.curPresentation.data);
+        let nextSelected = presDocs.indexOf(curDoc);
+        let currentDocGroups: Doc[] = [];
+        for (; nextSelected < presDocs.length - 1; nextSelected++) {
+            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton)
+                break;
+            currentDocGroups.push(presDocs[nextSelected]);
         }
+
+        currentDocGroups.forEach((doc: Doc, index: number) => {
+            if (this.presElementsMappings.get(doc)!.navButton) {
+                docToJump = doc;
+                willZoom = false;
+            }
+            if (this.presElementsMappings.get(doc)!.showButton) {
+                docToJump = doc;
+                willZoom = true;
+            }
+        });
+
         //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
-            let curDocButtons = this.presElementsMappings.get(curDoc)!.selected;
-            if (curDocButtons[buttonIndex.Navigate]) {
+            if (this.presElementsMappings.get(curDoc)!.navButton) {
                 DocumentManager.Instance.jumpToDocument(curDoc, false);
-            } else if (curDocButtons[buttonIndex.Show]) {
+            } else if (this.presElementsMappings.get(curDoc)!.showButton) {
                 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);
@@ -406,69 +319,6 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
             //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) {
-                    removedDocsGroup.splice(removedDocsGroup.indexOf(removedDoc), 1);
-                    if (removedDocsGroup.length === 0) {
-                        this.groupMappings.delete(removedDocPresentId);
-                    }
-                }
-            }
-
-            //removing it from the backUp of selected Buttons
-            // let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
-            // if (castedList) {
-            //     castedList.forEach(async (doc, indexOfDoc) => {
-            //         let curDoc = await doc;
-            //         let curDocId = StrCast(curDoc.docId);
-            //         if (curDocId === removedDoc[Id]) {
-            //             if (castedList) {
-            //                 castedList.splice(indexOfDoc, 1);
-            //                 return;
-            //             }
-            //         }
-            //     });
-
-            // }
-            //removing it from the backUp of selected Buttons
-
-            let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
-            if (castedList) {
-                for (let doc of castedList) {
-                    let curDoc = await doc;
-                    let curDocId = StrCast(curDoc.docId);
-                    if (curDocId === removedDoc[Id]) {
-                        castedList.splice(castedList.indexOf(curDoc), 1);
-                        break;
-
-                    }
-                }
-            }
-
-            //removing it from the backup of groups
-            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);
-                            }
-                        }
-                    }
-
-                });
-
-            }
-
-
         }
     }
 
@@ -489,6 +339,7 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
     //it'll also execute the necessary actions if presentation is playing.
     @action
     public gotoDocument = async (index: number, fromDoc: number) => {
+        Doc.UnBrushAllDocs();
         const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
         if (!list) {
             return;
@@ -509,26 +360,7 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
             this.hideIfNotPresented(index);
             this.showAfterPresented(index);
         }
-
     }
-
-    //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) {
-            castedGroupDocs.forEach(async (groupDoc: Doc, index: number) => {
-                let castedGrouping = await DocListCastAsync(groupDoc.grouping);
-                if (castedGrouping) {
-                    castedGrouping.forEach((doc: Doc) => {
-                        doc.presentId = Utils.GenerateGuid();
-                    });
-                }
-            });
-        }
-        runInAction(() => this.groupMappings = new Map());
-    }
-
     //Function that sets the store of the children docs.
     @action
     setChildrenDocs = (docList: Doc[]) => {
@@ -580,21 +412,19 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
     //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) => {
-            selectedButtons = component.selected;
-            if (selectedButtons[buttonIndex.HideTillPressed]) {
+            if (component.props.document.hideTillShownButton) {
                 if (this.childrenDocs.indexOf(doc) > startIndex) {
                     doc.opacity = 0;
                 }
 
             }
-            if (selectedButtons[buttonIndex.HideAfter]) {
+            if (component.props.document.hideAfterButton) {
                 if (this.childrenDocs.indexOf(doc) < startIndex) {
                     doc.opacity = 0;
                 }
             }
-            if (selectedButtons[buttonIndex.FadeAfter]) {
+            if (component.props.document.fadeButton) {
                 if (this.childrenDocs.indexOf(doc) < startIndex) {
                     doc.opacity = 0.5;
                 }
@@ -684,12 +514,9 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
                     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}
                     removeDocByRef={this.removeDocByRef}
                     clearElemMap={() => this.presElementsMappings.clear()}
                 />
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 912970a50..68c5a5b8d 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -1,21 +1,19 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
-import { faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction } from "mobx";
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
-import { List } from "../../../new_fields/List";
-import { listSpec } from "../../../new_fields/Schema";
-import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types";
-import { Utils, returnFalse, emptyFunction, returnOne, returnEmptyString } from "../../../Utils";
+import { BoolCast, NumCast, StrCast } from "../../../new_fields/Types";
+import { emptyFunction, returnEmptyString, returnFalse, returnOne } from "../../../Utils";
+import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
-import { ContextMenu } from "../ContextMenu";
 import { Transform } from "../../util/Transform";
+import { ContextMenu } from "../ContextMenu";
 import { DocumentView } from "../nodes/DocumentView";
-import { DocumentType } from "../../documents/DocumentTypes";
 import React = require("react");
 
 
@@ -33,26 +31,9 @@ interface PresentationElementProps {
     deleteDocument(index: number): void;
     gotoDocument(index: number, fromDoc: number): Promise<void>;
     allListElements: Doc[];
-    groupMappings: Map<String, Doc[]>;
     presStatus: boolean;
-    presButtonBackUp: Doc;
-    presGroupBackUp: Doc;
     removeDocByRef(doc: Doc): boolean;
     PresElementsMappings: Map<Doc, PresentationElement>;
-
-
-}
-
-//enum for the all kinds of buttons a doc in presentation can have
-export enum buttonIndex {
-    Show = 0,
-    Navigate = 1,
-    HideTillPressed = 2,
-    FadeAfter = 3,
-    HideAfter = 4,
-    Group = 5,
-    OpenRight = 6
-
 }
 
 /**
@@ -62,37 +43,33 @@ export enum buttonIndex {
 @observer
 export default class PresentationElement extends React.Component<PresentationElementProps> {
 
-    @observable private selectedButtons: boolean[];
     private header?: HTMLDivElement | undefined;
     private listdropDisposer?: DragManager.DragDropDisposer;
-    private presElRef: React.RefObject<HTMLDivElement>;
-    private backUpDoc: Doc | undefined;
-
-
-    constructor(props: PresentationElementProps) {
-        super(props);
-        this.selectedButtons = new Array(7);
-
-        this.presElRef = React.createRef();
-    }
-
+    private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     componentWillUnmount() {
         this.listdropDisposer && this.listdropDisposer();
     }
 
+    @computed get currentIndex() { return NumCast(this.props.mainDocument.selectedDoc); }
 
-    /**
-     * Getter to get the status of the buttons.
-     */
-    @computed
-    get selected() {
-        return this.selectedButtons;
-    }
+    @computed get showButton() { return BoolCast(this.props.document.showButton); }
+    @computed get navButton() { return BoolCast(this.props.document.navButton); }
+    @computed get hideTillShownButton() { return BoolCast(this.props.document.hideTillShownButton); }
+    @computed get fadeButton() { return BoolCast(this.props.document.fadeButton); }
+    @computed get hideAfterButton() { return BoolCast(this.props.document.hideAfterButton); }
+    @computed get groupButton() { return BoolCast(this.props.document.groupButton); }
+    @computed get openRightButton() { return BoolCast(this.props.document.openRightButton); }
+    set showButton(val: boolean) { this.props.document.showButton = val; }
+    set navButton(val: boolean) { this.props.document.navButton = val; }
+    set hideTillShownButton(val: boolean) { this.props.document.hideTillShownButton = val; }
+    set fadeButton(val: boolean) { this.props.document.fadeButton = val; }
+    set hideAfterButton(val: boolean) { this.props.document.hideAfterButton = val; }
+    set groupButton(val: boolean) { this.props.document.groupButton = val; }
+    set openRightButton(val: boolean) { this.props.document.openRightButton = val; }
 
     //Lifecycle function that makes sure that button BackUp is received when mounted.
     async componentDidMount() {
-        this.receiveButtonBackUp();
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
@@ -107,156 +84,9 @@ export default class PresentationElement extends React.Component<PresentationEle
         }
     }
 
-    /**
-     * Function that will be called to receive stored backUp for buttons
-     */
-    receiveButtonBackUp = async () => {
-
-        //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>();
-        }
-
-        let foundDoc: boolean = false;
-
-        //if this is the first time this doc mounts, push a doc for it to store
-
-        for (let doc of castedList) {
-            let curDoc = await doc;
-            let curDocId = StrCast(curDoc.docId);
-            if (curDocId === this.props.document[Id]) {
-                let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-                if (selectedButtonOfDoc !== undefined) {
-                    runInAction(() => this.selectedButtons = selectedButtonOfDoc);
-                    foundDoc = true;
-                    this.backUpDoc = curDoc;
-                    break;
-                }
-            }
-        }
-
-        if (!foundDoc) {
-            let newDoc = new Doc();
-            let defaultBooleanArray: boolean[] = new Array(7);
-            newDoc.selectedButtons = new List(defaultBooleanArray);
-            newDoc.docId = this.props.document[Id];
-            castedList.push(newDoc);
-            this.backUpDoc = newDoc;
-        }
-
-    }
-
-    /**
-     * 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) {
-                //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) => {
-                            if (!aboveArray.includes(doc)) {
-                                aboveArray.push(doc);
-                            }
-                            doc.presentId = aboveGuid;
-                        });
-                        p.groupMappings.delete(docGuid);
-                        //the case where doc was not in group
-                    } else {
-                        if (!aboveArray.includes(document)) {
-                            aboveArray.push(document);
-
-                        }
-
-                    }
-                    //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) => {
-                            newAboveArray.push(doc);
-                            doc.presentId = aboveGuid;
-                        });
-                        p.groupMappings.delete(docGuid);
-
-                        //the case where doc is not in a group
-                    } else {
-                        newAboveArray.push(document);
-
-                    }
-                    p.groupMappings.set(aboveGuid, newAboveArray);
-
-                }
-                document.presentId = aboveGuid;
-
-                //when grouping is turned off
-            } 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);
-
-
-            }
-
-        }
-        this.autoSaveGroupChanges();
-
-    }
-
-
-    /**
-     * 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);
-        });
-
-    }
-
-    /**
-     * 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]) {
-            this.selectedButtons[buttonIndex.Group] = false;
-        } else {
-            this.selectedButtons[buttonIndex.Group] = true;
-        }
-        this.autoSaveButtonChange(buttonIndex.Group);
-
+    onGroupClick = (e: React.MouseEvent) => {
+        this.groupButton = !this.groupButton;
     }
 
     /**
@@ -266,31 +96,18 @@ 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;
-            if (this.props.index >= current) {
+        this.hideTillShownButton = !this.hideTillShownButton;
+        if (!this.hideTillShownButton) {
+            if (this.props.index >= this.currentIndex) {
                 this.props.document.opacity = 1;
             }
         } else {
-            this.selectedButtons[buttonIndex.HideTillPressed] = true;
             if (this.props.presStatus) {
-                if (this.props.index > current) {
+                if (this.props.index > this.currentIndex) {
                     this.props.document.opacity = 0;
                 }
             }
         }
-        this.autoSaveButtonChange(buttonIndex.HideTillPressed);
-    }
-
-    /**
-     * This function is called to get the updates for the changed buttons.
-     */
-    @action
-    autoSaveButtonChange = async (index: buttonIndex) => {
-        if (this.backUpDoc) {
-            this.backUpDoc.selectedButtons = new List(this.selectedButtons);
-        }
     }
 
     /**
@@ -301,25 +118,19 @@ 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.hideAfterButton = !this.hideAfterButton;
+        if (!this.hideAfterButton) {
+            if (this.props.index <= this.currentIndex) {
                 this.props.document.opacity = 1;
             }
         } else {
-            if (this.selectedButtons[buttonIndex.FadeAfter]) {
-                this.selectedButtons[buttonIndex.FadeAfter] = false;
-            }
-            this.selectedButtons[buttonIndex.HideAfter] = true;
+            if (this.fadeButton) this.fadeButton = false;
             if (this.props.presStatus) {
-                if (this.props.index < current) {
+                if (this.props.index < this.currentIndex) {
                     this.props.document.opacity = 0;
                 }
             }
         }
-        this.autoSaveButtonChange(buttonIndex.HideAfter);
-
     }
 
     /**
@@ -330,25 +141,19 @@ 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.fadeButton = !this.fadeButton;
+        if (!this.fadeButton) {
+            if (this.props.index <= this.currentIndex) {
                 this.props.document.opacity = 1;
             }
         } else {
-            if (this.selectedButtons[buttonIndex.HideAfter]) {
-                this.selectedButtons[buttonIndex.HideAfter] = false;
-            }
-            this.selectedButtons[buttonIndex.FadeAfter] = true;
+            this.hideAfterButton = false;
             if (this.props.presStatus) {
-                if (this.props.index < current) {
+                if (this.props.index < this.currentIndex) {
                     this.props.document.opacity = 0.5;
                 }
             }
         }
-        this.autoSaveButtonChange(buttonIndex.FadeAfter);
-
     }
 
     /**
@@ -357,22 +162,13 @@ 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 {
-            if (this.selectedButtons[buttonIndex.Show]) {
-                this.selectedButtons[buttonIndex.Show] = false;
-            }
-            this.selectedButtons[buttonIndex.Navigate] = true;
-            const current = NumCast(this.props.mainDocument.selectedDoc);
-            if (current === this.props.index) {
+        this.navButton = !this.navButton;
+        if (this.navButton) {
+            this.showButton = false;
+            if (this.currentIndex === this.props.index) {
                 this.props.gotoDocument(this.props.index, this.props.index);
             }
         }
-
-        this.autoSaveButtonChange(buttonIndex.Navigate);
-
     }
 
     /**
@@ -381,23 +177,16 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onZoomDocumentClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        if (this.selectedButtons[buttonIndex.Show]) {
-            this.selectedButtons[buttonIndex.Show] = false;
-            this.props.document.viewScale = 1;
 
+        this.showButton = !this.showButton;
+        if (!this.showButton) {
+            this.props.document.viewScale = 1;
         } else {
-            if (this.selectedButtons[buttonIndex.Navigate]) {
-                this.selectedButtons[buttonIndex.Navigate] = false;
-            }
-            this.selectedButtons[buttonIndex.Show] = true;
-            const current = NumCast(this.props.mainDocument.selectedDoc);
-            if (current === this.props.index) {
+            this.navButton = false;
+            if (this.currentIndex === this.props.index) {
                 this.props.gotoDocument(this.props.index, this.props.index);
             }
         }
-
-        this.autoSaveButtonChange(buttonIndex.Show);
-
     }
 
     /**
@@ -407,13 +196,8 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onRightTabClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        if (this.selectedButtons[buttonIndex.OpenRight]) {
-            this.selectedButtons[buttonIndex.OpenRight] = false;
-            // action maybe
-        } else {
-            this.selectedButtons[buttonIndex.OpenRight] = true;
-        }
-        this.autoSaveButtonChange(buttonIndex.OpenRight);
+
+        this.openRightButton = !this.openRightButton;
     }
 
     /**
@@ -449,8 +233,6 @@ export default class PresentationElement extends React.Component<PresentationEle
             //where does treeViewId come from
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
             //console.log("How is this causing an issue");
-            let droppedDoc: Doc = de.data.droppedDocuments[0];
-            await this.updateGroupsOnDrop(droppedDoc, de);
             document.removeEventListener("pointermove", this.onDragMove, true);
             return (de.data.dropAction || de.data.userDropAction) ?
                 de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false)
@@ -463,221 +245,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         return false;
     }
 
-    /**
-     * This method is called to update groups when the user drags and drops an
-     * element to a different place. It follows the default behaviour and reconstructs
-     * the groups in the way they would appear if clicked by user.
-     */
-    updateGroupsOnDrop = async (droppedDoc: Doc, de: DragManager.DropEvent) => {
-
-        let x = this.ScreenToLocalListTransform(de.x, de.y);
-        let rect = this.header!.getBoundingClientRect();
-        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
-        let before = x[1] < bounds[1];
-
-        let droppedDocIndex = this.props.allListElements.indexOf(droppedDoc);
-
-        let dropIndexDiff = droppedDocIndex - this.props.index;
-
-        //checking if the position it's dropped corresponds to current location with 3 cases.
-        if (droppedDocIndex === this.props.index) {
-            return;
-        }
-
-        if (dropIndexDiff === 1 && !before) {
-            return;
-        }
-        if (dropIndexDiff === -1 && before) {
-            return;
-        }
-
-        let p = this.props;
-        let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc);
-        let curDocGuid = StrCast(droppedDoc.presentId, null);
-
-        //Splicing the doc from its current group, since it's moved
-        if (p.groupMappings.has(curDocGuid)) {
-            let groupArray = this.props.groupMappings.get(curDocGuid)!;
-
-            if (droppedDocSelectedButtons[buttonIndex.Group]) {
-                let groupIndexOfDrop = groupArray.indexOf(droppedDoc);
-                let firstPart = groupArray.splice(0, groupIndexOfDrop);
-
-                if (firstPart.length > 1) {
-                    let newGroupGuid = Utils.GenerateGuid();
-                    firstPart.forEach((doc: Doc) => doc.presentId = newGroupGuid);
-                    this.props.groupMappings.set(newGroupGuid, firstPart);
-                }
-            }
-
-            groupArray.splice(groupArray.indexOf(droppedDoc), 1);
-            if (groupArray.length === 0) {
-                this.props.groupMappings.delete(curDocGuid);
-            }
-            droppedDoc.presentId = Utils.GenerateGuid();
-
-            //making sure to correct to groups after splicing, in case the dragged element
-            //had the grouping on.
-            let indexOfBelow = droppedDocIndex + 1;
-            if (indexOfBelow < this.props.allListElements.length && indexOfBelow > 1) {
-                let selectedButtonsOrigBelow: boolean[] = await this.getSelectedButtonsOfDoc(this.props.allListElements[indexOfBelow]);
-                let aboveBelowDoc: Doc = this.props.allListElements[droppedDocIndex - 1];
-                let aboveBelowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveBelowDoc);
-                let belowDoc: Doc = this.props.allListElements[indexOfBelow];
-                let belowDocPresId = StrCast(belowDoc.presentId);
-
-                if (selectedButtonsOrigBelow[buttonIndex.Group]) {
-                    let belowDocGroup: Doc[] = this.props.groupMappings.get(belowDocPresId)!;
-                    if (aboveBelowDocSelectedButtons[buttonIndex.Group]) {
-                        let aboveBelowDocPresId = StrCast(aboveBelowDoc.presentId);
-                        if (this.props.groupMappings.has(aboveBelowDocPresId)) {
-                            let aboveBelowDocGroup: Doc[] = this.props.groupMappings.get(aboveBelowDocPresId)!;
-                            aboveBelowDocGroup.push(...belowDocGroup);
-                            this.props.groupMappings.delete(belowDocPresId);
-                            belowDocGroup.forEach((doc: Doc) => doc.presentId = aboveBelowDocPresId);
-
-                        }
-                    } else {
-                        belowDocGroup.unshift(aboveBelowDoc);
-                        aboveBelowDoc.presentId = belowDocPresId;
-                    }
-
-
-                }
-            }
-
-        }
-
-        //Case, when the dropped doc had the group button clicked.
-        if (droppedDocSelectedButtons[buttonIndex.Group]) {
-            if (before) {
-                if (this.props.index > 0) {
-                    let aboveDoc = this.props.allListElements[this.props.index - 1];
-                    let aboveDocGuid = StrCast(aboveDoc.presentId);
-                    if (this.props.groupMappings.has(aboveDocGuid)) {
-                        this.protectOrderAndPush(aboveDocGuid, aboveDoc, droppedDoc);
-                    } else {
-                        this.createNewGroup(aboveDoc, droppedDoc, aboveDocGuid);
-                    }
-                } else {
-                    let propsPresId = StrCast(this.props.document.presentId);
-                    if (this.selectedButtons[buttonIndex.Group]) {
-                        let propsArray = this.props.groupMappings.get(propsPresId)!;
-                        propsArray.unshift(droppedDoc);
-                        droppedDoc.presentId = propsPresId;
-                    }
-                }
-            } else {
-                let propsDocGuid = StrCast(this.props.document.presentId);
-                if (this.props.groupMappings.has(propsDocGuid)) {
-                    this.protectOrderAndPush(propsDocGuid, this.props.document, droppedDoc);
-
-                } else {
-                    this.createNewGroup(this.props.document, droppedDoc, propsDocGuid);
-                }
-            }
-
-
-            //if the group button of the element was not clicked.
-        } else {
-            if (before) {
-                if (this.props.index > 0) {
-
-                    let aboveDoc = this.props.allListElements[this.props.index - 1];
-                    let aboveDocGuid = StrCast(aboveDoc.presentId);
-                    let aboveDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(aboveDoc);
-
-
-                    if (this.selectedButtons[buttonIndex.Group]) {
-                        if (aboveDocSelectedButtons[buttonIndex.Group]) {
-                            let aboveGroupArray = this.props.groupMappings.get(aboveDocGuid)!;
-                            let propsDocPresId = StrCast(this.props.document.presentId);
-
-                            this.halveGroupArray(aboveDoc, aboveGroupArray, droppedDoc, propsDocPresId);
-
-                        } else {
-                            let belowPresentId = StrCast(this.props.document.presentId);
-                            let belowGroup = this.props.groupMappings.get(belowPresentId)!;
-                            belowGroup.splice(belowGroup.indexOf(aboveDoc), 1);
-                            belowGroup.unshift(droppedDoc);
-                            droppedDoc.presentId = belowPresentId;
-                            aboveDoc.presentId = Utils.GenerateGuid();
-                        }
-
-
-                    }
-                } else {
-                    let propsPresId = StrCast(this.props.document.presentId);
-                    if (this.selectedButtons[buttonIndex.Group]) {
-                        let propsArray = this.props.groupMappings.get(propsPresId)!;
-                        propsArray.unshift(droppedDoc);
-                        droppedDoc.presentId = propsPresId;
-                    }
-                }
-            } else {
-                if (this.props.index < this.props.allListElements.length - 1) {
-                    let belowDoc = this.props.allListElements[this.props.index + 1];
-                    let belowDocGuid = StrCast(belowDoc.presentId);
-                    let belowDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(belowDoc);
-
-                    let propsDocGuid = StrCast(this.props.document.presentId);
-
-                    if (belowDocSelectedButtons[buttonIndex.Group]) {
-                        let belowGroupArray = this.props.groupMappings.get(belowDocGuid)!;
-                        if (this.selectedButtons[buttonIndex.Group]) {
-
-                            let propsGroupArray = this.props.groupMappings.get(propsDocGuid)!;
-
-                            this.halveGroupArray(this.props.document, propsGroupArray, droppedDoc, belowDocGuid);
-
-                        } else {
-                            belowGroupArray.splice(belowGroupArray.indexOf(this.props.document), 1);
-                            this.props.document.presentId = Utils.GenerateGuid();
-                            belowGroupArray.unshift(droppedDoc);
-                            droppedDoc.presentId = belowDocGuid;
-                        }
-                    }
-
-                }
-            }
-        }
-        this.autoSaveGroupChanges();
-
-    }
-
-    /**
-     * This method returns the selectedButtons boolean array of the passed in doc,
-     * retrieving it from the back-up.
-     */
-    getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
-        let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
-        let foundSelectedButtons: boolean[] = new Array(7);
-
-        //if this is the first time this doc mounts, push a doc for it to store
-        for (let doc of castedList!) {
-            let curDoc = await doc;
-            let curDocId = StrCast(curDoc.docId);
-            if (curDocId === paramDoc[Id]) {
-                let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null);
-                if (selectedButtonOfDoc !== undefined) {
-                    return selectedButtonOfDoc;
-                }
-            }
-        }
-
-        return foundSelectedButtons;
-
-    }
-
     //This is used to add dragging as an event.
     onPointerEnter = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
-            let selected = NumCast(this.props.mainDocument.selectedDoc, 0);
 
             this.header!.className = "presentationView-item";
 
-
-            if (selected === this.props.index) {
+            if (this.currentIndex === this.props.index) {
                 //this doc is selected
                 this.header!.className = "presentationView-item presentationView-selected";
             }
@@ -688,12 +262,10 @@ export default class PresentationElement extends React.Component<PresentationEle
     //This is used to remove the dragging when dropped.
     onPointerLeave = (e: React.PointerEvent): void => {
         //to get currently selected presentation doc
-        let selected = NumCast(this.props.mainDocument.selectedDoc, 0);
 
         this.header!.className = "presentationView-item";
 
-
-        if (selected === this.props.index) {
+        if (this.currentIndex === this.props.index) {
             //this doc is selected
             this.header!.className = "presentationView-item presentationView-selected";
 
@@ -729,62 +301,6 @@ export default class PresentationElement extends React.Component<PresentationEle
     move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
         return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc);
     }
-
-    /**
-     * Helper method that gets called to divide a group array into two different groups
-     * including the targetDoc in first part.
-     * @param targetDoc document that is targeted as slicing point
-     * @param propsGroupArray the array that gets divided into 2
-     * @param droppedDoc the dropped document
-     * @param belowDocGuid presentId of the belowGroup
-     */
-    private halveGroupArray(targetDoc: Doc, propsGroupArray: Doc[], droppedDoc: Doc, belowDocGuid: string) {
-        let targetIndex = propsGroupArray.indexOf(targetDoc);
-        let firstPart = propsGroupArray.slice(0, targetIndex + 1);
-        let firstPartNewGuid = Utils.GenerateGuid();
-        firstPart.forEach((doc: Doc) => doc.presentId = firstPartNewGuid);
-        let secondPart = propsGroupArray.slice(targetIndex + 1);
-        secondPart.unshift(droppedDoc);
-        droppedDoc.presentId = belowDocGuid;
-        this.props.groupMappings.set(firstPartNewGuid, firstPart);
-        this.props.groupMappings.set(belowDocGuid, secondPart);
-    }
-
-    /**
-     * Helper method that creates a new group, pushing above document first,
-     * and dropped document second.
-     * @param aboveDoc the document above dropped document
-     * @param droppedDoc the dropped document itself
-     * @param aboveDocGuid above document's presentId
-     */
-    private createNewGroup(aboveDoc: Doc, droppedDoc: Doc, aboveDocGuid: string) {
-        let newGroup: Doc[] = [];
-        newGroup.push(aboveDoc);
-        newGroup.push(droppedDoc);
-        droppedDoc.presentId = aboveDocGuid;
-        this.props.groupMappings.set(aboveDocGuid, newGroup);
-    }
-
-    /**
-      * Helper method that finds the above document's group, and pushes the
-      * dropped document into that group, protecting the visual order of the
-      * presentation elements.
-      * @param aboveDoc the document above dropped document
-      * @param droppedDoc the dropped document itself
-      * @param aboveDocGuid above document's presentId
-      */
-    private protectOrderAndPush(aboveDocGuid: string, aboveDoc: Doc, droppedDoc: Doc) {
-        let groupArray = this.props.groupMappings.get(aboveDocGuid)!;
-        let tempStack: Doc[] = [];
-        while (groupArray[groupArray.length - 1] !== aboveDoc) {
-            tempStack.push(groupArray.pop()!);
-        }
-        groupArray.push(droppedDoc);
-        droppedDoc.presentId = aboveDocGuid;
-        while (tempStack.length !== 0) {
-            groupArray.push(tempStack.pop()!);
-        }
-    }
     /**
      * This function is a getter to get if a document is in previewMode.
      */
@@ -872,11 +388,8 @@ 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);
-
         let className = " presentationView-item";
-        if (selected === p.index) {
+        if (this.currentIndex === p.index) {
             //this doc is selected
             className += " presentationView-selected";
         }
@@ -892,23 +405,19 @@ export default class PresentationElement extends React.Component<PresentationEle
                     outlineStyle: "dashed",
                     outlineWidth: Doc.IsBrushed(p.document) ? `1px` : "0px",
                 }}
-                onClick={e => { p.gotoDocument(p.index, NumCast(this.props.mainDocument.selectedDoc)); e.stopPropagation(); }}>
+                onClick={e => { p.gotoDocument(p.index, this.currentIndex); e.stopPropagation(); }}>
                 <strong className="presentationView-name">
                     {`${p.index + 1}. ${title}`}
                 </strong>
                 <button className="presentation-icon" onPointerDown={(e) => e.stopPropagation()} onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
-                <button title="Navigate" className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button title="Hide Document Till Presented" className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button title="Fade Document After Presented" className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} color={"gray"} /></button>
-                <button title="Hide Document After Presented" className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={(e) => {
-                    e.stopPropagation();
-                    this.changeGroupStatus();
-                    this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
-                }}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
-                <button title="Open Right" className={this.selectedButtons[buttonIndex.OpenRight] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onRightTabClick}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                <button title="Zoom" className={this.showButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={this.navButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Document Till Presented" className={this.hideTillShownButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade Document After Presented" className={this.fadeButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Hide Document After Presented" className={this.hideAfterButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={this.groupButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onGroupClick}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
+                <button title="Open Right" className={this.openRightButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onRightTabClick}><FontAwesomeIcon icon={"arrow-right"} /></button>
 
                 <br />
                 {this.renderEmbeddedInline()}
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index 288ade042..930ce202e 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -1,24 +1,20 @@
-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 { observer } from "mobx-react";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
+import { NumCast } from "../../../new_fields/Types";
 import PresentationElement from "./PresentationElement";
+import "./PresentationView.scss";
+import React = require("react");
 
 
 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;
     removeDocByRef(doc: Doc): boolean;
     clearElemMap(): void;
 
@@ -31,35 +27,6 @@ interface PresListProps {
  */
 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
@@ -77,7 +44,6 @@ export default class PresentationViewList extends React.Component<PresListProps>
 
     render() {
         const children = DocListCast(this.props.mainDocument.data);
-        this.initializeGroupIds(children);
         this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
         this.props.clearElemMap();
@@ -96,11 +62,8 @@ export default class PresentationViewList extends React.Component<PresListProps>
                         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}
                         removeDocByRef={this.props.removeDocByRef}
                         PresElementsMappings={this.props.PresElementsMappings}
                     />
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index b0968132b..bc1899811 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -1,6 +1,5 @@
 .presentationView-cont {
     position: absolute;
-    background: white;
     z-index: 2;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
     right: 0;
@@ -49,12 +48,15 @@
 
 .presentationView-item:hover {
     transition: all .1s;
-    background: #AAAAAA
+    background: #AAAAAA;
+    border-radius: 12px;
 }
 
 .presentationView-selected {
     background: gray;
     color: black;
+    border-radius: 12px;
+    box-shadow: black 2px 2px 5px;
 }
 
 .presentationView-heading {
@@ -79,11 +81,12 @@
 }
 
 .presentation-interaction {
+    color: gray;
     float: left;
 }
 
 .presentation-interaction-selected {
-    background: #505050;
+    color: white;
     float: left;
 }
 
@@ -96,6 +99,7 @@
     margin-right: 2.5%;
     margin-left: 2.5%;
     width: 20%;
+    border-radius: 5px;
 }
 
 .presentation-buttons {
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index ca05dfa45..e5b609966 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -621,6 +621,9 @@ export namespace Doc {
         manager.BrushedDoc.delete(doc);
         manager.BrushedDoc.delete(Doc.GetDataDoc(doc));
     }
+    export function UnBrushAllDocs() {
+        manager.BrushedDoc.clear();
+    }
 }
 Scripting.addGlobal(function renameAlias(doc: any, n: any) { return StrCast(doc.title).replace(/\([0-9]*\)/, "") + `(${n})`; });
 Scripting.addGlobal(function getProto(doc: any) { return Doc.GetProto(doc); });
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 43d731ef2a6b2bd3fcdb7dd26fb6a8beac8e1306 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 21 Aug 2019 16:23:38 -0400
Subject: from last with presentations and small tweaks.

---
 src/client/views/MetadataEntryMenu.tsx                             | 2 +-
 src/client/views/collections/CollectionStackingView.tsx            | 4 ++--
 src/client/views/collections/CollectionStackingViewFieldColumn.tsx | 4 ++--
 src/client/views/nodes/KeyValueBox.tsx                             | 2 +-
 src/client/views/nodes/PresBox.tsx                                 | 7 ++++---
 src/client/views/presentationview/PresentationElement.tsx          | 2 --
 src/client/views/presentationview/PresentationView.scss            | 4 ----
 src/server/authentication/models/current_user_utils.ts             | 2 +-
 8 files changed, 11 insertions(+), 16 deletions(-)

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

diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx
index 4d696e37a..ec628c5a3 100644
--- a/src/client/views/MetadataEntryMenu.tsx
+++ b/src/client/views/MetadataEntryMenu.tsx
@@ -172,7 +172,7 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
                 </div>
                 <div className="metadataEntry-keys" >
                     <ul>
-                        {this._allSuggestions.sort().map(s => <li key={s} onClick={action(() => { this._currentKey = s; this.previewValue(); })} >{s}</li>)}
+                        {this._allSuggestions.slice().sort().map(s => <li key={s} onClick={action(() => { this._currentKey = s; this.previewValue(); })} >{s}</li>)}
                     </ul>
                 </div>
             </div>
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index c74c60d8f..be6ee1756 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -291,10 +291,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc);
             let width = () => (d.nativeWidth && !d.ignoreAspect && !this.props.Document.fillColumn ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth);/// (uniqueHeadings.length + 1);
             let height = () => this.getDocHeight(layoutDoc);
-            let dxf = () => this.getDocTransform(layoutDoc, dref.current!);
+            let dxf = () => this.getDocTransform(layoutDoc!, dref.current!);
             let rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
             this._docXfs.push({ dxf: dxf, width: width, height: height });
-            return <div className="collectionStackingView-masonryDoc" key={d[Id]} ref={dref} style={{ gridRowEnd: `span ${rowSpan}` }} >
+            return !layoutDoc ? (null) : <div className="collectionStackingView-masonryDoc" key={d[Id]} ref={dref} style={{ gridRowEnd: `span ${rowSpan}` }} >
                 {this.getDisplayDoc(layoutDoc, d, dxf, width)}
             </div>;
         });
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index cc8476548..2536eff00 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -83,9 +83,9 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                 return (null);
             }
             let width = () => Math.min(d.nativeWidth && !d.ignoreAspect && !parent.props.Document.fillColumn ? d[WidthSym]() : Number.MAX_VALUE, parent.columnWidth / parent.numGroupColumns);
-            let height = () => parent.getDocHeight(pair!.layout);
+            let height = () => parent.getDocHeight(pair.layout);
             let dref = React.createRef<HTMLDivElement>();
-            let dxf = () => this.getDocTransform(pair!.layout, dref.current!);
+            let dxf = () => this.getDocTransform(pair.layout!, dref.current!);
             this.props.parent._docXfs.push({ dxf: dxf, width: width, height: height });
             let rowSpan = Math.ceil((height() + parent.gridGap) / parent.gridGap);
             let style = parent.isStackingView ? { width: width(), margin: "auto", marginTop: i === 0 ? 0 : parent.gridGap, height: height() } : { gridRowEnd: `span ${rowSpan}` };
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 0d4b377dd..653c5c27f 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -128,7 +128,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         let rows: JSX.Element[] = [];
         let i = 0;
         const self = this;
-        for (let key of Object.keys(ids).sort()) {
+        for (let key of Object.keys(ids).slice().sort()) {
             rows.push(<KeyValuePair doc={realDoc} ref={(function () {
                 let oldEl: KeyValuePair | undefined;
                 return (el: KeyValuePair) => {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index cf222601f..e376fbddb 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -116,9 +116,9 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
 
         let presDocs = DocListCast(this.curPresentation.data);
         for (; nextSelected < presDocs.length - 1; nextSelected++) {
-            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton)
+            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) {
                 break;
-
+            }
         }
 
         this.gotoDocument(nextSelected, current);
@@ -239,8 +239,9 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
         let nextSelected = presDocs.indexOf(curDoc);
         let currentDocGroups: Doc[] = [];
         for (; nextSelected < presDocs.length - 1; nextSelected++) {
-            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton)
+            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) {
                 break;
+            }
             currentDocGroups.push(presDocs[nextSelected]);
         }
 
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 68c5a5b8d..83413814f 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -261,8 +261,6 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     //This is used to remove the dragging when dropped.
     onPointerLeave = (e: React.PointerEvent): void => {
-        //to get currently selected presentation doc
-
         this.header!.className = "presentationView-item";
 
         if (this.currentIndex === this.props.index) {
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index bc1899811..5c40a8808 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -23,14 +23,11 @@
     user-select: none;
     transition: all .1s;
 
-    
-
     .documentView-node {
         
         position: absolute;
         z-index: 1;
     }
-
 }
 
 .presentationView-item-above {
@@ -73,7 +70,6 @@
     display: inline-block;
     width: calc(100% - 200px);
     letter-spacing: 2px;
-
 }
 
 .presentation-icon {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index aa3da0034..f7ce24967 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -29,7 +29,7 @@ export class CurrentUserUtils {
         doc.viewType = CollectionViewType.Tree;
         doc.dropAction = "alias";
         doc.layout = CollectionView.LayoutString();
-        doc.title = Doc.CurrentUserEmail
+        doc.title = Doc.CurrentUserEmail;
         this.updateUserDocument(doc);
         doc.data = new List<Doc>();
         doc.gridGap = 5;
-- 
cgit v1.2.3-70-g09d2


From 34e0b1cf34474ec6765e212b6a35defefbfb49c9 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 27 Aug 2019 15:46:03 -0400
Subject: removed selectOnLoad prop.  fixed textboxes from deselecting on
 carriage return.

---
 src/client/views/MainOverlayTextBox.tsx                    |  2 +-
 src/client/views/MainView.tsx                              |  2 --
 src/client/views/OverlayView.tsx                           |  1 -
 src/client/views/collections/CollectionDockingView.tsx     |  1 -
 src/client/views/collections/CollectionSchemaCells.tsx     |  1 -
 src/client/views/collections/CollectionSchemaView.tsx      |  1 -
 .../collectionFreeForm/CollectionFreeFormView.tsx          | 14 +++-----------
 src/client/views/nodes/DocumentView.tsx                    |  4 +---
 src/client/views/nodes/FieldView.tsx                       |  2 --
 src/client/views/nodes/FormattedTextBox.tsx                |  9 ++++++---
 src/client/views/nodes/KeyValuePair.tsx                    |  1 -
 src/client/views/presentationview/PresentationElement.tsx  |  1 -
 src/client/views/search/SearchItem.tsx                     |  1 -
 13 files changed, 11 insertions(+), 29 deletions(-)

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

diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 65a291d99..f15b60347 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -156,7 +156,7 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
                                 DataDoc={FormattedTextBox.InputBoxOverlay.props.DataDoc}
                                 onClick={undefined}
                                 ChromeHeight={this.ChromeHeight}
-                                isSelected={returnTrue} select={emptyFunction} renderDepth={0} selectOnLoad={true}
+                                isSelected={returnTrue} select={emptyFunction} renderDepth={0}
                                 ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue} ContentScaling={returnOne}
                                 ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction}
                                 pinToPres={returnZero} addDocTab={this.addDocTab} outer_div={(tooltip: HTMLElement) => { this._tooltip = tooltip; this.updateTooltip(); }} />
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a02214deb..6b856443b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -326,7 +326,6 @@ export class MainView extends React.Component {
                             PanelHeight={this.getPHeight}
                             renderDepth={0}
                             backgroundColor={returnEmptyString}
-                            selectOnLoad={false}
                             focus={emptyFunction}
                             parentActive={returnTrue}
                             whenActiveChanged={emptyFunction}
@@ -389,7 +388,6 @@ export class MainView extends React.Component {
             PanelWidth={this.flyoutWidthFunc}
             PanelHeight={this.getPHeight}
             renderDepth={0}
-            selectOnLoad={false}
             focus={emptyFunction}
             backgroundColor={returnEmptyString}
             parentActive={returnTrue}
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index a60dc591c..538614089 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -153,7 +153,6 @@ export class OverlayView extends React.Component {
                         PanelHeight={returnOne}
                         ScreenToLocalTransform={Transform.Identity}
                         renderDepth={1}
-                        selectOnLoad={false}
                         parentActive={returnTrue}
                         whenActiveChanged={emptyFunction}
                         focus={emptyFunction}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index dc0cbda0b..95f94875c 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -636,7 +636,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             PanelHeight={this.panelHeight}
             ScreenToLocalTransform={this.ScreenToLocalTransform}
             renderDepth={0}
-            selectOnLoad={false}
             parentActive={returnTrue}
             whenActiveChanged={emptyFunction}
             focus={emptyFunction}
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 551b485e7..9c26a08f0 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -153,7 +153,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             isSelected: returnFalse,
             select: emptyFunction,
             renderDepth: this.props.renderDepth + 1,
-            selectOnLoad: false,
             ScreenToLocalTransform: Transform.Identity,
             focus: emptyFunction,
             active: returnFalse,
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 4008dea51..9d83aa6c1 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1006,7 +1006,6 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
                         parentActive={this.props.active}
                         ScreenToLocalTransform={this.getTransform}
                         renderDepth={this.props.renderDepth + 1}
-                        selectOnLoad={false}
                         ContentScaling={this.contentScaling}
                         PanelWidth={this.PanelWidth}
                         PanelHeight={this.PanelHeight}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f185222ce..62f848a2b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,7 +1,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye } from "@fortawesome/free-regular-svg-icons";
 import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons";
-import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
+import { action, computed, IReactionDisposer, observable, reaction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCastAsync, Field, FieldResult, HeightSym, Opt, WidthSym } from "../../../../new_fields/Doc";
 import { Id } from "../../../../new_fields/FieldSymbols";
@@ -38,6 +38,7 @@ import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
 import { DocServer } from "../../../DocServer";
+import { FormattedTextBox } from "../../nodes/FormattedTextBox";
 
 library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard);
 
@@ -165,8 +166,6 @@ export namespace PivotView {
             return prev;
         }, elements);
 
-        target.resetSelectOnLoaded();
-
         return docViews;
     };
 
@@ -177,7 +176,6 @@ const PanZoomDocument = makeInterface(panZoomSchema, positionSchema, pageSchema)
 
 @observer
 export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
-    private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
     private _lastX: number = 0;
     private _lastY: number = 0;
     private get _pwidth() { return this.props.PanelWidth(); }
@@ -241,7 +239,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     private getContainerTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth);
     private getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.zoomScaling()).translate(this.panX(), this.panY());
     private addLiveTextBox = (newBox: Doc) => {
-        this._selectOnLoaded = newBox[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
+        FormattedTextBox.SelectOnLoad = newBox[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
         this.addDocument(newBox, false);
     }
     private addDocument = (newBox: Doc, allowDuplicates: boolean) => {
@@ -642,7 +640,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             onClick: this.props.onClick,
             ScreenToLocalTransform: childLayout.z ? this.getTransformOverlay : this.getTransform,
             renderDepth: this.props.renderDepth + 1,
-            selectOnLoad: childLayout[Id] === this._selectOnLoaded,
             PanelWidth: childLayout[WidthSym],
             PanelHeight: childLayout[HeightSym],
             ContentScaling: returnOne,
@@ -668,7 +665,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             onClick: this.props.onClick,
             ScreenToLocalTransform: this.getTransform,
             renderDepth: this.props.renderDepth,
-            selectOnLoad: layoutDoc[Id] === this._selectOnLoaded,
             PanelWidth: layoutDoc[WidthSym],
             PanelHeight: layoutDoc[HeightSym],
             ContentScaling: returnOne,
@@ -768,13 +764,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             return prev;
         }, elements);
 
-        this.resetSelectOnLoaded();
-
         return docviews;
     }
 
-    resetSelectOnLoaded = () => setTimeout(() => this._selectOnLoaded = "", 600);// bcz: surely there must be a better way ....
-
     @computed.struct
     get views() {
         let source = this.elements;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3cf86b6f9..f7ebfb75a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -92,7 +92,6 @@ export interface DocumentViewProps {
     PanelWidth: () => number;
     PanelHeight: () => number;
     focus: (doc: Doc, willZoom: boolean, scale?: number) => void;
-    selectOnLoad: boolean;
     parentActive: () => boolean;
     whenActiveChanged: (isActive: boolean) => void;
     bringToFront: (doc: Doc, sendToBack?: boolean) => void;
@@ -717,7 +716,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             isSelected={this.isSelected}
             select={this.select}
             onClick={this.onClickHandler}
-            selectOnLoad={this.props.selectOnLoad}
             layoutKey={"layout"}
             fitToBox={BoolCast(this.props.Document.fitToBox) ? true : this.props.fitToBox}
             DataDoc={this.dataDoc} />);
@@ -808,7 +806,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                         }
                         {!showCaption ? (null) :
                             <div style={{ position: "absolute", bottom: 0, transformOrigin: "bottom left", width: `${100 * this.props.ContentScaling()}%`, transform: `scale(${1 / this.props.ContentScaling()})` }}>
-                                <FormattedTextBox {...this.props} onClick={this.onClickHandler} DataDoc={this.dataDoc} active={returnTrue} isSelected={this.isSelected} focus={emptyFunction} select={this.select} selectOnLoad={this.props.selectOnLoad} fieldExt={""} hideOnLeave={true} fieldKey={showCaption} />
+                                <FormattedTextBox {...this.props} onClick={this.onClickHandler} DataDoc={this.dataDoc} active={returnTrue} isSelected={this.isSelected} focus={emptyFunction} select={this.select} fieldExt={""} hideOnLeave={true} fieldKey={showCaption} />
                             </div>
                         }
                     </div>
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index f0f1b3b73..d9774303b 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -36,7 +36,6 @@ export interface FieldViewProps {
     isSelected: () => boolean;
     select: (isCtrlPressed: boolean) => void;
     renderDepth: number;
-    selectOnLoad: boolean;
     addDocument?: (document: Doc, allowDuplicates?: boolean) => boolean;
     addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void;
     pinToPres: (document: Doc) => void;
@@ -108,7 +107,6 @@ export class FieldView extends React.Component<FieldViewProps> {
             //         PanelWidth={returnHundred}
             //         PanelHeight={returnHundred}
             //         renderDepth={0} //TODO Why is renderDepth reset?
-            //         selectOnLoad={false}
             //         focus={emptyFunction}
             //         isSelected={this.props.isSelected}
             //         select={returnFalse}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index acfd2a3b8..c28bf1821 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -622,12 +622,15 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             }
         }
 
-        if (this.props.selectOnLoad) {
-            if (!this.props.isOverlay) this.props.select(false);
-            else this._editorView!.focus();
+        if (this.props.Document[Id] == FormattedTextBox.SelectOnLoad) {
+            FormattedTextBox.SelectOnLoad = "";
+            this.props.select(false);
         }
+        else if (this.props.isOverlay) this._editorView!.focus();
     }
 
+    public static SelectOnLoad = "";
+
     componentWillUnmount() {
         this._editorView && this._editorView.destroy();
         this._reactionDisposer && this._reactionDisposer();
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 8001b24a7..5afd4d834 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -60,7 +60,6 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             isSelected: returnFalse,
             select: emptyFunction,
             renderDepth: 1,
-            selectOnLoad: false,
             active: returnFalse,
             whenActiveChanged: emptyFunction,
             ScreenToLocalTransform: Transform.Identity,
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 83413814f..80aa25f48 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -359,7 +359,6 @@ export default class PresentationElement extends React.Component<PresentationEle
                     PanelHeight={() => 90}
                     focus={emptyFunction}
                     backgroundColor={returnEmptyString}
-                    selectOnLoad={false}
                     parentActive={returnFalse}
                     whenActiveChanged={returnFalse}
                     bringToFront={emptyFunction}
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 41fc49c2e..672892fdf 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -209,7 +209,6 @@ export class SearchItem extends React.Component<SearchItemProps> {
                     PanelHeight={returnYDimension}
                     focus={emptyFunction}
                     backgroundColor={returnEmptyString}
-                    selectOnLoad={false}
                     parentActive={returnFalse}
                     whenActiveChanged={returnFalse}
                     bringToFront={emptyFunction}
-- 
cgit v1.2.3-70-g09d2

