transformation fixes for cardDeckView

2 files changed, 39 insertions, 64 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index 95a9b658c..ebd7f9856 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -10,20 +10,16 @@
 .card-wrapper {
     display: flex;
     position: absolute;
-    top: $CAROUSEL3D_TOP * 1%;
-    height: ($CAROUSEL3D_SIDE_SCALE * 100) * 1%;
     align-items: center;
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
-.card-item-active, .card-item{
+.card-item-active,
+.card-item {
     transition: transform 0.3s ease-in-out;
 }
 
-
-.card-item-active{
+.card-item-active {
     position: absolute;
     z-index: 100;
 }
-
-
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 66729d64b..e923f9a72 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -1,7 +1,7 @@
 import { ObservableMap, action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Utils, returnZero } from '../../../Utils';
+import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
 import { Doc, DocListCast, Field } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { NumCast, ScriptCast, StrCast, BoolCast } from '../../../fields/Types';
@@ -12,7 +12,6 @@ import { DocumentView } from '../nodes/DocumentView';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { Transform } from '../../util/Transform';
-import { indexes } from 'd3';
 
 @observer
 export class CollectionCardView extends CollectionSubView() {
@@ -22,8 +21,8 @@ export class CollectionCardView extends CollectionSubView() {
 
     @action
     setHoveredNodeIndex = (index: number) => {
-        if (!this.isSelected(index)){
-        this.hoveredNodeIndex = index;
+        if (!this.isSelected(index)) {
+            this.hoveredNodeIndex = index;
         }
     };
 
@@ -55,21 +54,10 @@ export class CollectionCardView extends CollectionSubView() {
         const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
 
         return docs.filter(d => !SelectionManager.IsSelected(d));
-    }
+    };
 
     middleIndex = Math.floor(this.inactiveDocs().length / 2);
 
-
-    // verticalOffset = (index: number) => {
-
-    //     const distanceFromMiddle = Math.abs(index - this.middleIndex);
-    //     // Adjust '4' to control the curvature; larger values create a flatter arc.
-    //     return Math.pow(distanceFromMiddle, 2)* (Math.floor(64/this.inactiveDocs().length)); // Example quadratic function
-    //   };
-
-
-
-
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -89,13 +77,19 @@ export class CollectionCardView extends CollectionSubView() {
         }
     };
 
-    panelWidth = () => this._props.PanelWidth() / this.childLayoutPairs.length;
-    panelHeight = () => this.panelWidth() * 1.5;
+    childDocumentWidth = 600; // target width of a Doc...
+    /**
+     * how much to scale down the contents of the view so that everything will fit
+     */
+    @computed get fitContentScale() {
+        return (this.childDocumentWidth * this.childLayoutPairs.length) / this._props.PanelWidth();
+    }
+    panelWidth = () => this.childDocumentWidth;
+    panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width);
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
-
     rotate = (amCards: number, index: number) => {
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
 
@@ -119,23 +113,22 @@ export class CollectionCardView extends CollectionSubView() {
     //     }
     // };
 
-
     translateSelected = (index: number): number => {
-        if (this.isSelected(index)){
+        if (this.isSelected(index)) {
             const middleOfPanel = this._props.PanelWidth() / 2;
             const scaledNodeWidth = this.panelWidth() * 1.25;
-            
+
             // Calculate the position of the node's left edge before scaling
             const nodeLeftEdge = index * this.panelWidth();
             // Find the center of the node after scaling
-            const scaledNodeCenter = nodeLeftEdge + (scaledNodeWidth / 2);
-            
+            const scaledNodeCenter = nodeLeftEdge + scaledNodeWidth / 2;
+
             // Calculate the translation needed to align the scaled node's center with the panel's center
             const translation = middleOfPanel - scaledNodeCenter;
-    
+
             return translation;
         }
-    
+
         return 0;
     };
 
@@ -156,14 +149,12 @@ export class CollectionCardView extends CollectionSubView() {
         return { docs };
     }
 
-
-
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
     @computed get content() {
         // const currentIndex = NumCast(this.layoutDoc._carousel_index);
         const amCards = this.inactiveDocs().length;
-        // const myInactives = 
+        // const myInactives =
         const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
             return (
                 <DocumentView
@@ -175,7 +166,7 @@ export class CollectionCardView extends CollectionSubView() {
                     //suppressSetHeight={true}
                     NativeWidth={returnZero}
                     NativeHeight={returnZero}
-                    layout_fitWidth={undefined}
+                    layout_fitWidth={returnFalse}
                     onDoubleClickScript={this.onChildDoubleClick}
                     renderDepth={this._props.renderDepth + 1}
                     LayoutTemplate={this._props.childLayoutTemplate}
@@ -185,7 +176,7 @@ export class CollectionCardView extends CollectionSubView() {
                     isContentActive={this.isChildContentActive}
                     isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
                     PanelWidth={this.panelWidth}
-                    PanelHeight={this.panelHeight}
+                    PanelHeight={this.panelHeight(childPair.layout)}
                 />
             );
         };
@@ -196,12 +187,11 @@ export class CollectionCardView extends CollectionSubView() {
             const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
             // const yOffset = this.verticalOffset(index);
 
-
             const childScreenToLocal = () => {
                 const dref = this.docRefs.get(childPair.layout);
-                const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv);
+                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
                 // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-                return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(1 / (isSelected ? 1.25 : 1)).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
             };
 
             return (
@@ -210,28 +200,19 @@ export class CollectionCardView extends CollectionSubView() {
                     className={`card-item${isSelected ? '-active' : ''}`}
                     style={{
                         width: this.panelWidth(),
-                        height: this.panelHeight(),
-                        transform: 
-                            `
+                        height: this.panelHeight(childPair.layout)(),
+                        transform: `
                             rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
                             translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 : 0}px)
-                            translateX(${isSelected ? ((this._props.PanelWidth() / 2) - ((this.panelWidth())/2) - (this.panelWidth()/2)) : 0}px)
+                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth / 2 : 0}px)
 
                             scale(${isSelected ? 1.25 : 1})
                             
-                            ` //scale has to be applied last or selected offset gets messed up
-
-                    ,
+                            `, //scale has to be applied last or selected offset gets messed up
                     }}
-
-
-
-
-
                     // onClick={() => this.setSelectedNodeIndex(index)}
 
-                    onMouseEnter={() => this.setHoveredNodeIndex(index)}
-                    >
+                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
                     {/* {this.lol(childPair.data, index)} */}
 
                     {displayDoc(childPair, childScreenToLocal)}
@@ -241,9 +222,8 @@ export class CollectionCardView extends CollectionSubView() {
     }
 
     @computed get translateWrapperX() {
-
-        if (this.inactiveDocs().length != this.childLayoutPairs.length){
-            return this.panelWidth()/2
+        if (this.inactiveDocs().length != this.childLayoutPairs.length) {
+            return this.panelWidth();
         }
 
         return 0;
@@ -260,17 +240,16 @@ export class CollectionCardView extends CollectionSubView() {
                 }}>
                 <div
                     className="card-wrapper"
-                    style={{ transform: `translateX(${this.translateWrapperX}px)`,
-                    //  height: this.panelHeight() 
+                    style={{
+                        transform: ` scale(${1 / this.fitContentScale})`,
+                        transformOrigin: 'top left',
+                        height: `${100 * this.fitContentScale}%`,
                     }}
-                    onMouseLeave={() => this.setHoveredNodeIndex(-1)}
-                >
+                    onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
                     {this.content}
                 </div>
 
                 {/* {this.focusContent} */}
-
-
             </div>
         );
     }