diff options
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 117 |
1 files changed, 58 insertions, 59 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index f50ca6349..4a4e5a498 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -2,7 +2,7 @@ import { IReactionDisposer, ObservableMap, action, computed, makeObservable, obs import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, DashColor, returnFalse, returnZero } from '../../../ClientUtils'; -import { 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 +26,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 +84,6 @@ export class CollectionCardView extends CollectionSubView() { super(props); makeObservable(this); this.setRegenerateCallback(); - } setRegenerateCallback() { @@ -96,11 +95,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 }), @@ -198,7 +194,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))); @@ -285,7 +281,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 }); @@ -298,7 +293,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,10 +302,13 @@ export class CollectionCardView extends CollectionSubView() { LayoutTemplate={this._props.childLayoutTemplate} LayoutTemplateString={this._props.childLayoutString} ScreenToLocalTransform={screenToLocalTransform} // makes sure the box wrapper thing is in the right spot - isContentActive={this.isChildContentActive} + isContentActive={emptyFunction} 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 +357,7 @@ export class CollectionCardView extends CollectionSubView() { calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => { if (isSelected || 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 +412,7 @@ export class CollectionCardView extends CollectionSubView() { } catch (error) { console.log('bad things have happened'); - console.log(error) + console.log(error); } return ''; }; @@ -451,54 +449,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 +525,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 +548,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; @@ -558,7 +562,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]); @@ -573,26 +577,22 @@ export class CollectionCardView extends CollectionSubView() { style={{ width: this.panelWidth(), height: 'max-content', - transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px) - translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) - rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - scale(${isSelected ? 1.25 : this._hoveredNodeIndex === index ? 1.05 : 1})`, - }} + transform: !isDragging + ? `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px) + translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) + rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) + scale(${isSelected ? 1.25 : this._hoveredNodeIndex === index ? 1.05 : 1})` + : 'none', + }} onMouseEnter={() => this.setHoveredNodeIndex(index)}> {this.displayDoc(doc, childScreenToLocal)} {this.renderButtons(doc, this.cardSort)} </div> ); - } - - - ); + }); }; - - render() { - return ( <div className="collectionCardView-outer" @@ -623,5 +623,4 @@ export class CollectionCardView extends CollectionSubView() { </div> ); } - } |