figuring out sorting-- may just leave it to god

1 files changed, 43 insertions, 4 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index a4d0d1862..66729d64b 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -2,9 +2,9 @@ import { ObservableMap, action, computed, makeObservable, observable } from 'mob
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Utils, returnZero } from '../../../Utils';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { Doc, DocListCast, Field } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { NumCast, ScriptCast } from '../../../fields/Types';
+import { NumCast, ScriptCast, StrCast, BoolCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { StyleProp } from '../StyleProvider';
@@ -57,6 +57,19 @@ export class CollectionCardView extends CollectionSubView() {
         return docs.filter(d => !SelectionManager.IsSelected(d));
     }
 
+    middleIndex = Math.floor(this.inactiveDocs().length / 2);
+
+
+    // verticalOffset = (index: number) => {
+
+    //     const distanceFromMiddle = Math.abs(index - this.middleIndex);
+    //     // Adjust '4' to control the curvature; larger values create a flatter arc.
+    //     return Math.pow(distanceFromMiddle, 2)* (Math.floor(64/this.inactiveDocs().length)); // Example quadratic function
+    //   };
+
+
+
+
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -126,6 +139,25 @@ export class CollectionCardView extends CollectionSubView() {
         return 0;
     };
 
+    @computed get sortedDocs() {
+        const field = StrCast(this.layoutDoc.sortField);
+        const desc = BoolCast(this.layoutDoc.sortDesc);
+        const docs = !field
+            ? this.childDocs
+            : [...this.childDocs].sort((docA, docB) => {
+                  const aStr = Field.toString(docA[field] as Field);
+                  const bStr = Field.toString(docB[field] as Field);
+                  var out = 0;
+                  if (aStr < bStr) out = -1;
+                  if (aStr > bStr) out = 1;
+                  if (desc) out *= -1;
+                  return out;
+              });
+        return { docs };
+    }
+
+
+
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
     @computed get content() {
@@ -162,6 +194,8 @@ export class CollectionCardView extends CollectionSubView() {
             const isSelected = this.isSelected(index);
             const isHovered = this.hoveredNodeIndex === index;
             const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
+            // const yOffset = this.verticalOffset(index);
+
 
             const childScreenToLocal = () => {
                 const dref = this.docRefs.get(childPair.layout);
@@ -180,15 +214,20 @@ export class CollectionCardView extends CollectionSubView() {
                         transform: 
                             `
                             rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
-                            translateX(${isSelected ? ((this._props.PanelWidth() / 2) - 210) : 0}px)
                             translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 : 0}px)
-                            scale(${isSelected ? 1.25 : 1})` //scale has to be applied last or selected offset gets messed up
+                            translateX(${isSelected ? ((this._props.PanelWidth() / 2) - ((this.panelWidth())/2) - (this.panelWidth()/2)) : 0}px)
+
+                            scale(${isSelected ? 1.25 : 1})
+                            
+                            ` //scale has to be applied last or selected offset gets messed up
 
                     ,
                     }}
 
 
 
+
+
                     // onClick={() => this.setSelectedNodeIndex(index)}
 
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}