diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index f5ad4ee95..f80ba0a4b 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -96,8 +96,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { get children() { return this.childDocs.filter(d => !d.isMinimized).map((d, i) => { let dref = React.createRef<HTMLDivElement>(); - let dxf = () => this.getDocTransform(d, dref.current!); - let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this._gridSize + this.gridGap)); + let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]()); + let renderScale = this.columnWidth / NumCast(d.nativeWidth, this.columnWidth); + let aspect = NumCast(d.nativeWidth) / NumCast(d.nativeHeight); + let width = () => this.columnWidth; + let height = () => aspect ? width() / aspect : d[HeightSym]() + let rowSpan = Math.ceil((height() + this.gridGap) / (this._gridSize + this.gridGap)); let childFocus = (doc: Doc) => { doc.libraryBrush = true; this.props.focus(this.props.Document); // just focus on this collection, not the underlying document because the API doesn't support adding an offset to focus on and we can't pan zoom our contents to be centered. @@ -106,12 +110,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { key={d[Id]} ref={dref} style={{ - width: NumCast(d.nativeWidth, d[WidthSym]()), - height: NumCast(d.nativeHeight, d[HeightSym]()), + width: width(), + height: height(), transformOrigin: "top left", gridRowEnd: `span ${rowSpan}`, gridColumnEnd: `span 1`, - transform: `scale(${this.columnWidth / NumCast(d.nativeWidth, d[WidthSym]())}, ${this.columnWidth / NumCast(d.nativeWidth, d[WidthSym]())})` + transform: `scale(${renderScale})` }} > <DocumentView key={d[Id]} Document={d} addDocument={this.props.addDocument} @@ -122,8 +126,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { ScreenToLocalTransform={dxf} focus={childFocus} ContentScaling={returnOne} - PanelWidth={d[WidthSym]} - PanelHeight={d[HeightSym]} + PanelWidth={width} + PanelHeight={height} selectOnLoad={false} parentActive={this.props.active} addDocTab={this.props.addDocTab} |