diff options
Diffstat (limited to 'src/client/views/collections/CollectionStackingView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 86 |
1 files changed, 58 insertions, 28 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 1ac0b6d70..6bbd43b1b 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) || this._props.PanelWidth() / NumCast(this.Document._layout_columnWidth, this._props.PanelWidth() / 4)); + return Math.min(availableWidth, this.isStackingView ? Number.MAX_VALUE : cwid - this.gridGap); } @computed get NodeWidth() { @@ -146,7 +148,17 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns const rowSpan = Math.ceil((this.getDocHeight(d)() + this.gridGap) / this.gridGap); // just getting the style - const style = this.isStackingView ? { margin: undefined, transition: this.getDocTransition(d)(), width: this.columnWidth, marginTop: i ? this.gridGap : 0, height: this.getDocHeight(d)() } : { gridRowEnd: `span ${rowSpan}` }; + const style = this.isStackingView + ? { + // + margin: undefined, + transition: this.getDocTransition(d)(), + width: this.columnWidth, + marginTop: i ? this.gridGap : 0, + height: this.getDocHeight(d)(), + zIndex: DocumentView.getFirstDocumentView(d)?.IsSelected ? 1000 : 0, + } + : { gridRowEnd: `span ${rowSpan}`, zIndex: DocumentView.getFirstDocumentView(d)?.IsSelected ? 1000 : 0 }; // So we're choosing whether we're going to render a column or a masonry doc return ( <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}> @@ -211,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); @@ -222,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)], + ([pw, cw]) => { + if (cw && !this.isStackingView && Math.round(pw / cw)) { + 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 }) => { @@ -295,7 +321,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection newDoc[layoutFieldKey] = fieldProps.Document[layoutFieldKey]; } newDoc[DocData].text = undefined; - Doc.SetSelectOnLoad(newDoc); + DocumentView.SetSelectOnLoad(newDoc); return this.addDocument?.(newDoc); } return false; @@ -344,6 +370,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to. rootSelected={this.rootSelected} showTitle={this._props.childlayout_showTitle} + showTags={BoolCast(this.layoutDoc.showChildTags) || BoolCast(this.Document._layout_showTags)} dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType} onClickScript={this.onChildClickHandler} onDoubleClickScript={this.onChildDoubleClickHandler} @@ -424,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._props.DocumentView?.().screenToViewTransform().transformPoint(e.clientX, 0)[0] ?? 0) - this.xMargin); return false; }; @@ -435,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> ); @@ -579,24 +606,29 @@ 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 key={(heading?.heading ?? '') + 'head'}> + {this._props.isContentActive() && !this.isStackingView && !this.chromeHidden ? this.columnDragger : null} + <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> + </div> ); }; @@ -688,8 +720,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(); |