diff --git a/gui/src/components/input/ImageInput.tsx b/gui/src/components/input/ImageInput.tsx index e41ab9e7..aee071b8 100644 --- 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; label: string; + hideSelection?: boolean; + onChange: (file: File) => void; - renderImage?: (image: Maybe) => 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 - + props.onChange(file); + } + }} + /> + + {renderImage()} ; } diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx index 4bd5489c..d46f5cbc 100644 --- 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; source?: Maybe; + mask?: Maybe; 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 index 65054c64..c06c7ba4 100644 --- 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) => - { - setInpaint({ - mask: file, - }); - }} - /> - } + /> + { + setInpaint({ + mask: file, + }); + }} /> s.inpaint}