fixes for tree view to display embedded documents correclty -- nested collections didn't have a width before and vertical sizing was off.

2 files changed, 24 insertions, 9 deletions

diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 925eb4be6..2c504a020 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -281,7 +281,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         const layoutDoc = this.layoutDoc;
         const aspect = Doc.NativeAspect(layoutDoc);
         if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.panelWidth() - 20));
-        return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[WidthSym](), this.props.panelWidth() - 20) : this.props.panelWidth() - 20;
+        return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[WidthSym](), this.props.panelWidth() - 20) : Math.min(this.layoutDoc[WidthSym](), this.props.panelWidth() - 20);
     }
     docHeight = () => {
         const layoutDoc = this.layoutDoc;
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 0c52b9044..082f9a9e8 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -7,6 +7,7 @@ import { TraceMobx } from "../../../fields/util";
 import { emptyFunction, OmitKeys, returnVal } from "../../../Utils";
 import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
 import "./ContentFittingDocumentView.scss";
+import { CollectionViewType } from "../collections/CollectionView";
 
 interface ContentFittingDocumentViewProps {
     dontCenter?: boolean;
@@ -22,9 +23,10 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
     }
     @computed get freezeDimensions() { return this.props.FreezeDimensions; }
 
+    trueNativeWidth = () => this.nativeWidth(); // returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, false));
     nativeWidth = () => returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || this.props.PanelWidth());
     nativeHeight = () => returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || this.props.PanelHeight());
-    @computed get scaling() {
+    @computed get nativeScaling() {
         const wscale = this.props.PanelWidth() / this.nativeWidth();
         const hscale = this.props.PanelHeight() / this.nativeHeight();
         if (wscale * this.nativeHeight() > this.props.PanelHeight()) {
@@ -32,15 +34,13 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
         }
         return wscale || 1;
     }
-    private contentScaling = () => this.scaling;
-
     private PanelWidth = () => this.panelWidth;
     private PanelHeight = () => this.panelHeight;
 
-    @computed get panelWidth() { return this.nativeWidth() && !this.props.Document._fitWidth ? this.nativeWidth() * this.contentScaling() : this.props.PanelWidth(); }
+    @computed get panelWidth() { return this.nativeWidth() && !this.props.Document._fitWidth ? this.nativeWidth() * this.nativeScaling : this.props.PanelWidth(); }
     @computed get panelHeight() {
         if (this.nativeHeight()) {
-            if (!this.props.Document._fitWidth) return this.nativeHeight() * this.contentScaling();
+            if (!this.props.Document._fitWidth) return this.nativeHeight() * this.nativeScaling;
             else return this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1;
         }
         return this.props.PanelHeight();
@@ -50,11 +50,26 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
     private getTransform = () => this.props.dontCenter ?
         this.props.ScreenToLocalTransform().scale(this.childXf) :
         this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(this.childXf)
-    private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; }
-    private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.contentScaling()) / 2 : 0; }
+    private get centeringOffset() { return this.trueNativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.nativeScaling) / 2 : 0; }
+    private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.nativeScaling) / 2 : 0; }
 
     @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); }
 
+    contentScaling = () => {
+        return this.nativeScaling * Math.min(this.props.PanelWidth(), this.layoutDoc[WidthSym]()) / this.layoutWidth();
+    }
+
+    layoutWidth = () => {
+        let layoutWidth = this.layoutDoc[WidthSym]();
+        if ((this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout)).includes("CollectionView")) {//} && this.layoutDoc._viewType === CollectionViewType.Freeform) {
+            const layoutAspect = layoutWidth / this.layoutDoc[HeightSym]();
+            if (this.props.PanelWidth() / this.props.PanelHeight() > layoutAspect) {
+                layoutWidth = this.props.PanelHeight() * layoutAspect;
+            }
+        }
+        return Math.min(this.props.PanelWidth(), layoutWidth);
+    }
+
     render() {
         TraceMobx();
         return (<div className="contentFittingDocumentView">
@@ -64,7 +79,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
                         transform: !this.props.dontCenter ? `translate(${this.centeringOffset}px, ${this.centeringYOffset}px)` : undefined,
                         borderRadius: this.borderRounding,
                         height: Math.abs(this.centeringYOffset) > 0.001 ? `${100 * this.nativeHeight() / this.nativeWidth() * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(),
-                        width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth()
+                        width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.nativeWidth() ? this.layoutWidth() : this.props.PanelWidth(),
                     }}>
                     <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                         Document={this.props.Document}