From d3383640a8007a15e0deb47715e203508c4fd64a Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Tue, 19 Mar 2024 16:21:34 -0400 Subject: working on implementing card logic --- src/client/views/collections/CollectionCardDeckView.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/client/views/collections/CollectionCardDeckView.scss (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss new file mode 100644 index 000000000..e69de29bb -- cgit v1.2.3-70-g09d2 From 568d196c15c44f89388985c267d4ffe6c2e28a7b Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Wed, 20 Mar 2024 14:14:02 -0400 Subject: figuring out how to find the doc wrapper thing --- .../views/collections/CollectionCardDeckView.scss | 19 ++++ .../views/collections/CollectionCardDeckView.tsx | 114 ++++++++++++++------- 2 files changed, 96 insertions(+), 37 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index e69de29bb..b6d9ca202 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -0,0 +1,19 @@ +@import '../global/globalCssVariables.module.scss'; + +.collectionCardView-outer { + height: 100%; + position: relative; + background-color: white; + overflow: hidden; +} + +.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); +} + + diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 778280215..3b3c4a764 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -12,36 +12,69 @@ import { SelectionManager } from '../../util/SelectionManager'; import { StyleProp } from '../StyleProvider'; import { DocumentView } from '../nodes/DocumentView'; import { FocusViewOptions } from '../nodes/FieldView'; -import './CollectionCarousel3DView.scss'; +import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; import { ScriptField } from '../../../fields/ScriptField'; +import { lengthToDegrees } from '@turf/turf'; -const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore @observer export class CollectionCardView extends CollectionSubView() { - // @computed get scrollSpeed() { - // return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed - // } + + @observable selectedNodeIndex = -1; + + @observable hoveredNodeIndex = -1; + + @action + setHoveredNodeIndex = (index : number) => { + this.hoveredNodeIndex = index; + } - selectedNodeIndex = observable.box(-1); // -1 indicates no selection + translateHover = (index : number) => { + if (this.hoveredNodeIndex == index){ + return -50; + } + return 0; + } + + @action setSelectedNodeIndex = (index: number) => { - console.log('hi'); - SelectionManager.DeselectAll(); - this.selectedNodeIndex.set(index); + + const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); + console.log("goodnight") + + if (SelectionManager.IsSelected(docs[index])){ + console.log("good mornings") + this.setSelectedNodeIndex(index); + } }; - @computed - get rotationDegree() { - return this.isChildContentActive() ? 30 : 0; // Rotate by 30 degrees if selected, otherwise no rotation -} + + isSelected = (index : number) => { + const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); + + return SelectionManager.IsSelected(docs[index]) + + } + + // @computed + // rotationDegree = (index : number) => { + // const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); + + // if (SelectionManager.IsSelected(docs[index])){ + // return 30; + // } + + // return 0; + // } constructor(props: any) { super(props); makeObservable(this); + // this.rotationDegree(7); } private _dropDisposer?: DragManager.DragDropDisposer; @@ -57,11 +90,10 @@ export class CollectionCardView extends CollectionSubView() { } }; - centerScale = Number(CAROUSEL3D_CENTER_SCALE); panelWidth = () => (this._props.PanelWidth()) / this.childLayoutPairs.length; panelHeight = () => this.panelWidth() * 1.5; onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); - onChildClick = () => ScriptCast(this.rotate(3, 3)); + // onChildClick = () => ScriptCast(this.rotate(3, 3)); isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => (this.isContentActive() ? true : false); @@ -75,15 +107,15 @@ export class CollectionCardView extends CollectionSubView() { //literally doesnot do anythin - focus = (anchor: Doc, options: FocusViewOptions) => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return; - options.didMove = true; - const target = DocCast(anchor.annotationOn) ?? anchor; - const index = docs.indexOf(target); - index !== -1 && (this.layoutDoc._carousel_index = index); //if index is not -1, then assign index to this.layoutDoc._carousel_index - return undefined; - }; + // focus = (anchor: Doc, options: FocusViewOptions) => { + // const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); + // if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return; + // options.didMove = true; + // const target = DocCast(anchor.annotationOn) ?? anchor; + // const index = docs.indexOf(target); + // index !== -1 && (this.layoutDoc._carousel_index = index); //if index is not -1, then assign index to this.layoutDoc._carousel_index + // return undefined; + // }; rotate = (amCards: number, index: number) => { @@ -128,7 +160,7 @@ export class CollectionCardView extends CollectionSubView() { renderDepth={this._props.renderDepth + 1} LayoutTemplate={this._props.childLayoutTemplate} LayoutTemplateString={this._props.childLayoutString} - focus={this.focus} + // focus={this.focus} ScreenToLocalTransform={this.childScreenToLocal} //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} @@ -140,20 +172,29 @@ export class CollectionCardView extends CollectionSubView() { return this.childLayoutPairs.map((childPair, index) => { - const isSelected = this.selectedNodeIndex.get() === index; - const rotationDegree = isSelected ? 30 : 0; // Rotate selected node by 5 degrees, for example - + const isSelected = this.isSelected(index); + console.log(index + "is select?: " + isSelected); + const isHovered = this.hoveredNodeIndex === index; return (
this.setSelectedNodeIndex(index)} + + + // onClick={() => this.setSelectedNodeIndex(index)} + + onMouseEnter={() => this.setHoveredNodeIndex(index)} + onMouseLeave={() => this.setHoveredNodeIndex(-1)} @@ -182,19 +223,18 @@ export class CollectionCardView extends CollectionSubView() { render() { return (
-
{this.content}
- {/* {this.buttons} -
{this.dots}
*/}
); } -- cgit v1.2.3-70-g09d2 From e15b5873b429e9a01cf92a471748d8ee123461ef Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Thu, 21 Mar 2024 03:29:26 -0400 Subject: . --- .../views/collections/CollectionCardDeckView.scss | 10 ++ .../views/collections/CollectionCardDeckView.tsx | 110 ++++++++++++--------- 2 files changed, 71 insertions(+), 49 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index b6d9ca202..95a9b658c 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -16,4 +16,14 @@ transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } +.card-item-active, .card-item{ + transition: transform 0.3s ease-in-out; +} + + +.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 460f74a61..a4d0d1862 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -12,6 +12,7 @@ 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() { @@ -21,11 +22,13 @@ export class CollectionCardView extends CollectionSubView() { @action setHoveredNodeIndex = (index: number) => { + if (!this.isSelected(index)){ this.hoveredNodeIndex = index; + } }; - translateHover = (index: number) => { - if (this.hoveredNodeIndex == index) { + translateHover = (index: number): number => { + if (this.hoveredNodeIndex == index && !this.isSelected(index)) { return -50; } return 0; @@ -42,22 +45,17 @@ export class CollectionCardView extends CollectionSubView() { } }; - isSelected = (index: number) => { + isSelected = (index: number): boolean => { const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); return SelectionManager.IsSelected(docs[index]); }; - // @computed - // rotationDegree = (index : number) => { - // const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - - // if (SelectionManager.IsSelected(docs[index])){ - // return 30; - // } + inactiveDocs = () => { + const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - // return 0; - // } + return docs.filter(d => !SelectionManager.IsSelected(d)); + } constructor(props: any) { super(props); @@ -81,28 +79,9 @@ export class CollectionCardView extends CollectionSubView() { panelWidth = () => this._props.PanelWidth() / this.childLayoutPairs.length; panelHeight = () => this.panelWidth() * 1.5; onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); - // onChildClick = () => ScriptCast(this.rotate(3, 3)); isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => (this.isContentActive() ? true : false); - //thid needs to be fixed - childScreenToLocal = () => - this._props // document's left is the panel shifted by the doc's index * panelWidth/#docs. But it scales by centerScale around its center, so it's left moves left by the distance of the left from the center (panelwidth/2) * the scale delta (centerScale-1) - .ScreenToLocalTransform() // the top behaves the same way ecept it's shifted by the 'top' amount specified for the panel in css and then by the scale factor. - // .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2,-((Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2) - .rotate(this.rotate(this.childLayoutPairs.length, Number(this.layoutDoc._carousel_index))); - // .scale(1 / this.centerScale); - - //literally doesnot do anythin - // focus = (anchor: Doc, options: FocusViewOptions) => { - // const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - // if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return; - // options.didMove = true; - // const target = DocCast(anchor.annotationOn) ?? anchor; - // const index = docs.indexOf(target); - // index !== -1 && (this.layoutDoc._carousel_index = index); //if index is not -1, then assign index to this.layoutDoc._carousel_index - // return undefined; - // }; rotate = (amCards: number, index: number) => { const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); @@ -126,11 +105,33 @@ export class CollectionCardView extends CollectionSubView() { // return -((50 / ((amCards - (amCards % 2)) / 2)) * (amCards - index - 1)); // } // }; + + + translateSelected = (index: number): number => { + 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); + + // Calculate the translation needed to align the scaled node's center with the panel's center + const translation = middleOfPanel - scaledNodeCenter; + + return translation; + } + + return 0; + }; + @observable docRefs = new ObservableMap(); @computed get content() { // const currentIndex = NumCast(this.layoutDoc._carousel_index); - const amCards = this.childLayoutPairs.length; + const amCards = this.inactiveDocs().length; + // const myInactives = const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { return ( { const isSelected = this.isSelected(index); - console.log(index + 'is select?: ' + isSelected); const isHovered = this.hoveredNodeIndex === index; + const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); const childScreenToLocal = () => { const dref = this.docRefs.get(childPair.layout); const { translateX, translateY } = 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, index) : 0); + 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 (
this.setSelectedNodeIndex(index)} onMouseEnter={() => this.setHoveredNodeIndex(index)} - onMouseLeave={() => this.setHoveredNodeIndex(-1)}> + > {/* {this.lol(childPair.data, index)} */} {displayDoc(childPair, childScreenToLocal)} @@ -193,16 +201,13 @@ export class CollectionCardView extends CollectionSubView() { }); } - // lol = (d : Doc, index: number) => { - // if (SelectionManager.IsSelected(d)){ - // this.setSelectedNodeIndex(index); + @computed get translateWrapperX() { - // } - // } + if (this.inactiveDocs().length != this.childLayoutPairs.length){ + return this.panelWidth()/2 + } - @computed get translateX() { - const index = NumCast(this.layoutDoc._carousel_index); - return this.panelWidth() * (1 - index); + return 0; } render() { @@ -216,10 +221,17 @@ export class CollectionCardView extends CollectionSubView() { }}>
this.setHoveredNodeIndex(-1)} > {this.content}
+ + {/* {this.focusContent} */} + +
); } -- cgit v1.2.3-70-g09d2 From 268c4487aab34c8bef51df87953d83b968864fc4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 21 Mar 2024 11:10:16 -0400 Subject: transformation fixes for cardDeckView --- .../views/collections/CollectionCardDeckView.scss | 10 +-- .../views/collections/CollectionCardDeckView.tsx | 93 +++++++++------------- 2 files changed, 39 insertions(+), 64 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') 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(); @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 ( ); }; @@ -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() { }}>
this.setHoveredNodeIndex(-1)} - > + onMouseLeave={() => this.setHoveredNodeIndex(-1)}> {this.content}
{/* {this.focusContent} */} - -
); } -- cgit v1.2.3-70-g09d2 From 276250446b4ad0f86a43a6773d2fff83e8bcaa49 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Thu, 4 Apr 2024 04:22:37 -0400 Subject: fixed weird centering, finally got the y positioning working, and am (unsuccesfully) working on creating rows --- .../views/collections/CollectionCardDeckView.scss | 9 ++ .../views/collections/CollectionCardDeckView.tsx | 174 ++++++++++++++++++--- 2 files changed, 162 insertions(+), 21 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index ebd7f9856..ff9c0a569 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -14,6 +14,15 @@ transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } +.card-row{ + display: flex; + position: absolute; + align-items: center; + transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); + + +} + .card-item-active, .card-item { transition: transform 0.3s ease-in-out; diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index b636b878e..98b4e8ec9 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -92,26 +92,55 @@ export class CollectionCardView extends CollectionSubView() { rotate = (amCards: number, index: number) => { const possRotate = -30 + index * (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 - 1) / 2))); + // console.log('whaddup'); + 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; } return possRotate; }; - // translateY = (amCards: number, index: number) => { - // // Assuming you want a default value when index > amCards/2 - // // Adjust the logic as necessary for your use case - // if (index <= amCards / 2) { - // return -((50 / ((amCards - (amCards % 2)) / 2)) * index); - // } else { - // // Return a default or calculated value for indices greater than amCards/2 - // // This is just an example; adjust the logic as needed - // return -((50 / ((amCards - (amCards % 2)) / 2)) * (amCards - index - 1)); - // } - // }; + 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 + } + + return Math.abs(stepMag * (apex - index -1)) + + } + + }; + + translateOverFlowY = (amCards: number, index: number) => { + if (amCards>8 && index > amCards/2){ + return 100 + + } + return 0 + } translateSelected = (index: number): number => { if (this.isSelected(index)) { @@ -151,9 +180,80 @@ export class CollectionCardView extends CollectionSubView() { @observable docRefs = new ObservableMap(); - @computed get content() { + // @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 ( + // 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 ( + //
this.setSelectedNodeIndex(index)} + + // onMouseEnter={() => this.setHoveredNodeIndex(index)}> + // {/* {this.lol(childPair.data, index)} */} + + // {displayDoc(childPair, childScreenToLocal)} + //
+ // ); + // }); + // } + + @action content(amCards: number, startIndex: number, stopIndex: number) { // const currentIndex = NumCast(this.layoutDoc._carousel_index); - const amCards = this.inactiveDocs().length; + // const amCards = this.inactiveDocs().length; // const myInactives = const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { return ( @@ -181,9 +281,13 @@ export class CollectionCardView extends CollectionSubView() { ); }; - return this.childLayoutPairs.map((childPair, index) => { + const inactiveDocs = this.inactiveDocs(); + return this.childLayoutPairs.filter((childPair, index) => { const inactiveIndex = inactiveDocs.indexOf(childPair.layout); return inactiveIndex >= startIndex && inactiveIndex <= stopIndex; + }).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); @@ -203,8 +307,10 @@ 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 : 0}px) - translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth / 2 : 0}px) + 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}) @@ -221,9 +327,35 @@ 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 ( +
+ {this.content(rowCards.length, rowIndex*8, rowIndex*8+8)} +
+ ); + } + @computed get translateWrapperX() { if (this.inactiveDocs().length != this.childLayoutPairs.length) { - return this.panelWidth(); + return this.panelWidth()/2; } return 0; @@ -241,12 +373,12 @@ export class CollectionCardView extends CollectionSubView() {
this.setHoveredNodeIndex(-1)}> - {this.content} + {this.renderRows()}
{/* {this.focusContent} */} -- cgit v1.2.3-70-g09d2 From 4429a0565888d9118e37f1e58dec300220831661 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Sat, 11 May 2024 22:30:39 -0400 Subject: transformations are being unbelieveably silly rn --- src/client/documents/Documents.ts | 7 +- src/client/util/CurrentUserUtils.ts | 8 +- .../views/collections/CollectionCardDeckView.scss | 31 +- .../views/collections/CollectionCardDeckView.tsx | 417 ++++++++++++++------- src/client/views/global/globalScripts.ts | 15 +- 5 files changed, 316 insertions(+), 162 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1c57c5d63..77cc5f51e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -499,9 +499,10 @@ export class DocumentOptions { userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)'); userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); - card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); - card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); - card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); + cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); + // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); + // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); + // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 88fcf098b..767d6c635 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -713,9 +713,11 @@ pie title Minerals in my tap water } static cardTools(): Button[] { return [ - { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ClickButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ClickButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ClickButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + ] } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index ff9c0a569..aafc3b556 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -2,26 +2,43 @@ .collectionCardView-outer { height: 100%; + width: 100%; position: relative; background-color: white; overflow: hidden; } .card-wrapper { - display: flex; + display: grid; + grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */ + // width: 100%; + position: absolute; align-items: center; + justify-items: center; + justify-content: center; + transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } -.card-row{ - display: flex; - position: absolute; - align-items: center; - transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); +// .card-wrapper::after { +// content: ""; +// width: 100%; /* Forces wrapping */ +// } +// .card-wrapper > .card-item:nth-child(10n)::after { +// content: ""; +// width: 100%; /* Forces wrapping after every 10th item */ +// } -} +// .card-row{ +// display: flex; +// position: absolute; +// align-items: center; +// transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); + + +// } .card-item-active, .card-item { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index ab7aac267..bda72b2d6 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; 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'; +import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; import { StyleProp } from '../StyleProvider'; @@ -12,7 +12,10 @@ import { DocumentView } from '../nodes/DocumentView'; import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; import { Transform } from '../../util/Transform'; +import { LinkManager } from '../../util/LinkManager'; // import Card from 'react-bootstrap/Card'; +import { DocumentType } from '../../documents/DocumentTypes'; +import { forEach } from 'lodash'; @observer @@ -21,6 +24,10 @@ export class CollectionCardView extends CollectionSubView() { @observable hoveredNodeIndex = -1; + @computed get myChildLayoutPairs(){ + return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK) + } + @action setHoveredNodeIndex = (index: number) => { if (!this.isSelected(index)) { @@ -38,10 +45,10 @@ export class CollectionCardView extends CollectionSubView() { @action setSelectedNodeIndex = (index: number) => { const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - console.log('goodnight'); + // console.log('goodnight'); if (SelectionManager.IsSelected(docs[index])) { - console.log('good mornings'); + // console.log('good mornings'); this.setSelectedNodeIndex(index); } }; @@ -53,12 +60,11 @@ export class CollectionCardView extends CollectionSubView() { }; inactiveDocs = () => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - + const docs = this.myChildLayoutPairs; + return docs.filter(d => !SelectionManager.IsSelected(d.layout)); + }; - return docs.filter(d => !SelectionManager.IsSelected(d)); - }; middleIndex = Math.floor(this.inactiveDocs().length / 2); @@ -81,12 +87,21 @@ export class CollectionCardView extends CollectionSubView() { } }; + + 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(); + if (this.myChildLayoutPairs.length< this.maxRowCount){ + length = this.myChildLayoutPairs.length + } + + else{ + length = this.maxRowCount + } + return (this.childDocumentWidth * length) / this._props.PanelWidth(); } panelWidth = () => this.childDocumentWidth; panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width); @@ -95,7 +110,7 @@ export class CollectionCardView extends CollectionSubView() { isChildContentActive = () => (this.isContentActive() ? true : false); rotate = (amCards: number, index: number) => { - console.log(amCards + "wtf") + // 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))); @@ -113,31 +128,39 @@ export class CollectionCardView extends CollectionSubView() { return possRotate; }; - translateY = (amCards: number, index: number) => { + translateY = (amCards: number, index: number, realIndex: number) => { const evenOdd = amCards % 2; const apex = (amCards - evenOdd) / 2; const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25); + let rowOffset = 0 - console.log('steo' + stepMag); + if (realIndex > this.maxRowCount -1){ + // 11 - 1 = 10 + rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount) + } + + + + // console.log('steo' + stepMag); if (evenOdd == 1 || index < apex - 1) { - console.log('hi' + index); - return Math.abs(stepMag * (apex - index)); + // console.log('hi' + index); + return Math.abs(stepMag * (apex - index)) - rowOffset; } else { if (index == apex || index == apex - 1) { - return 0; + return 0 - rowOffset; } - return Math.abs(stepMag * (apex - index - 1)); + return Math.abs(stepMag * (apex - index - 1)) - rowOffset; } }; - translateOverFlowY = (amCards: number, index: number) => { - if (amCards > 8 && index > amCards / 2) { - return 100; - } - return 0; - }; + // translateOverFlowY = (amCards: number, index: number) => { + // if (amCards > 8 && index > amCards / 2) { + // return 100; + // } + // return 0; + // }; translateSelected = (index: number): number => { if (this.isSelected(index)) { @@ -161,78 +184,190 @@ export class CollectionCardView extends CollectionSubView() { @computed get sortedDocsType() { const desc = BoolCast(this.layoutDoc.sortDesc); - let sorted = [] + let docs = [] - for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list - sorted[i] = this.childLayoutPairs[i] + for (let i=0; i< this.myChildLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list + sorted[i] = this.myChildLayoutPairs[i] } + switch(this._props.Document.cardSort){ + case "type": + // Copy and sort documents by type + return this.sort(sorted, "type", desc) + case "color": + return this.sort(sorted, "color", desc) + case "links": + console.log("hi") + + let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout) + + console.log(links) + + // } - // Copy and sort documents by type - const docs = sorted.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 + default: + docs = this.myChildLayoutPairs + return {docs} + + + + } + } + + + + + hexToHsv = (hex: string): [number, number, number] => { + if (!hex) return [0, 0, 0]; // Default to black if hex is not defined + const r = parseInt(hex.slice(1, 3), 16) / 255; + const g = parseInt(hex.slice(3, 5), 16) / 255; + const b = parseInt(hex.slice(5, 7), 16) / 255; + const max = Math.max(r, g, b), min = Math.min(r, g, b); + const d = max - min; + let h: number; + const s = (max === 0 ? 0 : d / max); + const v = max; + + switch (max) { + case min: h = 0; break; + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + default: h = 0; break; + } + h /= 6; + return [h, s, v]; + }; + + + + sort = (docs: {layout: Doc; data: Doc; }[], sortType: string, isDesc: boolean) => { + + docs.sort((docA, docB) => { + let typeA; + let typeB + + switch(sortType) { + case "color": + typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string + typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string + break + + default: + typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string + typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string + break + } + // 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 + if (isDesc) out *= -1; // Reverse the sort order if descending is true return out; - }); - + }); - return { docs }; + return {docs} } + // @computed get cards(){ + + + // } + + + displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { + return ( + 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)} + /> + ); + }; @observable docRefs = new ObservableMap(); + @observable maxRowCount = 10; + + overflowAmCardsCalc(index: number) { + if (this.inactiveDocs().length < this.maxRowCount){ + return this.inactiveDocs().length + } + // 13 - 3 = 10 + const totalCards = this.inactiveDocs().length + // if 9 or less + if ( index < ((totalCards - (totalCards % 10)))){ + return this.maxRowCount + } + //(3) + return totalCards % 10 + + } + + overflowIndexCalc(realIndex: number) { + if (realIndex < 10){ + return realIndex + } + + return realIndex % 10 + + } + + translateOverflowX(realIndex: number, calcRowCards: number){ + if (realIndex < this.maxRowCount){ + return 0 + } + + return (10 - calcRowCards) * (this.panelWidth()/2) + + + + + } + @computed get contentSorted() { const sortedDocs = this.sortedDocsType.docs; - const amCards = this.inactiveDocs().length; - - const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { - return ( - 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)} - /> - ); - }; + // const amCards = this.inactiveDocs().length; // Map sorted documents to their rendered components return sortedDocs.map((childPair, index) => { // const childPair = { layout: doc, data: doc }; - const isHovered = this.hoveredNodeIndex === index; - const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); - const isSelected = SelectionManager.IsSelected(childPair.layout); + const isHovered = this.hoveredNodeIndex === index; + const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); + const calcRowIndex = this.overflowIndexCalc(realIndex) + + const amCards = this.overflowAmCardsCalc(realIndex) + const isSelected = SelectionManager.IsSelected(childPair.layout); 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); + return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); }; return ( @@ -243,111 +378,105 @@ export class CollectionCardView extends CollectionSubView() { width: this.panelWidth(), height: this.panelHeight(childPair.layout)(), transform: ` - rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) - translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px) - translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px) + rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) + translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px) + translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px) scale(${isSelected ? 1.25 : 1}) `, }} onMouseEnter={() => this.setHoveredNodeIndex(index)}> - {displayDoc(childPair, childScreenToLocal)} + {this.displayDoc(childPair, childScreenToLocal)} + + {/* */} + ); }); } - @computed get content() { - // const currentIndex = NumCast(this.layoutDoc._carousel_index); - 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 ( - 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.sortedDocsType.docs.indexOf(childPair); - const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout); - // const yOffset = this.verticalOffset(index); + // @computed get content() { + // // const currentIndex = NumCast(this.layoutDoc._carousel_index); + // const amCards = this.inactiveDocs().length; + // console.log(amCards + "lol") + // // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents - 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); - }; + // // const myInactives = + - return ( -
{ + // const isSelected = this.isSelected(index); + // const isHovered = this.hoveredNodeIndex === index; + // 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); + + // 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 ( + //
this.setSelectedNodeIndex(index)} + // `, //scale has to be applied last or selected offset gets messed up + // }} + // // onClick={() => this.setSelectedNodeIndex(index)} - onMouseEnter={() => this.setHoveredNodeIndex(index)}> - {/* {this.lol(childPair.data, index)} */} + // onMouseEnter={() => this.setHoveredNodeIndex(index)}> + // {/* {this.lol(childPair.data, index)} */} - {displayDoc(childPair, childScreenToLocal)} -
- ); - }); - } + // {this.displayDoc(childPair, childScreenToLocal)} + //
+ // ); + // }); + // } @computed get translateWrapperX() { - if (this.inactiveDocs().length != this.childLayoutPairs.length) { - return this.panelWidth() / 2; - } - return 0; - } + let translate = 0 - @computed get renderCardsSort(){ - if (BoolCast(this._props.Document.card_sort_type) == true){ - return this.contentSorted + if (this.inactiveDocs().length != this.myChildLayoutPairs.length) { + translate += this.panelWidth() / 2; } - else{ - return this.content - } + console.log("in" + this.inactiveDocs().length) + console.log("max" + this.maxRowCount) + + // if (this.inactiveDocs().length > this.maxRowCount){ + // translate += ((this.inactiveDocs().length % this.maxRowCount) * this.panelWidth()) / 2 + // console.log("trans" + (this.inactiveDocs().length % this.maxRowCount) / 2 ) + // } + + + + return translate; } + // @computed get renderCardsSort(){ + // if (StrCast(this._props.Document.cardSort) == "type"){ + // return this.contentSorted + // } + + // else{ + // return this.content + // } + // } + render() { @@ -367,7 +496,7 @@ export class CollectionCardView extends CollectionSubView() { height: `${100 * this.fitContentScale}%`, }} onMouseLeave={() => this.setHoveredNodeIndex(-1)}> - {this.renderCardsSort} + {this.contentSorted} {/* @@ -386,4 +515,4 @@ export class CollectionCardView extends CollectionSubView() { ); } -} +} \ No newline at end of file diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 0c6095346..526315802 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -105,10 +105,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) { +ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -140,15 +140,20 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid }], ['time', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time, + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", }], ['docType', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type, + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type", }], ['color', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color, + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color", + }], + + ['links', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", }], ]); -- cgit v1.2.3-70-g09d2 From 13b4aa868ac664399bfd320902f3ddee57072392 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Mon, 13 May 2024 09:21:29 -0400 Subject: create technically working --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 18 +++- src/client/util/SelectionManager.ts | 1 + src/client/views/MainView.tsx | 3 +- .../views/collections/CollectionCardDeckView.scss | 27 ++++- .../views/collections/CollectionCardDeckView.tsx | 111 ++++++++++++++++++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/global/globalScripts.ts | 21 +++- 8 files changed, 163 insertions(+), 21 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 77cc5f51e..df69e215a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -500,6 +500,7 @@ export class DocumentOptions { userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); + customSortCount?: NUMt = new NumInfo('number of custom sorts the user has created'); // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 767d6c635..59560dd78 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -9,7 +9,7 @@ import { PrefetchProxy } from "../../fields/Proxy"; import { RichTextField } from "../../fields/RichTextField"; import { listSpec } from "../../fields/Schema"; import { ScriptField } from "../../fields/ScriptField"; -import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types"; +import { Cast, DateCast, DocCast, StrCast, NumCast } from "../../fields/Types"; import { WebField, nullAudio } from "../../fields/URLField"; import { SetCachedGroups, SharingPermissions } from "../../fields/util"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; @@ -34,6 +34,9 @@ import { SnappingManager } from "./SnappingManager"; import { UndoManager } from "./UndoManager"; import { LabelBox } from "../views/nodes/LabelBox"; import { ImageBox } from "../views/nodes/ImageBox"; +import { CollectionFreeFormView } from "../views/collections/collectionFreeForm"; +import { CollectionCardView } from "../views/collections/CollectionCardDeckView"; +import { SelectionManager } from "./SelectionManager"; interface Button { // DocumentOptions fields a button can set @@ -712,12 +715,23 @@ pie title Minerals in my tap water ] } static cardTools(): Button[] { + + + // if (view != undefined){ + // for (let i=0; i< NumCast(view.layoutDoc.customSortCount); i++){ + // customs.push( + // { title: "Custom " + i, icon:"robot", toolTip:"Custom sort option " + i, btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}} + // ) + + // } + // } return [ { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - + { title: "Create", icon:"plus", toolTip:"Create new custom groupings!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + // ...customs ] } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 36b926053..d507e35ad 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -68,6 +68,7 @@ export class SelectionManager { public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected); public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore + public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index abdb5abef..a5882dcf3 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -526,7 +526,8 @@ export class MainView extends ObservableReactComponent<{}> { fa.faArrowsUpToLine, fa.faArrowsDownToLine, fa.faPalette, - fa.faHourglassHalf + fa.faHourglassHalf, + fa.faRobot ] ); } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index aafc3b556..222a1d226 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -10,7 +10,7 @@ .card-wrapper { display: grid; - grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */ + grid-template-columns: repeat(10, 1fr); // width: 100%; position: absolute; @@ -21,6 +21,31 @@ transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } +.card-button-container { + display: flex; + padding: 3px; + // width: 300px; + background-color: rgb(218, 218, 218); /* Background color of the container */ + border-radius: 50px; /* Rounds the corners of the container */ + transform: translateY(-50px); + // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */ + align-items: center; /* Centers buttons vertically */ + justify-content: start;/* Centers buttons horizontally */ +} + +button { + width: 35px; + height: 35px; + border-radius: 50%; + background-color: $dark-gray; + // border-color: $medium-blue; + margin: 5px; // transform: translateY(-50px); +} + +// button:hover { +// transform: translateY(-50px); +// } + // .card-wrapper::after { // content: ""; // width: 100%; /* Forces wrapping */ diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index bda72b2d6..bf26ad4b5 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -37,7 +37,7 @@ export class CollectionCardView extends CollectionSubView() { translateHover = (index: number): number => { if (this.hoveredNodeIndex == index && !this.isSelected(index)) { - return -50 * this.fitContentScale; + return -50; } return 0; }; @@ -109,6 +109,10 @@ export class CollectionCardView extends CollectionSubView() { isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); isChildContentActive = () => (this.isContentActive() ? true : false); + + + + rotate = (amCards: number, index: number) => { // console.log(amCards + "wtf") const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); @@ -163,7 +167,7 @@ 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; @@ -173,12 +177,12 @@ export class CollectionCardView extends CollectionSubView() { 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; + const translation = middleOfPanel - scaledNodeCenter - scaledNodeWidth - (scaledNodeWidth /4); return translation; - } + // } - return 0; + // return 0; }; @computed get sortedDocsType() { @@ -197,15 +201,20 @@ export class CollectionCardView extends CollectionSubView() { return this.sort(sorted, "type", desc) case "color": return this.sort(sorted, "color", desc) - case "links": - console.log("hi") + // case "links": + // console.log("hi") - let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout) + // let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout) - console.log(links) + // console.log(links) // } + case "custom": + console.log("hiiiii") + return this.sort(sorted, "custom", desc) + + default: docs = this.myChildLayoutPairs return {docs} @@ -254,6 +263,14 @@ export class CollectionCardView extends CollectionSubView() { typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string break + case "custom": + typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? '' + // console.log(typeA + "A") + typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? '' + // console.log(typeB + 'b') + break + + default: typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string @@ -341,10 +358,24 @@ export class CollectionCardView extends CollectionSubView() { } return (10 - calcRowCards) * (this.panelWidth()/2) + } + + calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) { + let trans = 0; + if (isHovered) { + trans += this.translateHover(realIndex); + } + + trans += this.translateY(amCards, calcRowIndex, realIndex); + + if (isSelected) { + trans = 50 * this.fitContentScale; + } + return trans } @computed get contentSorted() { @@ -357,6 +388,7 @@ export class CollectionCardView extends CollectionSubView() { const isHovered = this.hoveredNodeIndex === index; + const childPairIndex = this.myChildLayoutPairs.indexOf(childPair) const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); const calcRowIndex = this.overflowIndexCalc(realIndex) @@ -379,21 +411,72 @@ export class CollectionCardView extends CollectionSubView() { height: this.panelHeight(childPair.layout)(), transform: ` rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px) - translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px) + translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px) + translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) scale(${isSelected ? 1.25 : 1}) `, }} - onMouseEnter={() => this.setHoveredNodeIndex(index)}> + onMouseEnter={() => this.setHoveredNodeIndex(index)} + + > {this.displayDoc(childPair, childScreenToLocal)} - {/* */} + {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''} ); }); } + @observable amGroups = 0 + @observable customGroupDictionary = new Map< + number, number>(); + + + @action toggleButton(childPairIndex: number, buttonID: number) { + + this.customGroupDictionary.set(childPairIndex, buttonID); + } + + renderButtons (childPairIndex: number) { + const buttons = []; // Array to hold the button elements + + let amButtons = 4 + + if (this.amGroups > 4){ + amButtons = this.amGroups + } + + let activeButtonIndex = this.customGroupDictionary.get(childPairIndex) + + for (let i = 0; i < amButtons; i++) { + const isActive = activeButtonIndex == i + + buttons.push( + ); + } + + const totalWidth = amButtons * 35 + (amButtons * 2* 5) + 6; + return ( +
+ {buttons} +
+ ); + } + + + + + + + + + + + // @computed get content() { @@ -450,7 +533,7 @@ export class CollectionCardView extends CollectionSubView() { let translate = 0 - if (this.inactiveDocs().length != this.myChildLayoutPairs.length) { + if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) { translate += this.panelWidth() / 2; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 2d05b5490..11193f496 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -2010,4 +2010,4 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) { SchemaCSVPopUp.Instance.setVisible(true); } }); -}); +}); \ No newline at end of file diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 526315802..9056917fe 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -105,10 +105,12 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); -ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) { + + +ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', checkResult?: boolean, persist?: boolean, customNumber?: number) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -156,6 +158,21 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", }], + ['custom', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "custom", + }], + + //in an ideal world lol + + + // ['create', { + // checkResult: (doc:Doc) => NumCast(doc?.customSortCount), + // setDoc: (doc:Doc,dv:DocumentView) => doc.customSortCount = NumCast(doc.customSortCount) + 1, + // }], + + + ]); if (checkResult) { -- cgit v1.2.3-70-g09d2 From d699cac7cab64e868aeee8d88b16e7a76e92e483 Mon Sep 17 00:00:00 2001 From: aidahosa1 Date: Mon, 13 May 2024 16:42:25 -0400 Subject: god is good --- src/client/views/collections/CollectionCardDeckView.scss | 1 + src/client/views/collections/CollectionCardDeckView.tsx | 16 +++++++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 222a1d226..09d6f70ea 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -67,6 +67,7 @@ button { .card-item-active, .card-item { + position: relative; transition: transform 0.3s ease-in-out; } diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 80159ae38..996c5711b 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -332,7 +332,13 @@ export class CollectionCardView extends CollectionSubView() { return realIndex % 10; } - translateOverflowX(realIndex: number, calcRowCards: number) { + translateOverflowX(realIndex: number, calcIndex: number, calcRowCards: number) { + + let trans = 0; + + // trans += (calcIndex * this.panelWidth()) + this.panelWidth() + + // return trans if (realIndex < this.maxRowCount) { return 0; } @@ -398,10 +404,10 @@ export class CollectionCardView extends CollectionSubView() { width: this.panelWidth(), height: this.panelHeight(childPair.layout)(), transform: ` - rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px) - translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) - scale(${isSelected ? 1.25 : 1}) + translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px) + translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, calcRowIndex, amCards)}px) + rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) + scale(${isSelected ? 1.25 : 1}) `, }} onMouseEnter={() => this.setHoveredNodeIndex(index)}> -- cgit v1.2.3-70-g09d2 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 --- src/client/documents/Documents.ts | 3 +- src/client/util/CurrentUserUtils.ts | 6 ++- src/client/views/MainView.tsx | 4 +- .../views/collections/CollectionCardDeckView.scss | 2 +- .../views/collections/CollectionCardDeckView.tsx | 63 +++++++++++++++++----- .../CollectionFreeFormLayoutEngines.tsx | 26 ++++----- .../collections/collectionFreeForm/MarqueeView.tsx | 4 +- src/client/views/global/globalScripts.ts | 35 +++++++----- 8 files changed, 94 insertions(+), 49 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index df69e215a..57f91399a 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -500,7 +500,8 @@ export class DocumentOptions { userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)'); cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); - customSortCount?: NUMt = new NumInfo('number of custom sorts the user has created'); + customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created'); + customHashMap?: List // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time'); // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type'); // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color'); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 59560dd78..abc728cd3 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -730,7 +730,11 @@ pie title Minerals in my tap water { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, { title: "Links", icon:"link", toolTip:"Sort by its links", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"links", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"plus", toolTip:"Create new custom groupings!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"robot", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + + // ...customs ] diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a5882dcf3..f1296e46a 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -527,7 +527,9 @@ export class MainView extends ObservableReactComponent<{}> { fa.faArrowsDownToLine, fa.faPalette, fa.faHourglassHalf, - fa.faRobot + fa.faRobot, + fa.faSatellite, + fa.faStar ] ); } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 09d6f70ea..babc604b5 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -68,7 +68,7 @@ button { .card-item-active, .card-item { position: relative; - transition: transform 0.3s ease-in-out; + transition: transform 0.5s ease-in-out; } .card-item-active { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 996c5711b..fc183b72b 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -2,7 +2,7 @@ import { ObservableMap, action, computed, makeObservable, observable } from 'mob import { observer } from 'mobx-react'; import * as React from 'react'; import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils'; -import { Doc, DocListCast, Field } from '../../../fields/Doc'; +import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; @@ -17,6 +17,7 @@ import { LinkManager } from '../../util/LinkManager'; import { DocumentType } from '../../documents/DocumentTypes'; import { forEach } from 'lodash'; import { SnappingManager } from '../../util/SnappingManager'; +import { List } from '../../../fields/List'; @observer export class CollectionCardView extends CollectionSubView() { @@ -70,11 +71,49 @@ export class CollectionCardView extends CollectionSubView() { super(props); makeObservable(this); // this.rotationDegree(7); + + if (this._props.Document.customHashMap != undefined){ + this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap)) + } + } + + @observable customGroupDictionary: Map[] = [new Map(), new Map(), new Map()]; + + @computed get mapToField(): List { + const resultList = new List(); // Creating a new ListImpl instance for strings + + this.customGroupDictionary.forEach(map => { + // Convert each map to a single string with entries formatted as "key:value" + const mapString = Array.from(map.entries()) + .map(([key, value]) => `${key}:${value}`) + .join(','); // Join all key-value pairs with commas + resultList.push(mapString); // Add the formatted string of the current map to the list + }); + + return resultList; + } + + getCustoms = (stringFrom: string[]): Map[] => { + return stringFrom.map(s => { + // Create a new Map object for each string. + const map = new Map(); + // Split the string by commas to get key-value pairs, then process each pair. + s.split(',').forEach(pair => { + const [key, value] = pair.split(':'); + map.set(Number(key), Number(value)); + }); + return map; + }); } + + + + private _dropDisposer?: DragManager.DragDropDisposer; componentWillUnmount() { + console.log("hey hey hey") this._dropDisposer?.(); } @@ -253,9 +292,11 @@ export class CollectionCardView extends CollectionSubView() { break; case 'custom': - typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? ''; + + console.log(this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)]) + typeA = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docA)) ?? '9999'; // console.log(typeA + "A") - typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? ''; + typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999'; // console.log(typeB + 'b') break; @@ -397,7 +438,7 @@ export class CollectionCardView extends CollectionSubView() { SnappingManager.SetIsResizing(undefined); this._forceChildXf = !this._forceChildXf; }), - 400 + 700 ); }} style={{ @@ -419,11 +460,13 @@ export class CollectionCardView extends CollectionSubView() { }); } - @observable amGroups = 0; - @observable customGroupDictionary = new Map(); + + + @action toggleButton(childPairIndex: number, buttonID: number) { - this.customGroupDictionary.set(childPairIndex, buttonID); + this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID); + this._props.Document.customHashMap = this.mapToField } renderButtons(childPairIndex: number) { @@ -431,11 +474,7 @@ export class CollectionCardView extends CollectionSubView() { let amButtons = 4; - if (this.amGroups > 4) { - amButtons = this.amGroups; - } - - let activeButtonIndex = this.customGroupDictionary.get(childPairIndex); + let activeButtonIndex = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(childPairIndex); for (let i = 0; i < amButtons; i++) { const isActive = activeButtonIndex == i; 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 any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ + const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ ['grid', { checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid, @@ -158,21 +158,28 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links", }], - ['custom', { + ['custom1', { checkResult: (doc:Doc) => StrCast(doc?.cardSort), - setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "custom", - }], - - //in an ideal world lol - - - // ['create', { - // checkResult: (doc:Doc) => NumCast(doc?.customSortCount), - // setDoc: (doc:Doc,dv:DocumentView) => doc.customSortCount = NumCast(doc.customSortCount) + 1, - // }], + setDoc: (doc, dv) => { + doc.cardSort = "custom"; + doc.customSortNumber = 0; + } + }], - + ['custom2', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc, dv) => { + doc.cardSort = "custom"; + doc.customSortNumber = 1; + console.log(doc.customSortNumber + " numberrrrrrrr") + } }], + ['custom3', { + checkResult: (doc:Doc) => StrCast(doc?.cardSort), + setDoc: (doc, dv) => { + doc.cardSort = "custom"; + doc.customSortNumber = 2; + } }], ]); if (checkResult) { -- cgit v1.2.3-70-g09d2 From 38d2d361aa723917b5721e2635933d2d8b9f483a Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 18 May 2024 22:57:22 -0400 Subject: updated cardDeckView code --- src/client/util/CurrentUserUtils.ts | 59 +- .../views/collections/CollectionCardDeckView.scss | 25 +- .../views/collections/CollectionCardDeckView.tsx | 859 ++++++++------------- src/client/views/global/globalScripts.ts | 105 +-- 4 files changed, 373 insertions(+), 675 deletions(-) (limited to 'src/client/views/collections/CollectionCardDeckView.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 89f1375bc..f2a7f953d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -715,48 +715,35 @@ pie title Minerals in my tap water ] } static cardTools(): Button[] { - - - // if (view != undefined){ - // for (let i=0; i< NumCast(view.layoutDoc.customSortCount); i++){ - // customs.push( - // { title: "Custom " + i, icon:"robot", toolTip:"Custom sort option " + i, btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}} - // ) - - // } - // } return [ - { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Smart Sort", icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Time", icon:"hourglass-half", toolTip:"Sort by most recent document creation", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"time", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Type", icon:"eye", toolTip:"Sort by document type", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"docType",funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Color", icon:"palette", toolTip:"Sort by document color", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"color", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + ] + } + static labelTools(): Button[] { + return [ + { title: "AI", icon:"robot", toolTip:"Add AI labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"chat", funcs: {hidden:`showFreeform ("chat", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "AIs", icon:"AI Sort", toolTip:"Filter AI labels", subMenu: this.cardGroupTools("chat"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("chat", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, + { title: "Like", icon:"heart", toolTip:"Add Like labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"like", funcs: {hidden:`showFreeform ("like", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Likes", icon:"Likes", toolTip:"Filter likes", width: 10, subMenu: this.cardGroupTools("heart"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("like", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, + { title: "Star", icon:"star", toolTip:"Add Star labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"star", funcs: {hidden:`showFreeform ("star", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Stars", icon:"Stars", toolTip:"Filter stars", width: 80, subMenu: this.cardGroupTools("star"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("star", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, + { title: "Idea", icon:"satellite", toolTip:"Add Idea labels", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"idea", funcs: {hidden:`showFreeform ("idea", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "Ideas", icon:"Ideas", toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("satellite"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, ] } - - static customCardTools(): Button[] { - return [ - { title: "Create", icon:"heart", toolTip:"Create your first custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"star", toolTip:"Create your second custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Create", icon:"satellite", toolTip:"Create your third custom grouping!", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"custom3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "Custom 1", icon: "Custom", width: 10, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("heart"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!showFreeform("custom1", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - { title: "Custom 2", icon: "Custom", width: 80, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("star"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!showFreeform("custom2", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - { title: "Custom 3", icon: "Custom", width: 80, toolTip: "Set visibilty!", subMenu: CurrentUserUtils.cardGroupTools("satellite"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!showFreeform("custom3", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - - ] - } - static cardGroupTools(icon: string): Button[] { return [ - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"1", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"2", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"3", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - { title: "", icon:icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"4", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, - + { title: "1", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"1", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "2", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"2", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "3", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"3", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "4", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"4", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "5", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"5", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "6", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"6", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, + { title: "7", icon, toolTip:"Click to toggle visibility", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"7", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, ] } - - - static viewTools(): Button[] { return [ { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform @@ -858,7 +845,7 @@ pie title Minerals in my tap water { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Card", icon: "Sort", toolTip: "Card sort", subMenu: CurrentUserUtils.cardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available - { title: "CustomCard", icon: "Create", toolTip: "Create custom groupings!", subMenu: CurrentUserUtils.customCardTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available + { title: "Label", icon: "Label", toolTip: "Assign card labels", subMenu: CurrentUserUtils.labelTools(), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected { title: "Video", icon: "Video", toolTip: "Video functions", subMenu: CurrentUserUtils.videoTools(), expertMode: false, toolType:DocumentType.VID, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected { title: "Image", icon: "Image", toolTip: "Image functions", subMenu: CurrentUserUtils.imageTools(), expertMode: false, toolType:DocumentType.IMG, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index babc604b5..a089b248d 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -12,6 +12,7 @@ display: grid; grid-template-columns: repeat(10, 1fr); // width: 100%; + transform-origin: top left; position: absolute; align-items: center; @@ -22,15 +23,15 @@ } .card-button-container { - display: flex; + display: flex; padding: 3px; - // width: 300px; + // width: 300px; background-color: rgb(218, 218, 218); /* Background color of the container */ - border-radius: 50px; /* Rounds the corners of the container */ - transform: translateY(-50px); + border-radius: 50px; /* Rounds the corners of the container */ + transform: translateY(75px); // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */ - align-items: center; /* Centers buttons vertically */ - justify-content: start;/* Centers buttons horizontally */ + align-items: center; /* Centers buttons vertically */ + justify-content: start; /* Centers buttons horizontally */ } button { @@ -39,11 +40,11 @@ button { border-radius: 50%; background-color: $dark-gray; // border-color: $medium-blue; - margin: 5px; // transform: translateY(-50px); + margin: 5px; // transform: translateY(-50px); } // button:hover { -// transform: translateY(-50px); +// transform: translateY(-50px); // } // .card-wrapper::after { @@ -62,13 +63,19 @@ button { // align-items: center; // transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); - // } +.card-item-inactive, .card-item-active, .card-item { position: relative; transition: transform 0.5s ease-in-out; + display: flex; + flex-direction: column; +} + +.card-item-inactive { + opacity: 0.5; } .card-item-active { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index b2a94c3c6..9e5668ffa 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -1,182 +1,173 @@ -import { ObservableMap, action, computed, makeObservable, observable } from 'mobx'; +import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils'; -import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc'; +import { DashColor, Utils, numberRange, returnFalse, returnZero } from '../../../Utils'; +import { Doc, NumListCast } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; -import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast, Cast} from '../../../fields/Types'; +import { BoolCast, Cast, DateCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { URLField } from '../../../fields/URLField'; +import { gptImageLabel } from '../../apis/gpt/GPT'; +import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; +import { SnappingManager } from '../../util/SnappingManager'; +import { Transform } from '../../util/Transform'; +import { undoable } from '../../util/UndoManager'; import { StyleProp } from '../StyleProvider'; import { DocumentView } from '../nodes/DocumentView'; +import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; import './CollectionCardDeckView.scss'; import { CollectionSubView } from './CollectionSubView'; -import { Transform } from '../../util/Transform'; -import { LinkManager } from '../../util/LinkManager'; -// import Card from 'react-bootstrap/Card'; -import { DocumentType } from '../../documents/DocumentTypes'; -import { forEach } from 'lodash'; -import { SnappingManager } from '../../util/SnappingManager'; -import { List } from '../../../fields/List'; -import { gptAPICall, gptImageLabel } from '../../apis/gpt/GPT'; -import { GPTCallType } from '../../apis/gpt/GPT'; -import { ImageField, PdfField, URLField } from '../../../fields/URLField'; -import { GPTPopup } from '../pdf/GPTPopup/GPTPopup'; -import { GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; -import { reaction } from 'mobx'; -import { NumListCast } from '../../../fields/Doc'; -import { undoBatch } from '../../util/UndoManager'; -import { CalendarContainer } from 'react-datepicker'; + +enum cardSortings { + Time = 'time', + Type = 'type', + Color = 'color', + Custom = 'custom', + None = '', +} @observer export class CollectionCardView extends CollectionSubView() { + private _dropDisposer?: DragManager.DragDropDisposer; + private _childDocumentWidth = 600; // target width of a Doc... + private _disposers: { [key: string]: IReactionDisposer } = {}; + private _textToDoc = new Map(); - @observable hoveredNodeIndex = -1; - - //key is the index in the child pair list, value is the id# for the group its in - @observable customGroupDictionary: Map[] = [new Map(), new Map(), new Map()]; - - /** - * The child documents to be rendered-- either all of them except the Links or the docs in the currently active - * custom group - */ - @computed get myChildLayoutPairs() { - let activeGroups = NumListCast(this._props.Document.visibleGroupNumbers); - let currCustom = NumCast(this._props.Document.customSortNumber); - - if (activeGroups.length <= 0) { - return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK); - } - - if (StrCast(this._props.Document.cardSort).includes("custom")) { - return this.childLayoutPairs.filter((l, index) => { - if (l.layout.type === DocumentType.LINK) { - return false; - } - // Get the group number for the current index from the customGroupDictionary - const groupNumber = this.getButtonGroup(currCustom, l.layout) - // Check if the group number is in the active groups - return groupNumber !== undefined && activeGroups.includes(groupNumber); - }); - } + @observable _forceChildXf = false; + @observable _isLoading = false; + @observable _hoveredNodeIndex = -1; + @observable _docRefs = new ObservableMap(); + @observable _maxRowCount = 10; - // Default return for non-custom cardSort or other cases, filtering out links - return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK); + static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined { + return Cast(doc[groupFieldKey], 'number', null); } + static imageUrlToBase64 = async (imageUrl: string): Promise => { + try { + const response = await fetch(imageUrl); + const blob = await response.blob(); - @action - setHoveredNodeIndex = (index: number) => { - if (!this.isSelected(index)) { - this.hoveredNodeIndex = index; - } - }; - /** - * Translates the hovered node to the center of the screen - * @param index - * @returns - */ - translateHover = (index: number): number => { - if (this.hoveredNodeIndex == index && !this.isSelected(index)) { - return -50; + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(blob); + reader.onloadend = () => resolve(reader.result as string); + reader.onerror = error => reject(error); + }); + } catch (error) { + console.error('Error:', error); + throw error; } - return 0; }; - @action - setSelectedNodeIndex = (index: number) => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - if (SelectionManager.IsSelected(docs[index])) { - this.setSelectedNodeIndex(index); + protected createDashEventsTarget = (ele: HTMLDivElement | null) => { + this._dropDisposer?.(); + if (ele) { + this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); } }; - isSelected = (index: number): boolean => { - const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]); - return SelectionManager.IsSelected(docs[index]); - }; - - /** - * Returns all the documents except the one that's currently selected - */ - inactiveDocs = () => { - const docs = this.myChildLayoutPairs; - return docs.filter(d => !SelectionManager.IsSelected(d.layout)); - }; - - middleIndex = Math.floor(this.inactiveDocs().length / 2); - constructor(props: any) { super(props); makeObservable(this); - const pairs = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK); + } - //gets the values from the last time the view was loaded and puts them into their respective places in the hashmaps(s) - for (let i=0; i< pairs.length; i++){ - if (pairs[i].layout.custom1Group != undefined){ - this.customGroupDictionary[0].set(i, NumCast(pairs[i].layout.custom1Group)) - } + componentDidMount(): void { + this._disposers.sort = reaction( + () => ({ cardSort: this.cardSort, field: this.customSortField }), + ({ cardSort, field }) => (cardSort === cardSortings.Custom && field === 'chat' ? this.openChatPopup() : GPTPopup.Instance.setVisible(false)) + ); + } - if (pairs[i].layout.custom2Group != undefined){ - this.customGroupDictionary[1].set(i, NumCast(pairs[i].layout.custom2Group)) - } + componentWillUnmount() { + Object.keys(this._disposers).forEach(key => this._disposers[key]?.()); + this._dropDisposer?.(); + } - if (pairs[i].layout.custom3Group != undefined){ - this.customGroupDictionary[2].set(i, NumCast(pairs[i].layout.custom3Group)) - } + @computed get customSortField() { + return StrCast(this.Document.customSortField) as any as 'chat' | 'star' | 'idea' | 'like'; + } - if (pairs[i].layout.chatGroup != undefined){ - this.gptGroups.set(pairs[i].layout, NumCast(pairs[i].layout.chatGroup)) - this.amGPTGroups = NumCast(this._props.Document.chatAmGroups) + @computed get cardSort() { + return StrCast(this.Document.cardSort) as any as cardSortings; + } + /** + * how much to scale down the contents of the view so that everything will fit + */ + @computed get fitContentScale() { + const length = Math.min(this.childDocsWithoutLinks.length, this._maxRowCount); + return (this._childDocumentWidth * length) / this._props.PanelWidth(); + } - } + @computed get translateWrapperX() { + let translate = 0; + + if (this.inactiveDocs().length !== this.childDocsWithoutLinks.length && this.inactiveDocs().length < 10) { + translate += this.panelWidth() / 2; } - reaction( - () => this._props.Document.cardSort, - (cardSort) => { - if (cardSort === 'chat') { - this.openChatPopup(); - } - } - ); + return translate; } - private _dropDisposer?: DragManager.DragDropDisposer; + /** + * The child documents to be rendered-- either all of them except the Links or the docs in the currently active + * custom group + */ + @computed get childDocsWithoutLinks() { + const regularDocs = this.childDocs.filter(l => l.type !== DocumentType.LINK); + const activeGroups = NumListCast(this.Document.visibleGroupNumbers); + + if (activeGroups.length > 0 && this.cardSort === cardSortings.Custom) { + return regularDocs.filter(doc => { + // Get the group number for the current index + const groupNumber = CollectionCardView.getButtonGroup(this.customSortField, doc); + // Check if the group number is in the active groups + return groupNumber !== undefined && activeGroups.includes(groupNumber); + }); + } - componentWillUnmount() { - this._dropDisposer?.(); + // Default return for non-custom cardSort or other cases, filtering out links + return regularDocs; } - protected createDashEventsTarget = (ele: HTMLDivElement | null) => { - this._dropDisposer?.(); - if (ele) { - this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); + /** + * Determines the order in which the cards will be rendered depending on the current sort type + */ + @computed get sortedDocs() { + return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.layoutDoc.sortDesc)); + } + + @action + setHoveredNodeIndex = (index: number) => { + if (!SelectionManager.IsSelected(this.childDocs[index])) { + this._hoveredNodeIndex = index; } }; + /** + * Translates the hovered node to the center of the screen + * @param index + * @returns + */ + translateHover = (index: number) => (this._hoveredNodeIndex === index && !SelectionManager.IsSelected(this.childDocs[index]) ? -50 : 0); + + isSelected = (index: number) => SelectionManager.IsSelected(this.childDocs[index]); - childDocumentWidth = 600; // target width of a Doc... /** - * how much to scale down the contents of the view so that everything will fit + * Returns all the documents except the one that's currently selected */ - @computed get fitContentScale() { - if (this.myChildLayoutPairs.length < this.maxRowCount) { - length = this.myChildLayoutPairs.length; - } else { - length = this.maxRowCount; - } - return (this.childDocumentWidth * length) / this._props.PanelWidth(); - } + inactiveDocs = () => this.childDocsWithoutLinks.filter(d => !SelectionManager.IsSelected(d)); - panelWidth = () => this.childDocumentWidth; - panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width); + panelWidth = () => this._childDocumentWidth; + panelHeight = (layout: Doc) => () => (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); /** * Returns the degree to rotate a card dependind on the amount of cards in their row and their index in said row - * @param amCards - * @param index - * @returns + * @param amCards + * @param index + * @returns */ rotate = (amCards: number, index: number) => { const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); @@ -184,7 +175,8 @@ export class CollectionCardView extends CollectionSubView() { if (amCards % 2 == 0 && possRotate == 0) { return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2))); - } else if (amCards % 2 == 0 && index > (amCards + 1) / 2) { + } + if (amCards % 2 == 0 && index > (amCards + 1) / 2) { return possRotate + stepMag; } @@ -197,26 +189,25 @@ export class CollectionCardView extends CollectionSubView() { const evenOdd = amCards % 2; const apex = (amCards - evenOdd) / 2; const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25); - let rowOffset = 0; - if (realIndex > this.maxRowCount - 1) { - rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount); + let rowOffset = 0; + if (realIndex > this._maxRowCount - 1) { + rowOffset = 400 * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount); } if (evenOdd == 1 || index < apex - 1) { return Math.abs(stepMag * (apex - index)) - rowOffset; - } else { - if (index == apex || index == apex - 1) { - return 0 - rowOffset; - } - - return Math.abs(stepMag * (apex - index - 1)) - rowOffset; } + if (index == apex || index == apex - 1) { + return 0 - rowOffset; + } + + return Math.abs(stepMag * (apex - index - 1)) - rowOffset; }; /** * Translates the selected node to the middle fo the screen - * @param index - * @returns + * @param index + * @returns */ translateSelected = (index: number): number => { // if (this.isSelected(index)) { @@ -234,126 +225,46 @@ export class CollectionCardView extends CollectionSubView() { return translation; }; - /** - * Determines the order in which the cards will be rendered depending on the current sort type - */ - @computed get sortedDocsType() { - const desc = BoolCast(this.layoutDoc.sortDesc); - let sorted = []; - let docs = []; - - for (let i = 0; i < this.myChildLayoutPairs.length; i++) { - //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list - sorted[i] = this.myChildLayoutPairs[i]; - } - - switch (this._props.Document.cardSort) { - case 'type': - // Copy and sort documents by type - return this.sort(sorted, 'type', desc); - case 'color': - return this.sort(sorted, 'color', desc); - case 'custom': - return this.sort(sorted, 'custom', desc); - case 'chat': - return this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)); - - default: - docs = this.myChildLayoutPairs; - return { docs }; - } - } - /** - * Converts a hex # to its hsv color value - * @param hex - * @returns - */ - hexToHsv = (hex: string): [number, number, number] => { - if (!hex) return [0, 0, 0]; // Default to black if hex is not defined - const r = parseInt(hex.slice(1, 3), 16) / 255; - const g = parseInt(hex.slice(3, 5), 16) / 255; - const b = parseInt(hex.slice(5, 7), 16) / 255; - const max = Math.max(r, g, b), - min = Math.min(r, g, b); - const d = max - min; - let h: number; - const s = max === 0 ? 0 : d / max; - const v = max; - - switch (max) { - case min: - h = 0; - break; - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - case g: - h = (b - r) / d + 2; - break; - case b: - h = (r - g) / d + 4; - break; - default: - h = 0; - break; - } - h /= 6; - return [h, s, v]; - }; /** * Called in the sortedDocsType method. Compares the cards' value in regards to the desired sort type-- earlier cards are move to the * front, latter cards to the back - * @param docs - * @param sortType - * @param isDesc - * @returns + * @param docs + * @param sortType + * @param isDesc + * @returns */ - sort = (docs: { layout: Doc; data: Doc }[], sortType: string, isDesc: boolean) => { + sort = (docs: Doc[], sortType: cardSortings, isDesc: boolean) => { + if (sortType === cardSortings.None) return docs; docs.sort((docA, docB) => { - let typeA; - let typeB; - - switch (sortType) { - case 'color': - typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string - typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string - break; - - case 'custom': - typeA = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docA.layout) ?? '9999' - typeB = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docB.layout) ?? '9999' - break; - - case 'gpt': - typeA = this.getButtonGroup(99999, docA.layout, true) ?? '9999'; - typeB = this.getButtonGroup(99999, docB.layout, true) ?? '9999'; - break; - - default: - typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string - typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string - break; - } - - // Perform a basic string comparison if types are strings - let out = 0; - if (typeA < typeB) out = -1; - if (typeA > typeB) out = 1; - if (isDesc) out *= -1; // Reverse the sort order if descending is true - return out; + const [typeA, typeB] = (() => { + switch (sortType) { + case cardSortings.Time: + return [DateCast(docA.author_date)?.date ?? Date.now(), + DateCast(docB.author_date)?.date ?? Date.now()]; + case cardSortings.Color: + return [DashColor(StrCast(docA.backgroundColor)).hsv().toString(), // If docA.type is undefined, use an empty string + DashColor(StrCast(docB.backgroundColor)).hsv().toString()]; // If docB.type is undefined, use an empty string + case cardSortings.Custom: + return [CollectionCardView.getButtonGroup(this.customSortField, docA)??0, + CollectionCardView.getButtonGroup(this.customSortField, docB)??0]; + default: return [StrCast(docA.type), // If docA.type is undefined, use an empty string + StrCast(docB.type)]; // If docB.type is undefined, use an empty string + } // prettier-ignore + })(); + + const out = typeA < typeB ? -1 : typeA > typeB ? 1 : 0; + return isDesc ? -out : out; // Reverse the sort order if descending is true }); - return { docs }; + return docs; }; - - displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => { + displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => { return ( r?.ContentDiv && this.docRefs.set(childPair.layout, r))} - Document={childPair.layout} - TemplateDataDocument={childPair.data} + ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))} + Document={doc} NativeWidth={returnZero} NativeHeight={returnZero} layout_fitWidth={returnFalse} @@ -365,382 +276,219 @@ 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(childPair.layout)} + PanelHeight={this.panelHeight(doc)} /> ); }; - @observable docRefs = new ObservableMap(); - - @observable maxRowCount = 10; - /** * Determines how many cards are in the row of a card at a specific index - * @param index - * @returns + * @param index + * @returns */ - overflowAmCardsCalc(index: number) { - if (this.inactiveDocs().length < this.maxRowCount) { + overflowAmCardsCalc = (index: number) => { + if (this.inactiveDocs().length < this._maxRowCount) { return this.inactiveDocs().length; } // 13 - 3 = 10 const totalCards = this.inactiveDocs().length; // if 9 or less if (index < totalCards - (totalCards % 10)) { - return this.maxRowCount; + return this._maxRowCount; } //(3) return totalCards % 10; - } + }; /** * Determines the index a card is in in a row - * @param realIndex - * @returns + * @param realIndex + * @returns */ - overflowIndexCalc(realIndex: number) { - if (realIndex < 10) { - return realIndex; - } - - return realIndex % 10; - } + overflowIndexCalc = (realIndex: number) => realIndex % 10; /** * Translates the cards in the second rows and beyond over to the right - * @param realIndex - * @param calcIndex - * @param calcRowCards - * @returns + * @param realIndex + * @param calcIndex + * @param calcRowCards + * @returns */ - translateOverflowX(realIndex: number, calcIndex: number, calcRowCards: number) { - - if (realIndex < this.maxRowCount) { - return 0; - } + translateOverflowX = (realIndex: number, calcRowCards: number) => (realIndex < this._maxRowCount ? 0 : (10 - calcRowCards) * (this.panelWidth() / 2)); - return (10 - calcRowCards) * (this.panelWidth() / 2); - } /** * Determines how far to translate a card in the y direction depending on its index, whether or not its being hovered, or if it's selected - * @param isHovered - * @param isSelected - * @param realIndex - * @param amCards - * @param calcRowIndex - * @returns + * @param isHovered + * @param isSelected + * @param realIndex + * @param amCards + * @param calcRowIndex + * @returns */ - calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) { - let trans = 0; - if (isHovered) { - trans += this.translateHover(realIndex); - } - - trans += this.translateY(amCards, calcRowIndex, realIndex); - if (isSelected) { - trans = 50 * this.fitContentScale; - } - return trans; - } - - @observable _forceChildXf = false; + calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => { + if (isSelected) return 50 * this.fitContentScale; + const trans = isHovered ? this.translateHover(realIndex) : 0; + return trans + this.translateY(amCards, calcRowIndex, realIndex); + }; /** - * Actually renders all the cards + * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt + * @param childPairIndex + * @param buttonID + * @param doc */ - @computed get contentSorted() { - const sortedDocs = this.sortedDocsType.docs; - // Map sorted documents to their rendered components - return sortedDocs.map((childPair, index) => { - - const isHovered = this.hoveredNodeIndex === index; - const childPairIndex = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK).indexOf(childPair) - const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair); - const calcRowIndex = this.overflowIndexCalc(realIndex); - - const amCards = this.overflowAmCardsCalc(realIndex); - - const isSelected = SelectionManager.IsSelected(childPair.layout); - - const childScreenToLocal = () => { - this._forceChildXf; - 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, calcRowIndex) : 0); - }; - - return ( -
{ - SnappingManager.SetIsResizing(this.Document); - setTimeout( - action(() => { - SnappingManager.SetIsResizing(undefined); - this._forceChildXf = !this._forceChildXf; - }), - 700 - ); - }} - style={{ - width: this.panelWidth(), - height: this.panelHeight(childPair.layout)(), - transform: ` - translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px) - translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, calcRowIndex, amCards)}px) - rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - scale(${isSelected ? 1.25 : 1}) - `, - }} - onMouseEnter={() => this.setHoveredNodeIndex(index)}> - {this.displayDoc(childPair, childScreenToLocal)} - - {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex, childPair.layout, false) : ''} - {this._props.Document.cardSort == 'chat' ? this.renderButtons(childPairIndex, childPair.layout, true) : ''} - -
- ); - }); - } + toggleButton = undoable((buttonID: number, doc: Doc) => this.customSortField && (doc[this.customSortField] = buttonID), 'toggle custom button'); /** - * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt - * @param childPairIndex - * @param buttonID - * @param isChat - * @param doc - */ - - @undoBatch - @action toggleButton(childPairIndex: number, buttonID: number, isChat = false, doc: Doc) { - if (!isChat) { - const sortNumber = NumCast(this._props.Document.customSortNumber) - this.customGroupDictionary[sortNumber].set(childPairIndex, buttonID) - switch (sortNumber){ - case 0: - doc.custom1Group = buttonID - break - case 1: - doc.custom2Group = buttonID - break - case 2: - doc.custom3Group = buttonID - break - default: - break - } - } - - if (isChat && doc) { - this.gptGroups.set(doc, buttonID); - doc.chatGroup = buttonID - } - } - - /** - * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. + * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. * Image documents are converted to bse64 and gpt generates a description for them. all other documents use their title. This string is - * inputted into the gpt prompt to sort everything together - * @returns + * inputted into the gpt prompt to sort everything together + * @returns */ - async childPairStringList(): Promise { - let string = ""; - for (let i = 0; i < this.childDocs.length; i++) { - switch (this.childDocs[i].type) { - case DocumentType.IMG: - string += `======${await this.getImageDesc(this.childDocs[i])}======`; - break; - - case DocumentType.PDF: - let pdfText = StrCast(this.childDocs[i].text); - let words = pdfText.split(/\s+/); - let first50Words = words.slice(0, 50); - string += `======${first50Words.join(' ')}======`; - - this.textToDoc.set(first50Words.join(' ').trim(), this.childDocs[i]); - break; - - case DocumentType.RTF: - let rtfText = StrCast((RTFCast(this.childDocs[i].text)).Text); - string += `======${StrCast((RTFCast(this.childDocs[i].text)).Text)}======`; - this.textToDoc.set(rtfText.trim(), this.childDocs[i]); - break; - - default: - string += `======${StrCast(this.childDocs[i].title)}======`; - this.textToDoc.set(StrCast(this.childDocs[i].title).trim(), this.childDocs[i]); - } - } - return string; - } - - @observable isLoading = false - - - imageUrlToBase64 = async (imageUrl: string): Promise => { - try { - const response = await fetch(imageUrl); - const blob = await response.blob(); - - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(blob); - reader.onloadend = () => resolve(reader.result as string); - reader.onerror = error => reject(error); - }); - } catch (error) { - console.error('Error:', error); - throw error; - } + childPairStringList = () => { + const docToText = (doc: Doc) => { + switch (doc.type) { + case DocumentType.PDF: const words = StrCast(doc.text).split(/\s+/); + return words.slice(0, 50).join(' '); // first 50 words of pdf text + case DocumentType.IMG: return this.getImageDesc(doc); + case DocumentType.RTF: return StrCast(RTFCast(doc.text).Text); + default: return StrCast(doc.title); + } // prettier-ignore + }; + const docTextPromises = this.childDocsWithoutLinks.map(async doc => { + const docText = (await docToText(doc)) ?? ''; + this._textToDoc.set(docText.trim(), doc); + return `======${docText.replace(/\n/g, ' ').trim()}======`; + }); + return Promise.all(docTextPromises); }; - textToDoc = new Map() - gptProccessedImages = new Set() - /** * Calls the gpt API to generate descriptions for the images in the view - * @param image - * @returns + * @param image + * @returns */ - @action async getImageDesc(image: Doc) { - if (this.gptProccessedImages.has(image)) { - // Return the already processed description - return Array.from(this.textToDoc.keys()).find(key => this.textToDoc.get(key) === image) || ''; - } - - let href = (image['data'] as URLField).url.href; - let hrefParts = href.split('.'); - let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; + getImageDesc = async (image: Doc) => { + if (StrCast(image.description)) return StrCast(image.description); // Return existing description + const href = (image.data as URLField).url.href; + const hrefParts = href.split('.'); + const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; try { - let hrefBase64 = await this.imageUrlToBase64(hrefComplete); - let response = await gptImageLabel(hrefBase64); - this.textToDoc.set(response.trim(), image); - this.gptProccessedImages.add(image); - console.log(response); + const hrefBase64 = await CollectionCardView.imageUrlToBase64(hrefComplete); + const response = await gptImageLabel(hrefBase64); + image[DocData].description = response.trim(); return response; // Return the response from gptImageLabel } catch (error) { - console.log("bad things have happened"); + console.log('bad things have happened'); } - } + return ''; + }; - //child doc to its group determind by gpt - gptGroups = new ObservableMap - @observable amGPTGroups = 0 - /** * Converts the gpt output into a hashmap that can be used for sorting. lists are seperated by ==== while elements within the list are seperated by ~~~~~~ - * @param gptOutput + * @param gptOutput */ - processGptOutput(gptOutput: string) { - + processGptOutput = (gptOutput: string) => { // Split the string into individual list items const listItems = gptOutput.split('======').filter(item => item.trim() !== ''); - this.amGPTGroups = listItems.length - this._props.Document.chatAmGroups = this.amGPTGroups - listItems.forEach((item, index) => { // Split the item by '~~~~~~' to get all descriptors const parts = item.split('~~~~~~').map(part => part.trim()); parts.forEach(part => { - console.log(part + "part") // Find the corresponding Doc in the textToDoc map - if (this.textToDoc.has(part)) { - const doc = this.textToDoc.get(part); - if (doc) { - this.gptGroups.set(doc, index); - doc.chatGroup = index - } + const doc = this._textToDoc.get(part); + if (doc) { + doc.chat = index; } }); }); - } - - @observable isChatPopupOpen = false; + }; /** - * Opens up the chat popup and starts the process for smart sorting. + * Opens up the chat popup and starts the process for smart sorting. */ - @action openChatPopup = async () => { - this.isChatPopupOpen = true; + openChatPopup = async () => { GPTPopup.Instance.setVisible(true); GPTPopup.Instance.setMode(GPTPopupMode.SORT); - - // Await the promise to get the string result - const sortDesc = await this.childPairStringList(); + const sortDesc = await this.childPairStringList(); // Await the promise to get the string result GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded - GPTPopup.Instance.setSortDesc(sortDesc); - GPTPopup.Instance.onSortComplete = this.handleGptSortResult; -}; - @action handleGptSortResult = (sortResult: string) => { - this.processGptOutput(sortResult); + GPTPopup.Instance.setSortDesc(sortDesc.join()); + GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult); }; /** - * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups - * @param childPairIndex - * @param doc - * @param isChat - * @returns + * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups + * @param childPairIndex + * @param doc + * @returns */ - renderButtons(childPairIndex: number, doc: Doc, isChat = false) { - const buttons = []; - const groupNumber = NumCast(this._props.Document.customSortNumber); - - let amButtons = 4; - let activeButtonIndex = this.getButtonGroup(groupNumber, doc) - - if (isChat && doc) { - if (this.amGPTGroups > 4){ - amButtons = this.amGPTGroups; - } - activeButtonIndex = this.getButtonGroup(9999, doc, true); - } - - for (let i = 0; i < amButtons; i++) { - const isActive = activeButtonIndex === i; - buttons.push( - - ); - } - + renderButtons = (doc: Doc, cardSort: cardSortings) => { + if (cardSort !== cardSortings.Custom) return ''; + const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.customSortField && set.add(NumCast(doc[this.customSortField])), new Set()).size ?? 0); + const activeButtonIndex = CollectionCardView.getButtonGroup(this.customSortField, doc); const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6; return (
- {buttons} + {numberRange(amButtons).map(i => ( +
); - } - - getButtonGroup(groupNumber: number, doc: Doc, isChat?: boolean) { - if (isChat){ - return NumCast(doc.chatGroup) - } - switch (groupNumber){ - case 0: - return NumCast(doc.custom1Group) - case 1: - return NumCast(doc.custom2Group) - case 2: - return NumCast(doc.custom3Group) - default: - break - } - - - } - + }; + /** + * Actually renders all the cards + */ + renderCards = () => { + const anySelected = this.childDocs.some(doc => SelectionManager.IsSelected(doc)); + // Map sorted documents to their rendered components + return this.sortedDocs.map((doc, index) => { + const realIndex = this.sortedDocs.filter(sortDoc => !SelectionManager.IsSelected(sortDoc)).indexOf(doc); + const calcRowIndex = this.overflowIndexCalc(realIndex); + const amCards = this.overflowAmCardsCalc(realIndex); + const isSelected = SelectionManager.IsSelected(doc); - @computed get translateWrapperX() { - let translate = 0; + const childScreenToLocal = () => { + this._forceChildXf; + const dref = this._docRefs.get(doc); + 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, calcRowIndex) : 0); // prettier-ignore + }; - if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) { - translate += this.panelWidth() / 2; - } - return translate; - } + return ( +
{ + // this turns off documentDecorations during a transition, then turns them back on afterward. + SnappingManager.SetIsResizing(this.Document); + setTimeout( + action(() => { + SnappingManager.SetIsResizing(undefined); + this._forceChildXf = !this._forceChildXf; + }), + 700 + ); + }} + style={{ + width: this.panelWidth(), + height: 'max-content', // this.panelHeight(childPair.layout)(), + transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px) + translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) + rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) + scale(${isSelected ? 1.25 : 1})`, + }} + onMouseEnter={() => this.setHoveredNodeIndex(index)}> + {this.displayDoc(doc, childScreenToLocal)} + {this.renderButtons(doc, this.cardSort)} +
+ ); + }); + }; render() { return (
this.setHoveredNodeIndex(-1)}> - {this.contentSorted} + {this.renderCards()}
); diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 496d7482c..35a3a2e31 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -1,7 +1,7 @@ import { Colors } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { aggregateBounds } from '../../../Utils'; -import { Doc, Opt } from '../../../fields/Doc'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; @@ -106,17 +106,15 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); - - ScriptingGlobals.add(function showFreeform( - attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', + attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4', checkResult?: boolean, persist?: boolean, isDoubleClick?: boolean ) { const selected = SelectionManager.Docs.lastElement(); // prettier-ignore - const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', + const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4', { waitForRender?: boolean; checkResult: (doc: Doc) => any; @@ -167,87 +165,48 @@ ScriptingGlobals.add(function showFreeform( checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "links", setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links", }], - ['custom1', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 0, + ['like', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "like", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortNumber = 0; + doc.customSortField = "like"; doc.visibleGroupNumbers = new List(); } }], - ['custom2', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 1, + ['star', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "star", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortNumber = 1; + doc.customSortField = "star"; doc.visibleGroupNumbers = new List(); } }], - ['custom3', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 2, + ['idea', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "idea", setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort = "custom"; - doc.customSortNumber = 2; + doc.customSortField = "idea"; doc.visibleGroupNumbers = new List(); } }], ['chat', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "chat", - setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "chat", - }], - ['1', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(0), - setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(0)) { - let newList = new List(list.filter(d => d !== 0)); - doc.visibleGroupNumbers = newList; - } else { - list.push(0); - doc.visibleGroupNumbers = new List(list); - } - } - }], - ['2', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(1), - setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(1)) { - let newList = new List(list.filter(d => d !== 1)); - doc.visibleGroupNumbers = newList; - } else { - list.push(1); - doc.visibleGroupNumbers = new List(list); - } - } - }], - ['3', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(2), - setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(2)) { - let newList = new List(list.filter(d => d !== 2)); - doc.visibleGroupNumbers = newList; - } else { - list.push(2); - doc.visibleGroupNumbers = new List(list); - } - } - }], - ['4', { - checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(3), + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "chat", setDoc: (doc: Doc, dv: DocumentView) => { - let list = NumListCast(doc.visibleGroupNumbers); - if (list.includes(3)) { - let newList = new List(list.filter(d => d !== 3)); - doc.visibleGroupNumbers = newList; - } else { - list.push(3); - doc.visibleGroupNumbers = new List(list); - } - } + doc.cardSort = "custom"; + doc.customSortField = "chat"; + doc.visibleGroupNumbers = new List(); + }, }], ]); + for (let i = 0; i < 8; i++) { + map.set((i + 1 + '') as any, { + checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(i), + setDoc: (doc: Doc, dv: DocumentView) => { + const list = NumListCast(doc.visibleGroupNumbers); + doc.visibleGroupNumbers = new List(list.includes(i) ? list.filter(d => d !== i) : [...list, i]); + }, + }); + } if (checkResult) { return map.get(attr)?.checkResult(selected); @@ -257,13 +216,11 @@ ScriptingGlobals.add(function showFreeform( setTimeout(() => batch.end(), 100); }); - -ScriptingGlobals.add(function isThatCardGroup(n: number){ - const canvas = SelectionManager.Docs.lastElement(); - return canvas.customSortNumber == n - - -}) +ScriptingGlobals.add(function cardHasLabel(label: string) { + const selected = SelectionManager.Docs.lastElement(); + const labelNum = Number(label) - 1; + return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.customSortField)] == labelNum)); +}, ''); // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { // // const editorView = RichTextMenu.Instance?.TextView?.EditorView; -- cgit v1.2.3-70-g09d2