From 568d196c15c44f89388985c267d4ffe6c2e28a7b Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Wed, 20 Mar 2024 14:14:02 -0400 Subject: figuring out how to find the doc wrapper thing --- .../views/collections/CollectionCardDeckView.scss | 19 ++++ .../views/collections/CollectionCardDeckView.tsx | 114 ++++++++++++++------- 2 files changed, 96 insertions(+), 37 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index e69de29bb..b6d9ca202 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -0,0 +1,19 @@ +@import '../global/globalCssVariables.module.scss'; + +.collectionCardView-outer { + height: 100%; + position: relative; + background-color: white; + overflow: hidden; +} + +.card-wrapper { + display: flex; + position: absolute; + top: $CAROUSEL3D_TOP * 1%; + height: ($CAROUSEL3D_SIDE_SCALE * 100) * 1%; + align-items: center; + transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); +} + + 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 (
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 (
-
{this.content}
- {/* {this.buttons} -
{this.dots}
*/}
); } -- cgit v1.2.3-70-g09d2