aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionCardDeckView.scss19
-rw-r--r--src/client/views/collections/CollectionCardDeckView.tsx114
2 files changed, 96 insertions, 37 deletions
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 (
<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>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 08:54:42 +0000