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

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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 41 deletions

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

View File

@ -1,4 +1,4 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
@ -135,11 +135,12 @@ const IAICanvasMaskOptions = () => {
dispatch(setShouldPreserveMaskedArea(e.target.checked)) dispatch(setShouldPreserveMaskedArea(e.target.checked))
} }
/> />
<IAIColorPicker <Box sx={{ paddingTop: 2, paddingBottom: 2 }}>
sx={{ paddingTop: 2, paddingBottom: 2 }} <IAIColorPicker
pickerColor={maskColor} color={maskColor}
onChange={(newColor) => dispatch(setMaskColor(newColor))} onChange={(newColor) => dispatch(setMaskColor(newColor))}
/> />
</Box>
<IAIButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}> <IAIButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
Save Mask Save Mask
</IAIButton> </IAIButton>

View File

@ -1,4 +1,4 @@
import { ButtonGroup, Flex } from '@chakra-ui/react'; import { ButtonGroup, Flex, Box } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store'; import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@ -237,15 +237,18 @@ const IAICanvasToolChooserOptions = () => {
sliderNumberInputProps={{ max: 500 }} sliderNumberInputProps={{ max: 500 }}
/> />
</Flex> </Flex>
<IAIColorPicker <Box
sx={{ sx={{
width: '100%', width: '100%',
paddingTop: 2, paddingTop: 2,
paddingBottom: 2, paddingBottom: 2,
}} }}
pickerColor={brushColor} >
onChange={(newColor) => dispatch(setBrushColor(newColor))} <IAIColorPicker
/> color={brushColor}
onChange={(newColor) => dispatch(setBrushColor(newColor))}
/>
</Box>
</Flex> </Flex>
</IAIPopover> </IAIPopover>
</ButtonGroup> </ButtonGroup>

View File

@ -95,26 +95,32 @@ export default function UnifiedCanvasColorPicker() {
> >
<Flex minWidth={60} direction="column" gap={4} width="100%"> <Flex minWidth={60} direction="column" gap={4} width="100%">
{layer === 'base' && ( {layer === 'base' && (
<IAIColorPicker <Box
sx={{ sx={{
width: '100%', width: '100%',
paddingTop: 2, paddingTop: 2,
paddingBottom: 2, paddingBottom: 2,
}} }}
pickerColor={brushColor} >
onChange={(newColor) => dispatch(setBrushColor(newColor))} <IAIColorPicker
/> color={brushColor}
onChange={(newColor) => dispatch(setBrushColor(newColor))}
/>
</Box>
)} )}
{layer === 'mask' && ( {layer === 'mask' && (
<IAIColorPicker <Box
sx={{ sx={{
width: '100%', width: '100%',
paddingTop: 2, paddingTop: 2,
paddingBottom: 2, paddingBottom: 2,
}} }}
pickerColor={maskColor} >
onChange={(newColor) => dispatch(setMaskColor(newColor))} <IAIColorPicker
/> color={maskColor}
onChange={(newColor) => dispatch(setMaskColor(newColor))}
/>
</Box>
)} )}
</Flex> </Flex>
</IAIPopover> </IAIPopover>