1 files changed, 29 insertions, 10 deletions

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 672c189ba..e0c360132 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import axios from 'axios';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
@@ -30,6 +30,7 @@ import './ComparisonBox.scss';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
+import { TraceMobx } from '../../../fields/util';
 
 const API_URL = 'https://api.unsplash.com/search/photos';
 
@@ -143,19 +144,28 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         this._reactDisposer.select = reaction(
             () => this._props.isSelected(),
             selected => {
-                if (selected && this.revealOp !== flashcardRevealOp.SLIDE) this.activateContent();
-                !selected && (this._childActive = false);
+                if (selected) {
+                    switch (this.revealOp) {
+                        default:
+                        case flashcardRevealOp.FLIP: this.activateContent(); break;
+                        case flashcardRevealOp.SLIDE: break;
+                    } // prettier-ignore
+                } else {
+                    this._childActive = false;
+                }
             }, // what it should update to
             { fireImmediately: true }
         );
-        this._reactDisposer.hover = reaction(
-            () => this._props.isContentActive(),
-            hover => {
-                if (!hover) {
-                    this.revealOp === flashcardRevealOp.FLIP && this.animateFlipping(this.frontKey);
-                    this.revealOp === flashcardRevealOp.SLIDE && this.animateSliding(this._props.PanelWidth() - 3);
+        this._reactDisposer.inactive = reaction(
+            () => !this._props.isContentActive(),
+            inactive => {
+                if (inactive) {
+                    switch (this.revealOp) {
+                        case flashcardRevealOp.FLIP: this.animateFlipping(this.frontKey); break;
+                        case flashcardRevealOp.SLIDE: this.animateSliding(this._props.PanelWidth() - 3); break;
+                    } // prettier-ignore
                 }
-            }, // what it should update to
+            },
             { fireImmediately: true }
         );
     }
@@ -197,7 +207,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @computed get clipWidth()     { return NumCast(this.layoutDoc[this.clipWidthKey], this.isFlashcard ? 100: 50); } // prettier-ignore
     @computed get clipHeight()    { return NumCast(this.layoutDoc[this.clipHeightKey], 200);  } // prettier-ignore
     @computed get revealOp()      { return StrCast(this.layoutDoc[this.revealOpKey], StrCast(this.containerDoc?.revealOp, this.isFlashcard ? flashcardRevealOp.FLIP : flashcardRevealOp.SLIDE)) as flashcardRevealOp; } // prettier-ignore
+    set revealOp(op:flashcardRevealOp) { this.layoutDoc[this.revealOpKey] =  op; } // prettier-ignore
     @computed get revealOpHover() { return BoolCast(this.layoutDoc[this.revealOpKey+"_hover"], BoolCast(this.containerDoc?.revealOp_hover)); } // prettier-ignore
+    set revealOpHover(on:boolean) { this.layoutDoc[this.revealOpKey+"_hover"] = on; } // prettier-ignore
     @computed get loading()       { return this._loading; } // prettier-ignore
     set loading(value)            { runInAction(() => { this._loading = value; })} // prettier-ignore
 
@@ -616,6 +628,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const appearance = ContextMenu.Instance.findByDescription('Appearance...');
         const appearanceItems = appearance?.subitems ?? [];
         appearanceItems.push({ description: 'Create ChatCard', event: () => this.askGPT(GPTCallType.CHATCARD), icon: 'id-card' });
+        appearanceItems.push({
+            description: 'Reveal by ' + (this.revealOp === flashcardRevealOp.FLIP ? 'Sliding' : 'Flipping'),
+            event: () => (this.revealOp = this.revealOp === flashcardRevealOp.FLIP ? flashcardRevealOp.SLIDE : flashcardRevealOp.FLIP),
+            icon: 'id-card',
+        });
+        appearanceItems.push({ description: (this.revealOpHover ? 'Click ' : 'Hover ') + ' to reveal', event: () => (this.revealOpHover = !this.revealOpHover), icon: 'id-card' });
         !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
     };
 
@@ -792,6 +810,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     );
 
     render() {
+        TraceMobx();
         const renderMode = new Map<flashcardRevealOp, () => JSX.Element>([
             [flashcardRevealOp.FLIP, this.renderAsFlip],
             [flashcardRevealOp.SLIDE, this.renderAsBeforeAfter]]); // prettier-ignore