cool, something worked. panes resize properly now.

4 files changed, 44 insertions, 24 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 725b68a54..1653994cf 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -7,7 +7,6 @@ import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/Key";
 import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
 import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { DocumentView } from "../nodes/DocumentView";
@@ -15,6 +14,7 @@ import "./CollectionDockingView.scss";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import React = require("react");
 import * as ReactDOM from 'react-dom';
+import Measure from "react-measure";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -66,7 +66,6 @@ export class CollectionDockingView extends CollectionViewBase {
     }
     private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
 
-
     @action
     onResize = (event: any) => {
         var cur = this.props.ContainingDocumentView!.MainContent.current;
@@ -297,22 +296,27 @@ interface DockingProps {
 }
 @observer
 export class RenderClass extends React.Component<DockingProps> {
-    @observable _forceRerender = 0;
-    constructor(props: DockingProps) {
-        super(props);
-        this.props.Container.on('resize', action((e: any) => this._forceRerender++));
-    }
+    @observable
+    private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+
     render() {
-        let x = this._forceRerender;
         let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-        let parentScaling = nativeWidth > 0 ? this.props.HtmlElement!.clientWidth / nativeWidth : 1;
-        return <div>
+        var layout = this.props.Document.GetText(KeyStore.Layout, "");
+        var content =
             <DocumentView key={this.props.Document.Id} Document={this.props.Document}
                 AddDocument={this.props.CollectionDockingView.addDocument}
                 RemoveDocument={this.props.CollectionDockingView.removeDocument}
                 GetTransform={() => Transform.Identity}
-                ParentScaling={parentScaling}
+                ParentScaling={this._parentScaling}
                 ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} />
-        </div>
+
+        if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) {
+            return <Measure onResize={
+                action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}
+            >
+                {({ measureRef }) => <div ref={measureRef}> {content} </div>}
+            </Measure>
+        }
+        return <div> {content} </div>
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 37efc6b6c..633e3ca1b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -6,7 +6,10 @@
     width: 100%;
     height: 100%;
     .collectionfreeformview-container {
-        border-width: 0px !important
+        border-width: 0px;
+        .collectionfreeformview > .jsx-parser{
+            position:absolute
+        }
     }
     .imageBox-cont {
         position:relative;
@@ -44,9 +47,7 @@
         object-fit: contain;
         height: 100%
     }
-    .documentView-node {
-        width:100% !important;
-        height:100% !important;
+    .documentView-node:first-child {
         background: grey;
         .imageBox-cont img {
             object-fit: contain;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index a2d6444b6..76706f520 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -11,10 +11,11 @@ import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBas
 import { DocumentView } from "../nodes/DocumentView";
 import { EditableView } from "../EditableView";
 import { CompileScript, ToField } from "../../util/Scripting";
-import { KeyStore as KS, Key } from "../../../fields/Key";
+import { KeyStore as KS, Key, KeyStore } from "../../../fields/Key";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
 import { Transform } from "../../util/Transform";
+import Measure from "react-measure";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -98,19 +99,35 @@ export class CollectionSchemaView extends CollectionViewBase {
         }
     }
 
+
+    @observable
+    private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
     render() {
         const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
         const children = Document.GetList<Document>(fieldKey, []);
         const columns = Document.GetList(KS.ColumnsKey,
             [KS.Title, KS.Data, KS.Author])
         let content;
+        var me = this;
         if (this.selectedIndex != -1) {
             content = (
-                <DocumentView Document={children[this.selectedIndex]}
-                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                    GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
-                    ParentScaling={1}
-                    DocumentView={undefined} ContainingCollectionView={this} />
+                <Measure onResize={action((r: any) => {
+                    var doc = children[this.selectedIndex];
+                    var n = doc.GetNumber(KeyStore.NativeWidth, 0);
+                    if (n > 0 && r.entry.width > 0) {
+                        this._parentScaling = r.entry.width / n;
+                    }
+                })}>
+                    {({ measureRef }) =>
+                        <div ref={measureRef}>
+                            <DocumentView Document={children[this.selectedIndex]}
+                                AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                                GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
+                                ParentScaling={this._parentScaling}
+                                DocumentView={undefined} ContainingCollectionView={me} />
+                        </div>
+                    }
+                </Measure>
             )
         } else {
             content = <div />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 55c8121d3..c5270e0cd 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -15,7 +15,6 @@ import "./DocumentView.scss";
 import React = require("react");
 import { Transform } from "../../util/Transform";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
-import { CollectionFreeFormDocumentView } from '../../views/nodes/CollectionFreeFormDocumentView';
 
 export interface DocumentViewProps {
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
@@ -147,7 +146,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return { ScreenX: parentX, ScreenY: parentY };
     }
 
-
     render() {
         let bindings = { ...this.props } as any;
         for (const key of this.layoutKeys) {