better stacking view for single column

1 files changed, 50 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 62af92633..25cc55be9 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -10,6 +10,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
+import { CollectionSchemaPreview } from "./CollectionSchemaView";
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
@@ -21,17 +22,15 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
 
     componentDidMount() {
-        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelWidth()],
+        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelHeight(), this.props.PanelWidth()],
             () => {
                 if (this.singleColumn) {
-                    this.childDocs.filter(d => !d.isMinimized).map(d => {
-                        d.width = this.props.PanelWidth();
+                    this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
+                        let hgt = d[HeightSym]();
                         let nw = NumCast(d.nativeWidth);
                         let nh = NumCast(d.nativeHeight);
-                        if (nw && nh) d.height = nh / nw * d.width;
-                    });
-                    this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
-                        let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
+                        if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]());
+                        let rowSpan = Math.ceil((hgt + this.gridGap) / (this.gridSize + this.gridGap));
                         return height + rowSpan * (this.gridSize + this.gridGap);
                     }, 10);
                 }
@@ -71,13 +70,49 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             });
         }
     }
+
+    @computed
+    get singleColumnChildren() {
+        return this.childDocs.filter(d => !d.isMinimized).map(d => {
+            let dref = React.createRef<HTMLDivElement>();
+            let script = undefined;
+            let colWidth = () => this.columnWidth;
+            let rowHeight = () => {
+                let hgt = d[HeightSym]();
+                let nw = NumCast(d.nativeWidth);
+                let nh = NumCast(d.nativeHeight);
+                if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]());
+                return hgt;
+            }
+            let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]());
+            return <div className="colletionStackingView-masonryDoc"
+                key={d[Id]}
+                ref={dref}
+                style={{ width: colWidth(), height: rowHeight() }} >
+                <CollectionSchemaPreview
+                    Document={d}
+                    width={colWidth}
+                    height={rowHeight}
+                    getTransform={dxf}
+                    CollectionView={this.props.CollectionView}
+                    addDocument={this.props.addDocument}
+                    removeDocument={this.props.removeDocument}
+                    active={this.props.active}
+                    whenActiveChanged={this.props.whenActiveChanged}
+                    addDocTab={this.props.addDocTab}
+                    setPreviewScript={emptyFunction}
+                    previewScript={script}>
+                </CollectionSchemaPreview>
+            </div>;
+        });
+    }
     @computed
     get children() {
         return this.childDocs.filter(d => !d.isMinimized).map(d => {
-            let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
-            let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let dref = React.createRef<HTMLDivElement>();
             let dxf = () => this.getDocTransform(d, dref.current!);
+            let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
+            let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + 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.
@@ -120,20 +155,21 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let itemCols = Math.ceil(this.columnWidth / (this.gridSize + this.gridGap));
         let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
-            <div className="collectionStackingView" style={{ height: this.singleColumn ? "auto" : "100%" }}
+            <div className="collectionStackingView" style={{ height: "100%" }}
                 ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
                 <div className="collectionStackingView-masonryGrid"
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
                         width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
-                        height: this.singleColumn ? "auto" : "100%",
+                        height: "100%",
+                        overflow: "hidden",
                         marginLeft: "auto", marginRight: "auto", position: "relative",
                         gridGap: this.gridGap,
-                        gridTemplateColumns: `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
-                        gridAutoRows: `${this.gridSize}px`
+                        gridTemplateColumns: this.singleColumn ? undefined : `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
+                        gridAutoRows: this.singleColumn ? undefined : `${this.gridSize}px`
                     }}
                 >
-                    {this.children}
+                    {this.singleColumn ? this.singleColumnChildren : this.children}
                 </div>
             </div>
         );