turned off selection highlighting in TreeView because it is way too inefficient. more fixes to laying out fitWidth and other documents in ContentFittingDocViews. testing against GridViews and TreeViews things seem to work.

1 files changed, 24 insertions, 34 deletions

diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 70a40f39e..7b698c8bd 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -2,13 +2,11 @@ import React = require("react");
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, HeightSym, WidthSym } from "../../../fields/Doc";
-import { Cast, NumCast, StrCast } from "../../../fields/Types";
+import { Cast, StrCast } from "../../../fields/Types";
 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";
-import { DocumentType } from "../../documents/DocumentTypes";
 
 interface ContentFittingDocumentViewProps {
     dontCenter?: boolean;
@@ -17,32 +15,30 @@ interface ContentFittingDocumentViewProps {
 @observer
 export class ContentFittingDocumentView extends React.Component<DocumentViewProps & ContentFittingDocumentViewProps> {
     public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
-    private get layoutDoc() {
+    @computed get layoutDoc() {
         return this.props.LayoutTemplate?.() ||
             (this.props.layoutKey && Doc.Layout(this.props.Document, Cast(this.props.Document[this.props.layoutKey], Doc, null))) ||
             Doc.Layout(this.props.Document);
     }
     @computed get freezeDimensions() { return this.props.FreezeDimensions; }
-
-    trueNativeWidth = () => 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 trueNativeWidth() { return !this.layoutDoc._fitWidth && returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, false)); }
+    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 0); }
+    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 0); }
     @computed get nativeScaling() {
-        const wscale = this.props.PanelWidth() / this.nativeWidth();
-        const hscale = this.props.PanelHeight() / this.nativeHeight();
-        if (wscale * this.nativeHeight() > this.props.PanelHeight()) {
+        if (!this.nativeWidth || !this.nativeHeight) return 1;
+        const wscale = this.props.PanelWidth() / this.nativeWidth;
+        const hscale = this.props.PanelHeight() / this.nativeHeight;
+        if (wscale * this.nativeHeight > this.props.PanelHeight()) {
             return hscale || 1;
         }
         return wscale || 1;
     }
-    private PanelWidth = () => this.panelWidth;
-    private PanelHeight = () => this.panelHeight;
 
-    @computed get panelWidth() { return this.nativeWidth() && !this.props.Document._fitWidth ? this.nativeWidth() * this.nativeScaling : this.props.PanelWidth(); }
+    @computed get panelWidth() { return this.trueNativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); }
     @computed get panelHeight() {
-        if (this.nativeHeight()) {
-            if (!this.props.Document._fitWidth) return this.nativeHeight() * this.nativeScaling;
-            else return this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1;
+        if (this.nativeHeight) {
+            if (this.props.Document._fitWidth) return Math.min(this.props.PanelHeight(), this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1);
+            return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling);
         }
         return this.props.PanelHeight();
     }
@@ -51,25 +47,19 @@ 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.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; }
+    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.nativeHeight ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; }
 
     @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); }
 
+    PanelWidth = () => this.panelWidth;
+    PanelHeight = () => this.panelHeight;
     contentScaling = () => {
-        if ((this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout)).includes("FormattedTextBox")) return this.nativeScaling;
-        return this.nativeScaling * 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);
+        const layoutStr = (this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout));
+        if (layoutStr.includes("FormattedTextBox")) return this.nativeScaling;
+        const wscale = this.trueNativeWidth ? 1 : this.layoutDoc[WidthSym]() / this.props.PanelWidth();
+        const hscale = this.trueNativeWidth ? 1 : this.layoutDoc[HeightSym]() / this.props.PanelHeight();
+        return this.nativeScaling * Math.max(wscale, hscale);
     }
 
     render() {
@@ -80,8 +70,8 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
                     style={{
                         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.nativeWidth() ? this.layoutWidth() : this.props.PanelWidth(),
+                        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(),
                     }}>
                     <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                         Document={this.props.Document}