feat(gui): add invert button to inpaint mask (fixes #65)

ssube · Jan 20, 2023 · 9e31445 · 9e31445
1 parent d1e8fc5
commit 9e31445
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx
@@ -1,5 +1,5 @@
 import { doesExist, Maybe, mustExist } from '@apextoaster/js-utils';
-import { FormatColorFill, Gradient } from '@mui/icons-material';
+import { FormatColorFill, Gradient, InvertColors } from '@mui/icons-material';
 import { Button, Stack, Typography } from '@mui/material';
 import { throttle } from 'lodash';
 import React, { RefObject, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -280,33 +280,43 @@ export function MaskCanvas(props: MaskCanvasProps) {
       />
       <Button
         variant='outlined'
-        startIcon={<Gradient />}
+        startIcon={<FormatColorFill />}
         onClick={() => {
-          floodCanvas(bufferRef, floodBelow);
+          floodCanvas(bufferRef, floodBlack);
           drawBuffer();
           maskState.current = MASK_STATE.dirty;
         }}>
-        Gray to black
+        Fill with black
       </Button>
       <Button
         variant='outlined'
         startIcon={<FormatColorFill />}
         onClick={() => {
-          floodCanvas(bufferRef, floodBlack);
+          floodCanvas(bufferRef, floodWhite);
           drawBuffer();
           maskState.current = MASK_STATE.dirty;
         }}>
-        Fill with black
+        Fill with white
       </Button>
       <Button
         variant='outlined'
-        startIcon={<FormatColorFill />}
+        startIcon={<InvertColors />}
         onClick={() => {
-          floodCanvas(bufferRef, floodWhite);
+          floodCanvas(bufferRef, floodInvert);
           drawBuffer();
           maskState.current = MASK_STATE.dirty;
         }}>
-        Fill with white
+        Invert
+      </Button>
+      <Button
+        variant='outlined'
+        startIcon={<Gradient />}
+        onClick={() => {
+          floodCanvas(bufferRef, floodBelow);
+          drawBuffer();
+          maskState.current = MASK_STATE.dirty;
+        }}>
+        Gray to black
       </Button>
       <Button
         variant='outlined'
@@ -366,6 +376,10 @@ export function floodWhite(): number {
   return COLORS.white;
 }
 
+export function floodInvert(n: number): number {
+  return COLORS.white - n;
+}
+
 export function grayToRGB(n: number, o = 1.0): string {
   return `rgba(${n.toFixed(0)},${n.toFixed(0)},${n.toFixed(0)},${o.toFixed(2)})`;
 }