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

ssube · May 5, 2023 · 59075a7 · 59075a7
1 parent da6aa15
commit 59075a7
Showing 1 changed file with 17 additions and 14 deletions.
diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx
@@ -196,7 +196,10 @@ export function MaskCanvas(props: MaskCanvasProps) {
   // painting state
   const painting = 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 brush = useStore(state, (s) => s.brush);
@@ -218,21 +221,21 @@ export function MaskCanvas(props: MaskCanvasProps) {
     }
   }, [mask]);
 
-  useEffect(() => {
-    if (doesExist(source)) {
-      if (doesExist(background.current)) {
-        URL.revokeObjectURL(background.current);
-      }
+  // update background ref
+  if (doesExist(source) && background.current.name !== source.name) {
+    if (doesExist(background.current.url)) {
+      URL.revokeObjectURL(background.current.url);
+    }
 
-      background.current = URL.createObjectURL(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;
-      }
+    // initialize the mask if it does not exist
+    if (doesExist(mask) === false) {
+      getClearContext(maskRef);
+      dirty.current = true;
     }
-  }, [source]);
+  }
 
   const backgroundStyle: React.CSSProperties = {
     backgroundPosition: 'top left',
@@ -244,7 +247,7 @@ export function MaskCanvas(props: MaskCanvasProps) {
   };
 
   if (doesExist(background.current)) {
-    backgroundStyle.backgroundImage = `url(${background.current})`;
+    backgroundStyle.backgroundImage = `url(${background.current.url})`;
   }
 
   const hiddenStyle: React.CSSProperties = {