start of presentationview cleanup

3 files changed, 161 insertions, 296 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index cf09bd2d0..dadff21a7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -7,23 +7,24 @@ import "normalize.css";
 import * as React from 'react';
 import { SketchPicker } from 'react-color';
 import Measure from 'react-measure';
-import { List } from '../../new_fields/List';
-import { Doc, DocListCast, Opt, HeightSym, FieldResult, Field } from '../../new_fields/Doc';
+import { Doc, DocListCast, Field, FieldResult, HeightSym, Opt } from '../../new_fields/Doc';
 import { Id } from '../../new_fields/FieldSymbols';
 import { InkTool } from '../../new_fields/InkField';
+import { List } from '../../new_fields/List';
 import { listSpec } from '../../new_fields/Schema';
-import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../new_fields/Types';
+import { BoolCast, Cast, FieldValue, StrCast } from '../../new_fields/Types';
 import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
 import { RouteStore } from '../../server/RouteStore';
-import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString } from '../../Utils';
+import { emptyFunction, returnEmptyString, returnOne, returnTrue, Utils } from '../../Utils';
 import { DocServer } from '../DocServer';
+import { Docs, DocumentOptions } from '../documents/Documents';
 import { ClientUtils } from '../util/ClientUtils';
 import { DictationManager } from '../util/DictationManager';
 import { SetupDrag } from '../util/DragManager';
-import { Transform } from '../util/Transform';
-import { UndoManager, undoBatch } from '../util/UndoManager';
-import { Docs, DocumentOptions } from '../documents/Documents';
 import { HistoryUtil } from '../util/History';
+import SharingManager from '../util/SharingManager';
+import { Transform } from '../util/Transform';
+import { UndoManager } from '../util/UndoManager';
 import { CollectionBaseView, CollectionViewType } from './collections/CollectionBaseView';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { CollectionTreeView } from './collections/CollectionTreeView';
@@ -33,20 +34,13 @@ import KeyManager from './GlobalKeyHandler';
 import { InkingControl } from './InkingControl';
 import "./Main.scss";
 import { MainOverlayTextBox } from './MainOverlayTextBox';
+import MainViewModal from './MainViewModal';
 import { DocumentView } from './nodes/DocumentView';
+import { PresBox } from './nodes/PresBox';
 import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { FilterBox } from './search/FilterBox';
-import PresModeMenu from './presentationview/PresentationModeMenu';
-import { PresBox } from './nodes/PresBox';
-import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils';
-import { ImageField } from '../../new_fields/URLField';
-import { LinkFollowBox } from './linking/LinkFollowBox';
-import { DocumentManager } from '../util/DocumentManager';
-import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
-import MainViewModal from './MainViewModal';
-import SharingManager from '../util/SharingManager';
 
 @observer
 export class MainView extends React.Component {
@@ -185,9 +179,8 @@ export class MainView extends React.Component {
                     CurrentUserUtils.MainDocId = pathname[1];
                     if (!this.userDoc) {
                         runInAction(() => this.flyoutWidth = 0);
-                        DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action(field => {
-                            field instanceof Doc && (CurrentUserUtils.GuestTarget = field);
-                        }));
+                        DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt<Field>) =>
+                            field instanceof Doc && (CurrentUserUtils.GuestTarget = field)));
                     }
                 }
             }
@@ -634,14 +627,6 @@ export class MainView extends React.Component {
         );
     }
 
-    @computed get miniPresentation() {
-        let next = () => PresBox.CurrentPresentation.next();
-        let back = () => PresBox.CurrentPresentation.back();
-        let startOrResetPres = () => PresBox.CurrentPresentation.startOrResetPres();
-        let closePresMode = action(() => { PresBox.CurrentPresentation.presMode = false; this.addDocTabFunc(PresBox.CurrentPresentation.props.Document, undefined, "onRight"); });
-        return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : <PresModeMenu next={next} back={back} presStatus={PresBox.CurrentPresentation.presStatus} startOrResetPres={startOrResetPres} closePresMode={closePresMode} > </PresModeMenu>;
-    }
-
     render() {
         return (
             <div id="main-div">
@@ -649,7 +634,7 @@ export class MainView extends React.Component {
                 <SharingManager />
                 <DocumentDecorations />
                 {this.mainContent}
-                {this.miniPresentation}
+                {PresBox.miniPresentation}
                 <PreviewCursor />
                 <ContextMenu />
                 {this.nodesMenu()}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 5afd85430..d246da87a 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -2,21 +2,20 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction } from "mobx";
+import { action, observable, runInAction, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
-import { Id } from "../../../new_fields/FieldSymbols";
-import { List } from "../../../new_fields/List";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { listSpec } from "../../../new_fields/Schema";
-import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
-import { Utils } from "../../../Utils";
+import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { DocumentManager } from "../../util/DocumentManager";
 import { undoBatch } from "../../util/UndoManager";
+import { ContextMenu } from "../ContextMenu";
 import PresentationElement from "../presentationview/PresentationElement";
 import PresentationViewList from "../presentationview/PresentationList";
 import "../presentationview/PresentationView.scss";
 import { FieldView, FieldViewProps } from './FieldView';
-import { ContextMenu } from "../ContextMenu";
+import PresModeMenu from "../presentationview/PresentationModeMenu";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -27,147 +26,99 @@ library.add(faTimes);
 library.add(faMinus);
 library.add(faEdit);
 
-
-export interface PresViewProps {
-    Documents: List<Doc>;
-}
-
-const expandedWidth = 450;
-
 @observer
-export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
-
-
+export class PresBox extends React.Component<FieldViewProps> {
     public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); }
 
     public static Instance: PresBox;
-
-    //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 docs to their rendered component
-    @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
+    @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;
-    //Mapping of guids to presentations.
-    @observable presentationsMapping: Map<String, Doc> = new Map();
-    //Mapping of presentations to guid, so that select option values can be given.
-    @observable presentationsKeyMapping: Map<Doc, String> = new Map();
-    //Variable to keep track of guid of the current presentation
-    @observable currentSelectedPresValue: string | undefined;
-    //A flag to keep track if title input is open, which is used in rendering.
-    @observable PresTitleInputOpen: boolean = false;
-    //Variable that holds reference to title input, so that new presentations get titles assigned.
-    @observable titleInputElement: HTMLInputElement | undefined;
-    @observable PresTitleChangeOpen: boolean = false;
-
-    @observable opacity = 1;
-    @observable persistOpacity = true;
-    @observable labelOpacity = 0;
-    @observable presMode = false;
+    @observable _childrenDocs: Doc[] = [];
 
+    @observable _opacity = 1;
+    @observable _persistOpacity = true;
+    @observable _labelOpacity = 0;
+    // whether presentation view has been minimized
+    @observable _presMode = false;
     @observable public static CurrentPresentation: PresBox;
 
+    @computed static get miniPresentation() {
+        let next = () => PresBox.CurrentPresentation.next();
+        let back = () => PresBox.CurrentPresentation.back();
+        let startOrResetPres = () => PresBox.CurrentPresentation.startOrResetPres();
+        let closePresMode = action(() => {
+            PresBox.CurrentPresentation._presMode = false;
+            CollectionDockingView.AddRightSplit(PresBox.CurrentPresentation.props.Document, undefined);
+        });
+        return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation._presMode ? (null) :
+            <PresModeMenu next={next} back={back} presStatus={BoolCast(PresBox.CurrentPresentation.props.Document.presStatus)}
+                startOrResetPres={startOrResetPres} closePresMode={closePresMode} />;
+    }
+
     //initilize class variables
     constructor(props: FieldViewProps) {
         super(props);
         runInAction(() => PresBox.CurrentPresentation = this);
     }
 
-    @action
-    toggle = (forcedValue: boolean | undefined) => {
-        if (forcedValue !== undefined) {
-            this.curPresentation.width = forcedValue ? expandedWidth : 0;
-        } else {
-            this.curPresentation.width = this.curPresentation.width === expandedWidth ? 0 : expandedWidth;
-        }
-    }
-
-    //Second lifecycle function that gets called when component mounts. It makes sure toS
-    //get the back-up information from previous session for the current presentation.
-    async componentDidMount() {
-        this.setPresentationBackUps();
-    }
-
-
-    /**
-     * The function that retrieves the backUps for the current Presentation if present,
-     * otherwise initializes.
-     */
-    setPresentationBackUps = async () => {
-        //storing the presentation status,ie. whether it was stopped or playing
-        let presStatusBackUp = BoolCast(this.curPresentation.presStatus);
-        runInAction(() => this.presStatus = presStatusBackUp);
-    }
-
-    //observable means render is re-called every time variable is changed
-    @observable
-    collapsed: boolean = false;
     next = async () => {
-        const current = NumCast(this.curPresentation.selectedDoc);
+        const current = NumCast(this.props.Document.selectedDoc);
         //asking to get document at current index
         let docAtCurrentNext = await this.getDocAtIndex(current + 1);
-        if (docAtCurrentNext === undefined) {
-            return;
-        }
-        let nextSelected = current + 1;
+        if (docAtCurrentNext !== undefined) {
+            let presDocs = DocListCast(this.props.Document.data);
+            let nextSelected = current + 1;
 
-        let presDocs = DocListCast(this.curPresentation.data);
-        for (; nextSelected < presDocs.length - 1; nextSelected++) {
-            if (!this.presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) {
-                break;
+            for (; nextSelected < presDocs.length - 1; nextSelected++) {
+                if (!this._presElementsMappings.get(presDocs[nextSelected + 1])!.props.document.groupButton) {
+                    break;
+                }
             }
-        }
-
-        this.gotoDocument(nextSelected, current);
 
+            this.gotoDocument(nextSelected, current);
+        }
     }
     back = async () => {
-        const current = NumCast(this.curPresentation.selectedDoc);
+        const current = NumCast(this.props.Document.selectedDoc);
         //requesting for the doc at current index
         let docAtCurrent = await this.getDocAtIndex(current);
-        if (docAtCurrent === undefined) {
-            return;
-        }
+        if (docAtCurrent !== undefined) {
 
-        //asking for its presentation id.
-        let curPresId = StrCast(docAtCurrent.presentId);
-        let prevSelected = current;
-        let zoomOut: boolean = false;
+            //asking for its presentation id.
+            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
-        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;
+            //checking if this presentation id is mapped to a group, if so chosing the first element in group
+            let presDocs = DocListCast(this.props.Document.data);
+            let currentsArray: Doc[] = [];
+            for (; prevSelected > 0 && presDocs[prevSelected].groupButton; prevSelected--) {
+                currentsArray.push(presDocs[prevSelected]);
             }
-        });
-
-
-        // 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)!.showButton) {
-                let prevScale = NumCast(this.childrenDocs[prevSelected].viewScale, null);
-                let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[current]);
-                if (prevScale !== undefined && prevScale !== curScale) {
-                    DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale);
+            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)!.showButton) {
+                    let prevScale = NumCast(this._childrenDocs[prevSelected].viewScale, null);
+                    let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[current]);
+                    if (prevScale !== undefined && prevScale !== curScale) {
+                        DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale);
+                    }
                 }
             }
+            this.gotoDocument(prevSelected, current);
         }
-        this.gotoDocument(prevSelected, current);
-
     }
 
     /**
@@ -176,21 +127,21 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      * Hide Until Presented, Hide After Presented, Fade After Presented
      */
     showAfterPresented = (index: number) => {
-        this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
+        this._presElementsMappings.forEach((presElem, doc) => {
             //the order of cases is aligned based on priority
             if (presElem.props.document.hideTillShownButton) {
-                if (this.childrenDocs.indexOf(key) <= index) {
-                    key.opacity = 1;
+                if (this._childrenDocs.indexOf(doc) <= index) {
+                    doc.opacity = 1;
                 }
             }
             if (presElem.props.document.hideAfterButton) {
-                if (this.childrenDocs.indexOf(key) < index) {
-                    key.opacity = 0;
+                if (this._childrenDocs.indexOf(doc) < index) {
+                    doc.opacity = 0;
                 }
             }
             if (presElem.props.document.fadeButton) {
-                if (this.childrenDocs.indexOf(key) < index) {
-                    key.opacity = 0.5;
+                if (this._childrenDocs.indexOf(doc) < index) {
+                    doc.opacity = 0.5;
                 }
             }
         });
@@ -202,21 +153,21 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      * Hide Until Presented, Hide After Presented, Fade After Presented
      */
     hideIfNotPresented = (index: number) => {
-        this.presElementsMappings.forEach((presElem: PresentationElement, key: Doc) => {
+        this._presElementsMappings.forEach((presElem, key) => {
             //the order of cases is aligned based on priority
 
             if (presElem.props.document.hideAfterButton) {
-                if (this.childrenDocs.indexOf(key) >= index) {
+                if (this._childrenDocs.indexOf(key) >= index) {
                     key.opacity = 1;
                 }
             }
             if (presElem.props.document.fadeButton) {
-                if (this.childrenDocs.indexOf(key) >= index) {
+                if (this._childrenDocs.indexOf(key) >= index) {
                     key.opacity = 1;
                 }
             }
             if (presElem.props.document.hideTillShownButton) {
-                if (this.childrenDocs.indexOf(key) > index) {
+                if (this._childrenDocs.indexOf(key) > index) {
                     key.opacity = 0;
                 }
             }
@@ -229,26 +180,25 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      * te option open, navigates to that element.
      */
     navigateToElement = async (curDoc: Doc, fromDoc: number) => {
-        let docToJump: Doc = curDoc;
-        let willZoom: boolean = false;
-
+        let docToJump = curDoc;
+        let willZoom = false;
 
-        let presDocs = DocListCast(this.curPresentation.data);
+        let presDocs = DocListCast(this.props.Document.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) {
+            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) {
+            if (this._presElementsMappings.get(doc)!.navButton) {
                 docToJump = doc;
                 willZoom = false;
             }
-            if (this.presElementsMappings.get(doc)!.showButton) {
+            if (this._presElementsMappings.get(doc)!.showButton) {
                 docToJump = doc;
                 willZoom = true;
             }
@@ -257,24 +207,23 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
         //docToJump stayed same meaning, it was not in the group or was the last element in the group
         if (docToJump === curDoc) {
             //checking if curDoc has navigation open
-            if (this.presElementsMappings.get(curDoc)!.navButton) {
+            if (this._presElementsMappings.get(curDoc)!.navButton) {
                 DocumentManager.Instance.jumpToDocument(curDoc, false);
-            } else if (this.presElementsMappings.get(curDoc)!.showButton) {
-                let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
+            } 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);
-                let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
-                curDoc.viewScale = newScale;
+                curDoc.viewScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
 
                 //saving the scale user was on before zooming in
                 if (curScale !== 1) {
-                    this.childrenDocs[fromDoc].viewScale = curScale;
+                    this._childrenDocs[fromDoc].viewScale = curScale;
                 }
 
             }
             return;
         }
-        let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
+        let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[fromDoc]);
 
         //awaiting jump so that new scale can be found, since jumping is async
         await DocumentManager.Instance.jumpToDocument(docToJump, willZoom);
@@ -282,7 +231,7 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
         curDoc.viewScale = newScale;
         //saving the scale that user was on
         if (curScale !== 1) {
-            this.childrenDocs[fromDoc].viewScale = curScale;
+            this._childrenDocs[fromDoc].viewScale = curScale;
         }
 
     }
@@ -291,18 +240,13 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      * Async function that supposedly return the doc that is located at given index.
      */
     getDocAtIndex = async (index: number) => {
-        const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
-        if (!list) {
-            return undefined;
-        }
-        if (index < 0 || index >= list.length) {
-            return undefined;
+        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (list && index >= 0 && index < list.length) {
+            this.props.Document.selectedDoc = index;
+            //awaiting async call to finish to get Doc instance
+            return await list[index];
         }
-
-        this.curPresentation.selectedDoc = index;
-        //awaiting async call to finish to get Doc instance
-        const doc = await list[index];
-        return doc;
+        return undefined
     }
 
     /**
@@ -311,23 +255,19 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
      */
     @action
     public RemoveDoc = async (index: number) => {
-        const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
+        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc))); // don't replace with DocListCast -- we need to modify the document's actual stored list
         if (value) {
-            let removedDoc = await value.splice(index, 1)[0];
-
-            //removing the Presentation Element stored for it
-            this.presElementsMappings.delete(removedDoc);
-
+            //removing the Presentation Element from the document and update mappings
+            this._presElementsMappings.delete(await value.splice(index, 1)[0]);
         }
     }
 
     public removeDocByRef = (doc: Doc) => {
-        let indexOfDoc = this.childrenDocs.indexOf(doc);
-        const value = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
+        let indexOfDoc = this._childrenDocs.indexOf(doc);
+        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (value) {
             value.splice(indexOfDoc, 1)[0];
         }
-        //this.RemoveDoc(indexOfDoc, true);
         if (indexOfDoc !== - 1) {
             return true;
         }
@@ -339,144 +279,92 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
     @action
     public gotoDocument = async (index: number, fromDoc: number) => {
         Doc.UnBrushAllDocs();
-        const list = FieldValue(Cast(this.curPresentation.data, listSpec(Doc)));
-        if (!list) {
-            return;
-        }
-        if (index < 0 || index >= list.length) {
-            return;
-        }
-        this.curPresentation.selectedDoc = index;
+        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (list && index >= 0 && index < list.length) {
+            this.props.Document.selectedDoc = index;
 
-        if (!this.presStatus) {
-            this.presStatus = true;
-            this.startPresentation(index);
-        }
+            if (!this.props.Document.presStatus) {
+                this.props.Document.presStatus = true;
+                this.startPresentation(index);
+            }
 
-        const doc = await list[index];
-        if (this.presStatus) {
-            this.navigateToElement(doc, fromDoc);
-            this.hideIfNotPresented(index);
-            this.showAfterPresented(index);
+            const doc = await list[index];
+            if (this.props.Document.presStatus) {
+                this.navigateToElement(doc, fromDoc);
+                this.hideIfNotPresented(index);
+                this.showAfterPresented(index);
+            }
         }
     }
     //Function that sets the store of the children docs.
     @action
     setChildrenDocs = (docList: Doc[]) => {
-        this.childrenDocs = docList;
+        this._childrenDocs = docList;
     }
 
     //The function that is called to render the play or pause button depending on
     //if presentation is running or not.
     renderPlayPauseButton = () => {
-        if (this.presStatus) {
-            return <button title="Reset Presentation" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
-        } else {
-            return <button title="Start Presentation From Start" className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
-        }
+        return <button title={"Reset Presentation" + this.props.Document.presStatus ? "" : " From Start"} className="presentation-button" onClick={this.startOrResetPres}>
+            <FontAwesomeIcon icon={this.props.Document.presStatus ? "stop" : "play"} />
+        </button>;
     }
 
     //The function that starts or resets presentaton functionally, depending on status flag.
     @action
     startOrResetPres = () => {
-        if (this.presStatus) {
+        if (this.props.Document.presStatus) {
             this.resetPresentation();
         } else {
-            this.presStatus = true;
+            this.props.Document.presStatus = true;
             this.startPresentation(0);
-            const current = NumCast(this.curPresentation.selectedDoc);
-            this.gotoDocument(0, current);
+            this.gotoDocument(0, NumCast(this.props.Document.selectedDoc));
         }
-        this.curPresentation.presStatus = this.presStatus;
     }
 
     //The function that resets the presentation by removing every action done by it. It also
     //stops the presentaton.
     @action
     resetPresentation = () => {
-        this.childrenDocs.forEach((doc: Doc) => {
+        this._childrenDocs.forEach((doc: Doc) => {
             doc.opacity = 1;
             doc.viewScale = 1;
         });
-        this.curPresentation.selectedDoc = 0;
-        this.presStatus = false;
-        this.curPresentation.presStatus = this.presStatus;
-        if (this.childrenDocs.length === 0) {
-            return;
+        this.props.Document.selectedDoc = 0;
+        this.props.Document.presStatus = false;
+        if (this._childrenDocs.length !== 0) {
+            DocumentManager.Instance.zoomIntoScale(this._childrenDocs[0], 1);
         }
-        DocumentManager.Instance.zoomIntoScale(this.childrenDocs[0], 1);
     }
 
-
     //The function that starts the presentation, also checking if actions should be applied
     //directly at start.
     startPresentation = (startIndex: number) => {
-        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+        this._presElementsMappings.forEach((component, doc) => {
             if (component.props.document.hideTillShownButton) {
-                if (this.childrenDocs.indexOf(doc) > startIndex) {
+                if (this._childrenDocs.indexOf(doc) > startIndex) {
                     doc.opacity = 0;
                 }
-
             }
             if (component.props.document.hideAfterButton) {
-                if (this.childrenDocs.indexOf(doc) < startIndex) {
+                if (this._childrenDocs.indexOf(doc) < startIndex) {
                     doc.opacity = 0;
                 }
             }
             if (component.props.document.fadeButton) {
-                if (this.childrenDocs.indexOf(doc) < startIndex) {
+                if (this._childrenDocs.indexOf(doc) < startIndex) {
                     doc.opacity = 0.5;
                 }
             }
-
         });
-
-    }
-
-
-    /**
-     * The function that is called to render either select for presentations, or title inputting.
-     */
-    renderSelectOrPresSelection = () => {
-        if (this.PresTitleInputOpen || this.PresTitleChangeOpen) {
-            return <input ref={(e) => this.titleInputElement = e!} type="text" className="presentationView-title" placeholder="Enter Name!" onKeyDown={this.submitPresentationTitle} />;
-        } else {
-            return (null);
-        }
-    }
-
-    /**
-     * The function that is called on enter press of title input. It gives the
-     * new presentation the title user entered. If nothing is entered, gives a default title.
-     */
-    @action
-    submitPresentationTitle = (e: React.KeyboardEvent) => {
-        if (e.keyCode === 13) {
-            let presTitle = this.titleInputElement!.value;
-            this.titleInputElement!.value = "";
-            if (this.PresTitleChangeOpen) {
-                this.PresTitleChangeOpen = false;
-                this.changePresentationTitle(presTitle);
-            }
-        }
-    }
-    /**
-     * The function that is called to change title of presentation to what user entered.
-     */
-    @undoBatch
-    changePresentationTitle = (newTitle: string) => {
-        if (newTitle === "") {
-            return;
-        }
-        this.curPresentation.title = newTitle;
     }
 
     addPressElem = (keyDoc: Doc, elem: PresentationElement) => {
-        this.presElementsMappings.set(keyDoc, elem);
+        this._presElementsMappings.set(keyDoc, elem);
     }
 
     minimize = undoBatch(action(() => {
-        this.presMode = true;
+        this._presMode = true;
         this.props.addDocTab && this.props.addDocTab(this.props.Document, this.props.DataDoc, "close");
     }));
 
@@ -485,12 +373,10 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
     }
 
     render() {
-
-        let width = "100%"; //NumCast(this.curPresentation.width)
         return (
-            <div className="presentationView-cont" onPointerEnter={action(() => !this.persistOpacity && (this.opacity = 1))} onContextMenu={this.specificContextMenu}
-                onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))}
-                style={{ width: width, opacity: this.opacity, }}>
+            <div className="presentationView-cont" onPointerEnter={action(() => !this._persistOpacity && (this._opacity = 1))} onContextMenu={this.specificContextMenu}
+                onPointerLeave={action(() => !this._persistOpacity && (this._opacity = 0.4))}
+                style={{ width: "100%", opacity: this._opacity, }}>
                 <div className="presentation-buttons">
                     <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
                     {this.renderPlayPauseButton()}
@@ -500,28 +386,26 @@ export class PresBox extends React.Component<FieldViewProps> { //FieldViewProps?
                 <input
                     type="checkbox"
                     onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
-                        this.persistOpacity = e.target.checked;
-                        this.opacity = this.persistOpacity ? 1 : 0.4;
+                        this._persistOpacity = e.target.checked;
+                        this._opacity = this._persistOpacity ? 1 : 0.4;
                     })}
-                    checked={this.persistOpacity}
+                    checked={this._persistOpacity}
                     style={{ position: "absolute", bottom: 5, left: 5 }}
-                    onPointerEnter={action(() => this.labelOpacity = 1)}
-                    onPointerLeave={action(() => this.labelOpacity = 0)}
+                    onPointerEnter={action(() => this._labelOpacity = 1)}
+                    onPointerLeave={action(() => this._labelOpacity = 0)}
                 />
-                <p style={{ position: "absolute", bottom: 1, left: 22, opacity: this.labelOpacity, transition: "0.7s opacity ease" }}>opacity {this.persistOpacity ? "persistent" : "on focus"}</p>
+                <p style={{ position: "absolute", bottom: 1, left: 22, opacity: this._labelOpacity, transition: "0.7s opacity ease" }}>opacity {this._persistOpacity ? "persistent" : "on focus"}</p>
                 <PresentationViewList
-                    mainDocument={this.curPresentation}
+                    mainDocument={this.props.Document}
                     deleteDocument={this.RemoveDoc}
                     gotoDocument={this.gotoDocument}
-                    PresElementsMappings={this.presElementsMappings}
+                    PresElementsMappings={this._presElementsMappings}
                     setChildrenDocs={this.setChildrenDocs}
-                    presStatus={this.presStatus}
+                    presStatus={BoolCast(this.props.Document.presStatus)}
                     removeDocByRef={this.removeDocByRef}
-                    clearElemMap={() => this.presElementsMappings.clear()}
+                    clearElemMap={() => this._presElementsMappings.clear()}
                 />
             </div>
         );
     }
-
-
 }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationModeMenu.tsx b/src/client/views/presentationview/PresentationModeMenu.tsx
index 0dd2b7731..e4123a1fe 100644
--- a/src/client/views/presentationview/PresentationModeMenu.tsx
+++ b/src/client/views/presentationview/PresentationModeMenu.tsx
@@ -98,8 +98,4 @@ export default class PresModeMenu extends React.Component<PresModeMenuProps> {
             </div >
         );
     }
-
-
-
-
 }
\ No newline at end of file