better stacking view for single column

2 files changed, 74 insertions, 20 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 10db6e0bb..11d71d023 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -20,7 +20,7 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { Opt, Field, Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
-import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
+import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
 import { Id } from "../../../new_fields/FieldSymbols";
@@ -30,6 +30,8 @@ import { ContextMenu } from "../ContextMenu";
 import { CollectionView } from "./CollectionView";
 import { CollectionPDFView } from "./CollectionPDFView";
 import { CollectionVideoView } from "./CollectionVideoView";
+import { SelectionManager } from "../../util/SelectionManager";
+import { undoBatch } from "../../util/UndoManager";
 
 
 library.add(faCog);
@@ -392,11 +394,11 @@ interface CollectionSchemaPreviewProps {
     whenActiveChanged: (isActive: boolean) => void;
     addDocTab: (document: Doc, where: string) => void;
     setPreviewScript: (script: string) => void;
-    previewScript: string;
+    previewScript?: string;
 }
 
 @observer
-class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
+export class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
     private get nativeWidth() { return NumCast(this.props.Document!.nativeWidth, this.props.width()); }
     private get nativeHeight() { return NumCast(this.props.Document!.nativeHeight, this.props.height()); }
     private contentScaling = () => {
@@ -414,9 +416,26 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
     onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.props.setPreviewScript(e.currentTarget.value);
     }
+    @undoBatch
+    @action
+    public collapseToPoint = (scrpt: number[], expandedDocs: Doc[] | undefined): void => {
+        SelectionManager.DeselectAll();
+        if (expandedDocs) {
+            let isMinimized: boolean | undefined;
+            expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
+                if (isMinimized === undefined) {
+                    isMinimized = BoolCast(maximizedDoc.isMinimized, false);
+                }
+                maximizedDoc.isMinimized = !isMinimized;
+            });
+        }
+    }
     render() {
         trace();
         console.log(this.props.Document);
+        let input = this.props.previewScript === undefined ? (null) :
+            <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
+                style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />;
         return (<div className="collectionSchemaView-previewRegion" style={{ width: this.props.width() }}>
             {!this.props.Document || !this.props.width ? (null) : (
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.centeringOffset}px, 0px)` }}>
@@ -431,11 +450,10 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
                         whenActiveChanged={this.props.whenActiveChanged}
                         bringToFront={emptyFunction}
                         addDocTab={this.props.addDocTab}
-                        toggleMinimized={emptyFunction}
+                        collapseToPoint={this.collapseToPoint}
                     />
                 </div>)}
-            <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
-                style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />
+            {input}
         </div>);
     }
 }
\ No newline at end of file
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>
         );