the lack of pushing is astounding actually

1 files changed, 34 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index b8c0967c1..e972f44f1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -126,6 +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
+
+    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',
+        });
+    });
+
+    // 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>();
     const fieldKey = 'data';