diff options
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.scss | 10 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 93 |
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> ); } |