diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 102 |
1 files changed, 50 insertions, 52 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 3d5b92213..20644715d 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -3,6 +3,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, DashColor, returnFalse, returnZero } from '../../../ClientUtils'; import { emptyFunction, numberRange } from '../../../Utils'; +import { emptyFunction, numberRange } from '../../../Utils'; import { Doc, NumListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; @@ -26,7 +27,7 @@ import { FaStar, FaHeart, FaRobot, FaCloud } from 'react-icons/fa'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { SettingsManager } from '../../util/SettingsManager'; import { Tooltip } from '@mui/material'; - +import { dropActionType } from '../../util/DropActionTypes'; enum cardSortings { Time = 'time', @@ -84,7 +85,6 @@ export class CollectionCardView extends CollectionSubView() { super(props); makeObservable(this); this.setRegenerateCallback(); - } setRegenerateCallback() { @@ -96,11 +96,8 @@ export class CollectionCardView extends CollectionSubView() { const sortDesc = await this.childPairStringList(); // Await the promise to get the string result GPTPopup.Instance.setSortDesc(sortDesc.join()); GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult); - }; - - componentDidMount(): void { this._disposers.sort = reaction( () => ({ cardSort: this.cardSort, field: this.cardSort_customField }), @@ -194,7 +191,7 @@ export class CollectionCardView extends CollectionSubView() { * @returns */ rotate = (amCards: number, index: number) => { - if (amCards ==1) return 0 + if (amCards == 1) return 0; const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2))); @@ -281,7 +278,6 @@ export class CollectionCardView extends CollectionSubView() { // console.log(ClientUtils.hexToHsv(StrCast(docA.backgroundColor)) ?? 9999 + "docA col") // console.log(ClientUtils.hexToHsv(StrCast(docB.backgroundColor)) ?? 9999 + "docB col") - const out = typeA < typeB ? -1 : typeA > typeB ? 1 : 0; return isDesc ? -out : out; // Reverse the sort order if descending is true }); @@ -294,7 +290,7 @@ export class CollectionCardView extends CollectionSubView() { // eslint-disable-next-line react/jsx-props-no-spreading {...this._props} ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))} - Document={doc} + Document={doc} NativeWidth={returnZero} NativeHeight={returnZero} fitWidth={returnFalse} @@ -307,6 +303,9 @@ export class CollectionCardView extends CollectionSubView() { isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight(doc)} + dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType} + dontHideOnDrag + // pointerEvents={this.blockPointerEventsWhenDragging(doc)} /> ); @@ -359,7 +358,7 @@ export class CollectionCardView extends CollectionSubView() { if (isSelected) return rowToCenterShift * rowHeight - rowHeight / 2; if (amCards == 1) return 50 * this.fitContentScale; // const trans = isHovered ? this.translateHover(realIndex) : 0; - const trans = 0 + const trans = 0; return trans + this.translateY(amCards, calcRowIndex, realIndex); }; @@ -414,7 +413,7 @@ export class CollectionCardView extends CollectionSubView() { } catch (error) { console.log('bad things have happened'); - console.log(error) + console.log(error); } return ''; }; @@ -451,54 +450,55 @@ export class CollectionCardView extends CollectionSubView() { GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult); }; - /** + /** * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups * @param doc * @param cardSort * @returns */ - renderButtons = (doc: Doc, cardSort: cardSortings): JSX.Element | null => { - if (cardSort !== cardSortings.Custom) return null; + renderButtons = (doc: Doc, cardSort: cardSortings): JSX.Element | null => { + if (cardSort !== cardSortings.Custom) return null; + + const amButtons = Math.max( + 4, + this.childDocs?.reduce((set, d) => { + if (this.cardSort_customField) { + set.add(NumCast(d[this.cardSort_customField])); + } + return set; + }, new Set<number>()).size ?? 0 + ); - const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => { - if (this.cardSort_customField) { - set.add(NumCast(d[this.cardSort_customField])); - } - return set; - }, new Set<number>()).size ?? 0); - - const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); - const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6; - - return ( - <div className="card-button-container" style={{ width: `${totalWidth}px`, fontSize: '50px' }}> - {numberRange(amButtons).map(i => ( - <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from group {i + 1}</div>}> - <button type="button" onClick={() => this.toggleButton(i, doc)}> - {this.getButtonIcon(activeButtonIndex === i)} - </button> - </Tooltip> - ))} - </div> - ); -}; + const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); + const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6; + + return ( + <div className="card-button-container" style={{ width: `${totalWidth}px`, fontSize: '50px' }}> + {numberRange(amButtons).map(i => ( + <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from group {i + 1}</div>}> + <button type="button" onClick={() => this.toggleButton(i, doc)}> + {this.getButtonIcon(activeButtonIndex === i)} + </button> + </Tooltip> + ))} + </div> + ); + }; getButtonIcon = (isActive: boolean): JSX.Element => { const iconMap: { [key: string]: any } = { like: 'heart', chat: 'robot', - idea: 'cloud' + idea: 'cloud', }; const icon = iconMap[this.cardSort_customField ?? ''] || 'star'; const color = isActive ? '#4476f7' : '#323232'; - return <FontAwesomeIcon icon={icon} size='lg' style={{ color }} />; + return <FontAwesomeIcon icon={icon} size="lg" style={{ color }} />; }; - - - @action + @action onDragStart = (index: number) => { this.draggedIndex = index; }; @@ -526,16 +526,21 @@ export class CollectionCardView extends CollectionSubView() { this.draggedIndex = -1; this.overIndex = -1; }; + /** * Actually renders all the cards */ renderCards = () => { + console.log(DragManager.docsBeingDragged.length + 'drag ha'); const anySelected = this.childDocs.some(doc => DocumentView.SelectedDocs().includes(doc)); const isEmpty = this.childDocsWithoutLinks.length === 0; if (isEmpty) { - return <span className = 'no-card-span' style= {{width: `100%`}}> - Sorry ! There are no cards in this group</span> + return ( + <span className="no-card-span" style={{ width: `100%` }}> + Sorry ! There are no cards in this group + </span> + ); } // Map sorted documents to their rendered components @@ -544,7 +549,7 @@ export class CollectionCardView extends CollectionSubView() { const calcRowIndex = this.overflowIndexCalc(realIndex); const amCards = this.overflowAmCardsCalc(realIndex); const isSelected = DocumentView.SelectedDocs().includes(doc); - + const isDragging = DragManager.docsBeingDragged.includes(doc); const childScreenToLocal = () => { this._forceChildXf; @@ -564,7 +569,7 @@ export class CollectionCardView extends CollectionSubView() { return ( <div key={doc[Id]} - className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`} + className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`} onPointerUp={() => { // this turns off documentDecorations during a transition, then turns them back on afterward. SnappingManager.SetIsResizing(this.Document[Id]); @@ -589,16 +594,10 @@ export class CollectionCardView extends CollectionSubView() { {this.renderButtons(doc, this.cardSort)} </div> ); - } - - - ); + }); }; - - render() { - return ( <div className="collectionCardView-outer" @@ -630,5 +629,4 @@ export class CollectionCardView extends CollectionSubView() { </div> ); } - } |