clean up outpaint code. fix image sizing when outpainting.

1 files changed, 11 insertions, 13 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 010028af7..31a135fa7 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -170,6 +170,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
+        this._disposers.outpaint = reaction(
+            () => this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined && !SnappingManager.ShiftKey,
+            complete => complete && this.openOutpaintPrompt(),
+            { fireImmediately: true }
+        );
     }
 
     componentWillUnmount() {
@@ -372,13 +377,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const field = Cast(this.dataDoc[this.fieldKey], ImageField);
         if (!field) return;
 
-        const origWidth = NumCast(this.Document._outpaintingOriginalWidth);
-        const origHeight = NumCast(this.Document._outpaintingOriginalHeight);
-
-        if (!origWidth || !origHeight) {
-            console.error('Original dimensions (_outpaintingOriginalWidth/_outpaintingOriginalHeight) not set. Ensure resizeViewForOutpainting was called first.');
-            return;
-        }
+        const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']);
+        const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']);
 
         // Set flag that outpainting is in progress
         this._outpaintingInProgress = true;
@@ -444,8 +444,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     this.Document.$ai = true;
                     this.Document.$ai_outpainted = true;
                     this.Document.$ai_outpaint_prompt = customPrompt;
-                    this.Document._outpaintingOriginalWidth = undefined;
-                    this.Document._outpaintingOriginalHeight = undefined;
+                    this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined;
+                    this.Document[this.fieldKey + '_outpaintOriginalHeight'] = undefined;
                 } else {
                     this.Document._width = origWidth;
                     this.Document._height = origHeight;
@@ -465,11 +465,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    processOutpainting = () => this.openOutpaintPrompt();
-
     componentUI = () =>
         !this._showOutpaintPrompt ? null : (
-            <div className="imageBox-regenerate-dialog" style={{ backgroundColor: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
+            <div key="imageBox-componentui" className="imageBox-regenerate-dialog" style={{ backgroundColor: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 <h3>Outpaint Image</h3>
                 <EditableText
                     placeholder="Enter a prompt for extending the image:"
@@ -726,7 +724,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         ref={action((r: HTMLImageElement | null) => (this.imageRef = r))}
                         key="paths"
                         src={srcpath}
-                        style={{ transform, transformOrigin, height: 'fit-content' }}
+                        style={{ transform, transformOrigin, height: this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined ? '100%' : undefined }}
                         onError={action(e => (this._error = e.toString()))}
                         draggable={false}
                         width={nativeWidth}