Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix color picker on canvas (#4706)

Browse Source 
Resolves  #4667

Co-authored-by: Mary Hipp Rogers <maryhipp@gmail.com>
This commit is contained in:
psychedelicious
2023-09-27 00:11:12 +10:00
committed by GitHub
parent 34c563060f
commit 105a4234b0
4 changed files with 40 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
View File

@ -1,18 +1,9 @@
import { chakra, ChakraProps } from '@chakra-ui/react';
import { Box, ChakraProps } from '@chakra-ui/react';
import { memo } from 'react';
import { RgbaColorPicker } from 'react-colorful';
import { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types';
type IAIColorPickerProps = Omit<ColorPickerBaseProps<RgbaColor>, 'color'> &
ChakraProps & {
pickerColor: RgbaColor;
styleClass?: string;
};
const ChakraRgbaColorPicker = chakra(RgbaColorPicker, {
baseStyle: { paddingInline: 4 },
shouldForwardProp: (prop) => !['pickerColor'].includes(prop),
});
type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor>;
const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
width: 6,
@ -20,19 +11,17 @@ const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
borderColor: 'base.100',
};
const IAIColorPicker = (props: IAIColorPickerProps) => {
const { styleClass = '', ...rest } = props;
const sx = {
'.react-colorful__hue-pointer': colorPickerStyles,
'.react-colorful__saturation-pointer': colorPickerStyles,
'.react-colorful__alpha-pointer': colorPickerStyles,
};
const IAIColorPicker = (props: IAIColorPickerProps) => {
return (
<ChakraRgbaColorPicker
sx={{
'.react-colorful__hue-pointer': colorPickerStyles,
'.react-colorful__saturation-pointer': colorPickerStyles,
'.react-colorful__alpha-pointer': colorPickerStyles,
}}
className={styleClass}
{...rest}
/>
<Box sx={sx}>
<RgbaColorPicker {...props} />
</Box>
);
};