From cfccfd0639dff68e47862fb8e78d75b0a1b287a1 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Feb 2025 10:44:09 -0500
Subject: fixed column dragging and yMargin in masonry view. made columns
 always fit width of  masonry

---
 .../views/collections/CollectionStackingView.scss  |  8 ++-
 .../views/collections/CollectionStackingView.tsx   | 68 +++++++++++++---------
 2 files changed, 48 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 5237bdffb..565536623 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -121,11 +121,15 @@
     }
 
     .collectionStackingView-columnDragger {
-        width: 15;
-        height: 15;
+        width: 28;
+        height: 28;
         position: absolute;
         margin-left: -5;
         z-index: 10;
+        > svg {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     // Documents in stacking view
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a57256424..0a25882ff 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -110,7 +110,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     }
     // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
-        return Math.min(this._props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this._props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
+        const availableWidth = this._props.PanelWidth() - 2 * this.xMargin;
+        const cwid = availableWidth / NumCast(this.Document._layout_columnCount, 1);
+        return Math.min(availableWidth, this.isStackingView ? Number.MAX_VALUE : cwid - this.gridGap);
     }
 
     @computed get NodeWidth() {
@@ -221,6 +223,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return fields;
     }
 
+    setAutoHeight = () => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : 2 * this.yMargin + this._refList.reduce((p, r) => p + DivHeight(r), 0)));
+    observer = new ResizeObserver(this.setAutoHeight);
+
     componentDidMount() {
         super.componentDidMount?.();
         this._props.setContentViewBox?.(this);
@@ -232,10 +237,21 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 this.dataDoc['_' + this.fieldKey + '_columnHeaders'] = new List();
             }
         );
+        // reset section headers when a new filter is inputted
+        this._disposers.width = reaction(
+            () => [this._props.PanelWidth() - 2 * this.xMargin, NumCast(this.Document._layout_columnWidth, 250)],
+            ([pw, cw]) => {
+                if (!this.isStackingView) {
+                    this.layoutDoc._layout_columnCount = Math.round(pw / cw);
+                }
+            }
+        );
+
         this._disposers.autoHeight = reaction(
-            () => this.layoutDoc._layout_autoHeight,
-            layoutAutoHeight => layoutAutoHeight && this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : this._refList.reduce((p, r) => p + DivHeight(r), 0)))
+            () => [this.layoutDoc._layout_autoHeight, this.yMargin],
+            ([autoH]) => autoH && this.setAutoHeight()
         );
+
         this._disposers.refList = reaction(
             () => ({ refList: this._refList.slice(), autoHeight: this.layoutDoc._layout_autoHeight && !DocumentView.LightboxContains(this.DocumentView?.()) }),
             ({ refList, autoHeight }) => {
@@ -435,8 +451,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         );
     };
     @action
-    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
-        this.layoutDoc._columnWidth = Math.max(10, this.columnWidth + delta[0]);
+    onDividerMove = (e: PointerEvent) => {
+        this.Document._layout_columnWidth = Math.max(10, this.ScreenToLocalBoxXf().transformPoint(e.clientX, 0)[0] - this.xMargin);
         return false;
     };
 
@@ -446,7 +462,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 className="collectionStackingView-columnDragger"
                 onPointerDown={this.columnDividerDown}
                 ref={this._draggerRef}
-                style={{ cursor: this._cursor, color: SettingsManager.userColor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
+                style={{ cursor: this._cursor, color: SettingsManager.userColor, left: `${NumCast(this.Document._layout_columnWidth) + this.xMargin}px` }}>
                 <FontAwesomeIcon icon="arrows-alt-h" />
             </div>
         );
@@ -590,24 +606,26 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
         const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this._props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))));
         return (
-            <CollectionMasonryViewFieldRow
-                showHandle={first}
-                Document={this.Document}
-                chromeHidden={this.chromeHidden}
-                pivotField={this.pivotField}
-                refList={this._refList}
-                key={heading ? heading.heading : ''}
-                rows={rows}
-                headings={this.headings}
-                heading={heading ? heading.heading : ''}
-                headingObject={heading}
-                docList={docList}
-                parent={this}
-                type={type}
-                createDropTarget={this.createDashEventsTarget}
-                screenToLocalTransform={this.ScreenToLocalBoxXf}
-                setDocHeight={this.setDocHeight}
-            />
+            <div style={{ top: this.yMargin }}>
+                <CollectionMasonryViewFieldRow
+                    showHandle={first}
+                    Document={this.Document}
+                    chromeHidden={this.chromeHidden}
+                    pivotField={this.pivotField}
+                    refList={this._refList}
+                    key={heading ? heading.heading : ''}
+                    rows={rows}
+                    headings={this.headings}
+                    heading={heading ? heading.heading : ''}
+                    headingObject={heading}
+                    docList={docList}
+                    parent={this}
+                    type={type}
+                    createDropTarget={this.createDashEventsTarget}
+                    screenToLocalTransform={this.ScreenToLocalBoxXf}
+                    setDocHeight={this.setDocHeight}
+                />
+            </div>
         );
     };
 
@@ -699,8 +717,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return this._props.isContentActive() === false ? 'none' : undefined;
     }
 
-    observer = new ResizeObserver(() => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : this._refList.reduce((p, r) => p + DivHeight(r), 0))));
-
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
     render() {
         TraceMobx();
-- 
cgit v1.2.3-70-g09d2