diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/ContentFittingDocumentView.tsx | 31 |
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} |