mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
fix(ui): fix color picker on canvas (#4706)
Resolves #4667 Co-authored-by: Mary Hipp Rogers <maryhipp@gmail.com>
This commit is contained in:
parent
34c563060f
commit
105a4234b0
@ -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}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user