From 3c5b2353cb20843e968e51fdff58cc92f101ed51 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 14 May 2024 02:14:58 -0400 Subject: getting close to done --- .../CollectionFreeFormLayoutEngines.tsx | 26 ++++++++-------------- .../collections/collectionFreeForm/MarqueeView.tsx | 4 ++-- 2 files changed, 11 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index becad63f6..22005eb23 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -126,27 +126,20 @@ export function computeStarburstLayout(poolData: Map, pivotDoc } // export function computeCardDeckLayout(poolData: Map, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { -// console.log('hi'); // const docMap = new Map(); -// 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 +// const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)]; +// const burstScale = NumCast(pivotDoc._starburstDocScale, 1); // 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 - +// const docSize = Math.min(Math.min(400, NumCast(layout._width)), Math.min(400, NumCast(layout._width)) / aspect) * burstScale; +// const deg = (i / childPairs.length) * Math.PI * 2; // docMap.set(layout[Id], { -// x: posX, -// y: posY, +// x: Math.min(burstDiam[0] / 2 - docSize, Math.max(-burstDiam[0] / 2, (Math.cos(deg) * burstDiam[0]) / 2 - docSize / 2)), +// y: Math.min(burstDiam[1] / 2 - docSize * aspect, Math.max(-burstDiam[1] / 2, (Math.sin(deg) * burstDiam[1]) / 2 - (docSize / 2) * aspect)), // width: docSize, // height: docSize * aspect, -// zIndex: baseZIndex + i, -// rotation: rotation, +// zIndex: NumCast(layout.zIndex), // pair: { layout, data }, // replica: '', // color: 'white', @@ -154,9 +147,8 @@ export function computeStarburstLayout(poolData: Map, pivotDoc // transition: 'all 0.3s', // }); // }); - -// 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]); +// const divider = { type: 'div', color: 'transparent', x: -burstDiam[0] / 2, y: -burstDiam[1] / 2, width: 15, height: 15, payload: undefined }; +// return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]); // } export function computePivotLayout(poolData: Map, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 98684ae98..7e7a5c2c6 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -533,7 +533,7 @@ export class MarqueeView extends ObservableReactComponent