aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionCardDeckView.scss2
-rw-r--r--src/client/views/collections/CollectionCardDeckView.tsx54
2 files changed, 31 insertions, 25 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 4a4e5a498..20644715d 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { ClientUtils, DashColor, returnFalse, returnZero } from '../../../ClientUtils';
import { emptyFunction, 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 +125,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 +153,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 +265,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];
@@ -318,11 +315,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;
@@ -355,7 +352,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);
@@ -544,7 +545,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);
@@ -559,6 +560,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]}
@@ -577,13 +584,11 @@ export class CollectionCardView extends CollectionSubView() {
style={{
width: this.panelWidth(),
height: 'max-content',
- transform: !isDragging
- ? `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px)
- translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px)
- rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
- scale(${isSelected ? 1.25 : this._hoveredNodeIndex === index ? 1.05 : 1})`
- : 'none',
- }}
+ transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px)
+ translateX(calc(${(isSelected ? translateIfSelected() : 0) + "% + " + this.translateOverflowX(realIndex, amCards)+"px"}))
+ rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
+ scale(${isSelected ? 2 : this._hoveredNodeIndex === index ? 1.05 : 1})`,
+ }}
onMouseEnter={() => this.setHoveredNodeIndex(index)}>
{this.displayDoc(doc, childScreenToLocal)}
{this.renderButtons(doc, this.cardSort)}
@@ -604,8 +609,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()}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 08:12:50 +0000