apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): draw source to canvas immediately on change (#372)

This commit is contained in:
Sean Sube 2023-05-05 18:34:22 -05:00
parent da6aa15afc
commit 59075a752a
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
gui/src/components/input/MaskCanvas.tsx
View File

@ -196,7 +196,10 @@ export function MaskCanvas(props: MaskCanvasProps) {
// painting state // painting state
const painting = useRef(false); const painting = useRef(false);
const dirty = useRef(false); const dirty = useRef(false);
const background = useRef<string>(); const background = useRef<{ name: string; url: Maybe<string> }>({
name: '',
url: undefined,
});
const state = mustExist(useContext(StateContext)); const state = mustExist(useContext(StateContext));
const brush = useStore(state, (s) => s.brush); const brush = useStore(state, (s) => s.brush);
@ -218,21 +221,21 @@ export function MaskCanvas(props: MaskCanvasProps) {
} }
}, [mask]); }, [mask]);
useEffect(() => { // update background ref
if (doesExist(source)) { if (doesExist(source) && background.current.name !== source.name) {
if (doesExist(background.current)) { if (doesExist(background.current.url)) {
URL.revokeObjectURL(background.current); URL.revokeObjectURL(background.current.url);
}
background.current = URL.createObjectURL(source);
// initialize the mask if it does not exist
if (doesExist(mask) === false) {
getClearContext(maskRef);
dirty.current = true;
}
} }
}, [source]);
background.current.url = URL.createObjectURL(source);
background.current.name = source.name;
// initialize the mask if it does not exist
if (doesExist(mask) === false) {
getClearContext(maskRef);
dirty.current = true;
}
}
const backgroundStyle: React.CSSProperties = { const backgroundStyle: React.CSSProperties = {
backgroundPosition: 'top left', backgroundPosition: 'top left',
@ -244,7 +247,7 @@ export function MaskCanvas(props: MaskCanvasProps) {
}; };
if (doesExist(background.current)) { if (doesExist(background.current)) {
backgroundStyle.backgroundImage = `url(${background.current})`; backgroundStyle.backgroundImage = `url(${background.current.url})`;
} }
const hiddenStyle: React.CSSProperties = { const hiddenStyle: React.CSSProperties = {