.

2 files changed, 71 insertions, 49 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index b6d9ca202..95a9b658c 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -16,4 +16,14 @@
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
+.card-item-active, .card-item{
+    transition: transform 0.3s ease-in-out;
+}
+
+
+.card-item-active{
+    position: absolute;
+    z-index: 100;
+}
+
 
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 460f74a61..a4d0d1862 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -12,6 +12,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { Transform } from '../../util/Transform';
+import { indexes } from 'd3';
 
 @observer
 export class CollectionCardView extends CollectionSubView() {
@@ -21,11 +22,13 @@ export class CollectionCardView extends CollectionSubView() {
 
     @action
     setHoveredNodeIndex = (index: number) => {
+        if (!this.isSelected(index)){
         this.hoveredNodeIndex = index;
+        }
     };
 
-    translateHover = (index: number) => {
-        if (this.hoveredNodeIndex == index) {
+    translateHover = (index: number): number => {
+        if (this.hoveredNodeIndex == index && !this.isSelected(index)) {
             return -50;
         }
         return 0;
@@ -42,22 +45,17 @@ export class CollectionCardView extends CollectionSubView() {
         }
     };
 
-    isSelected = (index: number) => {
+    isSelected = (index: number): boolean => {
         const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
 
         return SelectionManager.IsSelected(docs[index]);
     };
 
-    // @computed
-    // rotationDegree =  (index : number) =>  {
-    //     const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-
-    //         if (SelectionManager.IsSelected(docs[index])){
-    //             return 30;
-    //         }
+    inactiveDocs = () => {
+        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
 
-    //     return 0;
-    // }
+        return docs.filter(d => !SelectionManager.IsSelected(d));
+    }
 
     constructor(props: any) {
         super(props);
@@ -81,28 +79,9 @@ export class CollectionCardView extends CollectionSubView() {
     panelWidth = () => this._props.PanelWidth() / this.childLayoutPairs.length;
     panelHeight = () => this.panelWidth() * 1.5;
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
-    // onChildClick = () => ScriptCast(this.rotate(3, 3));
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
-    //thid needs to be fixed
-    childScreenToLocal = () =>
-        this._props // document's left is the panel shifted by the doc's index * panelWidth/#docs.  But it scales by centerScale around its center, so it's left moves left by the distance of the left from the center (panelwidth/2) * the scale delta (centerScale-1)
-            .ScreenToLocalTransform() // the top behaves the same way ecept it's shifted by the 'top' amount specified for the panel in css and then by the scale factor.
-            // .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2,-((Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2)
-            .rotate(this.rotate(this.childLayoutPairs.length, Number(this.layoutDoc._carousel_index)));
-    // .scale(1 / this.centerScale);
-
-    //literally doesnot do anythin
-    // focus = (anchor: Doc, options: FocusViewOptions) => {
-    //     const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-    //     if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return;
-    //     options.didMove = true;
-    //     const target = DocCast(anchor.annotationOn) ?? anchor;
-    //     const index = docs.indexOf(target);
-    //     index !== -1 && (this.layoutDoc._carousel_index = index); //if index is not -1, then assign index to this.layoutDoc._carousel_index
-    //     return undefined;
-    // };
 
     rotate = (amCards: number, index: number) => {
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
@@ -126,11 +105,33 @@ export class CollectionCardView extends CollectionSubView() {
     //         return -((50 / ((amCards - (amCards % 2)) / 2)) * (amCards - index - 1));
     //     }
     // };
+
+
+    translateSelected = (index: number): number => {
+        if (this.isSelected(index)){
+            const middleOfPanel = this._props.PanelWidth() / 2;
+            const scaledNodeWidth = this.panelWidth() * 1.25;
+            
+            // Calculate the position of the node's left edge before scaling
+            const nodeLeftEdge = index * this.panelWidth();
+            // Find the center of the node after scaling
+            const scaledNodeCenter = nodeLeftEdge + (scaledNodeWidth / 2);
+            
+            // Calculate the translation needed to align the scaled node's center with the panel's center
+            const translation = middleOfPanel - scaledNodeCenter;
+    
+            return translation;
+        }
+    
+        return 0;
+    };
+
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
     @computed get content() {
         // const currentIndex = NumCast(this.layoutDoc._carousel_index);
-        const amCards = this.childLayoutPairs.length;
+        const amCards = this.inactiveDocs().length;
+        // const myInactives = 
         const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
             return (
                 <DocumentView
@@ -159,32 +160,39 @@ export class CollectionCardView extends CollectionSubView() {
 
         return this.childLayoutPairs.map((childPair, index) => {
             const isSelected = this.isSelected(index);
-            console.log(index + 'is select?: ' + isSelected);
             const isHovered = this.hoveredNodeIndex === index;
+            const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
 
             const childScreenToLocal = () => {
                 const dref = this.docRefs.get(childPair.layout);
                 const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv);
                 // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-                return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(1 / (isSelected ? 1.25 : 1)).rotate(!isSelected ? -this.rotate(amCards, index) : 0);
+                return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(1 / (isSelected ? 1.25 : 1)).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
             };
 
             return (
                 <div
                     key={childPair.layout[Id]}
-                    // className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`}
+                    className={`card-item${isSelected ? '-active' : ''}`}
                     style={{
                         width: this.panelWidth(),
                         height: this.panelHeight(),
-                        transform: `rotate(${!isSelected ? this.rotate(amCards, index) : 0}deg) 
-                    scale(${isSelected ? 1.25 : 1})
-                    translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 : 0}px)
-                    `,
+                        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
+
+                    ,
                     }}
+
+
+
                     // onClick={() => this.setSelectedNodeIndex(index)}
 
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}
-                    onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
+                    >
                     {/* {this.lol(childPair.data, index)} */}
 
                     {displayDoc(childPair, childScreenToLocal)}
@@ -193,16 +201,13 @@ export class CollectionCardView extends CollectionSubView() {
         });
     }
 
-    // lol = (d : Doc, index: number) => {
-    //     if (SelectionManager.IsSelected(d)){
-    //         this.setSelectedNodeIndex(index);
+    @computed get translateWrapperX() {
 
-    //     }
-    // }
+        if (this.inactiveDocs().length != this.childLayoutPairs.length){
+            return this.panelWidth()/2
+        }
 
-    @computed get translateX() {
-        const index = NumCast(this.layoutDoc._carousel_index);
-        return this.panelWidth() * (1 - index);
+        return 0;
     }
 
     render() {
@@ -216,10 +221,17 @@ export class CollectionCardView extends CollectionSubView() {
                 }}>
                 <div
                     className="card-wrapper"
-                    // style={{ transform: `translateX(${this.translateX}px)` }}
+                    style={{ transform: `translateX(${this.translateWrapperX}px)`,
+                    //  height: this.panelHeight() 
+                    }}
+                    onMouseLeave={() => this.setHoveredNodeIndex(-1)}
                 >
                     {this.content}
                 </div>
+
+                {/* {this.focusContent} */}
+
+
             </div>
         );
     }