diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 47 |
1 files changed, 43 insertions, 4 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index a4d0d1862..66729d64b 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -2,9 +2,9 @@ import { ObservableMap, action, computed, makeObservable, observable } from 'mob import { observer } from 'mobx-react'; import * as React from 'react'; import { Utils, returnZero } from '../../../Utils'; -import { Doc, DocListCast } from '../../../fields/Doc'; +import { Doc, DocListCast, Field } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { NumCast, ScriptCast } from '../../../fields/Types'; +import { NumCast, ScriptCast, StrCast, BoolCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { StyleProp } from '../StyleProvider'; @@ -57,6 +57,19 @@ export class CollectionCardView extends CollectionSubView() { return docs.filter(d => !SelectionManager.IsSelected(d)); } + middleIndex = Math.floor(this.inactiveDocs().length / 2); + + + // verticalOffset = (index: number) => { + + // const distanceFromMiddle = Math.abs(index - this.middleIndex); + // // Adjust '4' to control the curvature; larger values create a flatter arc. + // return Math.pow(distanceFromMiddle, 2)* (Math.floor(64/this.inactiveDocs().length)); // Example quadratic function + // }; + + + + constructor(props: any) { super(props); makeObservable(this); @@ -126,6 +139,25 @@ export class CollectionCardView extends CollectionSubView() { return 0; }; + @computed get sortedDocs() { + const field = StrCast(this.layoutDoc.sortField); + const desc = BoolCast(this.layoutDoc.sortDesc); + const docs = !field + ? this.childDocs + : [...this.childDocs].sort((docA, docB) => { + const aStr = Field.toString(docA[field] as Field); + const bStr = Field.toString(docB[field] as Field); + var out = 0; + if (aStr < bStr) out = -1; + if (aStr > bStr) out = 1; + if (desc) out *= -1; + return out; + }); + return { docs }; + } + + + @observable docRefs = new ObservableMap<Doc, DocumentView>(); @computed get content() { @@ -162,6 +194,8 @@ export class CollectionCardView extends CollectionSubView() { const isSelected = this.isSelected(index); const isHovered = this.hoveredNodeIndex === index; const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); + // const yOffset = this.verticalOffset(index); + const childScreenToLocal = () => { const dref = this.docRefs.get(childPair.layout); @@ -180,15 +214,20 @@ export class CollectionCardView extends CollectionSubView() { 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 + translateX(${isSelected ? ((this._props.PanelWidth() / 2) - ((this.panelWidth())/2) - (this.panelWidth()/2)) : 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)} |