feat(gui): add invert button to inpaint mask (fixes #65)
This commit is contained in:
parent
d1e8fc5de8
commit
9e31445ccc
|
@ -1,5 +1,5 @@
|
||||||
import { doesExist, Maybe, mustExist } from '@apextoaster/js-utils';
|
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 { Button, Stack, Typography } from '@mui/material';
|
||||||
import { throttle } from 'lodash';
|
import { throttle } from 'lodash';
|
||||||
import React, { RefObject, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
import React, { RefObject, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
@ -278,16 +278,6 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
||||||
setBrush({ strength });
|
setBrush({ strength });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Button
|
|
||||||
variant='outlined'
|
|
||||||
startIcon={<Gradient />}
|
|
||||||
onClick={() => {
|
|
||||||
floodCanvas(bufferRef, floodBelow);
|
|
||||||
drawBuffer();
|
|
||||||
maskState.current = MASK_STATE.dirty;
|
|
||||||
}}>
|
|
||||||
Gray to black
|
|
||||||
</Button>
|
|
||||||
<Button
|
<Button
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
startIcon={<FormatColorFill />}
|
startIcon={<FormatColorFill />}
|
||||||
|
@ -308,6 +298,26 @@ export function MaskCanvas(props: MaskCanvasProps) {
|
||||||
}}>
|
}}>
|
||||||
Fill with white
|
Fill with white
|
||||||
</Button>
|
</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
|
<Button
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
startIcon={<Gradient />}
|
startIcon={<Gradient />}
|
||||||
|
@ -366,6 +376,10 @@ export function floodWhite(): number {
|
||||||
return COLORS.white;
|
return COLORS.white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function floodInvert(n: number): number {
|
||||||
|
return COLORS.white - n;
|
||||||
|
}
|
||||||
|
|
||||||
export function grayToRGB(n: number, o = 1.0): string {
|
export function grayToRGB(n: number, o = 1.0): string {
|
||||||
return `rgba(${n.toFixed(0)},${n.toFixed(0)},${n.toFixed(0)},${o.toFixed(2)})`;
|
return `rgba(${n.toFixed(0)},${n.toFixed(0)},${n.toFixed(0)},${o.toFixed(2)})`;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue