1 files changed, 49 insertions, 37 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b78f59681..bc7338578 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -12,6 +12,8 @@ import { Server } from '../Server';
 import { setupDrag } from '../util/DragManager';
 import { Transform } from '../util/Transform';
 import { UndoManager } from '../util/UndoManager';
+import { PresentationView } from './PresentationView';
+import { Field } from '../../fields/Field';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { ContextMenu } from './ContextMenu';
 import { DocumentDecorations } from './DocumentDecorations';
@@ -41,6 +43,9 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     else {
         mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId);
 
+        //save a document for the presentation view in Key Store - this is where title is set
+        mainContainer.Set(KeyStore.PresentationView, Documents.FreeformDocument([], { title: "Presentation Mode" }));
+
         // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
         setTimeout(() => {
             mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
@@ -78,40 +83,47 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let audioRef = React.createRef<HTMLDivElement>();
     let colRef = React.createRef<HTMLDivElement>();
 
-    ReactDOM.render((
-        <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-            <DocumentView Document={mainContainer}
-                AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
-                ContentScaling={() => 1}
-                PanelWidth={() => 0}
-                PanelHeight={() => 0}
-                isTopMost={true}
-                SelectOnLoad={false}
-                focus={() => { }}
-                ContainingCollectionView={undefined} />
-            <DocumentDecorations />
-            <ContextMenu />
-            <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
-                <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '25px' }} ref={webRef} >
-                <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '50px' }} ref={textRef}>
-                <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '75px' }} ref={colRef}>
-                <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '100px' }} ref={schemaRef}>
-                <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '125px' }} >
-                <button onClick={clearDatabase}>Clear Database</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '175px' }} ref={videoRef}>
-                <button onPointerDown={setupDrag(videoRef, addVideoNode)} onClick={addClick(addVideoNode)}>Add Video</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '200px' }} ref={audioRef}>
-                <button onPointerDown={setupDrag(audioRef, addAudioNode)} onClick={addClick(addAudioNode)}>Add Audio</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '150px' }} ref={pdfRef}>
-                <button onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>Add PDF</button></div>
-            <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
-            <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
-            <InkingControl />
-        </div>),
-        document.getElementById('root'));
-})
+    let render = function (field: Field | undefined) {
+        ReactDOM.render((
+            <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+                <DocumentView Document={mainContainer}
+                    AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
+                    ContentScaling={() => 1}
+                    PanelWidth={() => 0}
+                    PanelHeight={() => 0}
+                    isTopMost={true}
+                    SelectOnLoad={false}
+                    focus={() => { }}
+                    ContainingCollectionView={undefined} />
+                <DocumentDecorations />
+                <ContextMenu />
+                <PresentationView Document={field as Document} />
+                <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
+                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '25px' }} ref={webRef} >
+                    <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '50px' }} ref={textRef}>
+                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '75px' }} ref={colRef}>
+                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '100px' }} ref={schemaRef}>
+                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '125px' }} >
+                    <button onClick={clearDatabase}>Clear Database</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '175px' }} ref={videoRef}>
+                    <button onPointerDown={setupDrag(videoRef, addVideoNode)} onClick={addClick(addVideoNode)}>Add Video</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '200px' }} ref={audioRef}>
+                    <button onPointerDown={setupDrag(audioRef, addAudioNode)} onClick={addClick(addAudioNode)}>Add Audio</button></div>
+                <div className="main-buttonDiv" style={{ bottom: '150px' }} ref={pdfRef}>
+                    <button onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>Add PDF</button></div>
+                <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+                <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+                <InkingControl />
+            </div>),
+            document.getElementById('root'));
+    }
+    //call render async passing in the doc saved in PresentationView key
+    mainContainer.GetAsync(KeyStore.PresentationView, render);
+});
+
+