working on implementing card logic

7 files changed, 198 insertions, 172 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d12c61fd7..c453fd793 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1219,14 +1219,7 @@ export namespace Docs {
             );
         }
 
-        export function CardDeckDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
-            return InstanceFromProto(
-                Prototypes.get(DocumentType.COL),
-                new List(documents),
-                { backgroundColor: 'transparent', dropAction: dropActionType.move, _forceActive: true, _freeform_noZoom: true, _freeform_noAutoPan: true, ...options, _type_collection: CollectionViewType.Card },
-                id
-            );
-        }
+        
 
         export function LinearDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Linear }, id);
@@ -1244,6 +1237,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Carousel3D });
         }
 
+        export function CardDeckDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
+            return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card});
+        }
+
         export function SchemaDocument(schemaHeaders: SchemaHeaderField[], documents: Array<Doc>, options: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaHeaders: new List(schemaHeaders), ...options, _type_collection: CollectionViewType.Schema });
         }
@@ -1887,6 +1884,7 @@ export namespace DocUtils {
     }
 
     export function spreadCards(docList: Doc[], x: number = 0, y: number = 0, spreadAngle: number = 30, radius: number = 100, create: boolean = true) {
+        console.log('spread cards');
         const totalCards = docList.length;
         const halfSpreadAngle = spreadAngle * 0.5;
         const angleStep = spreadAngle / (totalCards - 1);
@@ -1897,7 +1895,7 @@ export namespace DocUtils {
                 const angle = (-halfSpreadAngle + angleStep * i) * (Math.PI / 180); // Convert degrees to radians
                 d.x = x + Math.cos(angle) * radius;
                 d.y = y + Math.sin(angle) * radius;
-                d.rotation = angle; // Assuming 'd.rotation' sets the rotation, adjust accordingly
+                d.rotation = angle; 
                 d._timecodeToShow = undefined;
             });
         });
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 11f6c82ec..15c3ddad6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -796,7 +796,7 @@ pie title Minerals in my tap water
                     CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.Multicolumn,
                     CollectionViewType.Multirow, CollectionViewType.Time, CollectionViewType.Carousel,
                     CollectionViewType.Carousel3D, CollectionViewType.Linear, CollectionViewType.Map,
-                    CollectionViewType.Grid, CollectionViewType.NoteTaking]),
+                    CollectionViewType.Grid, CollectionViewType.NoteTaking, CollectionViewType.Card]),
               title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script:  'setView(value, _readOnly_)'}},
             { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                             width: 30,  scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}},
             { title: "Header",  icon: "heading",       toolTip: "Doc Titlebar Color",   btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'} },
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/collections/CollectionCardDeckView.scss
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index feb9e61cc..e35f7b421 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -1,164 +1,185 @@
-import { action, computed, IReactionDisposer, makeObservable } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { Utils, emptyFunction, returnFalse, returnZero } from '../../../Utils';
 import { Doc, DocListCast } from '../../../fields/Doc';
-import { ScriptField } from '../../../fields/ScriptField';
-import { NumCast, StrCast } from '../../../fields/Types';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
-import { DocUtils } from '../../documents/Documents';
+import { Id } from '../../../fields/FieldSymbols';
+import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
-import { undoBatch, UndoManager } from '../../util/UndoManager';
-import { OpenWhere } from '../nodes/DocumentView';
-import { computePassLayout, computeStarburstLayout, computeCardDeckLayout } from './collectionFreeForm';
-import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
-import './CollectionPileView.scss';
+import { StyleProp } from '../StyleProvider';
+import { DocumentView } from '../nodes/DocumentView';
+import { FocusViewOptions } from '../nodes/FieldView';
+import './CollectionCarousel3DView.scss';
 import { CollectionSubView } from './CollectionSubView';
-import { dropActionType } from '../../util/DragManager';
-
+const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore
 @observer
 export class CollectionCardView extends CollectionSubView() {
-    _originalChrome: any = '';
-    _disposers: { [name: string]: IReactionDisposer } = {};
-
+    @computed get scrollSpeed() {
+        return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed
+    }
     constructor(props: any) {
         super(props);
         makeObservable(this);
     }
 
-    componentDidMount() {
-        if (this.layoutEngine() !== computePassLayout.name && this.layoutEngine() !== computeCardDeckLayout.name) {
-            this.Document._freeform_cardEngine = computePassLayout.name;
-        }
-        this._originalChrome = this.layoutDoc._chromeHidden;
-        this.layoutDoc._chromeHidden = true;
-    }
+    private _dropDisposer?: DragManager.DragDropDisposer;
+
     componentWillUnmount() {
-        this.layoutDoc._chromeHidden = this._originalChrome; 
-        Object.values(this._disposers).forEach(disposer => disposer?.());
+        this._dropDisposer?.();
     }
 
-    layoutEngine = () => StrCast(this.Document._freeform_cardEngine);
-
-    @undoBatch
-    addCardDoc = (doc: Doc | Doc[]) => {
-        (doc instanceof Doc ? [doc] : doc).map(d => DocUtils.iconify(d));
-        return this._props.addDocument?.(doc) || false;
+    protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
+        this._dropDisposer?.();
+        if (ele) {
+            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
+        }
     };
 
-    @undoBatch
-    removeCardDoc = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => {
-        (doc instanceof Doc ? [doc] : doc).forEach(d => Doc.deiconifyView(d));
-        const ret = this._props.moveDocument?.(doc, targetCollection, addDoc) || false;
-        if (ret && !DocListCast(this.dataDoc[this.fieldKey ?? 'data']).length) this.DocumentView?.()._props.removeDocument?.(this.Document);
-        return ret;
+    centerScale = Number(CAROUSEL3D_CENTER_SCALE);
+    panelWidth = () => this._props.PanelWidth() / 3;
+    panelHeight = () => this._props.PanelHeight() * Number(CAROUSEL3D_SIDE_SCALE);
+    onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
+    isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
+    isChildContentActive = () => (this.isContentActive() ? true : false);
+    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)
+            .scale(1 / this.centerScale);
+
+    focus = (anchor: Doc, options: FocusViewOptions) => {
+        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
+        if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return;
+        options.didMove = true;
+        const target = DocCast(anchor.annotationOn) ?? anchor;
+        const index = docs.indexOf(target);
+        index !== -1 && (this.layoutDoc._carousel_index = index); //if index is not -1, then assign index to this.layoutDoc._carousel_index
+        return undefined;
     };
 
-    @computed get toggleIcon() {
-        return ScriptField.MakeScript('documentView.iconify()', { documentView: 'any' });
-    }
-    @computed get contentEvents() {
-        const isCard = this.layoutEngine() === computeCardDeckLayout.name;
-        return this._props.isContentActive() && isCard ? undefined : 'none';
+    
+    @computed get content() {
+        const currentIndex = NumCast(this.layoutDoc._carousel_index);
+        const displayDoc = (childPair: { layout: Doc; data: Doc }) => {
+            return (
+                <DocumentView
+                    {...this._props}
+                    Document={childPair.layout}
+                    TemplateDataDocument={childPair.data}
+                    //suppressSetHeight={true}
+                    NativeWidth={returnZero}
+                    NativeHeight={returnZero}
+                    layout_fitWidth={undefined}
+                    onDoubleClickScript={this.onChildDoubleClick}
+                    renderDepth={this._props.renderDepth + 1}
+                    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 
+                    isContentActive={this.isChildContentActive}
+                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+                    PanelWidth={this.panelWidth}
+                    PanelHeight={this.panelHeight}
+                />
+            );
+        };
+
+        return this.childLayoutPairs.map((childPair, index) => {
+            return (
+                <div key={childPair.layout[Id]} className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} style={{ width: this.panelWidth() }}>
+                    {displayDoc(childPair)}
+                </div>
+            );
+        });
     }
 
-    // returns the contents of the cardSpread in a CollectionFreeFormView
-    @computed get contents() {
+    changeSlide = (direction: number) => {
+        SelectionManager.DeselectAll();
+        this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+    };
+
+    onArrowClick = (direction: number) => {
+        this.changeSlide(direction);
+        !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction === 1 ? 'fwd' : 'back'); // while autoscroll is on, keep the other autoscroll button hidden
+        !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on
+    };
+
+    interval?: number;
+    startAutoScroll = (direction: number) => {
+        this.interval = window.setInterval(() => {
+            this.changeSlide(direction);
+        }, this.scrollSpeed);
+    };
+
+    stopAutoScroll = () => {
+        window.clearInterval(this.interval);
+        this.interval = undefined;
+        this.fadeScrollButton();
+    };
+
+    toggleAutoScroll = (direction: number) => {
+        this.layoutDoc.autoScrollOn = this.layoutDoc.autoScrollOn ? false : true;
+        this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll();
+    };
+
+    fadeScrollButton = () => {
+        window.setTimeout(() => {
+            !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = 'none'); //fade away after 1.5s if it's not clicked.
+        }, 1500);
+    };
+
+    @computed get buttons() {
         return (
-            <div className="collectionPileView-innards" style={{ pointerEvents: this.contentEvents }}>
-                <CollectionFreeFormView
-                    {...this._props} //
-                    layoutEngine={this.layoutEngine}
-                    addDocument={this.addCardDoc}
-                    moveDocument={this.removeCardDoc}
-                    // pile children never have their contents active, but will be document active whenever the entire pile is.
-                    childContentsActive={returnFalse}
-                    childDocumentsActive={this._props.isDocumentActive}
-                    childDragAction={dropActionType.move}
-                    childClickScript={this.toggleIcon}
-                />
+            <div className="arrow-buttons">
+                <div title="click to go back" key="back" className="carousel3DView-back" onClick={e => this.onArrowClick(-1)} />
+                <div title="click to advance" key="fwd" className="carousel3DView-fwd" onClick={e => this.onArrowClick(1)} />
+                {/* {this.autoScrollButton} */}
             </div>
         );
     }
 
-    // // toggles the pileup between starburst to compact
-    // toggleStarburst = action(() => {
-    //     this.layoutDoc._freeform_scale = undefined;
-    //     if (this.layoutEngine() === computeStarburstLayout.name) {
-    //         if (NumCast(this.layoutDoc._width) !== NumCast(this.Document._starburstDiameter, 500)) {
-    //             this.Document._starburstDiameter = NumCast(this.layoutDoc._width);
-    //         }
-    //         const defaultSize = 110;
-    //         this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - NumCast(this.layoutDoc._freeform_pileWidth, defaultSize) / 2;
-    //         this.Document.y = NumCast(this.Document.y) + NumCast(this.layoutDoc._height) / 2 - NumCast(this.layoutDoc._freeform_pileHeight, defaultSize) / 2;
-    //         this.layoutDoc._width = NumCast(this.layoutDoc._freeform_pileWidth, defaultSize);
-    //         this.layoutDoc._height = NumCast(this.layoutDoc._freeform_pileHeight, defaultSize);
-    //         DocUtils.pileup(this.childDocs, undefined, undefined, NumCast(this.layoutDoc._width) / 2, false);
-    //         this.layoutDoc._freeform_panX = 0;
-    //         this.layoutDoc._freeform_panY = -10;
-    //         this.Document._freeform_pileEngine = computePassLayout.name;
-    //     } else {
-    //         const defaultSize = NumCast(this.Document._starburstDiameter, 400);
-    //         this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - defaultSize / 2;
-    //         this.Document.y = NumCast(this.Document.y) + NumCast(this.layoutDoc._height) / 2 - defaultSize / 2;
-    //         this.layoutDoc._freeform_pileWidth = NumCast(this.layoutDoc._width);
-    //         this.layoutDoc._freeform_pileHeight = NumCast(this.layoutDoc._height);
-    //         this.layoutDoc._freeform_panX = this.layoutDoc._freeform_panY = 0;
-    //         this.layoutDoc._width = this.layoutDoc._height = defaultSize;
-    //         this.layoutDoc.background;
-    //         this.Document._freeform_pileEngine = computeStarburstLayout.name;
-    //     }
-    // });
-
-    // for dragging documents out of the pileup view
-    _undoBatch: UndoManager.Batch | undefined;
-    pointerDown = (e: React.PointerEvent) => {
-        let dist = 0;
-        setupMoveUpEvents(
-            this,
-            e,
-            (e: PointerEvent, down: number[], delta: number[]) => {
-                if (this.layoutEngine() === 'pass' && this.childDocs.length && e.shiftKey) {
-                    dist += Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]);
-                    if (dist > 100) {
-                        if (!this._undoBatch) {
-                            this._undoBatch = UndoManager.StartBatch('layout pile');
-                        }
-                        const doc = this.childDocs[0];
-                        doc.x = e.clientX;
-                        doc.y = e.clientY;
-                        this._props.addDocTab(doc, OpenWhere.inParentFromScreen) && (this._props.removeDocument?.(doc) || false);
-                        dist = 0;
-                    }
-                }
-                return false;
-            },
-            () => {
-                this._undoBatch?.end();
-                this._undoBatch = undefined;
-            },
-            emptyFunction,
-            e.shiftKey && this.layoutEngine() === computePassLayout.name,
-            this.layoutEngine() === computePassLayout.name && e.shiftKey
-        ); // this sets _doubleTap
-    };
+    @computed get autoScrollButton() {
+        const whichButton = this.layoutDoc.showScrollButton;
+        return (
+            <>
+                <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}>
+                    {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-left'} size={'1x'} />}
+                </div>
+                <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}>
+                    {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-right'} size={'1x'} />}
+                </div>
+            </>
+        );
+    }
 
-    // onClick for toggling the pileup view
-    // @undoBatch
-    // onClick = (e: React.MouseEvent) => {
-    //     if (e.button === 0) {
-    //         SelectionManager.DeselectAll();
-    //         this.toggleStarburst();
-    //         e.stopPropagation();
-    //     }
-    // };
+    @computed get dots() {
+        return this.childLayoutPairs.map((_child, index) => <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._carousel_index) ? '-active' : ''}`} onClick={() => (this.layoutDoc._carousel_index = index)} />);
+    }
+    @computed get translateX() {
+        const index = NumCast(this.layoutDoc._carousel_index);
+        return this.panelWidth() * (1 - index);
+    }
 
     render() {
         return (
-            <div className={`collectionPileView`} 
-            // onClick={this.onClick} 
-            onPointerDown={this.pointerDown} style={{ width: this._props.PanelWidth(), height: '100%' }}>
-                {this.contents}
+            <div
+                className="collectionCarousel3DView-outer"
+                ref={this.createDashEventsTarget}
+                style={{
+                    background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
+                    color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
+                }}>
+                <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}>
+                    {this.content}
+                </div>
+                {this.buttons}
+                <div className="dot-bar">{this.dots}</div>
             </div>
         );
     }
+
+
 }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 8729ef549..9d135eb3b 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -319,6 +319,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
                 return this._freeform_commands;
             case CollectionViewType.Carousel3D:
                 return this._freeform_commands;
+            case CollectionViewType.Card:
+                return this._freeform_commands;
+            
+            
         }
     }
     private _commandRef = React.createRef<HTMLInputElement>();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index e972f44f1..b3ae382e3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -126,39 +126,40 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
     return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
 }
 
-export function computeCardDeckLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
-    const docMap = new Map<string, PoolData>();
-    const spreadWidth = Math.min(panelDim[0], childPairs.length * 50); // Total width of the spread
-    const startX = -(spreadWidth / 2); // Starting X position
-    const fanAngle = 5; // Angle in degrees for fanning out cards
-    const baseZIndex = 1000; // Base Z-index to ensure cards are stacked in order
+// export function computeCardDeckLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
+//     console.log('hi');
+//     const docMap = new Map<string, PoolData>();
+//     const spreadWidth = Math.min(panelDim[0], childPairs.length * 50); // Total width of the spread
+//     const startX = -(spreadWidth / 2); // Starting X position
+//     const fanAngle = 5; // Angle in degrees for fanning out cards
+//     const baseZIndex = 1000; // Base Z-index to ensure cards are stacked in order
 
-    childPairs.forEach(({ layout, data }, i) => {
-        const aspect = NumCast(layout._height) / NumCast(layout._width);
-        const docSize = Math.min(400, NumCast(layout._width)) * NumCast(pivotDoc._starburstDocScale, 1);
-        const posX = startX + (spreadWidth / childPairs.length) * i;
-        const posY = 0; // Adjust if you want to change the vertical alignment
-        const rotation = (i - (childPairs.length / 2)) * fanAngle; // Calculate rotation for fanning effect
+//     childPairs.forEach(({ layout, data }, i) => {
+//         const aspect = NumCast(layout._height) / NumCast(layout._width);
+//         const docSize = Math.min(400, NumCast(layout._width)) * NumCast(pivotDoc._starburstDocScale, 1);
+//         const posX = startX + (spreadWidth / childPairs.length) * i;
+//         const posY = 0; // Adjust if you want to change the vertical alignment
+//         const rotation = (i - (childPairs.length / 2)) * fanAngle; // Calculate rotation for fanning effect
 
-        docMap.set(layout[Id], {
-            x: posX,
-            y: posY,
-            width: docSize,
-            height: docSize * aspect,
-            zIndex: baseZIndex + i, // Increment Z-index for each card to stack them correctly
-            rotation: rotation, // Optional: Add this if you want to rotate elements for a fanned effect
-            pair: { layout, data },
-            replica: '',
-            color: 'white',
-            backgroundColor: 'white',
-            transition: 'all 0.3s',
-        });
-    });
+//         docMap.set(layout[Id], {
+//             x: posX,
+//             y: posY,
+//             width: docSize,
+//             height: docSize * aspect,
+//             zIndex: baseZIndex + i,
+//             rotation: rotation,
+//             pair: { layout, data },
+//             replica: '',
+//             color: 'white',
+//             backgroundColor: 'white',
+//             transition: 'all 0.3s',
+//         });
+//     });
 
-    // This is a placeholder for the divider object and may need to be adjusted based on actual usage
-    const divider = { type: 'div', color: 'transparent', x: -panelDim[0] / 2, y: -panelDim[1] / 2, width: 15, height: 15, payload: undefined };
-    return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
-}
+//     // This is a placeholder for the divider object and may need to be adjusted based on actual usage
+//     const divider = { type: 'div', color: 'transparent', x: -panelDim[0] / 2, y: -panelDim[1] / 2, width: 15, height: 15, payload: undefined };
+//     return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
+// }
 
 export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
     const docMap = new Map<string, PoolData>();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f9fe306fa..10b849dab 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -49,7 +49,9 @@ import { CollectionSubView } from '../CollectionSubView';
 import { TreeViewType } from '../CollectionTreeView';
 import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid';
 import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI';
-import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult, computeCardDeckLayout } from './CollectionFreeFormLayoutEngines';
+import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult,
+    //  computeCardDeckLayout 
+    } from './CollectionFreeFormLayoutEngines';
 import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannableContents';
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
@@ -1383,7 +1385,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             case computeTimelineLayout.name:  return { newPool, computedElementData: this.doEngineLayout(newPool, computeTimelineLayout) };
             case computePivotLayout.name:     return { newPool, computedElementData: this.doEngineLayout(newPool, computePivotLayout) };
             case computeStarburstLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeStarburstLayout) };
-            case computeCardDeckLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeCardDeckLayout) };
+            // case computeCardDeckLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeCardDeckLayout) };
 
         }
         return { newPool, computedElementData: this.doFreeformLayout(newPool) };