fixed opening up GAI ImageEditor

3 files changed, 34 insertions, 26 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4b1e59385..fad53523c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -57,7 +57,7 @@ import { AudioBox } from './nodes/AudioBox';
 import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp';
 import { DocButtonState } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal, OpenWhere, OpenWhereMod, returnEmptyDocViewList } from './nodes/DocumentView';
-import { ImageBox } from './nodes/ImageBox';
+import { ImageBox, ImageEditorData as ImageEditor } from './nodes/ImageBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview, LinkInfo } from './nodes/LinkDocPreview';
 import { DirectionsAnchorMenu } from './nodes/MapBox/DirectionsAnchorMenu';
@@ -1042,7 +1042,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 <OverlayView />
                 <GPTPopup key="gptpopup" />
                 <SchemaCSVPopUp key="schemacsvpopup" />
-                <GenerativeFill imageEditorOpen={ImageBox.imageEditorOpen} imageEditorSource={ImageBox.imageEditorSource} imageRootDoc={ImageBox.imageRootDoc} addDoc={ImageBox.addDoc} />
+                <GenerativeFill imageEditorOpen={ImageEditor.Open} imageEditorSource={ImageEditor.Source} imageRootDoc={ImageEditor.RootDoc} addDoc={ImageBox.addDoc} />
                 {/* <NewLightboxView key="newLightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} /> */}
             </div>
         );
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 469869e21..cb799abd9 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,13 +1,15 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx';
+import { Colors } from 'browndash-components';
+import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
-import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { Doc, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
+import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
 import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
@@ -15,6 +17,7 @@ import { TraceMobx } from '../../../fields/util';
 import { DashColor, emptyFunction, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
+import { Networking } from '../../Network';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
@@ -23,35 +26,40 @@ import { CollectionFreeFormView } from '../collections/collectionFreeForm/Collec
 import { ContextMenuProps } from '../ContextMenuItem';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
 import { MarqueeAnnotator } from '../MarqueeAnnotator';
+import { OverlayView } from '../OverlayView';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { StyleProp } from '../StyleProvider';
 import { OpenWhere } from './DocumentView';
-import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView';
+import { FieldView, FieldViewProps, FocusViewOptions } from './FieldView';
 import './ImageBox.scss';
 import { PinProps, PresBox } from './trails';
-import { Colors } from 'browndash-components';
-import { listSpec } from '../../../fields/Schema';
-import { List } from '../../../fields/List';
-import { url } from 'inspector';
-import { OverlayView } from '../OverlayView';
-import { Networking } from '../../Network';
 
+export class ImageEditorData {
+    private static _instance: ImageEditorData;
+    private static get imageData() { return (ImageEditorData._instance ?? new ImageEditorData()).imageData; } // prettier-ignore
+    @observable imageData: { rootDoc: Doc | undefined; open: boolean; source: string } = observable({ rootDoc: undefined, open: false, source: '' });
+    @action private static set = (open: boolean, rootDoc: Doc | undefined, source: string) => (this._instance.imageData = { open, rootDoc, source });
+
+    constructor() {
+        makeObservable(this);
+        ImageEditorData._instance = this;
+    }
+
+    public static get Open()    { return ImageEditorData.imageData.open;  } // prettier-ignore
+    public static get Source()  { return ImageEditorData.imageData.source; } // prettier-ignore
+    public static get RootDoc() { return ImageEditorData.imageData.rootDoc; } // prettier-ignore
+    public static set Open(open: boolean)        { ImageEditorData.set(open, this.imageData.rootDoc, this.imageData.source); } // prettier-ignore
+    public static set Source(source: string)     { ImageEditorData.set(this.imageData.open, this.imageData.rootDoc, source); } // prettier-ignore
+    public static set RootDoc(rootDoc: Opt<Doc>) { ImageEditorData.set(this.imageData.open, rootDoc, this.imageData.source); } // prettier-ignore
+}
 @observer
 export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ImageBox, fieldKey);
     }
 
-    @observable public static imageRootDoc: Doc | undefined = undefined;
-    @observable public static imageEditorOpen: boolean = false;
-    @observable public static imageEditorSource: string = '';
     @observable public static addDoc: ((doc: Doc | Doc[], annotationKey?: string) => boolean) | undefined = undefined;
-    @action public static setImageEditorOpen(open: boolean) {
-        ImageBox.imageEditorOpen = open;
-    }
-    @action public static setImageEditorSource(source: string) {
-        ImageBox.imageEditorSource = source;
-    }
+
     private _ignoreScroll = false;
     private _forcedScroll = false;
     private _dropDisposer?: DragManager.DragDropDisposer;
@@ -248,10 +256,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
             funcs.push({
                 description: 'Open Image Editor',
                 event: action(() => {
-                    ImageBox.setImageEditorOpen(true);
-                    ImageBox.setImageEditorSource(this.choosePath(field.url));
+                    ImageEditorData.Open = true;
+                    ImageEditorData.Source = this.choosePath(field.url);
                     ImageBox.addDoc = this._props.addDocument;
-                    ImageBox.imageRootDoc = this.Document;
+                    ImageEditorData.RootDoc = this.Document;
                 }),
                 icon: 'pencil-alt',
             });
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 87e1b69c3..a485ea4c3 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -13,7 +13,7 @@ import { DocumentManager } from '../../../util/DocumentManager';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { OpenWhereMod } from '../DocumentView';
-import { ImageBox } from '../ImageBox';
+import { ImageBox, ImageEditorData } from '../ImageBox';
 import './GenerativeFill.scss';
 import Buttons from './GenerativeFillButtons';
 import { BrushHandler } from './generativeFillUtils/BrushHandler';
@@ -419,8 +419,8 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // Closes the editor view
     const handleViewClose = () => {
-        ImageBox.setImageEditorOpen(false);
-        ImageBox.setImageEditorSource('');
+        ImageEditorData.Open = false;
+        ImageEditorData.Source = '';
         if (newCollectionRef.current) {
             DocumentManager.Instance.AddViewRenderedCb(newCollectionRef.current, dv => (dv.ComponentView as CollectionFreeFormView)?.fitContentOnce());
         }