From 0ac0fd9cf2d93bf328b167710631cc46b1c27187 Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Fri, 23 Aug 2019 16:27:25 -0400
Subject: autoheight works for masonry

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 56 +++++++++++-----------
 .../views/collections/CollectionStackingView.tsx   | 12 +++--
 src/client/views/pdf/Page.tsx                      |  2 +-
 3 files changed, 36 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 04a94b9b9..e93ef673e 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -82,11 +82,11 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             let layoutDoc = Doc.expandTemplateLayout(d, parent.props.DataDoc);
             let width = () => (d.nativeWidth && !d.ignoreAspect && !parent.props.Document.fillColumn ? Math.min(d[WidthSym](), parent.columnWidth) : parent.columnWidth);/// (uniqueHeadings.length + 1);
             let height = () => parent.getDocHeight(layoutDoc);
-            let dxf = () => parent.getDocTransform(layoutDoc, dref.current!);
+            let dxf = () => parent.getDocTransform(layoutDoc as Doc, dref.current!);
             let rowSpan = Math.ceil((height() + parent.gridGap) / parent.gridGap);
             parent._docXfs.push({ dxf: dxf, width: width, height: height });
             return <div className="collectionStackingView-masonryDoc" key={d[Id]} ref={dref} style={{ gridRowEnd: `span ${rowSpan}` }} >
-                {this.props.parent.getDisplayDoc(layoutDoc, d, dxf, width)}
+                {this.props.parent.getDisplayDoc(layoutDoc as Doc, d, dxf, width)}
             </div>;
         });
     }
@@ -284,33 +284,31 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             color: this.props.color
         };
         let headingView =
-            <div>
-                <div className="collectionStackingView-sectionHeader">
-                    <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
-                        title={evContents === `NO ${key.toUpperCase()} VALUE` ?
-                            `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
-                        style={{
-                            width: "100%",
-                            background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey",
-                            color: "grey"
-                        }}>
-                        {<EditableView {...headerEditableViewProps} />}
-                        {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
-                            <div className="collectionStackingView-sectionColor">
-                                <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderColorPicker()}>
-                                    <button className="collectionStackingView-sectionColorButton">
-                                        <FontAwesomeIcon icon="palette" size="sm" />
-                                    </button>
-                                </ Flyout >
-                            </div>
-                        }
-                        {evContents === `NO ${key.toUpperCase()} VALUE` ?
-                            (null) :
-                            <button className="collectionStackingView-sectionDelete" onClick={this.deleteRow}>
-                                <FontAwesomeIcon icon="trash" />
-                            </button>}
-                    </div>
-                </div >
+            <div className="collectionStackingView-sectionHeader">
+                <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
+                    title={evContents === `NO ${key.toUpperCase()} VALUE` ?
+                        `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
+                    style={{
+                        width: "100%",
+                        background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey",
+                        color: "grey"
+                    }}>
+                    {<EditableView {...headerEditableViewProps} />}
+                    {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
+                        <div className="collectionStackingView-sectionColor">
+                            <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderColorPicker()}>
+                                <button className="collectionStackingView-sectionColorButton">
+                                    <FontAwesomeIcon icon="palette" size="sm" />
+                                </button>
+                            </ Flyout >
+                        </div>
+                    }
+                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
+                        (null) :
+                        <button className="collectionStackingView-sectionDelete" onClick={this.deleteRow}>
+                            <FontAwesomeIcon icon="trash" />
+                        </button>}
+                </div>
             </div >;
         return (
             <div className="collectionStackingView-masonrySection"
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6d4ac54d6..678e10dc5 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -96,11 +96,15 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
 
         // is there any reason this needs to exist? -syip.  yes, it handles autoHeight for stacking views (masonry isn't yet supported).
         this._heightDisposer = reaction(() => {
-            if (this.isStackingView && BoolCast(this.props.Document.autoHeight)) {
+            if (BoolCast(this.props.Document.autoHeight)) {
                 let sectionsList = Array.from(this.Sections.size ? this.Sections.values() : [this.filteredChildren]);
-                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);
+                if (this.isStackingView) {
+                    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 {
+                    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) + 40, 0);
+                }
             }
             return -1;
         },
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
index 0de1777e6..6b039a6bc 100644
--- a/src/client/views/pdf/Page.tsx
+++ b/src/client/views/pdf/Page.tsx
@@ -64,7 +64,7 @@ export default class Page extends React.Component<IPageProps> {
         // lower scale = easier to read at small sizes, higher scale = easier to read at large sizes
         if (this._state !== "rendering" && !this._page && this._canvas.current && this._textLayer.current) {
             this._state = "rendering";
-            let viewport = page.getViewport(scale);
+            let viewport = page.getViewport(scale as any);
             this._canvas.current.width = this._width = viewport.width;
             this._canvas.current.height = this._height = viewport.height;
             this.props.pageLoaded(viewport);
-- 
cgit v1.2.3-70-g09d2