more refactoring to of collection flashcards into CollectioSubView to simplify using it in diferent collection views.

1 files changed, 21 insertions, 60 deletions

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<string, Doc>();
     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<Doc, DocumentView>();
@@ -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<string>(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 (
             <div
                 className="collectionCardView-outer"
@@ -661,31 +645,8 @@ export class CollectionCardView extends CollectionSubView() {
                         gridAutoRows: `${100 / this.numRows}%`,
                     }}>
                     {this.renderCards}
-                    <div
-                        className="collectionCardDeckView-flashcards"
-                        style={{
-                            transform: `scale(${this.fitContentScale || 1})`,
-                            width: `${100 / (this.fitContentScale || 1)}%`,
-                            height: `${100 / (this.fitContentScale || 1)}%`,
-                            pointerEvents: !this.childDocsWithoutLinks.length ? 'unset' : undefined,
-                        }}>
-                        <FlashcardPracticeUI
-                            setFilterFunc={this.setFilterFunc}
-                            fieldKey={this.fieldKey}
-                            sideBtnWidth={this._sideBtnWidth}
-                            carouselItems={this.carouselItemsFunc}
-                            childDocs={this.childDocs}
-                            advance={this.answered}
-                            curDoc={this.curDoc}
-                            layoutDoc={this.layoutDoc}
-                            maxWidgetScale={this.maxWidgetScale}
-                            uiBtnScaleTransform={this.uiBtnScaleTransform}
-                            ScreenToLocalBoxXf={this.ScreenToLocalBoxXf}
-                            renderDepth={this._props.renderDepth}
-                            docViewProps={this.docViewProps}
-                        />
-                    </div>
                 </div>
+                {this.flashCardUI(this.curDoc, this.docViewProps)}
             </div>
         );
     }