diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 127 |
1 files changed, 55 insertions, 72 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 3b3c4a764..460f74a61 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -1,62 +1,52 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed, makeObservable, observable, action } from 'mobx'; -import { observer, } from 'mobx-react'; +import { ObservableMap, action, computed, makeObservable, observable } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; -import { Utils, emptyFunction, returnFalse, returnZero } from '../../../Utils'; +import { Utils, returnZero } from '../../../Utils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { DocumentType } from '../../documents/DocumentTypes'; +import { NumCast, ScriptCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { StyleProp } from '../StyleProvider'; import { DocumentView } from '../nodes/DocumentView'; -import { FocusViewOptions } from '../nodes/FieldView'; import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; -import { ScriptField } from '../../../fields/ScriptField'; -import { lengthToDegrees } from '@turf/turf'; +import { Transform } from '../../util/Transform'; @observer export class CollectionCardView extends CollectionSubView() { - @observable selectedNodeIndex = -1; @observable hoveredNodeIndex = -1; @action - setHoveredNodeIndex = (index : number) => { + setHoveredNodeIndex = (index: number) => { this.hoveredNodeIndex = index; - } + }; - translateHover = (index : number) => { - if (this.hoveredNodeIndex == index){ + translateHover = (index: number) => { + if (this.hoveredNodeIndex == index) { return -50; } return 0; - } - - + }; @action setSelectedNodeIndex = (index: number) => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - console.log("goodnight") + console.log('goodnight'); - if (SelectionManager.IsSelected(docs[index])){ - console.log("good mornings") + if (SelectionManager.IsSelected(docs[index])) { + console.log('good mornings'); this.setSelectedNodeIndex(index); } }; - - isSelected = (index : number) => { + isSelected = (index: number) => { const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - return SelectionManager.IsSelected(docs[index]) - - } + return SelectionManager.IsSelected(docs[index]); + }; // @computed // rotationDegree = (index : number) => { @@ -69,8 +59,6 @@ export class CollectionCardView extends CollectionSubView() { // return 0; // } - - constructor(props: any) { super(props); makeObservable(this); @@ -90,21 +78,20 @@ export class CollectionCardView extends CollectionSubView() { } }; - panelWidth = () => (this._props.PanelWidth()) / this.childLayoutPairs.length; + 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); - + .rotate(this.rotate(this.childLayoutPairs.length, Number(this.layoutDoc._carousel_index))); + // .scale(1 / this.centerScale); //literally doesnot do anythin // focus = (anchor: Doc, options: FocusViewOptions) => { @@ -118,16 +105,15 @@ export class CollectionCardView extends CollectionSubView() { // }; rotate = (amCards: number, index: number) => { + const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); - const possRotate = -30 + (index * (30/((amCards - (amCards%2))/2))); - - if (amCards%2 == 0 && possRotate==0){ - console.log('whaddup') - return possRotate + Math.abs(-30 + ((index-1) * (30/((amCards - 1)/2)))) + if (amCards % 2 == 0 && possRotate == 0) { + console.log('whaddup'); + return possRotate + Math.abs(-30 + (index - 1) * (30 / ((amCards - 1) / 2))); } - - return possRotate; - } + + return possRotate; + }; // translateY = (amCards: number, index: number) => { // // Assuming you want a default value when index > amCards/2 @@ -140,15 +126,16 @@ export class CollectionCardView extends CollectionSubView() { // return -((50 / ((amCards - (amCards % 2)) / 2)) * (amCards - index - 1)); // } // }; + @observable docRefs = new ObservableMap<Doc, DocumentView>(); - @computed get content() { // const currentIndex = NumCast(this.layoutDoc._carousel_index); const amCards = this.childLayoutPairs.length; - const displayDoc = (childPair: { layout: Doc; data: Doc }) => { + const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { return ( <DocumentView {...this._props} + ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))} Document={childPair.layout} TemplateDataDocument={childPair.data} // onClickScript={this.toggleIcon} @@ -161,7 +148,7 @@ export class CollectionCardView extends CollectionSubView() { LayoutTemplate={this._props.childLayoutTemplate} LayoutTemplateString={this._props.childLayoutString} // focus={this.focus} - ScreenToLocalTransform={this.childScreenToLocal} //makes sure the box wrapper thing is in the right spot + ScreenToLocalTransform={screenToLocalTransform} //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} PanelWidth={this.panelWidth} @@ -171,39 +158,37 @@ export class CollectionCardView extends CollectionSubView() { }; return this.childLayoutPairs.map((childPair, index) => { - const isSelected = this.isSelected(index); - console.log(index + "is select?: " + isSelected); + console.log(index + 'is select?: ' + isSelected); const isHovered = this.hoveredNodeIndex === index; + 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 ( - <div key={childPair.layout[Id]} - // className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} - style={{ width: this.panelWidth(), height: this.panelHeight(), - transform: `rotate(${!isSelected ? this.rotate(amCards, index) : 0}deg) + <div + key={childPair.layout[Id]} + // className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} + 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) `, + }} + // onClick={() => this.setSelectedNodeIndex(index)} - - - - }} - - - // onClick={() => this.setSelectedNodeIndex(index)} - - onMouseEnter={() => this.setHoveredNodeIndex(index)} - onMouseLeave={() => this.setHoveredNodeIndex(-1)} - - - - > + onMouseEnter={() => this.setHoveredNodeIndex(index)} + onMouseLeave={() => this.setHoveredNodeIndex(-1)}> {/* {this.lol(childPair.data, index)} */} - - {displayDoc(childPair)} - </div> + {displayDoc(childPair, childScreenToLocal)} + </div> ); }); } @@ -229,15 +214,13 @@ export class CollectionCardView extends CollectionSubView() { background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), }}> - <div - className="card-wrapper" - // style={{ transform: `translateX(${this.translateX}px)` }} + <div + className="card-wrapper" + // style={{ transform: `translateX(${this.translateX}px)` }} > {this.content} </div> </div> ); } - - } |