From 9e31445ccc36f9a47496331d307678faf793cb9a Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Thu, 19 Jan 2023 21:20:44 -0600
Subject: [PATCH] feat(gui): add invert button to inpaint mask (fixes #65)

---
 gui/src/components/input/MaskCanvas.tsx | 36 +++++++++++++++++--------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/gui/src/components/input/MaskCanvas.tsx b/gui/src/components/input/MaskCanvas.tsx
index c9b5bd72..b74e7fad 100644
--- 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';
@@ -278,16 +278,6 @@ export function MaskCanvas(props: MaskCanvasProps) {
           setBrush({ strength });
         }}
       />
-      <Button
-        variant='outlined'
-        startIcon={<Gradient />}
-        onClick={() => {
-          floodCanvas(bufferRef, floodBelow);
-          drawBuffer();
-          maskState.current = MASK_STATE.dirty;
-        }}>
-        Gray to black
-      </Button>
       <Button
         variant='outlined'
         startIcon={<FormatColorFill />}
@@ -308,6 +298,26 @@ export function MaskCanvas(props: MaskCanvasProps) {
         }}>
         Fill with white
       </Button>
+      <Button
+        variant='outlined'
+        startIcon={<InvertColors />}
+        onClick={() => {
+          floodCanvas(bufferRef, floodInvert);
+          drawBuffer();
+          maskState.current = MASK_STATE.dirty;
+        }}>
+        Invert
+      </Button>
+      <Button
+        variant='outlined'
+        startIcon={<Gradient />}
+        onClick={() => {
+          floodCanvas(bufferRef, floodBelow);
+          drawBuffer();
+          maskState.current = MASK_STATE.dirty;
+        }}>
+        Gray to black
+      </Button>
       <Button
         variant='outlined'
         startIcon={<Gradient />}
@@ -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)})`;
 }