From 972839216c14baa5c9eaf80e1fb2fb2694bbb72c Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Oct 2024 22:51:46 -0400 Subject: modified how buttons are laid out on carousel and comparison views so that text boxes can reflow around them. extracted flashcard pratice into its own component and applied it to carousel3D and carousel --- .../views/collections/FlashcardPracticeUI.scss | 64 ++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/client/views/collections/FlashcardPracticeUI.scss (limited to 'src/client/views/collections/FlashcardPracticeUI.scss') diff --git a/src/client/views/collections/FlashcardPracticeUI.scss b/src/client/views/collections/FlashcardPracticeUI.scss new file mode 100644 index 000000000..53c26ad34 --- /dev/null +++ b/src/client/views/collections/FlashcardPracticeUI.scss @@ -0,0 +1,64 @@ +.FlashcardPracticeUI-remove, +.FlashcardPracticeUI-check { + position: absolute; + display: flex; + width: 30; + height: 30; + align-items: center; + border-radius: 5px; + justify-content: center; + color: rgba(255, 255, 255, 0.5); + background: rgba(0, 0, 0, 0.1); + &:hover { + color: white; + } +} +.FlashcardPracticeUI-remove { + left: 52%; +} +.FlashcardPracticeUI-check { + right: 52%; +} +.FlashcardPracticeUI-menu { + position: absolute; + flex-direction: column; + align-items: center; + display: flex; + top: 0px; + left: 0px; + width: 30; + transform-origin: top left; + border-radius: 5px; + color: rgba(255, 255, 255, 0.5); + background: rgba(0, 0, 0, 0.1); + .FlashcardPracticeUI-practiceModes { + width: 100%; + display: flex; + flex-direction: column; + top: 0; + position: relative; + .FlashcardPracticeUI-quiz, + .FlashcardPracticeUI-practice { + position: relative; + display: flex; + height: 20px; + align-items: center; + margin: auto; + padding: 3px; + &:hover { + color: white; + } + & > svg { + height: 100%; + width: 100%; + } + } + } +} +.FlashcardPracticeUI-message { + z-index: 100; + position: relative; + margin: auto; + align-content: center; + width: max-content; +} -- cgit v1.2.3-70-g09d2 From c97d849a56d4642d9eb750beccb748b7d8ac15bd Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Oct 2024 23:43:43 -0400 Subject: extended flashcard UI to cardDecks --- .../views/collections/CollectionCardDeckView.scss | 12 ++++ .../views/collections/CollectionCardDeckView.tsx | 66 +++++++++++++++++++--- .../views/collections/FlashcardPracticeUI.scss | 6 ++ .../views/collections/FlashcardPracticeUI.tsx | 8 +-- 4 files changed, 81 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/FlashcardPracticeUI.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index d1731c244..0520e38d4 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -48,3 +48,15 @@ .card-item-active { z-index: 100; } + +.collectionCardDeckView-flashcards { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + transform-origin: top left; + pointer-events: none; + z-index: 100; +} diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 5d39dc1ca..7272b22e2 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -22,6 +22,7 @@ import { DocumentView } from '../nodes/DocumentView'; import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; import './CollectionCardDeckView.scss'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; +import { FlashcardPracticeUI } from './FlashcardPracticeUI'; enum cardSortings { Time = 'time', @@ -46,6 +47,8 @@ export class CollectionCardView extends CollectionSubView() { private _textToDoc = new Map(); private _dropped = false; // set when a card doc has just moved and the drop method has been called - prevents the pointerUp method from hiding doc decorations (which needs to be done when clicking on a card to animate it to front/center) + _sideBtnWidth = 35; + @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined; @observable _forceChildXf = 0; @observable _hoveredNodeIndex = -1; @observable _docRefs = new ObservableMap(); @@ -117,7 +120,7 @@ export class CollectionCardView extends CollectionSubView() { * The child documents to be rendered-- everything other than ink/link docs (which are marks as being svg's) */ @computed get childDocsWithoutLinks() { - return this.childDocs.filter(l => !l.layout_isSvg); + return this.childDocs.filter(l => !l.layout_isSvg).filter(doc => !this._filterFunc?.(doc)); } /** @@ -565,11 +568,7 @@ export class CollectionCardView extends CollectionSubView() { */ @computed get renderCards() { if (!this.childDocsWithoutLinks.length) { - return ( - - Sorry ! There are no cards in this group - - ); + return null; } // Map sorted documents to their rendered components @@ -611,6 +610,34 @@ export class CollectionCardView extends CollectionSubView() { }); } + contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1); + docViewProps = () => ({ + ...this._props, // + isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive, + isContentActive: this.isChildContentActive, + ScreenToLocalTransform: this.contentScreenToLocalXf, + }); + carouselItemsFunc = () => this.childDocsWithoutLinks; + @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore + answered = (correct: boolean) => !correct || !this.curDoc(); + curDoc = () => this.sortedDocs.find(doc => DocumentView.getDocumentView(doc, this.DocumentView?.())?.IsSelected); + /** + * How much the content of the carousel view is being scaled based on its nesting and its fit-to-width settings + */ + @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore + + /** + * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size. + */ + @computed get maxWidgetScale() { + const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.1 * NumCast(this.layoutDoc.width, 1)); + return Math.max(maxWidgetSize / this._sideBtnWidth, 1); + } + /** + * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content + */ + @computed get uiBtnScaleTransform() { return this.maxWidgetScale * Math.min(1, this.contentScaling); } // prettier-ignore + render() { const isEmpty = this.childDocsWithoutLinks.length === 0; @@ -629,10 +656,35 @@ export class CollectionCardView extends CollectionSubView() { className="card-wrapper" style={{ ...(!isEmpty && { transform: `scale(${1 / this.fitContentScale})` }), - ...(!isEmpty && { height: `${100 * this.fitContentScale}%` }), + ...{ height: `${100 * (isEmpty ? 1 : this.fitContentScale)}%` }, + ...{ width: `${100 * (isEmpty ? 1 : this.fitContentScale)}%` }, gridAutoRows: `${100 / this.numRows}%`, }}> {this.renderCards} +
+ +
); diff --git a/src/client/views/collections/FlashcardPracticeUI.scss b/src/client/views/collections/FlashcardPracticeUI.scss index 53c26ad34..2f99500f8 100644 --- a/src/client/views/collections/FlashcardPracticeUI.scss +++ b/src/client/views/collections/FlashcardPracticeUI.scss @@ -13,6 +13,11 @@ color: white; } } +.FlashcardPracticeUI-practice { + position: absolute; + width: 100%; + pointer-events: all; +} .FlashcardPracticeUI-remove { left: 52%; } @@ -30,6 +35,7 @@ transform-origin: top left; border-radius: 5px; color: rgba(255, 255, 255, 0.5); + pointer-events: all; background: rgba(0, 0, 0, 0.1); .FlashcardPracticeUI-practiceModes { width: 100%; diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx index 032a405bf..072a2edef 100644 --- a/src/client/views/collections/FlashcardPracticeUI.tsx +++ b/src/client/views/collections/FlashcardPracticeUI.tsx @@ -25,7 +25,7 @@ interface PracticeUIProps { layoutDoc: Doc; carouselItems: () => Doc[]; childDocs: Doc[]; - curDoc: () => Doc; + curDoc: () => Doc | undefined; advance: (correct: boolean) => void; renderDepth: number; sideBtnWidth: number; @@ -100,8 +100,8 @@ export class FlashcardPracticeUI extends ObservableReactComponent + return this.practiceMode == practiceMode.PRACTICE && this._props.curDoc() ? ( +
setPracticeVal(e, practiceVal.MISSED)}> @@ -119,7 +119,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent (StrCast(this.practiceMode) === mode ? 'white' : 'light gray'); const togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode); - return !this._props.curDoc()?._layout_isFlashcard ? null : ( + return !this._props.childDocs.some(doc => doc._layout_isFlashcard) ? null : (
Date: Wed, 9 Oct 2024 13:27:56 -0400 Subject: more refactoring to of collection flashcards into CollectioSubView to simplify using it in diferent collection views. --- .../views/collections/CollectionCardDeckView.scss | 13 +--- .../views/collections/CollectionCardDeckView.tsx | 81 ++++++---------------- .../views/collections/CollectionCarousel3DView.tsx | 72 +++++-------------- .../views/collections/CollectionCarouselView.scss | 1 + .../views/collections/CollectionCarouselView.tsx | 53 ++------------ src/client/views/collections/CollectionSubView.tsx | 51 +++++++++++++- .../views/collections/FlashcardPracticeUI.scss | 2 +- .../views/collections/FlashcardPracticeUI.tsx | 27 ++++---- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/ComparisonBox.tsx | 18 ++--- 10 files changed, 113 insertions(+), 207 deletions(-) (limited to 'src/client/views/collections/FlashcardPracticeUI.scss') diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 0520e38d4..0637cd4e9 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -6,6 +6,7 @@ position: relative; background-color: white; overflow: hidden; + display: flex; button { border-radius: 50%; @@ -48,15 +49,3 @@ .card-item-active { z-index: 100; } - -.collectionCardDeckView-flashcards { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - display: flex; - transform-origin: top left; - pointer-events: none; - z-index: 100; -} diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 7272b22e2..8f351d8a7 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -22,7 +22,6 @@ import { DocumentView } from '../nodes/DocumentView'; import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; import './CollectionCardDeckView.scss'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; -import { FlashcardPracticeUI } from './FlashcardPracticeUI'; enum cardSortings { Time = 'time', @@ -47,8 +46,6 @@ export class CollectionCardView extends CollectionSubView() { private _textToDoc = new Map(); private _dropped = false; // set when a card doc has just moved and the drop method has been called - prevents the pointerUp method from hiding doc decorations (which needs to be done when clicking on a card to animate it to front/center) - _sideBtnWidth = 35; - @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined; @observable _forceChildXf = 0; @observable _hoveredNodeIndex = -1; @observable _docRefs = new ObservableMap(); @@ -119,15 +116,15 @@ export class CollectionCardView extends CollectionSubView() { /** * The child documents to be rendered-- everything other than ink/link docs (which are marks as being svg's) */ - @computed get childDocsWithoutLinks() { - return this.childDocs.filter(l => !l.layout_isSvg).filter(doc => !this._filterFunc?.(doc)); + @computed get childCards() { + return this.childLayoutPairs.filter(pair => !pair.layout.layout_isSvg); } /** * 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); + const length = Math.min(this.childCards.length, this._maxRowCount); return (this.childPanelWidth() * length) / this._props.PanelWidth(); } @@ -280,7 +277,12 @@ export class CollectionCardView extends CollectionSubView() { ); @computed get sortedDocs() { - return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.Document.cardSort_isDesc), this._docDraggedIndex); + return this.sort( + this.childCards.map(card => card.layout), + this.cardSort, + BoolCast(this.Document.cardSort_isDesc), + this._docDraggedIndex + ); } /** @@ -428,12 +430,14 @@ export class CollectionCardView extends CollectionSubView() { default: return StrCast(doc.title); } // prettier-ignore }; - const docTextPromises = this.childDocsWithoutLinks.map(async doc => { - const docText = (await docToText(doc)) ?? ''; - doc.gptInputText = docText; - this._textToDoc.set(docText.replace(/\n/g, ' ').trim(), doc); - return `======${docText.replace(/\n/g, ' ').trim()}======`; - }); + const docTextPromises = this.childCards + .map(pair => pair.layout) + .map(async doc => { + const docText = (await docToText(doc)) ?? ''; + doc.gptInputText = docText; + this._textToDoc.set(docText.replace(/\n/g, ' ').trim(), doc); + return `======${docText.replace(/\n/g, ' ').trim()}======`; + }); return Promise.all(docTextPromises); }; @@ -567,7 +571,7 @@ export class CollectionCardView extends CollectionSubView() { * Actually renders all the cards */ @computed get renderCards() { - if (!this.childDocsWithoutLinks.length) { + if (!this.childCards.length) { return null; } @@ -611,36 +615,16 @@ export class CollectionCardView extends CollectionSubView() { } contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1); + curDoc = () => this.childCards.find(card => DocumentView.getDocumentView(card.layout, this.DocumentView?.())?.IsSelected)?.layout; docViewProps = () => ({ ...this._props, // isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive, isContentActive: this.isChildContentActive, ScreenToLocalTransform: this.contentScreenToLocalXf, }); - carouselItemsFunc = () => this.childDocsWithoutLinks; - @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore - answered = (correct: boolean) => !correct || !this.curDoc(); - curDoc = () => this.sortedDocs.find(doc => DocumentView.getDocumentView(doc, this.DocumentView?.())?.IsSelected); - /** - * How much the content of the carousel view is being scaled based on its nesting and its fit-to-width settings - */ - @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore - - /** - * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size. - */ - @computed get maxWidgetScale() { - const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.1 * NumCast(this.layoutDoc.width, 1)); - return Math.max(maxWidgetSize / this._sideBtnWidth, 1); - } - /** - * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content - */ - @computed get uiBtnScaleTransform() { return this.maxWidgetScale * Math.min(1, this.contentScaling); } // prettier-ignore render() { - const isEmpty = this.childDocsWithoutLinks.length === 0; - + const isEmpty = this.childCards.length === 0; return (
{this.renderCards} -
- -
+ {this.flashCardUI(this.curDoc, this.docViewProps)}
); } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 3bcf3450f..9ccac0e0f 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, makeObservable, observable } from 'mobx'; +import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { returnZero } from '../../../ClientUtils'; @@ -15,26 +15,19 @@ import { DocumentView } from '../nodes/DocumentView'; import { FocusViewOptions } from '../nodes/FocusViewOptions'; import './CollectionCarousel3DView.scss'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; -import { FlashcardPracticeUI } from './FlashcardPracticeUI'; // eslint-disable-next-line @typescript-eslint/no-require-imports const { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } = require('../global/globalCssVariables.module.scss'); @observer export class CollectionCarousel3DView extends CollectionSubView() { - @computed get scrollSpeed() { - return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; // default scroll speed - } - _sideBtnWidth = 35; - @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined; + private _dropDisposer?: DragManager.DragDropDisposer; constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); } - private _dropDisposer?: DragManager.DragDropDisposer; - componentWillUnmount() { this._dropDisposer?.(); } @@ -46,8 +39,11 @@ export class CollectionCarousel3DView extends CollectionSubView() { } }; + @computed get scrollSpeed() { + return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; // default scroll speed + } @computed get carouselItems() { - return this.childLayoutPairs.filter(pair => pair.layout.type !== DocumentType.LINK).filter(pair => !this._filterFunc?.(pair.layout)); + return this.childLayoutPairs.filter(pair => !pair.layout.layout_isSvg); } centerScale = Number(CAROUSEL3D_CENTER_SCALE); @@ -86,11 +82,11 @@ export class CollectionCarousel3DView extends CollectionSubView() { @computed get content() { const currentIndex = NumCast(this.layoutDoc._carousel_index); - const displayDoc = (childPair: { layout: Doc; data: Doc }, dxf: () => Transform) => ( + const displayDoc = (child: Doc, dxf: () => Transform) => ( ); - return this.carouselItems.map((childPair, index) => ( -
- {displayDoc(childPair, index < currentIndex ? this.childScreenLeftToLocal : index === currentIndex ? this.childCenterScreenToLocal : this.childScreenRightToLocal)} + return this.carouselItems.map((child, index) => ( +
+ {displayDoc(child.layout, index < currentIndex ? this.childScreenLeftToLocal : index === currentIndex ? this.childCenterScreenToLocal : this.childScreenRightToLocal)}
)); } @@ -191,35 +187,14 @@ export class CollectionCarousel3DView extends CollectionSubView() { return this.panelWidth() * (1 - index); } - /** - * How much the content of the carousel view is being scaled based on its nesting and its fit-to-width settings - */ - @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore - - /** - * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size. - */ - @computed get maxWidgetScale() { - const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.1 * NumCast(this.layoutDoc.width, 1)); - return Math.max(maxWidgetSize / this._sideBtnWidth, 1); - } - /** - * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content - */ - @computed get uiBtnScaleTransform() { return this.maxWidgetScale * Math.min(1, this.contentScaling); } // prettier-ignore - screenXPadding = () => (this.uiBtnScaleTransform * this._sideBtnWidth - NumCast(this.layoutDoc.xMargin)) / this._props.ScreenToLocalTransform().Scale; - + curDoc = () => this.carouselItems[NumCast(this.layoutDoc._carousel_index)]?.layout; + answered = (correct: boolean) => (!correct || !this.curDoc()) && this.changeSlide(1); docViewProps = () => ({ ...this._props, // isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive, isContentActive: this.isChildContentActive, ScreenToLocalTransform: this.contentScreenToLocalXf, }); - carouselItemsFunc = () => this.carouselItems.map(pair => pair.layout); - @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore - answered = (correct: boolean) => (!correct || !this.curDoc()) && this.changeSlide(1); - curDoc = () => this.carouselItems[NumCast(this.layoutDoc._carousel_index)]?.layout; - render() { return (
{this.buttons} -
+
{this.dots}
- + {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
); } diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss index 757072453..544b3e262 100644 --- a/src/client/views/collections/CollectionCarouselView.scss +++ b/src/client/views/collections/CollectionCarouselView.scss @@ -2,6 +2,7 @@ height: 100%; position: relative; overflow: hidden; + display: flex; .collectionCarouselView-caption { height: 50; display: inline-block; diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 64ddaac79..538eba356 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { StopEvent, returnOne, returnZero } from '../../../ClientUtils'; import { Doc, Opt } from '../../../fields/Doc'; import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { StyleProp } from '../StyleProp'; import { DocumentView } from '../nodes/DocumentView'; @@ -13,15 +12,12 @@ import { FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionCarouselView.scss'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; -import { FlashcardPracticeUI } from './FlashcardPracticeUI'; @observer export class CollectionCarouselView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; _fadeTimer: NodeJS.Timeout | undefined; - _sideBtnWidth = 35; - @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined; @observable _last_index = this.carouselIndex; @observable _last_opacity = 1; @@ -43,28 +39,7 @@ export class CollectionCarouselView extends CollectionSubView() { @computed get captionMarginX(){ return NumCast(this.layoutDoc.caption_xMargin, 50); } // prettier-ignore @computed get carouselIndex() { return NumCast(this.layoutDoc._carousel_index) % this.carouselItems.length; } // prettier-ignore - @computed get carouselItems() { return this.childDocs - .filter(doc => doc.type !== DocumentType.LINK) - .filter(doc => !this._filterFunc?.(doc)) - } // prettier-ignore - - /** - * How much the content of the carousel view is being scaled based on its nesting and its fit-to-width settings - */ - @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore - - /** - * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size. - */ - @computed get maxWidgetScale() { - const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.1 * NumCast(this.layoutDoc.width, 1)); - return Math.max(maxWidgetSize / this._sideBtnWidth, 1); - } - /** - * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content - */ - @computed get uiBtnScaleTransform() { return this.maxWidgetScale * Math.min(1, this.contentScaling); } // prettier-ignore - screenXPadding = () => (this.uiBtnScaleTransform * this._sideBtnWidth - NumCast(this.layoutDoc.xMargin)) / this._props.ScreenToLocalTransform().Scale; + @computed get carouselItems() { return this.childLayoutPairs.filter(pair => !pair.layout.layout_isSvg); } // prettier-ignore /** * Move forward or backward the specified number of Docs @@ -91,7 +66,7 @@ export class CollectionCarouselView extends CollectionSubView() { this.move(-1); }; - curDoc = () => this.carouselItems[this.carouselIndex]; + curDoc = () => this.carouselItems[this.carouselIndex]?.layout; captionStyleProvider = (doc: Doc | undefined, captionProps: Opt, property: string) => { // first look for properties on the document in the carousel, then fallback to properties on the container @@ -153,7 +128,7 @@ export class CollectionCarouselView extends CollectionSubView() { */ @computed get overlay() { const fadeTime = 500; - const lastDoc = this.carouselItems?.[this._last_index]; + const lastDoc = this.carouselItems?.[this._last_index]?.layout; return !lastDoc || this.carouselIndex === this._last_index ? null : (
{this.renderDoc( @@ -211,10 +186,10 @@ export class CollectionCarouselView extends CollectionSubView() { @computed get navButtons() { return this.Document._chromeHidden || !this.curDoc() ? null : ( <> -
+
-
+
@@ -227,9 +202,7 @@ export class CollectionCarouselView extends CollectionSubView() { isContentActive: this.isChildContentActive, ScreenToLocalTransform: this.contentScreenToLocalXf, }); - carouselItemsFunc = () => this.carouselItems; answered = () => this.advance(); - @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore render() { return ( @@ -245,21 +218,7 @@ export class CollectionCarouselView extends CollectionSubView() { top: NumCast(this.layoutDoc._yMargin), }}> {this.content} - + {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)} {this.navButtons}
); diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 581201a20..c057d2402 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -9,7 +9,7 @@ import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; -import { BoolCast, Cast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; @@ -25,7 +25,8 @@ import { SnappingManager } from '../../util/SnappingManager'; import { UndoManager } from '../../util/UndoManager'; import { ViewBoxBaseComponent } from '../DocComponent'; import { FieldViewProps } from '../nodes/FieldView'; -import { DocumentView } from '../nodes/DocumentView'; +import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; +import { FlashcardPracticeUI } from './FlashcardPracticeUI'; export interface CollectionViewProps extends React.PropsWithChildren { isAnnotationOverlay?: boolean; // is the collection an annotation overlay (eg an overlay on an image/video/etc) @@ -119,7 +120,8 @@ export function CollectionSubView() { pair => // filter out any documents that have a proto that we don't have permissions to !pair.layout?.hidden && pair.layout && (!pair.layout.proto || (pair.layout.proto instanceof Doc && GetEffectiveAcl(pair.layout.proto) !== AclPrivate)) - ); + ) + .filter(pair => !this._filterFunc?.(pair.layout!)); return validPairs.map(({ data, layout }) => ({ data: data as Doc, layout: layout! })); // this mapping is a bit of a hack to coerce types } /** @@ -515,6 +517,49 @@ export function CollectionSubView() { alert('Document upload failed - possibly an unsupported file type.'); } }; + + protected _sideBtnWidth = 35; + @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined; + /** + * How much the content of the collection is being scaled based on its nesting and its fit-to-width settings + */ + @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore + /** + * The maximum size a UI widget can be in collection coordinates based on not wanting the widget to visually obscure too much of the collection + * This takes the desired screen space size and converts into collection coordinates. It then returns the smaller of the converted + * size or a fraction of the collection view. + */ + @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth * this.contentScaling, 0.25 * NumCast(this.layoutDoc.width, 1)); } // prettier-ignore + /** + * This computes a scale factor for UI elements so that they shrink and grow as the collection does in screen space. + * Note, the scale factor does not allow for elements to grow larger than their native screen space size. + */ + @computed get uiBtnScaling() { return this.maxWidgetSize / this._sideBtnWidth; } // prettier-ignore + + screenXPadding = () => (this.uiBtnScaling * this._sideBtnWidth - NumCast(this.layoutDoc.xMargin)) / this._props.ScreenToLocalTransform().Scale; + filteredChildDocs = () => this.childLayoutPairs.map(pair => pair.layout); + childDocsFunc = () => this.childDocs; + @action setFilterFunc = (func?: (doc: Doc) => boolean) => { this._filterFunc = func; }; // prettier-ignore + + public flashCardUI = (curDoc: () => Doc | undefined, docViewProps: () => DocumentViewProps, answered?: (correct: boolean) => void) => { + return ( + + ); + }; } return CollectionSubViewInternal; diff --git a/src/client/views/collections/FlashcardPracticeUI.scss b/src/client/views/collections/FlashcardPracticeUI.scss index 2f99500f8..c5252bbfa 100644 --- a/src/client/views/collections/FlashcardPracticeUI.scss +++ b/src/client/views/collections/FlashcardPracticeUI.scss @@ -50,7 +50,7 @@ height: 20px; align-items: center; margin: auto; - padding: 3px; + // padding: 3px; &:hover { color: white; } diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx index a643c95b0..7bf4d86d1 100644 --- a/src/client/views/collections/FlashcardPracticeUI.tsx +++ b/src/client/views/collections/FlashcardPracticeUI.tsx @@ -23,15 +23,14 @@ enum practiceVal { interface PracticeUIProps { fieldKey: string; layoutDoc: Doc; - carouselItems: () => Doc[]; - childDocs: Doc[]; + filteredChildDocs: () => Doc[]; + allChildDocs: () => Doc[]; curDoc: () => Doc | undefined; - advance: (correct: boolean) => void; + advance?: (correct: boolean) => void; renderDepth: number; sideBtnWidth: number; - uiBtnScaleTransform: number; + uiBtnScaling: number; ScreenToLocalBoxXf: () => Transform; - maxWidgetScale: number; docViewProps: () => DocumentViewProps; setFilterFunc: (func?: (doc: Doc) => boolean) => void; practiceBtnOffset?: number; @@ -51,7 +50,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent doc.title === 'Filter'); } // prettier-ignore - @computed get practiceMode() { return this._props.childDocs.some(doc => doc._layout_isFlashcard) ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore + @computed get practiceMode() { return this._props.allChildDocs().some(doc => doc._layout_isFlashcard) ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore btnHeight = () => NumCast(this.filterDoc?.height) * Math.min(1, this._props.ScreenToLocalBoxXf().Scale); btnWidth = () => (!this.filterDoc ? 1 : (this.btnHeight() * NumCast(this.filterDoc._width)) / NumCast(this.filterDoc._height)); @@ -62,12 +61,12 @@ export class FlashcardPracticeUI extends ObservableReactComponent { this._props.layoutDoc.practiceMode = mode; - this._props.carouselItems().map(doc => (doc[this.practiceField] = undefined)); + this._props.allChildDocs().map(doc => (doc[this.practiceField] = undefined)); }; @computed get emptyMessage() { - const cardCount = this._props.carouselItems().length; - const practiceMessage = this.practiceMode && !Doc.hasDocFilter(this._props.layoutDoc, 'tags', Doc.FilterAny) && !this._props.carouselItems().length ? 'Finished! Click here to view all flashcards.' : ''; + const cardCount = this._props.filteredChildDocs().length; + const practiceMessage = this.practiceMode && !Doc.hasDocFilter(this._props.layoutDoc, 'tags', Doc.FilterAny) && !cardCount ? 'Finished! Click here to view all flashcards.' : ''; const filterMessage = practiceMessage ? '' : Doc.hasDocFilter(this._props.layoutDoc, 'tags', Doc.FilterAny) && !cardCount @@ -78,7 +77,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent { if (filterMessage || practiceMessage) { this.setPracticeMode(undefined); @@ -102,7 +101,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent +
setPracticeVal(e, practiceVal.MISSED)}> @@ -120,12 +119,12 @@ export class FlashcardPracticeUI extends ObservableReactComponent (StrCast(this.practiceMode) === mode ? 'white' : 'light gray'); const togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode); - return !this._props.childDocs.some(doc => doc._layout_isFlashcard) ? null : ( + return !this._props.allChildDocs().some(doc => doc._layout_isFlashcard) ? null : (
togglePracticeMode(practiceMode.QUIZ)}> @@ -146,7 +145,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent {this.emptyMessage} {this.practiceButtons} -
+
{!this.filterDoc || this._props.layoutDoc._chromeHidden ? null : ( () ); } - _sideBtnWidth = 30; + _sideBtnWidth = 35; /** * How much the content of the view is being scaled based on its nesting and its fit-to-width settings */ - @computed get contentScaling() { - return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1); - } + @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale; } // prettier-ignore /** * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size. */ - @computed get maxWidgetScale() { - const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.25 * Math.min(NumCast(this.Document.width), NumCast(this.Document.height))); - return Math.max(maxWidgetSize / this._sideBtnWidth, 1); - } + @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth * this.viewScaling, 0.25 * Math.min(NumCast(this.Document.width), NumCast(this.Document.height))); } // prettier-ignore /** * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content */ - @computed get uiBtnScaleTransform() { - return this.maxWidgetScale * Math.min(1, this.contentScaling); - } + @computed get uiBtnScaling() { return Math.max(this.maxWidgetSize / this._sideBtnWidth, 1) * Math.min(1, this.viewScaling)* (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore @computed get flashcardMenu() { return ( -
+
{this.overlayAlternateIcon} {!this._props.isContentActive() ? null : ( <> - {' '} {!this._frontSide ? null : ( Date: Wed, 9 Oct 2024 13:54:32 -0400 Subject: removing more commented out code, fixing lint. fixed carousel3Dview child active --- src/client/apis/gpt/GPT.ts | 3 +- .../views/collections/CollectionCarousel3DView.tsx | 11 +++- .../views/collections/FlashcardPracticeUI.scss | 2 +- src/client/views/nodes/ComparisonBox.tsx | 67 ++++++++++------------ 4 files changed, 41 insertions(+), 42 deletions(-) (limited to 'src/client/views/collections/FlashcardPracticeUI.scss') diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 88352110b..e8c6cc02f 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -72,7 +72,6 @@ const callTypeMap: { [type: string]: GPTCallOpts } = { model: 'gpt-4-turbo', maxTokens: 1024, temp: 0.1, //0.3 - prompt: '', prompt: "BRIEFLY (<50 words) describe any differences between the rubric and the user's answer answer in second person. If there are no differences, say correct", }, @@ -125,7 +124,7 @@ let lastResp = ''; * @param inputText Text to process * @returns AI Output */ -const gptAPICall = async (inputTextIn: string, callType: GPTCallType, prompt?: any, dontCache?: boolean) => { +const gptAPICall = async (inputTextIn: string, callType: GPTCallType, prompt?: string, dontCache?: boolean) => { const inputText = [GPTCallType.SUMMARY, GPTCallType.FLASHCARD, GPTCallType.QUIZ, GPTCallType.STACK].includes(callType) ? inputTextIn + '.' : inputTextIn; const opts: GPTCallOpts = callTypeMap[callType]; if (lastCall === inputText && dontCache !== true) return lastResp; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 9ccac0e0f..f2ba90c78 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -6,7 +6,7 @@ import { returnZero } from '../../../ClientUtils'; import { Utils } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { Transform } from '../../util/Transform'; @@ -52,7 +52,14 @@ export class CollectionCarousel3DView extends CollectionSubView() { panelHeight = () => this._props.PanelHeight() * this.sideScale; onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive(); - isChildContentActive = () => !!this.isContentActive(); + isChildContentActive = () => + this._props.isContentActive?.() === false + ? false + : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) + ? true + : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false + ? false + : undefined; contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1); childScreenLeftToLocal = () => this.contentScreenToLocalXf() diff --git a/src/client/views/collections/FlashcardPracticeUI.scss b/src/client/views/collections/FlashcardPracticeUI.scss index c5252bbfa..2f99500f8 100644 --- a/src/client/views/collections/FlashcardPracticeUI.scss +++ b/src/client/views/collections/FlashcardPracticeUI.scss @@ -50,7 +50,7 @@ height: 20px; align-items: center; margin: auto; - // padding: 3px; + padding: 3px; &:hover { color: white; } diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 00ca0078e..9b75feba8 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -451,36 +451,33 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() const senArr = text?.split('Question: ') ?? []; const collectionArr: Doc[] = []; for (let i = 1; i < senArr.length; i++) { - const newDoc = Docs.Create.ComparisonDocument(senArr![i], { _layout_isFlashcard: true, _width: 300, _height: 300 }); + const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 }); - if (StrCast(senArr![i]).includes('Keyword: ')) { + if (senArr[i].includes('Keyword: ')) { const question = StrCast(senArr![i]).split('Keyword: '); - const img = await this.fetchImages(question[1]); - const textSide1 = question[0].includes('Answer: ') ? question[0].split('Answer: ')[0] : question[0]; - const textDoc1 = Docs.Create.TextDocument(question[0]); - const rtfiel = new RichTextField( - JSON.stringify({ - doc: { - type: 'doc', - content: [ - { - type: 'paragraph', - attrs: { align: null, color: null, id: null, indent: null, inset: null, lineSpacing: null, paddingBottom: null, paddingTop: null }, - content: [ - { type: 'text', text: question[0].includes('Answer: ') ? question[0].split('Answer: ')[0] : question[0] }, - { type: 'dashDoc', attrs: { width: '200px', height: '200px', title: 'dashDoc', float: 'unset', hidden: false, docId: img![Id] } }, - ], - }, - ], - }, - selection: { type: 'text', anchor: 2, head: 2 }, - }), - textSide1 - ); - - textDoc1[DocData].text = rtfiel; - DocCast(newDoc)[DocData][this.fieldKey + '_1'] = textDoc1; - DocCast(newDoc)[DocData][this.fieldKey + '_0'] = Docs.Create.TextDocument(question[0].includes('Answer: ') ? question[0].split('Answer: ')[1] : question[1]); + const questionTxt = question[0].includes('Answer: ') ? question[0].split('Answer: ')[0] : question[0]; + const answerTxt = question[0].includes('Answer: ') ? question[0].split('Answer: ')[1] : question[1]; + this.fetchImages(question[1]).then(img => { + const rtfiel = new RichTextField( + JSON.stringify({ + // this is a RichText json that has the question text placed above a related image + doc: { + type: 'doc', + content: [ + { + type: 'paragraph', + attrs: { align: null, color: null, id: null, indent: null, inset: null, lineSpacing: null, paddingBottom: null, paddingTop: null }, + content: [{ type: 'text', text: questionTxt }, img ? { type: 'dashDoc', attrs: { width: '200px', height: '200px', title: 'dashDoc', float: 'unset', hidden: false, docId: img[Id] } } : {}], + }, + ], + }, + selection: { type: 'text', anchor: 2, head: 2 }, + }), + questionTxt + ); + newDoc[DocData][this.fieldKey + '_1'] = Docs.Create.TextDocument(questionTxt, { text: rtfiel }); + newDoc[DocData][this.fieldKey + '_0'] = Docs.Create.TextDocument(answerTxt); + }); } collectionArr.push(newDoc); @@ -493,8 +490,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() */ askGPT = async (callType: GPTCallType): Promise => { const questionText = 'Question: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text); - const rubricText = ' Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text); - const queryText = questionText + ' UserAnswer: ' + this._inputValue + '. ' + rubricText; + // const rubricText = ' Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text); + // const queryText = questionText + ' UserAnswer: ' + this._inputValue + '. ' + rubricText; this._loading = true; if (callType == GPTCallType.CHATCARD) { @@ -504,7 +501,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() } } try { - console.log(queryText); const res = await gptAPICall(questionText, GPTCallType.FLASHCARD); if (!res) { console.error('GPT call failed'); @@ -513,7 +509,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() if (callType == GPTCallType.CHATCARD) { DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res; } else if (callType == GPTCallType.QUIZ) { - console.log(this._inputValue); this._frontSide = true; this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric'); } else if (callType === GPTCallType.FLASHCARD) { @@ -531,13 +526,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() layoutHeight = () => NumCast(this.layoutDoc.height, 200); findImageTags = async () => { - const c = this.DocumentView?.().ContentDiv!.getElementsByTagName('img'); - if (c?.length === 0) await this.askGPT(GPTCallType.CHATCARD); + const c = this.DocumentView?.().ContentDiv?.getElementsByTagName('img'); + if (c?.length === 0) this.askGPT(GPTCallType.CHATCARD); if (c) { this._loading = true; for (const i of c) { - console.log(i); - if (i.className !== 'ProseMirror-separator') await this.getImageDesc(i.src); + if (i.className !== 'ProseMirror-separator') this.getImageDesc(i.src); } this._loading = false; } @@ -611,7 +605,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() fetchImages = async (selection: string) => { try { const { data } = await axios.get(`${API_URL}?query=${selection}&page=1&per_page=${1}&client_id=Q4zruu6k6lum2kExiGhLNBJIgXDxD6NNj0SRHH_XXU0`); - console.log(data.results); const imageSnapshot = Docs.Create.ImageDocument(data.results[0].urls.small, { _nativeWidth: Doc.NativeWidth(this.layoutDoc), _nativeHeight: Doc.NativeHeight(this.layoutDoc), -- cgit v1.2.3-70-g09d2 From 386d640fe7fc4b443bc5f241f86e27424851dc4e Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Oct 2024 16:24:00 -0400 Subject: adjusted placement of flaschard practice buttons to be closer to the bottom. Fixed being able to enter quiz mode for flaschards created as part of a stack by fixing embedContainer setting. --- src/client/documents/Documents.ts | 15 ++++++--------- src/client/views/collections/CollectionSubView.tsx | 1 - src/client/views/collections/FlashcardPracticeUI.scss | 16 +++++++++------- src/client/views/collections/FlashcardPracticeUI.tsx | 3 +-- 4 files changed, 16 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/FlashcardPracticeUI.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 358bc227e..d529de8e5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -723,6 +723,9 @@ export namespace Docs { updateCachedAcls(dataDoc); updateCachedAcls(viewDoc); + if (data instanceof List) { + data.map(item => item instanceof Doc && Doc.SetContainer(item, viewDoc)); + } return viewDoc; } @@ -907,15 +910,13 @@ export namespace Docs { } export function CalendarDocument(options: DocumentOptions, documents: Array) { - const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _layout_nativeDimEditable: true, _layout_reflowHorizontal: true, _layout_reflowVertical: true, ...options, _type_collection: CollectionViewType.Calendar, }); - documents.forEach(d => Doc.SetContainer(d, inst)); - return inst; } // shouldn't ever need to create a KVP document-- instead set the LayoutTemplateString to be a KeyValueBox for the DocumentView (see addDocTab in TabDocView) @@ -924,9 +925,7 @@ export namespace Docs { // } export function FreeformDocument(documents: Array, options: DocumentOptions, id?: string) { - const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Freeform }, id); - documents.forEach(d => Doc.SetContainer(d, inst)); - return inst; + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Freeform }, id); } export function ConfigDocument(options: DocumentOptions, id?: string) { @@ -1031,9 +1030,7 @@ export namespace Docs { } export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { - const ret = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { treeView_FreezeChildren: 'remove|add', ...options, type_collection: CollectionViewType.Docking, dockingConfig: config }, id); - documents.map(c => Doc.SetContainer(c, ret)); - return ret; + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { treeView_FreezeChildren: 'remove|add', ...options, type_collection: CollectionViewType.Docking, dockingConfig: config }, id); } export function DelegateDocument(proto: Doc, options: DocumentOptions = {}) { diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index c057d2402..f85b0b433 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -551,7 +551,6 @@ export function CollectionSubView() { filteredChildDocs={this.filteredChildDocs} advance={answered} curDoc={curDoc} - practiceBtnOffset={this._sideBtnWidth * 4} layoutDoc={this.layoutDoc} uiBtnScaling={this.uiBtnScaling} ScreenToLocalBoxXf={this.ScreenToLocalBoxXf} diff --git a/src/client/views/collections/FlashcardPracticeUI.scss b/src/client/views/collections/FlashcardPracticeUI.scss index 2f99500f8..4ed27793d 100644 --- a/src/client/views/collections/FlashcardPracticeUI.scss +++ b/src/client/views/collections/FlashcardPracticeUI.scss @@ -16,13 +16,15 @@ .FlashcardPracticeUI-practice { position: absolute; width: 100%; - pointer-events: all; -} -.FlashcardPracticeUI-remove { - left: 52%; -} -.FlashcardPracticeUI-check { - right: 52%; + pointer-events: none; + .FlashcardPracticeUI-remove { + left: 52%; + pointer-events: all; + } + .FlashcardPracticeUI-check { + right: 52%; + pointer-events: all; + } } .FlashcardPracticeUI-menu { position: absolute; diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx index 0e9fe89c9..4e424f5cd 100644 --- a/src/client/views/collections/FlashcardPracticeUI.tsx +++ b/src/client/views/collections/FlashcardPracticeUI.tsx @@ -37,7 +37,6 @@ interface PracticeUIProps { ScreenToLocalBoxXf: () => Transform; docViewProps: () => DocumentViewProps; setFilterFunc: (func?: (doc: Doc) => boolean) => void; - practiceBtnOffset?: number; } @observer export class FlashcardPracticeUI extends ObservableReactComponent { @@ -105,7 +104,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent +
setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => setPracticeVal(e, practiceVal.MISSED))}> -- cgit v1.2.3-70-g09d2 From 9779182e74e427d3a8a2004d0efd01fac8387d55 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 16 Oct 2024 17:31:12 -0400 Subject: major fixes to cardDeck view to simplify code and to make arch follow a true circle arc and to fix doc sizing when fitwidth/lightbox/etc. fixes to flashcard UI for advancing to next Doc in cardView and carousel3D. --- src/client/documents/Documents.ts | 4 +- src/client/views/DocumentDecorations.tsx | 4 +- .../views/collections/CollectionCardDeckView.scss | 24 +- .../views/collections/CollectionCardDeckView.tsx | 336 +++++++++++---------- .../views/collections/CollectionCarousel3DView.tsx | 2 +- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/FlashcardPracticeUI.scss | 6 + .../views/collections/FlashcardPracticeUI.tsx | 6 +- src/client/views/global/globalScripts.ts | 26 +- src/client/views/nodes/ComparisonBox.tsx | 25 +- src/client/views/nodes/DocumentContentsView.tsx | 1 - 11 files changed, 230 insertions(+), 206 deletions(-) (limited to 'src/client/views/collections/FlashcardPracticeUI.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 99af1f1a9..e539e3c65 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -508,8 +508,8 @@ 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)'); - cardSort?: STRt = new StrInfo('way cards are sorted in deck view'); - cardSort_isDesc?: BOOLt = new BoolInfo('whether the cards are sorted ascending or descending'); + card_sort?: STRt = new StrInfo('way cards are sorted in deck view'); + card_sort_isDesc?: BOOLt = new BoolInfo('whether the cards are sorted ascending or descending'); } export const DocOptions = new DocumentOptions(); diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 62f2de776..5a48b6c62 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -10,7 +10,7 @@ import { lightOrDark, returnFalse, setupMoveUpEvents } from '../../ClientUtils'; import { Utils, emptyFunction, numberValue } from '../../Utils'; import { DateField } from '../../fields/DateField'; import { Doc, DocListCast, Field, FieldType, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc'; -import { AclAdmin, AclAugment, AclEdit, DocData } from '../../fields/DocSymbols'; +import { AclAdmin, AclAugment, AclEdit, Animation, DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; import { ScriptField } from '../../fields/ScriptField'; @@ -650,7 +650,7 @@ export class DocumentDecorations extends ObservableReactComponent { this._editingTitle = false; diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 0637cd4e9..5283601bf 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -7,23 +7,31 @@ background-color: white; overflow: hidden; display: flex; + .collectionCardView-inner { + display: flex; + transform-origin: top left; + align-items: center; + } button { border-radius: 50%; } } -.card-wrapper { - display: grid; - grid-template-columns: repeat(10, 1fr); +.collectionCardView-flashcardUI { + top: 0; + position: absolute; + width: 100%; + height: 100%; transform-origin: top left; +} - position: absolute; +.collectionCardView-cardwrapper { + display: grid; + grid-template-columns: repeat(10, 1fr); + transform-origin: left 50%; align-items: center; - justify-items: center; - justify-content: center; - - transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); + z-index: 0; // so that setting z-index of active card doesn't make it land on top of things outside of the card-wrapper } .no-card-span { diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 14ce9d2af..5faabacf4 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { ClientUtils, DashColor, imageUrlToBase64, returnFalse, returnNever, returnZero } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; -import { DocData } from '../../../fields/DocSymbols'; +import { Animation, DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { ScriptField } from '../../../fields/ScriptField'; @@ -96,7 +96,7 @@ export class CollectionCardView extends CollectionSubView() { if (isVis) { this.openChatPopup(); } else { - this.Document.cardSort = this.cardSort === cardSortings.Chat ? '' : this.Document.cardSort; + this.Document.card_sort = this.cardSort === cardSortings.Chat ? '' : this.Document.card_sort; } } ); @@ -119,7 +119,25 @@ export class CollectionCardView extends CollectionSubView() { } @computed get cardSort() { - return StrCast(this.Document.cardSort) as cardSortings; + return StrCast(this.Document.card_sort) as cardSortings; + } + /** + * Number of rows of cards to be rendered + */ + @computed get numRows() { + return Math.ceil(this.sortedDocs.length / this._maxRowCount); + } + /** + * Circle arc size, in radians, to layout cards + */ + @computed get archAngle() { + return NumCast(this.layoutDoc.card_arch, 90) * (Math.PI / 180) * (this.childCards.length < this._maxRowCount ? this.childCards.length / this._maxRowCount : 1); + } + /** + * Spacing card rows as a percent of Doc size. 100 means rows spread out to fill 100% of the Doc vertically. Default is 60% + */ + @computed get cardSpacing() { + return NumCast(this.layoutDoc.card_spacing, 60); } /** @@ -137,6 +155,10 @@ export class CollectionCardView extends CollectionSubView() { return (this.childPanelWidth() * length) / this._props.PanelWidth(); } + @computed get nativeScaling() { + return this._props.NativeDimScaling?.() || 1; + } + /** * When in quiz mode, randomly selects a document */ @@ -145,70 +167,17 @@ export class CollectionCardView extends CollectionSubView() { this._curDoc = this.childDocs[randomIndex]; }); - /** - * Number of rows of cards to be rendered - */ - @computed get numRows() { - return Math.ceil(this.sortedDocs.length / this._maxRowCount); - } - - @action - setHoveredNodeIndex = (index: number) => { + setHoveredNodeIndex = action((index: number) => { if (!SnappingManager.IsDragging) this._hoveredNodeIndex = index; - }; + }); isSelected = (doc: Doc) => this._docRefs.get(doc)?.IsSelected; - childPanelWidth = () => NumCast(this.layoutDoc.childPanelWidth, this._props.PanelWidth() / 2); + childPanelWidth = () => NumCast(this.layoutDoc.childPanelWidth, Math.max(150, this._props.PanelWidth() / (this.childCards.length > this._maxRowCount ? this._maxRowCount : this.childCards.length) / this.nativeScaling)); childPanelHeight = () => this._props.PanelHeight() * this.fitContentScale; onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this.isAnyChildContentActive(); isAnyChildContentActive = this._props.isAnyChildContentActive; - /** - * 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 - */ - rotate = (amCards: number, index: number) => { - if (amCards == 1) return 0; - - const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); - if (amCards % 2 === 0) { - if (possRotate === 0) { - return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2))); - } - if (index > (amCards + 1) / 2) { - const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2))); - return possRotate + stepMag; - } - } - - return possRotate; - }; - /** - * Returns the degree to which a card should be translated in the y direction for the arch effect - */ - translateY = (amCards: number, index: number, realIndex: number) => { - const evenOdd = amCards % 2; - const apex = (amCards - evenOdd) / 2; - const Magnitude = this.childPanelWidth() / 2; // 400 - const stepMag = Magnitude / 2 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25); - - let rowOffset = 0; - if (realIndex > this._maxRowCount - 1) { - rowOffset = Magnitude * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount); - } - if (evenOdd === 1 || index < apex - 1) { - return Math.abs(stepMag * (apex - index)) - rowOffset; - } - if (index === apex || index === apex - 1) { - return 0 - rowOffset; - } - - return Math.abs(stepMag * (apex - index - 1)) - rowOffset; - }; - /** * When dragging a card, determines the index the card should be set to if dropped * @param mouseX mouse's x location @@ -216,28 +185,27 @@ export class CollectionCardView extends CollectionSubView() { * @returns the card's new index */ findCardDropIndex = (mouseX: number, mouseY: number) => { - const amCardsTotal = this.sortedDocs.length; + const cardCount = this.sortedDocs.length; let index = 0; - const cardWidth = amCardsTotal < this._maxRowCount ? this._props.PanelWidth() / amCardsTotal : this._props.PanelWidth() / this._maxRowCount; + const cardWidth = cardCount < this._maxRowCount ? this._props.PanelWidth() / cardCount : this._props.PanelWidth() / this._maxRowCount; // Calculate the adjusted X position accounting for the initial offset let adjustedX = mouseX; - const amRows = Math.ceil(amCardsTotal / this._maxRowCount); - const rowHeight = this._props.PanelHeight() / amRows; + const rowHeight = this._props.PanelHeight() / this.numRows; const currRow = Math.floor((mouseY - 100) / rowHeight); //rows start at 0 if (adjustedX < 0) { return 0; // Before the first column } - if (amCardsTotal < this._maxRowCount) { + if (cardCount < this._maxRowCount) { index = Math.floor(adjustedX / cardWidth); - } else if (currRow != amRows - 1) { + } else if (currRow != this.numRows - 1) { index = Math.floor(adjustedX / cardWidth) + currRow * this._maxRowCount; } else { - const rowAmCards = amCardsTotal - currRow * this._maxRowCount; - const offset = ((this._maxRowCount - rowAmCards) / 2) * cardWidth; + const cardsInRow = cardCount - currRow * this._maxRowCount; + const offset = ((this._maxRowCount - cardsInRow) / 2) * cardWidth; adjustedX = mouseX - offset; index = Math.floor(adjustedX / cardWidth) + currRow * this._maxRowCount; @@ -246,11 +214,14 @@ export class CollectionCardView extends CollectionSubView() { }; /** - * Checks to see if a card is being dragged and calls the appropriate methods if so + * if pointer moves over cardDeck while dragging a Doc that is in the Deck or that can be dropped in the deck, + * then this sets the card index where the dragged card would be added. */ @action onPointerMove = (x: number, y: number) => { - this._docDraggedIndex = DragManager.docsBeingDragged.length ? this.findCardDropIndex(x, y) : -1; + if (DragManager.docsBeingDragged.some(doc => this.sortedDocs.includes(doc)) || SnappingManager.CanEmbed) { + this._docDraggedIndex = this.findCardDropIndex(x, y); + } }; /** @@ -269,7 +240,7 @@ export class CollectionCardView extends CollectionSubView() { const sorted = this.sortedDocs; const originalIndex = sorted.findIndex(doc => doc === draggedDoc); - this.Document.cardSort = ''; + this.Document.card_sort = ''; originalIndex !== -1 && sorted.splice(originalIndex, 1); sorted.splice(dragIndex, 0, draggedDoc); if (de.complete.docDragData.removeDocument?.(draggedDoc)) { @@ -285,15 +256,6 @@ export class CollectionCardView extends CollectionSubView() { '' ); - @computed get sortedDocs() { - return this.sort( - this.childCards.map(card => card.layout), - this.cardSort, - BoolCast(this.Document.cardSort_isDesc), - this._docDraggedIndex - ); - } - /** * Used to determine how to sort cards based on tags. The leftmost tags are given lower values while cards to the right are * given higher values. Decimals are used to determine placement for cards with multiple tags @@ -341,6 +303,15 @@ export class CollectionCardView extends CollectionSubView() { return docs; }; + @computed get sortedDocs() { + return this.sort( + this.childCards.map(card => card.layout), + this.cardSort, + BoolCast(this.Document.card_sort_isDesc), + this._docDraggedIndex + ); + } + isChildContentActive = computedFn( (doc: Doc) => () => this._props.isContentActive?.() === false @@ -359,74 +330,99 @@ export class CollectionCardView extends CollectionSubView() { Document={doc} NativeWidth={returnZero} NativeHeight={returnZero} - fitWidth={returnFalse} - onDoubleClickScript={this.onChildDoubleClick} + PanelWidth={this.childPanelWidth} + PanelHeight={this.childPanelHeight} renderDepth={this._props.renderDepth + 1} LayoutTemplate={this._props.childLayoutTemplate} LayoutTemplateString={this._props.childLayoutString} containerViewPath={this.childContainerViewPath} ScreenToLocalTransform={screenToLocalTransform} // makes sure the box wrapper thing is in the right spot isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} - PanelWidth={this.childPanelWidth} - PanelHeight={this.childPanelHeight} + isContentActive={this.isChildContentActive(doc)} + fitWidth={returnFalse} waitForDoubleClickToClick={returnNever} scriptContext={this} + onDoubleClickScript={this.onChildDoubleClick} onClickScript={this._curDoc === doc ? undefined : this._clickScript} dontCenter="y" // Don't center it vertically, because the grid it's in is already doing that and we don't want to do it twice. dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType} showTags={BoolCast(this.layoutDoc.showChildTags)} whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} - isContentActive={this.isChildContentActive(doc)} dontHideOnDrag /> ); /** * Determines how many cards are in the row of a card at a specific index - * @param index - * @returns + * @param index numerical index of card in total list of all cards + * @returns number of cards in row that contains index */ - overflowAmCardsCalc = (index: number) => { - if (this.sortedDocs.length < this._maxRowCount) { - return this.sortedDocs.length; + cardsInRowThatIncludesCardIndex = (index: number) => { + if (this.childCards.length < this._maxRowCount) { + return this.childCards.length; } - const totalCards = this.sortedDocs.length; - // if 9 or less + const totalCards = this.childCards.length; if (index < totalCards - (totalCards % this._maxRowCount)) { return this._maxRowCount; } return totalCards % this._maxRowCount; }; /** - * Determines the index a card is in in a row - * @param realIndex - * @returns + * Determines the index a card is in in a row. If the row is not full, then the cards + * are centered within the row (as if unrendered cards had been added to the start and end + * of the row) and the retuned index is the index the card in this virtual full row. + * @param index numerical index of card in total list of all cards + * @returns index of card in its row, normalized to a full size row */ - overflowIndexCalc = (realIndex: number) => realIndex % this._maxRowCount; + centeredIndexOfCardInRow = (index: number) => { + const cardsInRow = this.cardsInRowThatIncludesCardIndex(index); + const lineIndex = index % this._maxRowCount; + if (cardsInRow === this._maxRowCount) return lineIndex; + return lineIndex + (this._maxRowCount - cardsInRow) / 2; + }; /** - * Translates the cards in the second rows and beyond over to the right - * @param realIndex - * @param calcIndex - * @param calcRowCards - * @returns + * Returns the rotation of a card in radians based on its horizontal location (and thus m apping to a circle arc). + * The amount of rotation is goverend by the Doc's card_arch field which specifies, in degrees, the range of a circle + * arc that cards should cover -- by default, -45 to 45 degrees. + * @param index numerical index of card in total list of all cards + * @returns angle of rotation in radians + */ + rotate = (index: number) => { + const cardsInRow = this.cardsInRowThatIncludesCardIndex(index); + const centeredIndexInRow = (cardsInRow < this._maxRowCount ? index + (this._maxRowCount - cardsInRow) / 2 : index) % this._maxRowCount; + const rowIndexMax = this._maxRowCount - 1; + return ((this.archAngle / 2) * (centeredIndexInRow - rowIndexMax / 2)) / (rowIndexMax / 2); + }; + /** + * Provides a vertical adjustment to a card's grid position so that it will lie along an arch. + * @param index numerical index of card in total list of all cards + */ + translateY = (index: number) => { + const Magnitude = ((this._props.PanelHeight() * this.fitContentScale) / 2) * Math.sqrt(((this.archAngle * (180 / Math.PI)) / 60) * 4); + return Magnitude * (1 - Math.sin(this.rotate(index) + Math.PI / 2) - (1 - Math.sin(this.archAngle / 2 + Math.PI / 2)) / 2); + }; + /** + * When the card index is for a row (not the first row) that is not full, this returns a horizontal adjustment that centers the row + * @param index index of card from start of deck + * @param cardsInRow number of cards in the row containing the indexed card + * @returns horizontal pixel translation */ - translateOverflowX = (realIndex: number, calcRowCards: number) => (realIndex < this._maxRowCount ? 0 : (this._maxRowCount - calcRowCards) * (this.childPanelWidth() / 2)); + horizontalAdjustmentForPartialRows = (index: number, cardsInRow: number) => (index < this._maxRowCount ? 0 : (this._maxRowCount - cardsInRow) * (this.childPanelWidth() / 2)); /** - * Determines how far to translate a card in the y direction depending on its index and if it's selected + * Adjusts the vertical placement of the card from its grid position so that it will either line on a + * circular arc if the card isn't active, or so that it will be centered otherwise. * @param isActive whether the card is focused for interaction - * @param realIndex index of card from start of deck - * @param amCards ?? - * @param calcRowIndex index of card from start of row - * @returns Y translation of card + * @param index index of card from start of deck + * @returns vertical pixel translation */ - calculateTranslateY = (isActive: boolean, realIndex: number, amCards: number, calcRowIndex: number) => { - const rowHeight = (this._props.PanelHeight() * this.fitContentScale) / this.numRows; - const rowIndex = Math.trunc(realIndex / this._maxRowCount); + adjustCardYtoFitArch = (isActive: boolean, index: number) => { + const rowHeight = this._props.PanelHeight() / this.numRows; + const rowIndex = Math.floor(index / this._maxRowCount); const rowToCenterShift = this.numRows / 2 - rowIndex; - if (isActive) return rowToCenterShift * rowHeight - rowHeight / 2; - if (amCards == 1) return 50 * this.fitContentScale; - return this.translateY(amCards, calcRowIndex, realIndex); + return isActive + ? (rowToCenterShift * rowHeight - rowHeight / 2) * ((this.cardSpacing * this.fitContentScale) / 100) // + : this.translateY(index); }; /** @@ -493,7 +489,7 @@ export class CollectionCardView extends CollectionSubView() { } if (questionType === '6') { - this.Document.cardSort = 'chat'; + this.Document.card_sort = 'chat'; } listItems.forEach((item, index) => { @@ -549,7 +545,7 @@ export class CollectionCardView extends CollectionSubView() { await this.childPairStringListAndUpdateSortDesc(); }; - childScreenToLocal = computedFn((doc: Doc, index: number, calcRowIndex: number, isSelected: boolean, amCards: number) => () => { + childScreenToLocal = computedFn((doc: Doc, index: number, isSelected: boolean) => () => { // need to explicitly trigger an invalidation since we're reading everything from the Dom this._forceChildXf; this._props.ScreenToLocalTransform(); @@ -560,24 +556,40 @@ export class CollectionCardView extends CollectionSubView() { 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 + .scale(1 / scale).rotate(!isSelected ? -this.rotate(this.centeredIndexOfCardInRow(index)) : 0); // prettier-ignore }); + /** + * Releases the currently focused Doc by deselecting it and returning it to its location on the arch, and selecting the + * cardDeck itself. + * This will also force the Doc to recompute its layout transform when the animation completes. + * In addition, this sets an animating flag on the Doc so that it will receive no poiner events when animating, such as hover + * events that would trigger a flashcard to flip. + * @param doc doc that will be animated away from center focus + */ + releaseCurDoc = action(() => { + const selDoc = this._curDoc; + this._curDoc = undefined; + const cardDocView = DocumentView.getDocumentView(selDoc, this.DocumentView?.()); + if (cardDocView && selDoc) { + DocumentView.DeselectView(cardDocView); + this._props.select(false); + selDoc[Animation] = selDoc; // turns off pointer events & doc decorations while animating - useful for flashcards that reveal back on hover + setTimeout(action(() => { + selDoc[Animation] = undefined; + this._forceChildXf++; + }), 350); // prettier-ignore + } + }); + + /** + * turns off the _dropped flag at the end of a drag/drop, or releases the focused Doc if a different Doc is clicked + */ cardPointerUp = action((doc: Doc) => { - // if a card doc has just moved, or a card is selected and in front, then ignore this event if (this._curDoc === doc || this._dropped) { this._dropped = false; } else { - // otherwise, turn off documentDecorations becase we're in a selection transition and want to avoid artifacts. - // Turn them back on when the animation has completed and the render and backend structures are in synch - SnappingManager.SetHideDecorations(true); - setTimeout( - action(() => { - SnappingManager.SetHideDecorations(false); - this._forceChildXf++; - }), - 1000 - ); + this.releaseCurDoc(); // NOTE: the onClick script for the card will select the new card (ie, 'doc') } }); @@ -585,25 +597,17 @@ export class CollectionCardView extends CollectionSubView() { * Actually renders all the cards */ @computed get renderCards() { - if (!this.childCards.length) { - return null; - } - + console.log('CHILDPw = ' + this.childPanelWidth()); // Map sorted documents to their rendered components return this.sortedDocs.map((doc, index) => { - const calcRowIndex = this.overflowIndexCalc(index); - const amCards = this.overflowAmCardsCalc(index); + const cardsInRow = this.cardsInRowThatIncludesCardIndex(index); + + const childScreenToLocal = this.childScreenToLocal(doc, index, doc === this._curDoc); - const childScreenToLocal = this.childScreenToLocal(doc, index, calcRowIndex, doc === this._curDoc, amCards); + const translateToCenterIfActive = () => (doc === this._curDoc ? (cardsInRow / 2 - (index % this._maxRowCount)) * 100 - 50 : 0); - const translateIfSelected = () => { - const indexInRow = index % this._maxRowCount; - const rowIndex = Math.trunc(index / this._maxRowCount); - const rowCenterIndex = Math.min(this._maxRowCount, this.sortedDocs.length - rowIndex * this._maxRowCount) / 2; - return (rowCenterIndex - indexInRow) * 100 - 50; - }; const aspect = NumCast(doc.height) / NumCast(doc.width, 1); - const vscale = Math.max(1,Math.min((this._props.PanelHeight() * 0.95 * this.fitContentScale) / (aspect * this.childPanelWidth()), + const vscale = Math.max(1,Math.min((this._props.PanelHeight() * 0.95 * this.fitContentScale * this.nativeScaling) / (aspect * this.childPanelWidth()), (this._props.PanelHeight() - 80) / (aspect * (this._props.PanelWidth() / 10)))); // prettier-ignore const hscale = Math.min(this.sortedDocs.length, this._maxRowCount) / 2; // bcz: hack - the grid is divided evenly into maxRowCount cells, so the max scaling would be maxRowCount -- but making things that wide is ugly, so cap it off at half the window size return ( @@ -614,9 +618,9 @@ export class CollectionCardView extends CollectionSubView() { style={{ width: this.childPanelWidth(), height: 'max-content', - transform: `translateY(${this.calculateTranslateY(doc === this._curDoc, index, amCards, calcRowIndex)}px) - translateX(calc(${doc === this._curDoc ? translateIfSelected() : 0}% + ${this.translateOverflowX(index, amCards)}px)) - rotate(${doc !== this._curDoc ? this.rotate(amCards, calcRowIndex) : 0}deg) + transform: `translateY(${this.adjustCardYtoFitArch(doc === this._curDoc, index)}px) + translateX(calc(${translateToCenterIfActive()}% + ${this.horizontalAdjustmentForPartialRows(index, cardsInRow)}px)) + rotate(${doc !== this._curDoc ? this.rotate(index) : 0}rad) scale(${doc === this._curDoc ? `${Math.min(hscale, vscale) * 100}%` : this._hoveredNodeIndex === index ? 1.1 : 1})`, }} // prettier-ignore onPointerEnter={() => this.setHoveredNodeIndex(index)} @@ -636,26 +640,19 @@ export class CollectionCardView extends CollectionSubView() { ScreenToLocalTransform: this.contentScreenToLocalXf, }); answered = action(() => { - this._curDoc = this.curDoc ? this.filteredChildDocs()[(this.filteredChildDocs().findIndex(this.curDoc) + 1) % (this.filteredChildDocs().length || 1)] : undefined; + this._curDoc = this.curDoc ? this.filteredChildDocs()[(this.filteredChildDocs().findIndex(d => d === this.curDoc()) + 1) % (this.filteredChildDocs().length || 1)] : undefined; }); curDoc = () => this._curDoc; render() { - const isEmpty = this.childCards.length === 0; + const fitContentScale = this.childCards.length === 0 ? 1 : this.fitContentScale; return (
this.createDashEventsTarget(ele)} - onPointerDown={action(() => { - this._curDoc = undefined; - SnappingManager.SetHideDecorations(true); - setTimeout( - action(() => { - SnappingManager.SetHideDecorations(false); - this._forceChildXf++; - }), - 1000 - ); + onPointerDown={action(e => { + if (e.button === 2 || e.ctrlKey) return; + this.releaseCurDoc(); })} onPointerLeave={action(() => (this._docDraggedIndex = -1))} onPointerMove={e => this.onPointerMove(...this._props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY))} @@ -665,16 +662,31 @@ export class CollectionCardView extends CollectionSubView() { color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string, }}>
- {this.renderCards} +
+ {this.renderCards} +
+
+ {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)} +
- {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
); } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index e9ace733e..a71cc43ba 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -205,7 +205,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); curDoc = () => this.carouselItems[NumCast(this.layoutDoc._carousel_index)]?.layout; - answered = (correct: boolean) => (!correct || !this.curDoc()) && this.changeSlide(1); + answered = (correct: boolean) => (!correct || !this.curDoc() || NumCast(this.layoutDoc._carousel_index) === this.carouselItems.length - 1) && this.changeSlide(1); docViewProps = () => ({ ...this._props, // isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive, diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index ff587b199..1f2bc908f 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -203,7 +203,7 @@ export class CollectionCarouselView extends CollectionSubView() { isContentActive: this.isChildContentActive, ScreenToLocalTransform: this.contentScreenToLocalXf, }); - answered = () => this.advance(); + answered = (correct: boolean) => (!correct || !this.curDoc() || NumCast(this.layoutDoc._carousel_index) === this.carouselItems.length - 1) && this.advance(); render() { return ( diff --git a/src/client/views/collections/FlashcardPracticeUI.scss b/src/client/views/collections/FlashcardPracticeUI.scss index 4ed27793d..210c6798f 100644 --- a/src/client/views/collections/FlashcardPracticeUI.scss +++ b/src/client/views/collections/FlashcardPracticeUI.scss @@ -1,3 +1,9 @@ +.FlashcardPracticeUI { + width: 100%; + height: 100%; + display: flex; + align-items: center; +} .FlashcardPracticeUI-remove, .FlashcardPracticeUI-check { position: absolute; diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx index 79eb7f107..ec892ee3d 100644 --- a/src/client/views/collections/FlashcardPracticeUI.tsx +++ b/src/client/views/collections/FlashcardPracticeUI.tsx @@ -104,8 +104,8 @@ export class FlashcardPracticeUI extends ObservableReactComponent { e.stopPropagation(); const curDoc = this._props.curDoc(); - curDoc && (curDoc[this.practiceField] = val); this._props.advance?.(val === practiceVal.CORRECT); + curDoc && (curDoc[this.practiceField] = val); }; return this.practiceMode == practiceMode.PRACTICE && this._props.curDoc() ? ( @@ -182,7 +182,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent (this.practiceMode && BoolCast(doc?._layout_isFlashcard) && doc[this.practiceField] === practiceVal.CORRECT ? true : false); // show only cards that aren't marked as correct render() { return ( - <> +
{this.emptyMessage} {this.practiceButtons} {this._props.layoutDoc._chromeHidden ? null : ( @@ -208,7 +208,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent )} - +
); } } diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 903e04ad7..954c79f7d 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -189,38 +189,38 @@ ScriptingGlobals.add(function showFreeform( setDoc: (doc: Doc, dv: DocumentView) => { Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards}, // prettier-ignore }], ['time', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "time", - setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "time" ? doc.cardSort = '' : doc.cardSort = 'time'}, // prettier-ignore + checkResult: (doc: Doc) => StrCast(doc?.card_sort) === "time", + setDoc: (doc: Doc, dv: DocumentView) => { doc.card_sort === "time" ? doc.card_sort = '' : doc.card_sort = 'time'}, // prettier-ignore }], ['docType', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "type", - setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "type" ? doc.cardSort = '' : doc.cardSort = 'type'}, // prettier-ignore + checkResult: (doc: Doc) => StrCast(doc?.card_sort) === "type", + setDoc: (doc: Doc, dv: DocumentView) => { doc.card_sort === "type" ? doc.card_sort = '' : doc.card_sort = 'type'}, // prettier-ignore }], ['color', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "color", - setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "color" ? doc.cardSort = '' : doc.cardSort = 'color'}, // prettier-ignore + checkResult: (doc: Doc) => StrCast(doc?.card_sort) === "color", + setDoc: (doc: Doc, dv: DocumentView) => { doc.card_sort === "color" ? doc.card_sort = '' : doc.card_sort = 'color'}, // prettier-ignore }], ['tag', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "tag", - setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "tag" ? doc.cardSort = '' : doc.cardSort = 'tag'}, // prettier-ignore + checkResult: (doc: Doc) => StrCast(doc?.card_sort) === "tag", + setDoc: (doc: Doc, dv: DocumentView) => { doc.card_sort === "tag" ? doc.card_sort = '' : doc.card_sort = 'tag'}, // prettier-ignore }], ['up', { - checkResult: (doc: Doc) => BoolCast(!doc?.cardSort_isDesc), + checkResult: (doc: Doc) => BoolCast(!doc?.card_sort_isDesc), setDoc: (doc: Doc, dv: DocumentView) => { - doc.cardSort_isDesc = false; + doc.card_sort_isDesc = false; }, }], ['down', { - checkResult: (doc: Doc) => BoolCast(doc?.cardSort_isDesc), + checkResult: (doc: Doc) => BoolCast(doc?.card_sort_isDesc), setDoc: (doc: Doc, dv: DocumentView) => { - doc.cardSort_isDesc = true; + doc.card_sort_isDesc = true; }, }], ['toggle-chat', { checkResult: (doc: Doc) => GPTPopup.Instance.visible, setDoc: (doc: Doc, dv: DocumentView) => { if (GPTPopup.Instance.visible){ - doc.cardSort = '' + doc.card_sort = '' GPTPopup.Instance.setVisible(false); } else { diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 38ce5f2f7..3c126ea4a 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -8,7 +8,7 @@ import ReactLoading from 'react-loading'; import { imageUrlToBase64, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents } from '../../../ClientUtils'; import { emptyFunction } from '../../../Utils'; import { Doc, Opt } from '../../../fields/Doc'; -import { DocData } from '../../../fields/DocSymbols'; +import { Animation, DocData } from '../../../fields/DocSymbols'; import { RichTextField } from '../../../fields/RichTextField'; import { BoolCast, DocCast, NumCast, RTFCast, StrCast, toList } from '../../../fields/Types'; import { nullAudio } from '../../../fields/URLField'; @@ -18,7 +18,6 @@ import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { dropActionType } from '../../util/DropActionTypes'; -import { SnappingManager } from '../../util/SnappingManager'; import { undoable } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; @@ -235,7 +234,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() @computed get uiBtnScaling() { return Math.max(this.maxWidgetSize / this._sideBtnWidth, 1) * Math.min(1, this.viewScaling)* (this._props.NativeDimScaling?.() ?? 1); } // prettier-ignore @computed get flashcardMenu() { - return SnappingManager.HideDecorations ? null : ( + return (
{this.revealOpHover || !this._props.isSelected() ? null : this.overlayAlternateIcon} {!this._props.isSelected() || this._renderSide === this.frontKey ? null : ( @@ -666,20 +665,20 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() <> () [flashcardRevealOp.SLIDE, this.renderAsBeforeAfter]]); // prettier-ignore if (this.isQuizMode) this.renderAsQuiz(this.frontText); return ( -
+
{renderMode.get(this.revealOp)?.() ?? null} {this.loading ? (
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 9aa000ba7..aab8a183a 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/require-default-props */ import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -- cgit v1.2.3-70-g09d2