From 8003d7f8de2a888f81b294cb7a713990c8a0e907 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Mon, 17 Jun 2024 15:15:33 -0400
Subject: changed selected card to be relative to improve animation.

---
 .../views/collections/CollectionCardDeckView.tsx   | 49 ++++++++++++----------
 1 file changed, 28 insertions(+), 21 deletions(-)

(limited to 'src/client/views/collections/CollectionCardDeckView.tsx')

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()}
-- 
cgit v1.2.3-70-g09d2

