diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.scss | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 49 |
2 files changed, 29 insertions, 22 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 5f7d1b901..eb1b456f5 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -104,6 +104,6 @@ } .card-item-active { - position: absolute; + // position: absolute; z-index: 100; } diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 7ea345e10..9ce0873bd 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -2,7 +2,7 @@ import { IReactionDisposer, ObservableMap, action, computed, makeObservable, obs import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, DashColor, returnFalse, returnZero } from '../../../ClientUtils'; -import { numberRange } from '../../../Utils'; +import { emptyFunction, numberRange } from '../../../Utils'; import { Doc, NumListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; @@ -124,15 +124,6 @@ export class CollectionCardView extends CollectionSubView() { return (this._childDocumentWidth * length) / this._props.PanelWidth(); } - @computed get translateWrapperX() { - let translate = 0; - - if (this.inactiveDocs().length !== this.childDocsWithoutLinks.length && this.inactiveDocs().length < 10) { - translate += this.panelWidth() / 2; - } - return translate; - } - /** * The child documents to be rendered-- either all of them except the Links or the docs in the currently active * custom group @@ -161,6 +152,11 @@ export class CollectionCardView extends CollectionSubView() { return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.layoutDoc.sortDesc)); } + /** + * Number of rows of cards to be rendered + */ + @computed get numRows() { return Math.ceil(this.sortedDocs.length / 10); } + @action setHoveredNodeIndex = (index: number) => { if (!DocumentView.SelectedDocs().includes(this.childDocs[index])) { @@ -268,8 +264,8 @@ export class CollectionCardView extends CollectionSubView() { return [DateCast(docA.author_date)?.date ?? Date.now(), DateCast(docB.author_date)?.date ?? Date.now()]; case cardSortings.Color: - return [ClientUtils.hexToHsv(StrCast(docA.backgroundColor)) ?? 9999, // If docA.type is undefined, use an empty string - ClientUtils.hexToHsv(StrCast(docB.backgroundColor))] ?? 9999; // If docB.type is undefined, use an empty string + return [ClientUtils.hexToHsv(StrCast(docA.backgroundColor)), // If docA.type is undefined, use an empty string + ClientUtils.hexToHsv(StrCast(docB.backgroundColor))]; // If docB.type is undefined, use an empty string case cardSortings.Custom: return [CollectionCardView.getButtonGroup(this.cardSort_customField, docA)??9999, CollectionCardView.getButtonGroup(this.cardSort_customField, docB)??9999]; @@ -303,7 +299,7 @@ export class CollectionCardView extends CollectionSubView() { LayoutTemplate={this._props.childLayoutTemplate} LayoutTemplateString={this._props.childLayoutString} ScreenToLocalTransform={screenToLocalTransform} // makes sure the box wrapper thing is in the right spot - isContentActive={this.isChildContentActive} + isContentActive={emptyFunction} isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight(doc)} @@ -316,11 +312,11 @@ export class CollectionCardView extends CollectionSubView() { * @returns */ overflowAmCardsCalc = (index: number) => { - if (this.inactiveDocs().length < this._maxRowCount) { - return this.inactiveDocs().length; + if (this.sortedDocs.length < this._maxRowCount) { + return this.sortedDocs.length; } // 13 - 3 = 10 - const totalCards = this.inactiveDocs().length; + const totalCards = this.sortedDocs.length; // if 9 or less if (index < totalCards - (totalCards % 10)) { return this._maxRowCount; @@ -353,7 +349,11 @@ export class CollectionCardView extends CollectionSubView() { * @returns */ calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => { - if (isSelected || amCards == 1) return 50 * this.fitContentScale; + const rowHeight = this._props.PanelHeight() * this.fitContentScale / this.numRows; + const rowIndex = Math.trunc(realIndex / this._maxRowCount); + const rowToCenterShift = (this.numRows / 2) - rowIndex; + if (isSelected) return rowToCenterShift * rowHeight - rowHeight / 2; + if (amCards == 1) return 50 * this.fitContentScale; // const trans = isHovered ? this.translateHover(realIndex) : 0; const trans = 0 return trans + this.translateY(amCards, calcRowIndex, realIndex); @@ -503,7 +503,7 @@ export class CollectionCardView extends CollectionSubView() { // Map sorted documents to their rendered components return this.sortedDocs.map((doc, index) => { - const realIndex = this.sortedDocs.filter(sortDoc => !DocumentView.SelectedDocs().includes(sortDoc)).indexOf(doc); + const realIndex = this.sortedDocs.indexOf(doc); const calcRowIndex = this.overflowIndexCalc(realIndex); const amCards = this.overflowAmCardsCalc(realIndex); const isSelected = DocumentView.SelectedDocs().includes(doc); @@ -517,6 +517,12 @@ export class CollectionCardView extends CollectionSubView() { .scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); // prettier-ignore }; + const translateIfSelected = () => { + const indexInRow = index % this._maxRowCount; + const rowIndex = Math.trunc(index / this._maxRowCount); + const rowCenterIndex = Math.min(this._maxRowCount, this.sortedDocs.length - rowIndex * this._maxRowCount)/2; + return (rowCenterIndex - indexInRow) * 100; + } return ( <div key={doc[Id]} @@ -536,9 +542,9 @@ export class CollectionCardView extends CollectionSubView() { width: this.panelWidth(), height: 'max-content', transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px) - translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) + translateX(calc(${(isSelected ? translateIfSelected() : 0) + "% + " + this.translateOverflowX(realIndex, amCards)+"px"})) rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - scale(${isSelected ? 1.25 : this._hoveredNodeIndex === index ? 1.05 : 1})`, + scale(${isSelected ? 2 : this._hoveredNodeIndex === index ? 1.05 : 1})`, }} onMouseEnter={() => this.setHoveredNodeIndex(index)}> {this.displayDoc(doc, childScreenToLocal)} @@ -566,8 +572,9 @@ export class CollectionCardView extends CollectionSubView() { <div className="card-wrapper" style={{ - transform: ` scale(${1 / this.fitContentScale}) translateX(${this.translateWrapperX}px)`, + transform: ` scale(${1 / this.fitContentScale})`, height: `${100 * this.fitContentScale}%`, + gridAutoRows: `${100/this.numRows}%` }} onMouseLeave={() => this.setHoveredNodeIndex(-1)}> {this.renderCards()} |