feat(ui): add color swatches to mask fill

invokeai/frontend/web/src/common/components/ColorPicker/RgbColorPicker.tsx

@@ -1,15 +1,19 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
-import { CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Box, CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { RGB_COLOR_SWATCHES } from 'common/components/ColorPicker/swatches';
+import { rgbColorToString } from 'common/util/colorCodeTransformers';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
 import { RgbColorPicker as ColorfulRgbColorPicker } from 'react-colorful';
-import type { ColorPickerBaseProps, RgbColor } from 'react-colorful/dist/types';
+import type { RgbColor } from 'react-colorful/dist/types';
 import { useTranslation } from 'react-i18next';
 
-type RgbColorPickerProps = ColorPickerBaseProps<RgbColor> & {
+type Props = {
+  color: RgbColor;
+  onChange: (color: RgbColor) => void;
   withNumberInput?: boolean;
+  withSwatches?: boolean;
 };
-
 const colorPickerPointerStyles: NonNullable<ChakraProps['sx']> = {
   width: 6,
   height: 6,
@@ -20,7 +24,7 @@ const sx: ChakraProps['sx'] = {
   '.react-colorful__hue-pointer': colorPickerPointerStyles,
   '.react-colorful__saturation-pointer': colorPickerPointerStyles,
   '.react-colorful__alpha-pointer': colorPickerPointerStyles,
-  gap: 5,
+  gap: 4,
   flexDir: 'column',
 };
 
@@ -28,20 +32,21 @@ const colorPickerStyles: CSSProperties = { width: '100%' };
 
 const numberInputWidth: ChakraProps['w'] = '3.5rem';
 
-const RgbColorPicker = (props: RgbColorPickerProps) => {
-  const { color, onChange, withNumberInput, ...rest } = props;
+const RgbColorPicker = (props: Props) => {
+  const { color, onChange, withNumberInput = false, withSwatches = false } = props;
   const { t } = useTranslation();
   const handleChangeR = useCallback((r: number) => onChange({ ...color, r }), [color, onChange]);
   const handleChangeG = useCallback((g: number) => onChange({ ...color, g }), [color, onChange]);
   const handleChangeB = useCallback((b: number) => onChange({ ...color, b }), [color, onChange]);
   return (
     <Flex sx={sx}>
-      <ColorfulRgbColorPicker color={color} onChange={onChange} style={colorPickerStyles} {...rest} />
+      <ColorfulRgbColorPicker color={color} onChange={onChange} style={colorPickerStyles} />
       {withNumberInput && (
-        <Flex gap={5}>
+        <Flex gap={4}>
           <FormControl gap={0}>
             <FormLabel>{t('common.red')[0]}</FormLabel>
             <CompositeNumberInput
+              flexGrow={1}
               value={color.r}
               onChange={handleChangeR}
               min={0}
@@ -54,6 +59,7 @@ const RgbColorPicker = (props: RgbColorPickerProps) => {
           <FormControl gap={0}>
             <FormLabel>{t('common.green')[0]}</FormLabel>
             <CompositeNumberInput
+              flexGrow={1}
               value={color.g}
               onChange={handleChangeG}
               min={0}
@@ -66,6 +72,7 @@ const RgbColorPicker = (props: RgbColorPickerProps) => {
           <FormControl gap={0}>
             <FormLabel>{t('common.blue')[0]}</FormLabel>
             <CompositeNumberInput
+              flexGrow={1}
               value={color.b}
               onChange={handleChangeB}
               min={0}
@@ -77,8 +84,22 @@ const RgbColorPicker = (props: RgbColorPickerProps) => {
           </FormControl>
         </Flex>
       )}
+      {withSwatches && (
+        <Flex gap={2} justifyContent="space-between">
+          {RGB_COLOR_SWATCHES.map((color, i) => (
+            <ColorSwatch key={i} color={color} onChange={onChange} />
+          ))}
+        </Flex>
+      )}
     </Flex>
   );
 };
 
 export default memo(RgbColorPicker);
+
+const ColorSwatch = ({ color, onChange }: { color: RgbColor; onChange: (color: RgbColor) => void }) => {
+  const onClick = useCallback(() => {
+    onChange(color);
+  }, [color, onChange]);
+  return <Box role="button" onClick={onClick} h={8} w={8} bg={rgbColorToString(color)} borderRadius="base" />;
+};

invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx

@@ -1,13 +1,18 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
-import { CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Box, CompositeNumberInput, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { RGBA_COLOR_SWATCHES } from 'common/components/ColorPicker/swatches';
+import { rgbaColorToString } from 'common/util/colorCodeTransformers';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
-import { RgbaColorPicker } from 'react-colorful';
-import type { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types';
+import { RgbaColorPicker as ColorfulRgbaColorPicker } from 'react-colorful';
+import type { RgbaColor } from 'react-colorful/dist/types';
 import { useTranslation } from 'react-i18next';
 
-type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor> & {
+type Props = {
+  color: RgbaColor;
+  onChange: (color: RgbaColor) => void;
   withNumberInput?: boolean;
+  withSwatches?: boolean;
 };
 
 const colorPickerPointerStyles: NonNullable<ChakraProps['sx']> = {
@@ -20,7 +25,7 @@ const sx: ChakraProps['sx'] = {
   '.react-colorful__hue-pointer': colorPickerPointerStyles,
   '.react-colorful__saturation-pointer': colorPickerPointerStyles,
   '.react-colorful__alpha-pointer': colorPickerPointerStyles,
-  gap: 5,
+  gap: 4,
   flexDir: 'column',
 };
 
@@ -28,8 +33,8 @@ const colorPickerStyles: CSSProperties = { width: '100%' };
 
 const numberInputWidth: ChakraProps['w'] = '3.5rem';
 
-const IAIColorPicker = (props: IAIColorPickerProps) => {
-  const { color, onChange, withNumberInput, ...rest } = props;
+const RgbaColorPicker = (props: Props) => {
+  const { color, onChange, withNumberInput = false, withSwatches = false } = props;
   const { t } = useTranslation();
   const handleChangeR = useCallback((r: number) => onChange({ ...color, r }), [color, onChange]);
   const handleChangeG = useCallback((g: number) => onChange({ ...color, g }), [color, onChange]);
@@ -37,9 +42,9 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
   const handleChangeA = useCallback((a: number) => onChange({ ...color, a }), [color, onChange]);
   return (
     <Flex sx={sx}>
-      <RgbaColorPicker color={color} onChange={onChange} style={colorPickerStyles} {...rest} />
+      <ColorfulRgbaColorPicker color={color} onChange={onChange} style={colorPickerStyles} />
       {withNumberInput && (
-        <Flex gap={5}>
+        <Flex gap={2}>
           <FormControl gap={0}>
             <FormLabel>{t('common.red')[0]}</FormLabel>
             <CompositeNumberInput
@@ -90,8 +95,22 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
           </FormControl>
         </Flex>
       )}
+      {withSwatches && (
+        <Flex gap={2} justifyContent="space-between">
+          {RGBA_COLOR_SWATCHES.map((color, i) => (
+            <ColorSwatch key={i} color={color} onChange={onChange} />
+          ))}
+        </Flex>
+      )}
     </Flex>
   );
 };
 
-export default memo(IAIColorPicker);
+export default memo(RgbaColorPicker);
+
+const ColorSwatch = ({ color, onChange }: { color: RgbaColor; onChange: (color: RgbaColor) => void }) => {
+  const onClick = useCallback(() => {
+    onChange(color);
+  }, [color, onChange]);
+  return <Box role="button" onClick={onClick} h={8} w={8} bg={rgbaColorToString(color)} borderRadius="base" />;
+};

invokeai/frontend/web/src/common/components/ColorPicker/swatches.ts

@@ -0,0 +1,16 @@
+const SWATCHES = [
+  { r: 0, g: 0, b: 0, a: 1 }, // black
+  { r: 255, g: 255, b: 255, a: 1 }, // white
+  { r: 255, g: 90, b: 94, a: 1 }, // red
+  { r: 255, g: 146, b: 75, a: 1 }, // orange
+  { r: 255, g: 202, b: 59, a: 1 }, // yellow
+  { r: 197, g: 202, b: 48, a: 1 }, // lime
+  { r: 138, g: 201, b: 38, a: 1 }, // green
+  { r: 83, g: 165, b: 117, a: 1 }, // teal
+  { r: 23, g: 130, b: 196, a: 1 }, // blue
+  { r: 66, g: 103, b: 172, a: 1 }, // indigo
+  { r: 107, g: 76, b: 147, a: 1 }, // purple
+];
+
+export const RGBA_COLOR_SWATCHES = SWATCHES;
+export const RGB_COLOR_SWATCHES = SWATCHES.map(({ r, g, b }) => ({ r, g, b }));