autoheight works for masonry

3 files changed, 74 insertions, 101 deletions

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 65e05ff28..b1afd09c2 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -20,6 +20,7 @@ import { anchorPoints, Flyout } from "../DocumentDecorations";
 import { EditableView } from "../EditableView";
 import { CollectionStackingView } from "./CollectionStackingView";
 import "./CollectionStackingView.scss";
+import Measure from "react-measure";
 
 library.add(faPalette);
 
@@ -33,7 +34,7 @@ interface CMVFieldRowProps {
     type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined;
     createDropTarget: (ele: HTMLDivElement) => void;
     screenToLocalTransform: () => Transform;
-    addToDocHeight: (thisHeight: number) => void;
+    setDocHeight: (key: string, thisHeight: number) => void;
 }
 
 @observer
@@ -51,38 +52,22 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
 
     createRowDropRef = (ele: HTMLDivElement | null) => {
-        console.log("createRowDropRef ran");
         this._dropRef = ele;
         this.dropDisposer && this.dropDisposer();
         if (ele) {
             this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.rowDrop.bind(this) } });
         }
-        // this.getTrueHeight();
     }
 
-    getTrueHeight = () => { //handle collapse in here (if collapsed, return #)
-        //also, don't need to return anything
-        //call this in component did mount or something...
+    getTrueHeight = () => {
         if (this.collapsed) {
-            this.props.addToDocHeight(20);
-            console.log("collapsed");
-        } else { //this is calculating the heights correctlty
-            let rawHeight = this._contRef.current!.getBoundingClientRect().height + 20;
+            this.props.setDocHeight(this._heading, 20);
+        } else {
+            let rawHeight = this._contRef.current!.getBoundingClientRect().height + 15; //+ 15 accounts for the group header
             let transformScale = this.props.screenToLocalTransform().Scale;
             let trueHeight = rawHeight * transformScale;
-            this.props.addToDocHeight(trueHeight);
-            console.log("trueHeight: " + trueHeight);
+            this.props.setDocHeight(this._heading, trueHeight);
         }
-        this.props.addToDocHeight(20);
-    }
-
-    // componentDidMount = () => {
-    //     this.getTrueHeight();
-    // }
-
-    componentDidUpdate = () => {
-        console.log("componentDidUpdate");
-        this.getTrueHeight(); //why does this
     }
 
     @undoBatch
@@ -284,6 +269,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @observable _headingsHack: number = 1;
 
+    handleResize = (size: any) => {
+        this.counter += 1;
+        if (this.counter !== 1) {
+            this.getTrueHeight();
+        }
+    }
+
+    private counter: number = 0;
+
     render() {
         let cols = this.props.rows();
         let rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap))));
@@ -340,38 +334,46 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                         </button>}
                 </div>
             </div > : (null);
+        const background = this._background; //to account for observables in Measure
+        const collapsed = this.collapsed;
         return (
-            <div className="collectionStackingView-masonrySection"
-                key={heading = "empty"}
-                style={{ width: this.props.parent.NodeWidth, background: this._background }}
-                ref={this.createRowDropRef}
-                onPointerEnter={this.pointerEnteredRow}
-                onPointerLeave={this.pointerLeaveRow}
-            >
-                {headingView}
-                {this.collapsed ? (null) :
-                    < div >
-                        <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
-                            // ref={this.getTrueHeight}
-                            ref={this._contRef}
-                            style={{
-                                padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
-                                width: this.props.parent.NodeWidth,
-                                gridGap: this.props.parent.gridGap,
-                                gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
-                            }}>
-                            {this.masonryChildren(this.props.docList)}
-                            {this.props.parent.columnDragger}
-                        </div>
-                        {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
-                            <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
-                                style={{ width: style.columnWidth / style.numGroupColumns }}>
-                                <EditableView {...newEditableViewProps} />
-                            </div> : null
-                        }
-                    </div>
-                }
-            </div >
+            <Measure offset onResize={this.handleResize}>
+                {({ measureRef }) => {
+                    return <div ref={measureRef}>
+                        <div className="collectionStackingView-masonrySection"
+                            key={heading = "empty"}
+                            style={{ width: this.props.parent.NodeWidth, background }}
+                            ref={this.createRowDropRef}
+                            onPointerEnter={this.pointerEnteredRow}
+                            onPointerLeave={this.pointerLeaveRow}
+                        >
+                            {headingView}
+                            {collapsed ? (null) :
+                                < div >
+                                    <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
+                                        // ref={this.getTrueHeight}
+                                        ref={this._contRef}
+                                        style={{
+                                            padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
+                                            width: this.props.parent.NodeWidth,
+                                            gridGap: this.props.parent.gridGap,
+                                            gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
+                                        }}>
+                                        {this.masonryChildren(this.props.docList)}
+                                        {this.props.parent.columnDragger}
+                                    </div>
+                                    {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
+                                        <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
+                                            style={{ width: style.columnWidth / style.numGroupColumns }}>
+                                            <EditableView {...newEditableViewProps} />
+                                        </div> : null
+                                    }
+                                </div>
+                            }
+                        </div >
+                    </div>;
+                }}
+            </Measure>
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 43a7333d0..3cf4f98b7 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -25,20 +25,19 @@ import { ContextMenuProps } from "../ContextMenuItem";
 import { ScriptBox } from "../ScriptBox";
 import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
 
-let _height: number = 0;
+// let _height: number = 0;
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _masonryGridRef: HTMLDivElement | null = null;
     _draggerRef = React.createRef<HTMLDivElement>();
+    @observable _heightMap = new Map<string, number>();
     _heightDisposer?: IReactionDisposer;
     _childLayoutDisposer?: IReactionDisposer;
     _sectionFilterDisposer?: IReactionDisposer;
     _docXfs: any[] = [];
     _columnStart: number = 0;
-    // _height: number = 0;
     @observable private cursor: CursorProperty = "grab";
-    // @computed private _height: number = 0;
     @computed get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); }
     @computed get sectionFilter() { return StrCast(this.props.Document.sectionFilter); }
     @computed get filteredChildren() { return this.childDocs.filter(d => !d.isMinimized); }
@@ -58,12 +57,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
 
     childDocHeight(child: Doc) { return this.getDocHeight(Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, child).layout); }
 
-    addToDocHeight(sectionHeight: number) {
-        // if (_height !== undefined) {
-        console.log("indiv height: " + _height);
-        _height += sectionHeight;
-        // }
-        // return _height;
+    @action
+    setDocHeight = (key: string, sectionHeight: number) => {
+        this._heightMap.set(key, sectionHeight);
     }
 
     get layoutDoc() {
@@ -103,10 +99,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
 
     componentDidMount() {
         this._childLayoutDisposer = reaction(() => [this.childDocs, Cast(this.props.Document.childLayout, Doc)],
-            async (args) => args[1] instanceof Doc &&
-                this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined)));
+            async (args) => {
+                args[1] instanceof Doc &&
+                    this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined));
+            })
+
 
-        // is there any reason this needs to exist? -syip.  yes, it handles autoHeight for stacking and masonry views -eeng.
+        // is there any reason this needs to exist? -syip.  yes, it handles autoHeight for stacking and masonry views -eeng
         this._heightDisposer = reaction(() => {
             if (BoolCast(this.props.Document.autoHeight)) {
                 let sectionsList = Array.from(this.Sections.size ? this.Sections.values() : [this.filteredChildren]);
@@ -114,40 +113,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     return this.props.ContentScaling() * sectionsList.reduce((maxHght, s) => Math.max(maxHght,
                         (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin)), 0);
                 } else {
-                    // let rowArray: CollectionMasonryViewFieldRow[] = [];
-                    for (let i = 0; i < this.Sections.size; i++) {
-                        // rowArray.push(this._masonryGridRef);
-                    }
-                    let sum: number = 0;
-                    // let counter: number = 0;
-                    sum += _height; //calculated height of the node from the masonry prop
-                    // console.log("height: " + _height);
-                    if (this.sectionHeaders !== undefined) {
-                        // this.sectionHeaders.forEach(sec => {
-                        //     if (sec.collapsed) {
-                        //         sum += 20;
-                        //         console.log("sec collapsed");
-                        //     } else {
-                        //         // sum += sectionsList[counter].reduce((height, d, i) => height + this.childDocHeight(d) + (i === sectionsList[counter].length - 1 ? this.yMargin : this.gridGap), this.yMargin);
-                        //         // sum += NumCast(document.getElementsByClassName("collectionStackingView-sectionHeader-subCont").offsetHeight);
-                        //         // sum += this.addToDocHeight(this.Sections[counter]);
-                        //         // console.log("section is not collapsed");
-                        //         sum += _height;
-                        //         // this.addToDocHeight(40);
-                        //         // console.log("this._height in componentDidMount: " + _height);
-                        //     }
-                        //     // console.log("IN IF STATEMENT, sum is: " + sum);
-                        //     counter += 1;
-                        // });
-                    }
-                    // return this.props.ContentScaling() * sectionsList.reduce((totalHeight, s) => totalHeight +
-                    //     (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin) + 47, 0);
-                    sum += 20; //allow space for the "add group" button
-                    console.log("sum: " + sum);
-                    _height = 0; //without this the height get HUGE (just keeps adding i think...)
-                    return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0)); //+47
-                    // return this.props.ContentScaling() * sectionsList.reduce((totalHeight, s) => totalHeight +
-                    //     (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin) + 47, 0);
+                    let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0);
+                    // let transformScale = this.props.ScreenToLocalTransform().Scale;
+                    // let trueHeight = 30 * transformScale;
+                    // sum += trueHeight;
+                    sum += 30;
+                    return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0));
                 }
             }
             return -1;
@@ -357,7 +328,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             type={type}
             createDropTarget={this.createDropTarget}
             screenToLocalTransform={this.props.ScreenToLocalTransform}
-            addToDocHeight={this.addToDocHeight}
+            setDocHeight={this.setDocHeight}
         />;
     }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6c944c6b2..7cbd96354 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -601,7 +601,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 this.makeBtnClicked();
             }, icon: "window-restore"
         });
-        makes.push({ description: this.props.Document.ignoreClick ? "Selectable" : "Unselectable", event: () => this.props.Document.ignoreClick = !this.props.Document.ignoreClick, icon: this.props.Document.ignoreClick ? "unlock" : "lock" })
+        makes.push({ description: this.props.Document.ignoreClick ? "Selectable" : "Unselectable", event: () => this.props.Document.ignoreClick = !this.props.Document.ignoreClick, icon: this.props.Document.ignoreClick ? "unlock" : "lock" });
         !existingMake && cm.addItem({ description: "Make...", subitems: makes, icon: "hand-point-right" });
         let existing = ContextMenu.Instance.findByDescription("Layout...");
         let layoutItems: ContextMenuProps[] = existing && "subitems" in existing ? existing.subitems : [];