moved generative fill variables into ImageBox from MainView to prevent awkward reference cycle

2 files changed, 14 insertions, 8 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c4b3f79a7..2c8e97512 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -36,8 +36,6 @@ import { FieldView, FieldViewProps } from './FieldView';
 import './ImageBox.scss';
 import { PinProps, PresBox } from './trails';
 import React = require('react');
-import Color = require('color');
-import { MainView } from '../MainView';
 
 export const pageSchema = createSchema({
     googlePhotosUrl: 'string',
@@ -56,6 +54,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ImageBox, fieldKey);
     }
+
+    @observable public static imageRootDoc: Doc | undefined;
+    @observable public static imageEditorOpen: boolean = false;
+    @observable public static imageEditorSource: string = '';
+    @observable public static addDoc: ((doc: Doc | Doc[], annotationKey?: string) => boolean) | 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;
@@ -250,10 +255,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             funcs.push({
                 description: 'Open Image Editor',
                 event: action(() => {
-                    MainView.Instance.setImageEditorOpen(true);
-                    MainView.Instance.setImageEditorSource(this.choosePath(field.url));
-                    MainView.Instance.addDoc = this.props.addDocument;
-                    MainView.Instance.imageRootDoc = this.rootDoc;
+                    ImageBox.setImageEditorOpen(true);
+                    ImageBox.setImageEditorSource(this.choosePath(field.url));
+                    ImageBox.addDoc = this.props.addDocument;
+                    ImageBox.imageRootDoc = this.rootDoc;
                 }),
                 icon: 'pencil-alt',
             });
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 7230aa9b1..9c03600cf 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -20,6 +20,7 @@ import { OpenWhereMod } from '../DocumentView';
 import Buttons from './GenerativeFillButtons';
 import { List } from '../../../../fields/List';
 import { CgClose } from 'react-icons/cg';
+import { ImageBox } from '../ImageBox';
 
 enum BrushStyle {
     ADD,
@@ -408,8 +409,8 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
 
     // Closes the editor view
     const handleViewClose = () => {
-        MainView.Instance.setImageEditorOpen(false);
-        MainView.Instance.setImageEditorSource('');
+        ImageBox.setImageEditorOpen(false);
+        ImageBox.setImageEditorSource('');
         if (newCollectionRef.current) {
             newCollectionRef.current.fitContentOnce = true;
         }