fix(gui): only enable generate buttons after image sources exist (#64)
This commit is contained in:
parent
e0834110fc
commit
4898197f77
|
@ -94,6 +94,7 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
||||||
const { canvas, ctx } = getClearContext(bufferRef);
|
const { canvas, ctx } = getClearContext(bufferRef);
|
||||||
ctx.globalAlpha = FULL_OPACITY;
|
ctx.globalAlpha = FULL_OPACITY;
|
||||||
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
URL.revokeObjectURL(src);
|
URL.revokeObjectURL(src);
|
||||||
|
|
||||||
drawBuffer();
|
drawBuffer();
|
||||||
|
@ -166,6 +167,12 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
setBackground(URL.createObjectURL(source));
|
setBackground(URL.createObjectURL(source));
|
||||||
|
|
||||||
|
// initialize the mask if it does not exist
|
||||||
|
if (doesExist(mask) === false) {
|
||||||
|
getClearContext(bufferRef);
|
||||||
|
maskState.current = MASK_STATE.dirty;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [source]);
|
}, [source]);
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useMutation, useQueryClient } from 'react-query';
|
import { useMutation, useQueryClient } from 'react-query';
|
||||||
|
@ -63,7 +63,11 @@ export function Img2Img() {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button variant='outlined' onClick={() => upload.mutate()}>Generate</Button>
|
<Button
|
||||||
|
disabled={doesExist(source) === false}
|
||||||
|
variant='outlined'
|
||||||
|
onClick={() => upload.mutate()}
|
||||||
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||||
|
@ -161,7 +161,11 @@ export function Inpaint() {
|
||||||
</Stack>
|
</Stack>
|
||||||
<OutpaintControl />
|
<OutpaintControl />
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button variant='outlined' onClick={() => upload.mutate()}>Generate</Button>
|
<Button
|
||||||
|
disabled={doesExist(source) === false || doesExist(mask) === false}
|
||||||
|
variant='outlined'
|
||||||
|
onClick={() => upload.mutate()}
|
||||||
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -65,7 +65,10 @@ export function Txt2Img() {
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button variant='outlined' onClick={() => generate.mutate()}>Generate</Button>
|
<Button
|
||||||
|
variant='outlined'
|
||||||
|
onClick={() => generate.mutate()}
|
||||||
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useMutation, useQueryClient } from 'react-query';
|
import { useMutation, useQueryClient } from 'react-query';
|
||||||
|
@ -12,8 +12,6 @@ import { UpscaleControl } from '../control/UpscaleControl.js';
|
||||||
const { useContext } = React;
|
const { useContext } = React;
|
||||||
|
|
||||||
export function Upscale() {
|
export function Upscale() {
|
||||||
const config = mustExist(useContext(ConfigContext));
|
|
||||||
|
|
||||||
async function uploadSource() {
|
async function uploadSource() {
|
||||||
const { model, upscale } = state.getState();
|
const { model, upscale } = state.getState();
|
||||||
|
|
||||||
|
@ -46,7 +44,11 @@ export function Upscale() {
|
||||||
});
|
});
|
||||||
}} />
|
}} />
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button variant='outlined' onClick={() => upload.mutate()}>Generate</Button>
|
<Button
|
||||||
|
disabled={doesExist(params.source) === false}
|
||||||
|
variant='outlined'
|
||||||
|
onClick={() => upload.mutate()}
|
||||||
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>;
|
</Box>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue