From 6201fb8595729d049885d91278e990e49588f6f5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Nov 2024 12:47:15 -0500
Subject: fixed clicking on filled closed strokes to select them.. fixed
 equationBox initial width.  fixed line mode for ink to always create lines. 
 fixed contextMenu to reset selectedIndex after being  hidden.  added reveal
 options for comparisonbox to contexst menu.

---
 src/client/views/nodes/ComparisonBox.tsx | 39 ++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 10 deletions(-)

(limited to 'src/client/views/nodes/ComparisonBox.tsx')

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
-- 
cgit v1.2.3-70-g09d2