hi

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>
         );
     }
-    
 }