1 files changed, 37 insertions, 22 deletions

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 687c765ec..a128a0e73 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -1,4 +1,4 @@
-import { action, configure } from 'mobx';
+import { action, configure, observable } from 'mobx';
 import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -31,6 +31,9 @@ import { faRedoAlt } from '@fortawesome/free-solid-svg-icons';
 import { faPenNib } from '@fortawesome/free-solid-svg-icons';
 import { faFilm } from '@fortawesome/free-solid-svg-icons';
 import { faMusic } from '@fortawesome/free-solid-svg-icons';
+import Measure from 'react-measure';
+import { withContentRect } from 'react-measure'
+
 
 
 configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
@@ -41,11 +44,16 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
         ContextMenu.Instance.clearItems()
     }
 }), true)
-
-const mainDocId = "mainDoc";
+const pathname = window.location.pathname.split("/");
+const mainDocId = pathname[pathname.length - 1];
 let mainContainer: Document;
 let mainfreeform: Document;
 
+class mainDocFrame {
+    @observable public static pwidth: number = 0;
+    @observable public static pheight: number = 0;
+}
+
 library.add(faFont);
 library.add(faImage);
 library.add(faFilePdf);
@@ -82,15 +90,14 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let audiourl = "http://techslides.com/demos/samples/sample.mp3";
     let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
     let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
-    let addTextNode = action(() => Documents.TextDocument({ width: 230, height: 130, title: "a text note" }))
-    let addColNode = action(() => Documents.FreeformDocument([], { width: 300, height: 300, title: "a freeform collection" }));
-    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 450, height: 200, title: "a schema collection" }));
-    let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 300, height: 400, title: "a pdf" }));
-    let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
-    let addWebNode = action(() => Documents.WebDocument(weburl, { width: 300, height: 400, title: "a sample web page" }));
-    let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 300, height: 250, title: "video node" }));
-    let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 250, height: 100, title: "audio node" }));
-
+    let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+    let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+    let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, title: "video node" }));
+    let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, title: "a schema collection" }));
+    let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, title: "an image of a cat" }));
+    let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
+    let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }))
     let addClick = (creator: () => Document) => action(() =>
         mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
     );
@@ -107,16 +114,24 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     ReactDOM.render((
         <div style={{ position: "absolute", width: "100%", height: "100%" }}>
             {/* <div id="dash-title">— DASH —</div> */}
-
-            <DocumentView Document={mainContainer}
-                AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
-                ContentScaling={() => 1}
-                PanelWidth={() => 0}
-                PanelHeight={() => 0}
-                isTopMost={true}
-                SelectOnLoad={false}
-                focus={() => { }}
-                ContainingCollectionView={undefined} />
+            <Measure onResize={(r: any) => {
+                mainDocFrame.pwidth = r.entry.width;
+                mainDocFrame.pheight = r.entry.height;
+            }}>
+                {({ measureRef }) =>
+                    <div ref={measureRef} style={{ position: "absolute", width: "100%", height: "100%" }}>
+                        <DocumentView Document={mainContainer}
+                            AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
+                            ContentScaling={() => 1}
+                            PanelWidth={() => mainDocFrame.pwidth}
+                            PanelHeight={() => mainDocFrame.pheight}
+                            isTopMost={true}
+                            SelectOnLoad={false}
+                            focus={() => { }}
+                            ContainingCollectionView={undefined} />
+                    </div>
+                }
+            </Measure>
             <DocumentDecorations />
             <ContextMenu />
             <button className="clear-db-button" onClick={clearDatabase}>Clear Database</button>