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 });
}}
/>
- }
- onClick={() => {
- floodCanvas(bufferRef, floodBelow);
- drawBuffer();
- maskState.current = MASK_STATE.dirty;
- }}>
- Gray to black
-
}
@@ -308,6 +298,26 @@ export function MaskCanvas(props: MaskCanvasProps) {
}}>
Fill with white
+ }
+ onClick={() => {
+ floodCanvas(bufferRef, floodInvert);
+ drawBuffer();
+ maskState.current = MASK_STATE.dirty;
+ }}>
+ Invert
+
+ }
+ onClick={() => {
+ floodCanvas(bufferRef, floodBelow);
+ drawBuffer();
+ maskState.current = MASK_STATE.dirty;
+ }}>
+ Gray to black
+
}
@@ -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)})`;
}