From 9651484f331c39cb42257977cd4e234c71e74549 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Wed, 20 Mar 2024 14:14:02 -0400
Subject: figuring out how to find the doc wrapper thing

---
 .../views/collections/CollectionCardDeckView.tsx   | 114 ++++++++++++++-------
 1 file changed, 77 insertions(+), 37 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 778280215..3b3c4a764 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -12,36 +12,69 @@ import { SelectionManager } from '../../util/SelectionManager';
 import { StyleProp } from '../StyleProvider';
 import { DocumentView } from '../nodes/DocumentView';
 import { FocusViewOptions } from '../nodes/FieldView';
-import './CollectionCarousel3DView.scss';
+import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { ScriptField } from '../../../fields/ScriptField';
+import { lengthToDegrees } from '@turf/turf';
 
-const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore
 @observer
 export class CollectionCardView extends CollectionSubView() {
-    // @computed get scrollSpeed() {
-    //     return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed
-    // }
+   
+    @observable selectedNodeIndex = -1;
+
+    @observable hoveredNodeIndex = -1;
+
+    @action
+    setHoveredNodeIndex = (index : number) => {
+        this.hoveredNodeIndex = index;
+    }
 
-    selectedNodeIndex = observable.box(-1); // -1 indicates no selection
+    translateHover = (index : number) => {
+        if (this.hoveredNodeIndex == index){
+            return -50;
+        }
+        return 0;
+    }
+
+    
 
     @action
     setSelectedNodeIndex = (index: number) => {
-        console.log('hi');
-        SelectionManager.DeselectAll();
-        this.selectedNodeIndex.set(index);
+
+        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
+        console.log("goodnight")
+
+        if (SelectionManager.IsSelected(docs[index])){
+            console.log("good mornings")
+            this.setSelectedNodeIndex(index);
+        }
     };
 
-    @computed
-    get rotationDegree() {
-    return this.isChildContentActive() ? 30 : 0; // Rotate by 30 degrees if selected, otherwise no rotation
-}
+
+    isSelected = (index : number) => {
+        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;
+    //         }
+
+    //     return 0;
+    // }
 
 
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        // this.rotationDegree(7);
     }
 
     private _dropDisposer?: DragManager.DragDropDisposer;
@@ -57,11 +90,10 @@ export class CollectionCardView extends CollectionSubView() {
         }
     };
 
-    centerScale = Number(CAROUSEL3D_CENTER_SCALE);
     panelWidth = () => (this._props.PanelWidth()) / this.childLayoutPairs.length;
     panelHeight = () => this.panelWidth() * 1.5;
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
-    onChildClick = () => ScriptCast(this.rotate(3, 3));
+    // onChildClick = () => ScriptCast(this.rotate(3, 3));
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
     
@@ -75,15 +107,15 @@ export class CollectionCardView extends CollectionSubView() {
 
 
     //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;
-    };
+    // 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) => {
 
@@ -128,7 +160,7 @@ export class CollectionCardView extends CollectionSubView() {
                     renderDepth={this._props.renderDepth + 1}
                     LayoutTemplate={this._props.childLayoutTemplate}
                     LayoutTemplateString={this._props.childLayoutString}
-                    focus={this.focus}
+                    // focus={this.focus}
                     ScreenToLocalTransform={this.childScreenToLocal} //makes sure the box wrapper thing is in the right spot 
                     isContentActive={this.isChildContentActive}
                     isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
@@ -140,20 +172,29 @@ export class CollectionCardView extends CollectionSubView() {
 
         return this.childLayoutPairs.map((childPair, index) => {
 
-            const isSelected = this.selectedNodeIndex.get() === index;
-            const rotationDegree = isSelected ? 30 : 0; // Rotate selected node by 5 degrees, for example
-
+            const isSelected = this.isSelected(index);
+            console.log(index + "is select?: " + isSelected);
+            const isHovered = this.hoveredNodeIndex === index;
 
             return (
                 <div key={childPair.layout[Id]} 
                 // className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} 
                 style={{ width: this.panelWidth(), height: this.panelHeight(), 
-                    transform: `rotate(${this.rotate(amCards, index) + rotationDegree}deg)`,
-                
-        
-                // translateY(${this.translateY(amCards, index)}px)`,
+                    transform: `rotate(${!isSelected ? this.rotate(amCards, index) : 0}deg) 
+                    scale(${isSelected ? 1.25 : 1})
+                    translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 : 0}px)
+                    `,
+
+
+
+
                 }}
-                onClick={() => this.setSelectedNodeIndex(index)}
+
+                
+                // onClick={() => this.setSelectedNodeIndex(index)}
+
+                onMouseEnter={() => this.setHoveredNodeIndex(index)}
+                onMouseLeave={() => this.setHoveredNodeIndex(-1)}
 
  
                 
@@ -182,19 +223,18 @@ export class CollectionCardView extends CollectionSubView() {
     render() {
         return (
             <div
-                className="collectionCarousel3DView-outer"
+                className="collectionCardView-outer"
                 ref={this.createDashEventsTarget}
                 style={{
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                 }}>
-                <div className="carousel-wrapper" 
+                <div 
+                className="card-wrapper" 
                 // style={{ transform: `translateX(${this.translateX}px)` }}
                 >
                     {this.content}
                 </div>
-                {/* {this.buttons}
-                <div className="dot-bar">{this.dots}</div> */}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2

