From 70e79356ce89f4afb47220393c541f74eada62fc Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 11 Nov 2020 02:09:18 -0500
Subject: 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.

---
 .../views/nodes/ContentFittingDocumentView.tsx     | 58 +++++++++-------------
 1 file changed, 24 insertions(+), 34 deletions(-)

(limited to 'src/client/views/nodes/ContentFittingDocumentView.tsx')

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}
-- 
cgit v1.2.3-70-g09d2

