From d7f515f32de780884774e7bbdcc1cfe78733af45 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 14:01:59 -0400
Subject: a bunch of changes to presentation view ... more coming.

---
 src/client/views/nodes/DocumentContentsView.tsx | 31 +++++++++++--------------
 1 file changed, 14 insertions(+), 17 deletions(-)

(limited to 'src/client/views/nodes/DocumentContentsView.tsx')

diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 3c3cc0d91..d035cbe18 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -1,37 +1,34 @@
-import { computed, trace } from "mobx";
+import { computed } from "mobx";
 import { observer } from "mobx-react";
+import { Doc } from "../../../new_fields/Doc";
+import { ScriptField } from "../../../new_fields/ScriptField";
+import { Cast } from "../../../new_fields/Types";
+import { OmitKeys, Without } from "../../../Utils";
+import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
+import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
 import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
+import { LinkFollowBox } from "../linking/LinkFollowBox";
+import { YoutubeBox } from "./../../apis/youtube/YoutubeBox";
 import { AudioBox } from "./AudioBox";
+import { ButtonBox } from "./ButtonBox";
 import { DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
-import { FormattedTextBox } from "./FormattedTextBox";
-import { ImageBox } from "./ImageBox";
 import { DragBox } from "./DragBox";
-import { ButtonBox } from "./ButtonBox";
-import { PresBox } from "./PresBox";
-import { LinkFollowBox } from "../linking/LinkFollowBox";
+import { FieldView, FieldViewProps } from "./FieldView";
+import { FormattedTextBox } from "./FormattedTextBox";
 import { IconBox } from "./IconBox";
+import { ImageBox } from "./ImageBox";
 import { KeyValueBox } from "./KeyValueBox";
 import { PDFBox } from "./PDFBox";
+import { PresBox } from "./PresBox";
 import { VideoBox } from "./VideoBox";
-import { FieldView } from "./FieldView";
 import { WebBox } from "./WebBox";
-import { YoutubeBox } from "./../../apis/youtube/YoutubeBox";
-import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
 import React = require("react");
-import { FieldViewProps } from "./FieldView";
-import { Without, OmitKeys } from "../../../Utils";
-import { Cast, StrCast, NumCast } from "../../../new_fields/Types";
-import { List } from "../../../new_fields/List";
-import { Doc } from "../../../new_fields/Doc";
-import DirectoryImportBox from "../../util/Import & Export/DirectoryImportBox";
-import { ScriptField } from "../../../new_fields/ScriptField";
-import { fromPromise } from "mobx-utils";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 type BindingProps = Without<FieldViewProps, 'fieldKey'>;
-- 
cgit v1.2.3-70-g09d2


From 65d9b92bcadbecb6e7dd55930f96f228c6a2f4f7 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 17:12:28 -0400
Subject: simpliified presentations to be a PresBox with PresElementBoxes.

---
 src/client/documents/DocumentTypes.ts              |   3 +-
 src/client/documents/Documents.ts                  |  10 +-
 .../views/collections/CollectionDockingView.tsx    |   9 +-
 src/client/views/linking/LinkMenuItem.tsx          |   2 +-
 src/client/views/nodes/DocumentContentsView.tsx    |   3 +-
 src/client/views/nodes/PresBox.scss                |  33 ++
 src/client/views/nodes/PresBox.tsx                 | 189 +++++----
 .../views/presentationview/PresElementBox.scss     |  75 ++++
 .../views/presentationview/PresElementBox.tsx      | 329 ++++++++++++++++
 .../views/presentationview/PresentationElement.tsx | 423 ---------------------
 .../views/presentationview/PresentationList.tsx    |  64 ----
 .../views/presentationview/PresentationView.scss   | 113 ------
 12 files changed, 545 insertions(+), 708 deletions(-)
 create mode 100644 src/client/views/nodes/PresBox.scss
 create mode 100644 src/client/views/presentationview/PresElementBox.scss
 create mode 100644 src/client/views/presentationview/PresElementBox.tsx
 delete mode 100644 src/client/views/presentationview/PresentationElement.tsx
 delete mode 100644 src/client/views/presentationview/PresentationList.tsx
 delete mode 100644 src/client/views/presentationview/PresentationView.scss

(limited to 'src/client/views/nodes/DocumentContentsView.tsx')

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 8ec6e9642..e5d5885cd 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -19,5 +19,6 @@ export enum DocumentType {
     YOUTUBE = "youtube",
     DRAGBOX = "dragbox",
     PRES = "presentation",
-    LINKFOLLOW = "linkfollow"
+    LINKFOLLOW = "linkfollow",
+    PRESELEMENT = "preselement"
 }
\ No newline at end of file
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 01c36182f..0d04d044e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,7 +1,6 @@
 import { HistogramField } from "../northstar/dash-fields/HistogramField";
 import { HistogramBox } from "../northstar/dash-nodes/HistogramBox";
 import { HistogramOperation } from "../northstar/operations/HistogramOperation";
-import { CollectionPDFView } from "../views/collections/CollectionPDFView";
 import { CollectionVideoView } from "../views/collections/CollectionVideoView";
 import { CollectionView } from "../views/collections/CollectionView";
 import { CollectionViewType } from "../views/collections/CollectionBaseView";
@@ -46,6 +45,7 @@ import { ComputedField } from "../../new_fields/ScriptField";
 import { ProxyField } from "../../new_fields/Proxy";
 import { DocumentType } from "./DocumentTypes";
 import { LinkFollowBox } from "../views/linking/LinkFollowBox";
+import { PresElementBox } from "../views/presentationview/PresElementBox";
 var requestImageSize = require('../util/request-image-size');
 var path = require('path');
 
@@ -175,6 +175,9 @@ export namespace Docs {
             [DocumentType.LINKFOLLOW, {
                 layout: { view: LinkFollowBox }
             }],
+            [DocumentType.PRESELEMENT, {
+                layout: { view: PresElementBox }
+            }],
         ]);
 
         // All document prototypes are initialized with at least these values
@@ -457,6 +460,11 @@ export namespace Docs {
         export function LinkFollowBoxDocument(options?: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.LINKFOLLOW), undefined, { ...(options || {}) });
         }
+
+        export function PresElementBoxDocument(options?: DocumentOptions) {
+            return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
+        }
+
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id);
         }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 963851a12..d83530d4f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,6 +31,8 @@ import { SubCollectionViewProps } from "./CollectionSubView";
 import React = require("react");
 import { ButtonSelector } from './ParentDocumentSelector';
 import { DocumentType } from '../../documents/DocumentTypes';
+import { compileFunction } from 'vm';
+import { ComputedField } from '../../../new_fields/ScriptField';
 library.add(faFile);
 const _global = (window /* browser */ || global /* node */) as any;
 
@@ -571,11 +573,14 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         //add this new doc to props.Document
         let curPres = Cast(CurrentUserUtils.UserDocument.curPresentation, Doc) as Doc;
         if (curPres) {
+            let pinDoc = Docs.Create.PresElementBoxDocument();
+            Doc.GetProto(pinDoc).target = doc;
+            Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.target instanceof Doc) && this.target.title.toString()');
             const data = Cast(curPres.data, listSpec(Doc));
             if (data) {
-                data.push(doc);
+                data.push(pinDoc);
             } else {
-                curPres.data = new List([doc]);
+                curPres.data = new List([pinDoc]);
             }
             if (!DocumentManager.Instance.getDocumentView(curPres)) {
                 this.addDocTab(curPres, undefined, "onRight");
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index e5a4a68bf..a6ee9c2c6 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -95,7 +95,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     @action.bound
     async followDefault() {
         if (LinkFollowBox.Instance !== undefined) {
-            LinkFollowBox.setAddDocTab(this.props.addDocTab);;
+            LinkFollowBox.setAddDocTab(this.props.addDocTab);
             LinkFollowBox.Instance.setLinkDocs(this.props.linkDoc, this.props.sourceDoc, this.props.destinationDoc);
             LinkFollowBox.Instance.defaultLinkBehavior();
         }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index d035cbe18..75dd27f46 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -26,6 +26,7 @@ import { ImageBox } from "./ImageBox";
 import { KeyValueBox } from "./KeyValueBox";
 import { PDFBox } from "./PDFBox";
 import { PresBox } from "./PresBox";
+import { PresElementBox } from "../presentationview/PresElementBox";
 import { VideoBox } from "./VideoBox";
 import { WebBox } from "./WebBox";
 import React = require("react");
@@ -100,7 +101,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
         if (!this.layout && this.props.layoutKey !== "overlayLayout") return (null);
         return <ObserverJsxParser
             blacklistedAttrs={[]}
-            components={{ FormattedTextBox, ImageBox, IconBox, DirectoryImportBox, DragBox, ButtonBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox, LinkFollowBox }}
+            components={{ FormattedTextBox, ImageBox, IconBox, DirectoryImportBox, DragBox, ButtonBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, PresBox, YoutubeBox, LinkFollowBox, PresElementBox }}
             bindings={this.CreateBindings()}
             jsx={this.finalLayout}
             showWarnings={true}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
new file mode 100644
index 000000000..2aadd77aa
--- /dev/null
+++ b/src/client/views/nodes/PresBox.scss
@@ -0,0 +1,33 @@
+.presBox-cont {
+    position: absolute;
+    z-index: 2;
+    box-shadow: #AAAAAA .2vw .2vw .4vw;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    min-width: 200px;
+    height: 100%;
+    min-height: 50px;
+    letter-spacing: 2px;
+    overflow: hidden;
+    transition: 0.7s opacity ease;
+    pointer-events: all;
+
+    .presBox-listCont {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .presBox-buttons {
+        padding: 10px;
+        width: 100%;
+        .presBox-button {
+            margin-right: 2.5%;
+            margin-left: 2.5%;
+            width: 20%;
+            border-radius: 5px;
+        }
+    }
+}
+
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index e2dac4fd3..526416e57 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -2,19 +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, 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 { listSpec } from "../../../new_fields/Schema";
-import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types";
+import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { DocumentManager } from "../../util/DocumentManager";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { ContextMenu } from "../ContextMenu";
-import PresentationViewList from "../presentationview/PresentationList";
-import "../presentationview/PresentationView.scss";
+import "./PresBox.scss";
 import { FieldView, FieldViewProps } from './FieldView';
+import { PresElementBox } from "../presentationview/PresElementBox";
+import { Id } from "../../../new_fields/FieldSymbols";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -29,19 +30,7 @@ library.add(faEdit);
 export class PresBox extends React.Component<FieldViewProps> {
     public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); }
 
-    public static Instance: PresBox;
-    //variable that holds all the docs in the presentation
-    @observable _childrenDocs: Doc[] = [];
-
-    // whether presentation view has been minimized
-    @observable _presMode = false;
-    @observable public static CurrentPresentation: PresBox;
-
-    //initilize class variables
-    constructor(props: FieldViewProps) {
-        super(props);
-        runInAction(() => PresBox.CurrentPresentation = this);
-    }
+    @computed get childDocs() { return DocListCast(this.props.Document[this.props.fieldKey]); }
 
     next = async () => {
         const current = NumCast(this.props.Document.selectedDoc);
@@ -89,8 +78,8 @@ export class PresBox extends React.Component<FieldViewProps> {
             //If so making sure to zoom out, which goes back to state before zooming action
             if (current > 0) {
                 if (zoomOut || docAtCurrent.showButton) {
-                    let prevScale = NumCast(this._childrenDocs[prevSelected].viewScale, null);
-                    let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[current]);
+                    let prevScale = NumCast(this.childDocs[prevSelected].viewScale, null);
+                    let curScale = DocumentManager.Instance.getScaleOfDocView(this.childDocs[current]);
                     if (prevScale !== undefined && prevScale !== curScale) {
                         DocumentManager.Instance.zoomIntoScale(docAtCurrent, prevScale);
                     }
@@ -106,22 +95,16 @@ export class PresBox extends React.Component<FieldViewProps> {
      * Hide Until Presented, Hide After Presented, Fade After Presented
      */
     showAfterPresented = (index: number) => {
-        this._childrenDocs.forEach((doc, ind) => {
+        this.childDocs.forEach((doc, ind) => {
             //the order of cases is aligned based on priority
-            if (doc.hideTillShownButton) {
-                if (ind <= index) {
-                    doc.opacity = 1;
-                }
+            if (doc.hideTillShownButton && ind <= index) {
+                (doc.target as Doc).opacity = 1;
             }
-            if (doc.hideAfterButton) {
-                if (ind < index) {
-                    doc.opacity = 0;
-                }
+            if (doc.hideAfterButton && ind < index) {
+                (doc.target as Doc).opacity = 0;
             }
-            if (doc.fadeButton) {
-                if (ind < index) {
-                    doc.opacity = 0.5;
-                }
+            if (doc.fadeButton && ind < index) {
+                (doc.target as Doc).opacity = 0.5;
             }
         });
     }
@@ -132,23 +115,17 @@ export class PresBox extends React.Component<FieldViewProps> {
      * Hide Until Presented, Hide After Presented, Fade After Presented
      */
     hideIfNotPresented = (index: number) => {
-        this._childrenDocs.forEach((key, ind) => {
+        this.childDocs.forEach((key, ind) => {
             //the order of cases is aligned based on priority
 
-            if (key.hideAfterButton) {
-                if (ind >= index) {
-                    key.opacity = 1;
-                }
+            if (key.hideAfterButton && ind >= index) {
+                (key.target as Doc).opacity = 1;
             }
-            if (key.fadeButton) {
-                if (ind >= index) {
-                    key.opacity = 1;
-                }
+            if (key.fadeButton && ind >= index) {
+                (key.target as Doc).opacity = 1;
             }
-            if (key.hideTillShownButton) {
-                if (ind > index) {
-                    key.opacity = 0;
-                }
+            if (key.hideTillShownButton && ind > index) {
+                (key.target as Doc).opacity = 0;
             }
         });
     }
@@ -158,11 +135,12 @@ export class PresBox extends React.Component<FieldViewProps> {
      * has the option open and last in the group. If not in the group, and it has
      * te option open, navigates to that element.
      */
-    navigateToElement = async (curDoc: Doc, fromDoc: number) => {
+    navigateToElement = async (curDoc: Doc, fromDocIndex: number) => {
+        let fromDoc = this.childDocs[fromDocIndex].target as Doc;
         let docToJump = curDoc;
         let willZoom = false;
 
-        let presDocs = DocListCast(this.props.Document.data);
+        let presDocs = DocListCast(this.props.Document[this.props.fieldKey]);
         let nextSelected = presDocs.indexOf(curDoc);
         let currentDocGroups: Doc[] = [];
         for (; nextSelected < presDocs.length - 1; nextSelected++) {
@@ -186,31 +164,32 @@ export class PresBox extends React.Component<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
+            let target = await curDoc.target as Doc;
             if (curDoc.navButton) {
-                DocumentManager.Instance.jumpToDocument(curDoc, false);
+                DocumentManager.Instance.jumpToDocument(target, false);
             } else if (curDoc.showButton) {
-                let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[fromDoc]);
+                let curScale = DocumentManager.Instance.getScaleOfDocView(fromDoc);
                 //awaiting jump so that new scale can be found, since jumping is async
-                await DocumentManager.Instance.jumpToDocument(curDoc, true);
-                curDoc.viewScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
+                await DocumentManager.Instance.jumpToDocument(target, true);
+                curDoc.viewScale = DocumentManager.Instance.getScaleOfDocView(target);
 
                 //saving the scale user was on before zooming in
                 if (curScale !== 1) {
-                    this._childrenDocs[fromDoc].viewScale = curScale;
+                    fromDoc.viewScale = curScale;
                 }
 
             }
             return;
         }
-        let curScale = DocumentManager.Instance.getScaleOfDocView(this._childrenDocs[fromDoc]);
+        let curScale = DocumentManager.Instance.getScaleOfDocView(fromDoc);
 
         //awaiting jump so that new scale can be found, since jumping is async
-        await DocumentManager.Instance.jumpToDocument(docToJump, willZoom);
-        let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
+        await DocumentManager.Instance.jumpToDocument(await docToJump.target as Doc, willZoom);
+        let newScale = DocumentManager.Instance.getScaleOfDocView(await curDoc.target as Doc);
         curDoc.viewScale = newScale;
         //saving the scale that user was on
         if (curScale !== 1) {
-            this._childrenDocs[fromDoc].viewScale = curScale;
+            fromDoc.viewScale = curScale;
         }
 
     }
@@ -219,34 +198,25 @@ export class PresBox extends React.Component<FieldViewProps> {
      * Async function that supposedly return the doc that is located at given index.
      */
     getDocAtIndex = async (index: number) => {
-        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const list = FieldValue(Cast(this.props.Document[this.props.fieldKey], 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];
+            return list[index];
         }
-        return undefined
+        return undefined;
     }
 
-    /**
-     * The function that removes a doc from a presentation. 
-     */
-    @action
-    public RemoveDoc = async (index: number) => {
-        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) {
-            value.splice(index, 1);
-        }
-    }
 
-    public removeDocByRef = (doc: Doc) => {
-        let indexOfDoc = this._childrenDocs.indexOf(doc);
+    @undoBatch
+    public removeDocument = (doc: Doc) => {
         const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
         if (value) {
-            value.splice(indexOfDoc, 1)[0];
-        }
-        if (indexOfDoc !== - 1) {
-            return true;
+            let indexOfDoc = value.indexOf(doc);
+            if (indexOfDoc !== - 1) {
+                value.splice(indexOfDoc, 1)[0];
+                return true;
+            }
         }
         return false;
     }
@@ -256,7 +226,7 @@ export class PresBox extends React.Component<FieldViewProps> {
     @action
     public gotoDocument = async (index: number, fromDoc: number) => {
         Doc.UnBrushAllDocs();
-        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const list = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)));
         if (list && index >= 0 && index < list.length) {
             this.props.Document.selectedDoc = index;
 
@@ -273,11 +243,6 @@ export class PresBox extends React.Component<FieldViewProps> {
             }
         }
     }
-    //Function that sets the store of the children docs.
-    @action
-    setChildrenDocs = (docList: Doc[]) => {
-        this._childrenDocs = docList;
-    }
 
     //The function that starts or resets presentaton functionally, depending on status flag.
     @action
@@ -295,33 +260,33 @@ export class PresBox extends React.Component<FieldViewProps> {
     //stops the presentaton.
     @action
     resetPresentation = () => {
-        this._childrenDocs.forEach((doc: Doc) => {
+        this.childDocs.forEach((doc: Doc) => {
             doc.opacity = 1;
             doc.viewScale = 1;
         });
         this.props.Document.selectedDoc = 0;
         this.props.Document.presStatus = false;
-        if (this._childrenDocs.length !== 0) {
-            DocumentManager.Instance.zoomIntoScale(this._childrenDocs[0], 1);
+        if (this.childDocs.length !== 0) {
+            DocumentManager.Instance.zoomIntoScale(this.childDocs[0], 1);
         }
     }
 
     //The function that starts the presentation, also checking if actions should be applied
     //directly at start.
     startPresentation = (startIndex: number) => {
-        this._childrenDocs.map(doc => {
+        this.childDocs.map(doc => {
             if (doc.hideTillShownButton) {
-                if (this._childrenDocs.indexOf(doc) > startIndex) {
+                if (this.childDocs.indexOf(doc) > startIndex) {
                     doc.opacity = 0;
                 }
             }
             if (doc.hideAfterButton) {
-                if (this._childrenDocs.indexOf(doc) < startIndex) {
+                if (this.childDocs.indexOf(doc) < startIndex) {
                     doc.opacity = 0;
                 }
             }
             if (doc.fadeButton) {
-                if (this._childrenDocs.indexOf(doc) < startIndex) {
+                if (this.childDocs.indexOf(doc) < startIndex) {
                     doc.opacity = 0.5;
                 }
             }
@@ -346,26 +311,46 @@ export class PresBox extends React.Component<FieldViewProps> {
         ContextMenu.Instance.addItem({ description: "Make Current Presentation", event: action(() => Doc.UserDoc().curPresentation = this.props.Document), icon: "asterisk" });
     }
 
+    /**
+     * Initially every document starts with a viewScale 1, which means
+     * that they will be displayed in a canvas with scale 1.
+     */
+    @action
+    initializeScaleViews = (docList: Doc[]) => {
+        docList.forEach((doc: Doc) => {
+            let curScale = NumCast(doc.viewScale, null);
+            if (curScale === undefined) {
+                doc.viewScale = 1;
+            }
+        });
+    }
+
     render() {
+        this.initializeScaleViews(this.childDocs);
         return (
-            <div className="presentationView-cont" onContextMenu={this.specificContextMenu} style={{ width: "100%", minWidth: "200px", height: "100%", minHeight: "50px" }}>
-                <div className="presentation-buttons" style={{ width: "100%" }}>
-                    <button className="presentation-button" title="Back" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
-                    <button className="presentation-button" title={"Reset Presentation" + this.props.Document.presStatus ? "" : " From Start"} onClick={this.startOrResetPres}>
+            <div className="presBox-cont" onContextMenu={this.specificContextMenu}>
+                <div className="presBox-buttons">
+                    <button className="presBox-button" title="Back" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                    <button className="presBox-button" title={"Reset Presentation" + this.props.Document.presStatus ? "" : " From Start"} onClick={this.startOrResetPres}>
                         <FontAwesomeIcon icon={this.props.Document.presStatus ? "stop" : "play"} />
                     </button>
-                    <button className="presentation-button" title="Next" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
-                    <button className="presentation-button" title={this.props.Document.minimizedView ? "Expand" : "Minimize"} onClick={this.toggleMinimize}><FontAwesomeIcon icon={"eye"} /></button>
+                    <button className="presBox-button" title="Next" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                    <button className="presBox-button" title={this.props.Document.minimizedView ? "Expand" : "Minimize"} onClick={this.toggleMinimize}><FontAwesomeIcon icon={"eye"} /></button>
                 </div>
                 {this.props.Document.minimizedView ? (null) :
-                    <PresentationViewList
-                        mainDocument={this.props.Document}
-                        deleteDocument={this.RemoveDoc}
-                        gotoDocument={this.gotoDocument}
-                        setChildrenDocs={this.setChildrenDocs}
-                        presStatus={BoolCast(this.props.Document.presStatus)}
-                        removeDocByRef={this.removeDocByRef}
-                    />}
+                    <div className="presBox-listCont" >
+                        {this.childDocs.map((doc, index) =>
+                            <PresElementBox
+                                {... this.props}
+                                key={doc[Id]}
+                                index={index}
+                                presentationDoc={this.props.Document}
+                                Document={doc}
+                                gotoDocument={this.gotoDocument}
+                                removeDocument={this.removeDocument}
+                            />
+                        )}
+                    </div>}
             </div>
         );
     }
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
new file mode 100644
index 000000000..c7d846718
--- /dev/null
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -0,0 +1,75 @@
+.presElementBox-item {
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
+    outline-color: maroon;
+    outline-style: dashed;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition: all .1s;
+
+    .documentView-node {
+        position: absolute;
+        z-index: 1;
+    }
+}
+
+.presElementBox-item-above {
+    border-top: black 2px solid;
+}
+
+.presElementBox-item-below {
+    border-bottom: black 2px solid;
+}
+
+.presElementBox-item:hover {
+    transition: all .1s;
+    background: #AAAAAA;
+    border-radius: 12px;
+}
+
+.presElementBox-selected {
+    background: gray;
+    color: black;
+    border-radius: 12px;
+    box-shadow: black 2px 2px 5px;
+}
+
+
+.presElementBox-icon {
+    float: right;
+}
+
+.presElementBox-interaction {
+    color: gray;
+    float: left;
+}
+
+.presElementBox-interaction-selected {
+    color: white;
+    float: left;
+}
+
+.presElementBox-name {
+    font-size: 15px;
+    display: inline-block;
+}
+
+.presElementBox-embedded {
+    position: relative;
+    margin-top: 15;
+}
+
+.presElementBox-embeddedMask {
+    width:100%;
+    height:100%;
+    position: absolute;
+    left:0;
+    top:0;
+    background: transparent;
+    z-index:2;
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
new file mode 100644
index 000000000..fe2aea27b
--- /dev/null
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -0,0 +1,329 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
+import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Doc } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
+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 { Transform } from "../../util/Transform";
+import { DocumentView } from "../nodes/DocumentView";
+import React = require("react");
+import "./PresElementBox.scss";
+import { FieldViewProps, FieldView } from '../nodes/FieldView';
+
+
+library.add(faArrowUp);
+library.add(fileSolid);
+library.add(faLocationArrow);
+library.add(fileRegular as any);
+library.add(faSearch);
+library.add(faArrowDown);
+
+interface PresElementProps {
+    presentationDoc: Doc;
+    index: number;
+    gotoDocument(index: number, fromDoc: number): Promise<void>;
+}
+
+/**
+ * This class models the view a document added to presentation will have in the presentation.
+ * It involves some functionality for its buttons and options.
+ */
+@observer
+export class PresElementBox extends React.Component<PresElementProps & FieldViewProps> {
+
+    public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
+    private header?: HTMLDivElement | undefined;
+    private listdropDisposer?: DragManager.DragDropDisposer;
+    private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+    @computed get currentIndex() { return NumCast(this.props.presentationDoc.selectedDoc); }
+    @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 embedInline() { return BoolCast(this.props.Document.embedOpen); }
+
+    set embedInline(value: boolean) { this.props.Document.embedOpen = value; }
+    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; }
+
+    //Lifecycle function that makes sure that button BackUp is received when mounted.
+    componentDidMount() {
+        if (this.presElRef.current) {
+            this.header = this.presElRef.current;
+            this.createListDropTarget(this.presElRef.current);
+        }
+    }
+
+    componentWillUnmount() {
+        this.listdropDisposer && this.listdropDisposer();
+    }
+    /**
+     * The function that is called on click to turn Hiding document till press option on/off.
+     * It also sets the beginning and end opacitys.
+     */
+    @action
+    onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.hideTillShownButton = !this.hideTillShownButton;
+        if (!this.hideTillShownButton) {
+            if (this.props.index >= this.currentIndex) {
+                (this.props.Document.target as Doc).opacity = 1;
+            }
+        } else {
+            if (this.props.presentationDoc.presStatus) {
+                if (this.props.index > this.currentIndex) {
+                    (this.props.Document.target as Doc).opacity = 0;
+                }
+            }
+        }
+    }
+
+    /**
+     * The function that is called on click to turn Hiding document after presented option on/off.
+     * It also makes sure that the option swithches from fade-after to this one, since both
+     * can't coexist.
+     */
+    @action
+    onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.hideAfterButton = !this.hideAfterButton;
+        if (!this.hideAfterButton) {
+            if (this.props.index <= this.currentIndex) {
+                (this.props.Document.target as Doc).opacity = 1;
+            }
+        } else {
+            if (this.fadeButton) this.fadeButton = false;
+            if (this.props.presentationDoc.presStatus) {
+                if (this.props.index < this.currentIndex) {
+                    (this.props.Document.target as Doc).opacity = 0;
+                }
+            }
+        }
+    }
+
+    /**
+     * The function that is called on click to turn fading document after presented option on/off.
+     * It also makes sure that the option swithches from hide-after to this one, since both
+     * can't coexist.
+     */
+    @action
+    onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        this.fadeButton = !this.fadeButton;
+        if (!this.fadeButton) {
+            if (this.props.index <= this.currentIndex) {
+                (this.props.Document.target as Doc).opacity = 1;
+            }
+        } else {
+            this.hideAfterButton = false;
+            if (this.props.presentationDoc.presStatus) {
+                if (this.props.index < this.currentIndex) {
+                    (this.props.Document.target as Doc).opacity = 0.5;
+                }
+            }
+        }
+    }
+
+    /**
+     * The function that is called on click to turn navigation option of docs on/off.
+     */
+    @action
+    onNavigateDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        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);
+            }
+        }
+    }
+
+    /**
+    * The function that is called on click to turn zoom option of docs on/off.
+    */
+    @action
+    onZoomDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+
+        this.showButton = !this.showButton;
+        if (!this.showButton) {
+            this.props.Document.viewScale = 1;
+        } else {
+            this.navButton = false;
+            if (this.currentIndex === this.props.index) {
+                this.props.gotoDocument(this.props.index, this.props.index);
+            }
+        }
+    }
+
+    /**
+     * Creating a drop target for drag and drop when called.
+     */
+    protected createListDropTarget = (ele: HTMLDivElement) => {
+        this.listdropDisposer && this.listdropDisposer();
+        ele && (this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }));
+    }
+
+    /**
+     * Returns a local transformed coordinate array for given coordinates.
+     */
+    ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
+
+    /**
+     * This method is called when a element is dropped on a already esstablished target.
+     * It makes sure to do appropirate action depending on if the item is dropped before
+     * or after the target.
+     */
+    listDrop = async (e: Event, de: DragManager.DropEvent) => {
+        let x = this.ScreenToLocalListTransform(de.x, de.y);
+        let rect = this.header!.getBoundingClientRect();
+        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
+        let before = x[1] < bounds[1];
+        if (de.data instanceof DragManager.DocumentDragData) {
+            let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", doc, this.props.Document, before);
+            e.stopPropagation();
+            //where does treeViewId come from
+            let movedDocs = (de.data.options === this.props.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            //console.log("How is this causing an issue");
+            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.presentationDoc, "data", d, this.props.Document, before) || added, false)
+                : (de.data.moveDocument) ?
+                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.Document, addDoc) || added, false)
+                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before), false);
+        }
+        document.removeEventListener("pointermove", this.onDragMove, true);
+
+        return false;
+    }
+
+    //This is used to add dragging as an event.
+    onPointerEnter = (e: React.PointerEvent): void => {
+        if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
+            this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? "presElementBox-selected" : "");
+
+            document.addEventListener("pointermove", this.onDragMove, true);
+        }
+    }
+
+    //This is used to remove the dragging when dropped.
+    onPointerLeave = (e: React.PointerEvent): void => {
+        this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? " presElementBox-selected" : "");
+
+        document.removeEventListener("pointermove", this.onDragMove, true);
+    }
+
+    /**
+     * This method is passed in to be used when dragging a document.
+     * It makes it possible to show dropping lines on drop targets.
+     */
+    onDragMove = (e: PointerEvent): void => {
+        Doc.UnBrushDoc(this.props.Document);
+        let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
+        let rect = this.header!.getBoundingClientRect();
+        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
+        this.header!.className = "presElementBox-item presElementBox-item-" + (x[1] < bounds[1] ? "above" : "below");
+        e.stopPropagation();
+    }
+
+    /**
+     * This method is passed in to on down event of presElement, so that drag and
+     * drop can be completed with DragManager functionality.
+     */
+    @action
+    move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
+        return this.props.Document !== target && (this.props.removeDocument ? this.props.removeDocument(doc) : false) && addDoc(doc);
+    }
+
+    /**
+     * The function that is responsible for rendering the a preview or not for this
+     * presentation element.
+     */
+    renderEmbeddedInline = () => {
+        if (!this.embedInline || !(this.props.Document.target instanceof Doc)) {
+            return (null);
+        }
+
+        let propDocWidth = NumCast(this.props.Document.nativeWidth);
+        let propDocHeight = NumCast(this.props.Document.nativeHeight);
+        let scale = () => 175 / NumCast(this.props.Document.nativeWidth, 175);
+        return (
+            <div className="presElementBox-embedded" style={{
+                height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
+                width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
+            }}>
+                <DocumentView
+                    fitToBox={StrCast(this.props.Document.type).indexOf(DocumentType.COL) !== -1}
+                    Document={this.props.Document.target as Doc}
+                    addDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    ruleProvider={undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                    addDocTab={returnFalse}
+                    pinToPres={returnFalse}
+                    renderDepth={1}
+                    PanelWidth={() => 350}
+                    PanelHeight={() => 90}
+                    focus={emptyFunction}
+                    backgroundColor={returnEmptyString}
+                    parentActive={returnFalse}
+                    whenActiveChanged={returnFalse}
+                    bringToFront={emptyFunction}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined}
+                    ContentScaling={scale}
+                />
+                <div className="presElementBox-embeddedMask" />
+            </div>
+        );
+    }
+
+    render() {
+        let p = this.props;
+
+        let className = "presElementBox-item" + (this.currentIndex === p.index ? " presElementBox-selected" : "");
+        let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
+        let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.props.presentationDoc[Id], true);
+        return (
+            <div className={className} key={p.Document[Id] + p.index}
+                ref={this.presElRef}
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
+                onPointerDown={onItemDown}
+                style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
+                onClick={e => p.gotoDocument(p.index, this.currentIndex)}>
+                <strong className="presElementBox-name">
+                    {`${p.index + 1}. ${p.Document.title}`}
+                </strong>
+                <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
+                <br />
+                <button title="Zoom" className={"presElementBox-interaction" + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={"presElementBox-interaction" + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Til Presented" className={"presElementBox-interaction" + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade After Presented" className={"presElementBox-interaction" + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Hide After Presented" className={"presElementBox-interaction" + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.groupButton = !this.groupButton)}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
+                <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.embedInline = !this.embedInline)}><FontAwesomeIcon icon={"arrow-down"} /></button>
+
+                <br />
+                {this.renderEmbeddedInline()}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
deleted file mode 100644
index 6e8c28d34..000000000
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ /dev/null
@@ -1,423 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
-import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../../new_fields/Doc";
-import { Id } from "../../../new_fields/FieldSymbols";
-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 { Transform } from "../../util/Transform";
-import { ContextMenu } from "../ContextMenu";
-import { DocumentView } from "../nodes/DocumentView";
-import React = require("react");
-
-
-library.add(faArrowUp);
-library.add(fileSolid);
-library.add(faLocationArrow);
-library.add(fileRegular as any);
-library.add(faSearch);
-library.add(faArrowDown);
-
-interface PresentationElementProps {
-    mainDocument: Doc;
-    document: Doc;
-    index: number;
-    deleteDocument(index: number): void;
-    gotoDocument(index: number, fromDoc: number): Promise<void>;
-    allListElements: Doc[];
-    presStatus: boolean;
-    removeDocByRef(doc: Doc): boolean;
-}
-
-/**
- * This class models the view a document added to presentation will have in the presentation.
- * It involves some functionality for its buttons and options.
- */
-@observer
-export default class PresentationElement extends React.Component<PresentationElementProps> {
-
-    private header?: HTMLDivElement | undefined;
-    private listdropDisposer?: DragManager.DragDropDisposer;
-    private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
-
-    componentWillUnmount() {
-        this.listdropDisposer && this.listdropDisposer();
-    }
-
-    @computed get currentIndex() { return NumCast(this.props.mainDocument.selectedDoc); }
-
-    @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 expandInlineButton() { return BoolCast(this.props.document.expandInlineButton); }
-    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 expandInlineButton(val: boolean) { this.props.document.expandInlineButton = val; }
-
-    //Lifecycle function that makes sure that button BackUp is received when mounted.
-    async componentDidMount() {
-        if (this.presElRef.current) {
-            this.header = this.presElRef.current;
-            this.createListDropTarget(this.presElRef.current);
-        }
-    }
-
-    //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
-    async componentDidUpdate() {
-        if (this.presElRef.current) {
-            this.header = this.presElRef.current;
-            this.createListDropTarget(this.presElRef.current);
-        }
-    }
-
-    @action
-    onGroupClick = (e: React.MouseEvent) => {
-        this.groupButton = !this.groupButton;
-    }
-
-    /**
-     * The function that is called on click to turn Hiding document till press option on/off.
-     * It also sets the beginning and end opacitys.
-     */
-    @action
-    onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.hideTillShownButton = !this.hideTillShownButton;
-        if (!this.hideTillShownButton) {
-            if (this.props.index >= this.currentIndex) {
-                this.props.document.opacity = 1;
-            }
-        } else {
-            if (this.props.presStatus) {
-                if (this.props.index > this.currentIndex) {
-                    this.props.document.opacity = 0;
-                }
-            }
-        }
-    }
-
-    /**
-     * The function that is called on click to turn Hiding document after presented option on/off.
-     * It also makes sure that the option swithches from fade-after to this one, since both
-     * can't coexist.
-     */
-    @action
-    onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.hideAfterButton = !this.hideAfterButton;
-        if (!this.hideAfterButton) {
-            if (this.props.index <= this.currentIndex) {
-                this.props.document.opacity = 1;
-            }
-        } else {
-            if (this.fadeButton) this.fadeButton = false;
-            if (this.props.presStatus) {
-                if (this.props.index < this.currentIndex) {
-                    this.props.document.opacity = 0;
-                }
-            }
-        }
-    }
-
-    /**
-     * The function that is called on click to turn fading document after presented option on/off.
-     * It also makes sure that the option swithches from hide-after to this one, since both
-     * can't coexist.
-     */
-    @action
-    onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.fadeButton = !this.fadeButton;
-        if (!this.fadeButton) {
-            if (this.props.index <= this.currentIndex) {
-                this.props.document.opacity = 1;
-            }
-        } else {
-            this.hideAfterButton = false;
-            if (this.props.presStatus) {
-                if (this.props.index < this.currentIndex) {
-                    this.props.document.opacity = 0.5;
-                }
-            }
-        }
-    }
-
-    /**
-     * The function that is called on click to turn navigation option of docs on/off.
-     */
-    @action
-    onNavigateDocumentClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        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);
-            }
-        }
-    }
-
-    /**
-    * The function that is called on click to turn zoom option of docs on/off.
-    */
-    @action
-    onZoomDocumentClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-
-        this.showButton = !this.showButton;
-        if (!this.showButton) {
-            this.props.document.viewScale = 1;
-        } else {
-            this.navButton = false;
-            if (this.currentIndex === this.props.index) {
-                this.props.gotoDocument(this.props.index, this.props.index);
-            }
-        }
-    }
-
-    /**
-     * Function that expands the target inline
-     */
-    @action
-    onExpandTabClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.embedInline = !this.embedInline
-    }
-
-    /**
-     * Creating a drop target for drag and drop when called.
-     */
-    protected createListDropTarget = (ele: HTMLDivElement) => {
-        this.listdropDisposer && this.listdropDisposer();
-        if (ele) {
-            this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } });
-        }
-    }
-
-    /**
-     * Returns a local transformed coordinate array for given coordinates.
-     */
-    ScreenToLocalListTransform = (xCord: number, yCord: number) => {
-        return [xCord, yCord];
-    }
-
-    /**
-     * This method is called when a element is dropped on a already esstablished target.
-     * It makes sure to do appropirate action depending on if the item is dropped before
-     * or after the target.
-     */
-    listDrop = async (e: Event, de: DragManager.DropEvent) => {
-        let x = this.ScreenToLocalListTransform(de.x, de.y);
-        let rect = this.header!.getBoundingClientRect();
-        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
-        let before = x[1] < bounds[1];
-        if (de.data instanceof DragManager.DocumentDragData) {
-            let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", doc, this.props.document, before);
-            e.stopPropagation();
-            //where does treeViewId come from
-            let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
-            //console.log("How is this causing an issue");
-            document.removeEventListener("pointermove", this.onDragMove, true);
-            return (de.data.dropAction || de.data.userDropAction) ?
-                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false)
-                : (de.data.moveDocument) ?
-                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.document, addDoc) || added, false)
-                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before), false);
-        }
-        document.removeEventListener("pointermove", this.onDragMove, true);
-
-        return false;
-    }
-
-    //This is used to add dragging as an event.
-    onPointerEnter = (e: React.PointerEvent): void => {
-        if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
-
-            this.header!.className = "presentationView-item";
-
-            if (this.currentIndex === this.props.index) {
-                //this doc is selected
-                this.header!.className = "presentationView-item presentationView-selected";
-            }
-            document.addEventListener("pointermove", this.onDragMove, true);
-        }
-    }
-
-    //This is used to remove the dragging when dropped.
-    onPointerLeave = (e: React.PointerEvent): void => {
-        this.header!.className = "presentationView-item";
-
-        if (this.currentIndex === this.props.index) {
-            //this doc is selected
-            this.header!.className = "presentationView-item presentationView-selected";
-
-        }
-        document.removeEventListener("pointermove", this.onDragMove, true);
-    }
-
-    /**
-     * This method is passed in to be used when dragging a document.
-     * It makes it possible to show dropping lines on drop targets.
-     */
-    onDragMove = (e: PointerEvent): void => {
-        Doc.UnBrushDoc(this.props.document);
-        let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
-        let rect = this.header!.getBoundingClientRect();
-        let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
-        let before = x[1] < bounds[1];
-        this.header!.className = "presentationView-item";
-        if (before) {
-            this.header!.className += " presentationView-item-above";
-        }
-        else if (!before) {
-            this.header!.className += " presentationView-item-below";
-        }
-        e.stopPropagation();
-    }
-
-    /**
-     * This method is passed in to on down event of presElement, so that drag and
-     * drop can be completed with DragManager functionality.
-     */
-    @action
-    move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
-        return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc);
-    }
-    /**
-     * This function is a getter to get if a document is in previewMode.
-     */
-    private get embedInline() {
-        return BoolCast(this.props.document.embedOpen);
-    }
-
-    /**
-     * This function sets document in presentation preview mode as the given value.
-     */
-    private set embedInline(value: boolean) {
-        this.props.document.embedOpen = value;
-    }
-
-    /**
-     * The function that recreates that context menu of presentation elements.
-     */
-    onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        ContextMenu.Instance.addItem({ description: this.embedInline ? "Collapse Inline" : "Expand Inline", event: () => this.embedInline = !this.embedInline, icon: "expand" });
-        ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
-    }
-
-    /**
-     * The function that is responsible for rendering the a preview or not for this
-     * presentation element.
-     */
-    renderEmbeddedInline = () => {
-        if (!this.embedInline) {
-            return (null);
-        }
-
-        let propDocWidth = NumCast(this.props.document.nativeWidth);
-        let propDocHeight = NumCast(this.props.document.nativeHeight);
-        let scale = () => {
-            let newScale = 175 / NumCast(this.props.document.nativeWidth, 175);
-            return newScale;
-        };
-        return (
-            <div style={{
-                position: "relative",
-                height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
-                width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
-                marginTop: 15
-
-            }}>
-                <DocumentView
-                    fitToBox={StrCast(this.props.document.type).indexOf(DocumentType.COL) !== -1}
-                    Document={this.props.document}
-                    addDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    ruleProvider={undefined}
-                    ScreenToLocalTransform={Transform.Identity}
-                    addDocTab={returnFalse}
-                    pinToPres={returnFalse}
-                    renderDepth={1}
-                    PanelWidth={() => 350}
-                    PanelHeight={() => 90}
-                    focus={emptyFunction}
-                    backgroundColor={returnEmptyString}
-                    parentActive={returnFalse}
-                    whenActiveChanged={returnFalse}
-                    bringToFront={emptyFunction}
-                    zoomToScale={emptyFunction}
-                    getScale={returnOne}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    ContentScaling={scale}
-                />
-                <div style={{
-                    width: " 100%",
-                    height: " 100%",
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    background: "transparent",
-                    zIndex: 2,
-
-                }}></div>
-            </div>
-        );
-    }
-
-    render() {
-        let p = this.props;
-        let title = p.document.title;
-
-        let className = " presentationView-item";
-        if (this.currentIndex === p.index) {
-            //this doc is selected
-            className += " presentationView-selected";
-        }
-        let dropAction = StrCast(this.props.document.dropAction) as dropActionType;
-        let onItemDown = SetupDrag(this.presElRef, () => p.document, this.move, dropAction, this.props.mainDocument[Id], true);
-        return (
-            <div className={className} onContextMenu={this.onContextMenu} key={p.document[Id] + p.index}
-                ref={this.presElRef}
-                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
-                onPointerDown={onItemDown}
-                style={{
-                    outlineColor: "maroon",
-                    outlineStyle: "dashed",
-                    outlineWidth: Doc.IsBrushed(p.document) ? `1px` : "0px",
-                }}
-                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.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="Expand Inline" className={this.expandInlineButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onExpandTabClick}><FontAwesomeIcon icon={"arrow-down"} /></button>
-
-                <br />
-                {this.renderEmbeddedInline()}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
deleted file mode 100644
index 483461e5a..000000000
--- a/src/client/views/presentationview/PresentationList.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { action } from "mobx";
-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>;
-    setChildrenDocs: (docList: Doc[]) => void;
-    presStatus: boolean;
-    removeDocByRef(doc: Doc): boolean;
-}
-
-
-@observer
-/**
- * Component that takes in a document prop and a boolean whether it's collapsed or not.
- */
-export default class PresentationViewList extends React.Component<PresListProps> {
-
-
-    /**
-     * Initially every document starts with a viewScale 1, which means
-     * that they will be displayed in a canvas with scale 1.
-     */
-    @action
-    initializeScaleViews = (docList: Doc[]) => {
-        docList.forEach((doc: Doc) => {
-            let curScale = NumCast(doc.viewScale, null);
-            if (curScale === undefined) {
-                doc.viewScale = 1;
-            }
-        });
-    }
-
-    render() {
-        const children = DocListCast(this.props.mainDocument.data);
-        this.initializeScaleViews(children);
-        this.props.setChildrenDocs(children);
-        return (
-            <div className="presentationView-listCont" >
-                {children.map((doc: Doc, index: number) =>
-                    <PresentationElement
-                        key={doc[Id]}
-                        mainDocument={this.props.mainDocument}
-                        document={doc}
-                        index={index}
-                        deleteDocument={this.props.deleteDocument}
-                        gotoDocument={this.props.gotoDocument}
-                        allListElements={children}
-                        presStatus={this.props.presStatus}
-                        removeDocByRef={this.props.removeDocByRef}
-                    />
-                )}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
deleted file mode 100644
index 5c40a8808..000000000
--- a/src/client/views/presentationview/PresentationView.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-.presentationView-cont {
-    position: absolute;
-    z-index: 2;
-    box-shadow: #AAAAAA .2vw .2vw .4vw;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    letter-spacing: 2px;
-    overflow: hidden;
-    transition: 0.7s opacity ease;
-    pointer-events: all;
-}
-
-.presentationView-item {
-    padding: 10px;
-    display: inline-block;
-    width: 100%;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    transition: all .1s;
-
-    .documentView-node {
-        
-        position: absolute;
-        z-index: 1;
-    }
-}
-
-.presentationView-item-above {
-    border-top: black 2px solid;
-}
-
-.presentationView-item-below {
-    border-bottom: black 2px solid;
-}
-
-.presentationView-listCont {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.presentationView-item:hover {
-    transition: all .1s;
-    background: #AAAAAA;
-    border-radius: 12px;
-}
-
-.presentationView-selected {
-    background: gray;
-    color: black;
-    border-radius: 12px;
-    box-shadow: black 2px 2px 5px;
-}
-
-.presentationView-heading {
-    background: gray;
-    padding: 10px;
-    display: inline-block;
-    width: 100%;
-}
-
-.presentationView-title {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: 25px;
-    display: inline-block;
-    width: calc(100% - 200px);
-    letter-spacing: 2px;
-}
-
-.presentation-icon {
-    float: right;
-}
-
-.presentation-interaction {
-    color: gray;
-    float: left;
-}
-
-.presentation-interaction-selected {
-    color: white;
-    float: left;
-}
-
-.presentationView-name {
-    font-size: 15px;
-    display: inline-block;
-}
-
-.presentation-button {
-    margin-right: 2.5%;
-    margin-left: 2.5%;
-    width: 20%;
-    border-radius: 5px;
-}
-
-.presentation-buttons {
-    padding: 10px;
-}
-
-.presentation-next:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
-
-.presentation-back:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

