fix(gui): only show inpaint image once
This commit is contained in:
parent
a074078cec
commit
d6f2c626f6
|
@ -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>;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue