reorganized comparisonBox related components -- moved stuff down into Docs.Crete and CurrentUserUtils. changed Doc.Copy to copy Doc's in fields tagged with cloneOnCopy. Changed ComparisonBox to support hover for slide or flip views. Fixed pointerEfvents for hover in comparisonBox

5 files changed, 75 insertions, 60 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 05be376ca..e9ace733e 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -15,6 +15,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import { FocusViewOptions } from '../nodes/FocusViewOptions';
 import './CollectionCarousel3DView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
+import { computedFn } from 'mobx-utils';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } = require('../global/globalCssVariables.module.scss');
@@ -53,18 +54,22 @@ export class CollectionCarousel3DView extends CollectionSubView() {
 
     centerScale = Number(CAROUSEL3D_CENTER_SCALE);
     sideScale = Number(CAROUSEL3D_SIDE_SCALE);
-    panelWidth = () => this._props.PanelWidth() / 3;
-    panelHeight = () => this._props.PanelHeight() * this.sideScale;
+    panelWidth = () => this._props.PanelWidth() / 3 / this.nativeScaling();
+    panelHeight = () => (this._props.PanelHeight() * this.sideScale) / this.nativeScaling();
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
-    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
+    isChildContentActive = computedFn(
+        (doc: Doc) => () =>
+            this._props.isContentActive?.() === false
                 ? false
-                : undefined;
+                : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive))
+                  ? true
+                  : this._props.isContentActive?.() && this.curDoc() === doc
+                    ? true
+                    : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false
+                      ? false
+                      : undefined
+    );
     contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1);
     childScreenLeftToLocal = () =>
         this.contentScreenToLocalXf()
@@ -110,7 +115,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                 LayoutTemplateString={this._props.childLayoutString}
                 focus={this.focus}
                 ScreenToLocalTransform={dxf}
-                isContentActive={this.isChildContentActive}
+                isContentActive={this.isChildContentActive(child)}
                 isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
                 PanelWidth={this.panelWidth}
                 PanelHeight={this.panelHeight}
@@ -125,7 +130,6 @@ export class CollectionCarousel3DView extends CollectionSubView() {
     }
 
     changeSlide = (direction: number) => {
-        DocumentView.DeselectAll();
         this.layoutDoc._carousel_index = !this.curDoc() ? 0 : (NumCast(this.layoutDoc._carousel_index) + direction + this.carouselItems.length) % (this.carouselItems.length || 1);
     };
 
@@ -205,9 +209,10 @@ export class CollectionCarousel3DView extends CollectionSubView() {
     docViewProps = () => ({
         ...this._props, //
         isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive,
-        isContentActive: this.isChildContentActive,
+        isContentActive: this._props.isContentActive,
         ScreenToLocalTransform: this.contentScreenToLocalXf,
     });
+    nativeScaling = () => this._props.NativeDimScaling?.() || 1;
     render() {
         return (
             <div
@@ -216,6 +221,10 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                 style={{
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
+                    transformOrigin: 'top left',
+                    transform: `scale(${this.nativeScaling()})`,
+                    width: `${100 / this.nativeScaling()}%`,
+                    height: `${100 / this.nativeScaling()}%`,
                 }}>
                 <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}>
                     {this.content}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index ef66a2c83..ff587b199 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -58,18 +58,12 @@ export class CollectionCarouselView extends CollectionSubView() {
     /**
      * Goes to the next Doc in the stack subject to the currently selected filter option.
      */
-    advance = (e?: React.MouseEvent) => {
-        e?.stopPropagation();
-        this.move(1);
-    };
+    advance = () => this.move(1);
 
     /**
      * Goes to the previous Doc in the stack subject to the currently selected filter option.
      */
-    goback = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.move(-1);
-    };
+    goback = () => this.move(-1);
 
     curDoc = () => this.carouselItems[this.carouselIndex]?.layout;
 
@@ -78,24 +72,23 @@ export class CollectionCarouselView extends CollectionSubView() {
         const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
         return childValue ?? this._props.styleProvider?.(this.layoutDoc, captionProps, property);
     };
-    contentPanelWidth = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc.xMargin);
-    contentPanelHeight = () => this._props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0) - 2 * NumCast(this.layoutDoc.yMargin);
+    contentPanelWidth = () => (this._props.PanelWidth() - 2 * NumCast(this.layoutDoc.xMargin)) / this.nativeScaling();
+    contentPanelHeight = () => (this._props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0) - 2 * NumCast(this.layoutDoc.yMargin)) / this.nativeScaling();
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.captionMarginX;
     contentScreenToLocalXf = () =>
         this._props
-            .ScreenToLocalTransform()
-            .translate(-NumCast(this.layoutDoc.xMargin), -NumCast(this.layoutDoc.yMargin))
-            .scale(this._props.NativeDimScaling?.() || 1);
+            .ScreenToLocalTransform() //
+            .translate(-NumCast(this.layoutDoc.xMargin) / this.nativeScaling(), -NumCast(this.layoutDoc.yMargin) / this.nativeScaling());
     isChildContentActive = () =>
         this._props.isContentActive?.() === false
             ? false
-            : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive))
+            : this._props.isContentActive()
               ? true
               : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false
                 ? false
-                : undefined;
+                : undefined; // prettier-ignore
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
     renderDoc = (doc: Doc, showCaptions: boolean, overlayFunc?: (r: DocumentView | null) => void) => {
         return (
@@ -202,6 +195,8 @@ export class CollectionCarouselView extends CollectionSubView() {
         );
     }
 
+    nativeScaling = () => this._props.NativeDimScaling?.() || 1;
+
     docViewProps = () => ({
         ...this._props, //
         isDocumentActive: this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive,
@@ -212,20 +207,25 @@ export class CollectionCarouselView extends CollectionSubView() {
 
     render() {
         return (
-            <div
-                className="collectionCarouselView-outer"
-                ref={this.createDashEventsTarget}
-                style={{
-                    background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
-                    color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
-                    width: `calc(100% - ${NumCast(this.layoutDoc._xMargin)}px)`,
-                    height: `calc(100% - ${NumCast(this.layoutDoc._yMargin)}px)`,
-                    left: NumCast(this.layoutDoc._xMargin),
-                    top: NumCast(this.layoutDoc._yMargin),
-                }}>
-                {this.content}
-                {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
-                {this.navButtons}
+            <div>
+                <div
+                    className="collectionCarouselView-outer"
+                    ref={this.createDashEventsTarget}
+                    style={{
+                        background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
+                        color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
+                        left: NumCast(this.layoutDoc._xMargin),
+                        top: NumCast(this.layoutDoc._yMargin),
+                        transformOrigin: 'top left',
+                        transform: `scale(${this.nativeScaling()})`,
+                        width: `calc(${100 / this.nativeScaling()}% - ${(2 * NumCast(this.layoutDoc._xMargin)) / this.nativeScaling()}px)`,
+                        height: `calc(${100 / this.nativeScaling()}% - ${(2 * NumCast(this.layoutDoc._yMargin)) / this.nativeScaling()}px)`,
+                        position: 'relative',
+                    }}>
+                    {this.content}
+                    {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
+                    {this.navButtons}
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index f85b0b433..ab5b70a85 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -523,7 +523,7 @@ export function CollectionSubView<X>() {
         /**
          * 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
+        @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale; } // 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
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 7418d4360..6f0833a22 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -83,7 +83,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
         return viewField;
     }
 
-    screenToLocalTransform = () => (this._props.renderDepth ? this.ScreenToLocalBoxXf() : this.ScreenToLocalBoxXf().scale(this._props.PanelWidth() / this.bodyPanelWidth()));
+    screenToLocalTransform = this.ScreenToLocalBoxXf;
     // prettier-ignore
     private renderSubView = (type: CollectionViewType | undefined, props: SubCollectionViewProps) => {
         TraceMobx();
@@ -202,8 +202,6 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
         }
     };
 
-    bodyPanelWidth = () => this._props.PanelWidth();
-
     childLayoutTemplate = () => this._props.childLayoutTemplate?.() || Cast(this.Document.childLayoutTemplate, Doc, null);
     isContentActive = () => this._isContentActive;
 
@@ -221,7 +219,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
             removeDocument: this.removeDocument,
             isContentActive: this.isContentActive,
             isAnyChildContentActive: this.isAnyChildContentActive,
-            PanelWidth: this.bodyPanelWidth,
+            PanelWidth: this._props.PanelWidth,
             PanelHeight: this._props.PanelHeight,
             ScreenToLocalTransform: this.screenToLocalTransform,
             childLayoutTemplate: this.childLayoutTemplate,
diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx
index 45e040653..79eb7f107 100644
--- a/src/client/views/collections/FlashcardPracticeUI.tsx
+++ b/src/client/views/collections/FlashcardPracticeUI.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { IconButton, MultiToggle, Type } from 'browndash-components';
+import { MultiToggle, Type } from 'browndash-components';
 import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -25,8 +25,8 @@ enum practiceVal {
 }
 
 export enum flashcardRevealOp {
-    HOVER = 'hover',
     FLIP = 'flip',
+    SLIDE = 'slide',
 }
 
 interface PracticeUIProps {
@@ -153,20 +153,28 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                     selectedItems={this.practiceMode}
                     onSelectionChange={(val: (string | number) | (string | number)[]) => togglePracticeMode(val as practiceMode)}
                 />
-                <IconButton
-                    tooltip="hover over card to reveal answer"
-                    type={Type.TERT}
-                    text={StrCast(this._props.layoutDoc.revealOp)}
+                <MultiToggle
+                    tooltip="How to reveal flashcard answer"
+                    type={Type.PRIM}
                     color={SnappingManager.userColor}
                     background={SnappingManager.userVariantColor}
-                    icon={<FontAwesomeIcon color={SnappingManager.userColor} icon={this._props.layoutDoc.revealOp === flashcardRevealOp.HOVER ? 'hand-point-up' : 'question'} size="sm" />}
-                    label={StrCast(this._props.layoutDoc.revealOp)}
-                    onPointerDown={e =>
-                        setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => {
-                            this._props.layoutDoc.revealOp = this._props.layoutDoc.revealOp === flashcardRevealOp.HOVER ? flashcardRevealOp.FLIP : flashcardRevealOp.HOVER;
-                            this._props.layoutDoc.childDocumentsActive = this._props.layoutDoc.revealOp === 'hover' ? true : undefined;
-                        })
-                    }
+                    multiSelect={false}
+                    isToggle={false}
+                    toggleStatus={!!this.practiceMode}
+                    label={StrCast(this._props.layoutDoc.revealOp, flashcardRevealOp.FLIP)}
+                    items={[
+                        ['reveal', StrCast(this._props.layoutDoc.revealOp) === flashcardRevealOp.SLIDE ? 'expand' : 'question', StrCast(this._props.layoutDoc.revealOp, flashcardRevealOp.FLIP)],
+                        ['trigger', this._props.layoutDoc.revealOp_hover ? 'hand-point-up' : 'hand', this._props.layoutDoc.revealOp_hover ? 'show on hover' : 'show on click'],
+                    ].map(([item, icon, tooltip]) => ({
+                        icon: <FontAwesomeIcon className={`FlashcardPracticeUI-${item}`} color={setColor(item as practiceMode)} icon={icon as IconProp} size="sm" />,
+                        tooltip: tooltip,
+                        val: item,
+                    }))}
+                    selectedItems={this._props.layoutDoc.revealOp_hover ? ['reveal', 'trigger'] : 'reveal'}
+                    onSelectionChange={(val: (string | number) | (string | number)[]) => {
+                        if (val === 'reveal') this._props.layoutDoc.revealOp = this._props.layoutDoc.revealOp === flashcardRevealOp.SLIDE ? flashcardRevealOp.FLIP : flashcardRevealOp.SLIDE;
+                        if (val === 'trigger') this._props.layoutDoc.revealOp_hover = !this._props.layoutDoc.revealOp_hover;
+                    }}
                 />
             </div>
         );