diff options
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 277 |
1 files changed, 128 insertions, 149 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 98b4e8ec9..d0a796218 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -12,6 +12,8 @@ import { DocumentView } from '../nodes/DocumentView'; import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; import { Transform } from '../../util/Transform'; +// import Card from 'react-bootstrap/Card'; + @observer export class CollectionCardView extends CollectionSubView() { @@ -53,6 +55,8 @@ export class CollectionCardView extends CollectionSubView() { inactiveDocs = () => { const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); + + return docs.filter(d => !SelectionManager.IsSelected(d)); }; @@ -91,19 +95,18 @@ export class CollectionCardView extends CollectionSubView() { isChildContentActive = () => (this.isContentActive() ? true : false); rotate = (amCards: number, index: number) => { + console.log(amCards + "wtf") const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); - const stepMag = Math.abs(-30 + ((amCards/2)- 1) * (30 / ((amCards - (amCards % 2)) / 2))); + const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2))); // console.log(possRotate + "poss") if (amCards % 2 == 0 && possRotate == 0) { // console.log('whaddup'); - return possRotate + Math.abs(-30 + (index - 1) * (30 / ((amCards) / 2))); - } - - else if (amCards %2 == 0 && index > (amCards+1)/2){ + return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2))); + } else if (amCards % 2 == 0 && index > (amCards + 1) / 2) { // console.log("sup" + stepMag); - + return possRotate + stepMag; } @@ -111,36 +114,30 @@ export class CollectionCardView extends CollectionSubView() { }; translateY = (amCards: number, index: number) => { - const evenOdd =amCards% 2 - const apex = (amCards-evenOdd)/2 - const stepMag = (200 / ((amCards - evenOdd)/2)) - + Math.abs(((apex-index) *25)) - - console.log("steo" + stepMag) - - if (evenOdd == 1 || index < apex -1){ - console.log('hi' + index) - return Math.abs(stepMag * (apex - index)) - } - - else{ - if (index == apex || index == apex -1){ - return 0 + const evenOdd = amCards % 2; + const apex = (amCards - evenOdd) / 2; + const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25); + + console.log('steo' + stepMag); + + if (evenOdd == 1 || index < apex - 1) { + console.log('hi' + index); + return Math.abs(stepMag * (apex - index)); + } else { + if (index == apex || index == apex - 1) { + return 0; } - return Math.abs(stepMag * (apex - index -1)) - + return Math.abs(stepMag * (apex - index - 1)); } - }; translateOverFlowY = (amCards: number, index: number) => { - if (amCards>8 && index > amCards/2){ - return 100 - + if (amCards > 8 && index > amCards / 2) { + return 100; } - return 0 - } + return 0; + }; translateSelected = (index: number): number => { if (this.isSelected(index)) { @@ -161,99 +158,100 @@ export class CollectionCardView extends CollectionSubView() { return 0; }; - @computed get sortedDocs() { - const field = StrCast(this.layoutDoc.sortField); + @computed get sortedDocsType() { + // This field is set to 'type' to sort documents by their type + // const typeField = 'type'; + + // Whether to sort in descending order const desc = BoolCast(this.layoutDoc.sortDesc); - const docs = !field - ? this.childDocs - : [...this.childDocs].sort((docA, docB) => { - const aStr = Field.toString(docA[field] as Field); - const bStr = Field.toString(docB[field] as Field); - var out = 0; - if (aStr < bStr) out = -1; - if (aStr > bStr) out = 1; - if (desc) out *= -1; - return out; - }); + + // Copy and sort documents by type + const docs = this.childLayoutPairs.sort((docA, docB) => { + const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string + const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string + + // Perform a basic string comparison if types are strings + let out = 0; + if (typeA < typeB) out = -1; + if (typeA > typeB) out = 1; + if (desc) out *= -1; // Reverse the sort order if descending is true + return out; + }); + 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 displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { - // return ( - // <DocumentView - // {...this._props} - // ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))} - // Document={childPair.layout} - // TemplateDataDocument={childPair.data} - // // onClickScript={this.toggleIcon} - // //suppressSetHeight={true} - // NativeWidth={returnZero} - // NativeHeight={returnZero} - // layout_fitWidth={returnFalse} - // onDoubleClickScript={this.onChildDoubleClick} - // renderDepth={this._props.renderDepth + 1} - // LayoutTemplate={this._props.childLayoutTemplate} - // LayoutTemplateString={this._props.childLayoutString} - // // focus={this.focus} - // ScreenToLocalTransform={screenToLocalTransform} //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(childPair.layout)} - // /> - // ); - // }; - - // return this.childLayoutPairs.map((childPair, index) => { - // const isSelected = this.isSelected(index); - // const isHovered = this.hoveredNodeIndex === index; - // const isOverflow = amCards > 8 && index > amCards/2 - // const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); - // // const yOffset = this.verticalOffset(index); - - // const childScreenToLocal = () => { - // const dref = this.docRefs.get(childPair.layout); - // 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) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0); - // }; - - // return ( - // <div - // key={childPair.layout[Id]} - // className={`card-item${isSelected ? '-active' : ''}`} - // style={{ - // width: this.panelWidth(), - // height: this.panelHeight(childPair.layout)(), - // transform: ` - // rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) - // translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex) + this.translateOverFlowY(amCards, inactiveIndex)}px) - // translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px) - - // scale(${isSelected ? 1.25 : 1}) - - // `, //scale has to be applied last or selected offset gets messed up - // }} - // // onClick={() => this.setSelectedNodeIndex(index)} + @computed get contentSorted() { + const sortedDocs = this.sortedDocsType.docs; + const amCards = this.inactiveDocs().length; + + const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { + return ( + <DocumentView + {...this._props} + ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))} + Document={childPair.layout} + TemplateDataDocument={childPair.data} + NativeWidth={returnZero} + NativeHeight={returnZero} + layout_fitWidth={returnFalse} + onDoubleClickScript={this.onChildDoubleClick} + renderDepth={this._props.renderDepth + 1} + LayoutTemplate={this._props.childLayoutTemplate} + LayoutTemplateString={this._props.childLayoutString} + ScreenToLocalTransform={screenToLocalTransform} + isContentActive={this.isChildContentActive} + isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} + PanelWidth={this.panelWidth} + PanelHeight={this.panelHeight(childPair.layout)} + /> + ); + }; + + // Map sorted documents to their rendered components + return sortedDocs.map((childPair, index) => { + // const childPair = { layout: doc, data: doc }; + const isSelected = this.isSelected(index); + const isHovered = this.hoveredNodeIndex === index; + const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair); + + - // onMouseEnter={() => this.setHoveredNodeIndex(index)}> - // {/* {this.lol(childPair.data, index)} */} + const childScreenToLocal = () => { + const dref = this.docRefs.get(childPair.layout); + const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv); + return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0); + }; - // {displayDoc(childPair, childScreenToLocal)} - // </div> - // ); - // }); - // } + return ( + <div + key={childPair.layout[Id]} + className={`card-item${isSelected ? '-active' : ''}`} + style={{ + width: this.panelWidth(), + height: this.panelHeight(childPair.layout)(), + transform: ` + rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) + translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px) + translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px) + scale(${isSelected ? 1.25 : 1}) + `, + }} + onMouseEnter={() => this.setHoveredNodeIndex(index)}> + {displayDoc(childPair, childScreenToLocal)} + </div> + ); + }); + } - @action content(amCards: number, startIndex: number, stopIndex: number) { + @computed get content() { // const currentIndex = NumCast(this.layoutDoc._carousel_index); - // const amCards = this.inactiveDocs().length; + const amCards = this.inactiveDocs().length; + console.log(amCards + "lol") + const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents + // const myInactives = const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { return ( @@ -281,13 +279,11 @@ export class CollectionCardView extends CollectionSubView() { ); }; - const inactiveDocs = this.inactiveDocs(); - return this.childLayoutPairs.filter((childPair, index) => { const inactiveIndex = inactiveDocs.indexOf(childPair.layout); return inactiveIndex >= startIndex && inactiveIndex <= stopIndex; - }).map((childPair, index) => { - + return this.childLayoutPairs.map((childPair, index) => { const isSelected = this.isSelected(index); const isHovered = this.hoveredNodeIndex === index; - const isOverflow = amCards > 8 && index > amCards/2 + const isOverflow = amCards > 8 && index > amCards / 2; + // const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair); const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); // const yOffset = this.verticalOffset(index); @@ -307,11 +303,8 @@ export class CollectionCardView extends CollectionSubView() { height: this.panelHeight(childPair.layout)(), transform: ` rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) - translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex) - // + this.translateOverFlowY(amCards, inactiveIndex) - }px) + translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px) translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px) - scale(${isSelected ? 1.25 : 1}) `, //scale has to be applied last or selected offset gets messed up @@ -327,35 +320,9 @@ export class CollectionCardView extends CollectionSubView() { }); } - renderRows() { - const cards = this.inactiveDocs(); - const totalCards = cards.length; - const rowsNeeded = Math.ceil(totalCards / 8); - - let rows = []; - - for (let rowIndex = 0; rowIndex < rowsNeeded; rowIndex++) { - let rowStartIndex = rowIndex * 8; - let rowEndIndex = rowStartIndex + 8; - let rowCards = cards.slice(rowStartIndex, rowEndIndex); - - rows.push(this.renderRowCards(rowCards, rowIndex)); - } - - return rows; - } - - renderRowCards(rowCards: Doc[], rowIndex: number) { - return ( - <div className={`card-row row-${rowIndex}`} key={rowIndex} style = {{transform: `translateY(${rowIndex*60})`}}> - {this.content(rowCards.length, rowIndex*8, rowIndex*8+8)} - </div> - ); - } - @computed get translateWrapperX() { if (this.inactiveDocs().length != this.childLayoutPairs.length) { - return this.panelWidth()/2; + return this.panelWidth() / 2; } return 0; @@ -378,9 +345,21 @@ export class CollectionCardView extends CollectionSubView() { height: `${100 * this.fitContentScale}%`, }} onMouseLeave={() => this.setHoveredNodeIndex(-1)}> - {this.renderRows()} + {this.contentSorted} </div> + {/* <Card className={`custom-modal-position step-${step}`}> + <Card.Header> + {header} + <Button variant="close" className= "tut-close"onClick={store.toggleTutorial} style={{ position: 'absolute', top: 0, right: 0 }} /> + </Card.Header> + <Card.Body>{body} + <Button className= 'next-step' variant="primary" onClick={store.nextStep}>Next Step!</Button> + </Card.Body> + + + </Card> */} + {/* {this.focusContent} */} </div> ); |