fix(gui): only show inpaint image once

ssube · Jan 18, 2023 · d6f2c62 · d6f2c62
1 parent a074078
commit d6f2c62
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 44 deletions.
diff --git a/gui/src/components/input/ImageInput.tsx b/gui/src/components/input/ImageInput.tsx
@@ -5,25 +5,21 @@ import * as React from 'react';
 
 export interface ImageInputProps {
   filter: string;
-  hidden?: boolean;
   image?: Maybe<Blob>;
   label: string;
 
+  hideSelection?: boolean;
+
   onChange: (file: File) => void;
-  renderImage?: (image: Maybe<Blob>) => React.ReactNode;
 }
 
 export function ImageInput(props: ImageInputProps) {
   function renderImage() {
-    if (mustDefault(props.hidden, false)) {
-      return undefined;
-    }
-
-    if (doesExist(props.renderImage)) {
-      return props.renderImage(props.image);
-    }
-
     if (doesExist(props.image)) {
+      if (mustDefault(props.hideSelection, false)) {
+        return undefined;
+      }
+
       return <img
         src={URL.createObjectURL(props.image)}
         style={{
@@ -37,22 +33,24 @@ export function ImageInput(props: ImageInputProps) {
   }
 
   return <Stack direction='row' spacing={2}>
-    <Button component='label' startIcon={<PhotoCamera />}>
-      {props.label}
-      <input
-        hidden
-        accept={props.filter}
-        type='file'
-        onChange={(event) => {
-          const { files } = event.target;
-          if (doesExist(files) && files.length > 0) {
-            const file = mustExist(files[0]);
+    <Stack>
+      <Button component='label' startIcon={<PhotoCamera />}>
+        {props.label}
+        <input
+          hidden
+          accept={props.filter}
+          type='file'
+          onChange={(event) => {
+            const { files } = event.target;
+            if (doesExist(files) && files.length > 0) {
+              const file = mustExist(files[0]);
 
-            props.onChange(file);
-          }
-        }}
-      />
-    </Button>
+              props.onChange(file);
+            }
+          }}
+        />
+      </Button>
+    </Stack>
     {renderImage()}
   </Stack>;
 }
diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx
@@ -38,14 +38,14 @@ export interface Point {
 }
 
 export interface MaskCanvasProps {
-  base?: Maybe<Blob>;
   source?: Maybe<Blob>;
+  mask?: Maybe<Blob>;
 
   onSave: (blob: Blob) => void;
 }
 
 export function MaskCanvas(props: MaskCanvasProps) {
-  const { base, source } = props;
+  const { source, mask } = props;
   const { params } = mustExist(useContext(ConfigContext));
 
   function saveMask(): void {
@@ -140,20 +140,20 @@ export function MaskCanvas(props: MaskCanvasProps) {
   }, [maskState.current]);
 
   useEffect(() => {
-    if (doesExist(bufferRef.current) && doesExist(source)) {
-      drawSource(source);
+    if (doesExist(bufferRef.current) && doesExist(mask)) {
+      drawSource(mask);
     }
-  }, [source]);
+  }, [mask]);
 
   useEffect(() => {
-    if (doesExist(base)) {
+    if (doesExist(source)) {
       if (doesExist(background)) {
         URL.revokeObjectURL(background);
       }
 
-      setBackground(URL.createObjectURL(base));
+      setBackground(URL.createObjectURL(source));
     }
-  }, [base]);
+  }, [source]);
 
   const styles: React.CSSProperties = {
     maxHeight: params.height.default,

diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx
@@ -75,6 +75,7 @@ export function Inpaint() {
         filter={IMAGE_FILTER}
         image={source}
         label='Source'
+        hideSelection={true}
         onChange={(file) => {
           setInpaint({
             source: file,
@@ -85,22 +86,21 @@ export function Inpaint() {
         filter={IMAGE_FILTER}
         image={mask}
         label='Mask'
+        hideSelection={true}
         onChange={(file) => {
           setInpaint({
             mask: file,
           });
         }}
-        renderImage={(image) =>
-          <MaskCanvas
-            base={source}
-            source={image}
-            onSave={(file) => {
-              setInpaint({
-                mask: file,
-              });
-            }}
-          />
-        }
+      />
+      <MaskCanvas
+        source={source}
+        mask={mask}
+        onSave={(file) => {
+          setInpaint({
+            mask: file,
+          });
+        }}
       />
       <ImageControl
         selector={(s) => s.inpaint}