code review changes

Author: Attila Cseh

invokeai/frontend/web/public/locales/en.json

@@ -589,6 +589,10 @@
                 "title": "Prev Layer",
                 "desc": "Select the previous layer in the list."
             },
+            "setFillColorsToDefault": {
+                "title": "Set Colors to Default",
+                "desc": "Set the current tool colors to default."
+            },
             "toggleFillColor": {
                 "title": "Toggle Fill Color",
                 "desc": "Toggle the current tool fill color."
@@ -2268,8 +2272,8 @@
         },
         "fill": {
             "fillColor": "Fill Color",
-            "fillColor1": "Color1",
-            "fillColor2": "Color2",
+            "bgFillColor": "Background Color",
+            "fgFillColor": "Foreground Color",
             "fillStyle": "Fill Style",
             "solid": "Solid",
             "grid": "Grid",

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx

@@ -15,42 +15,51 @@ import { rgbaColorToString } from 'common/util/colorCodeTransformers';
 import {
   selectCanvasSettingsSlice,
   settingsActiveColorToggled,
-  settingsColor1Changed,
-  settingsColor2Changed,
+  settingsBgColorChanged,
+  settingsColorsSetToDefault,
+  settingsFgColorChanged,
 } from 'features/controlLayers/store/canvasSettingsSlice';
 import type { RgbaColor } from 'features/controlLayers/store/types';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selectActiveColor = createSelector(selectCanvasSettingsSlice, (settings) => settings.activeColor);
-const selectColor1 = createSelector(selectCanvasSettingsSlice, (settings) => settings.color1);
-const selectColor2 = createSelector(selectCanvasSettingsSlice, (settings) => settings.color2);
+const selectBgColor = createSelector(selectCanvasSettingsSlice, (settings) => settings.bgColor);
+const selectFgColor = createSelector(selectCanvasSettingsSlice, (settings) => settings.fgColor);
 
 export const ToolFillColorPicker = memo(() => {
   const { t } = useTranslation();
   const activeColorType = useAppSelector(selectActiveColor);
-  const color1 = useAppSelector(selectColor1);
-  const color2 = useAppSelector(selectColor2);
-  const { activeColor, tooltip, color1zIndex, color2zIndex } = useMemo(() => {
-    if (activeColorType === 'color1') {
-      return { activeColor: color1, tooltip: t('controlLayers.fill.fillColor1'), color1zIndex: 2, color2zIndex: 1 };
+  const bgColor = useAppSelector(selectBgColor);
+  const fgColor = useAppSelector(selectFgColor);
+  const { activeColor, tooltip, bgColorzIndex, fgColorzIndex } = useMemo(() => {
+    if (activeColorType === 'bgColor') {
+      return { activeColor: bgColor, tooltip: t('controlLayers.fill.bgFillColor'), bgColorzIndex: 2, fgColorzIndex: 1 };
     } else {
-      return { activeColor: color2, tooltip: t('controlLayers.fill.fillColor2'), color1zIndex: 1, color2zIndex: 2 };
+      return { activeColor: fgColor, tooltip: t('controlLayers.fill.fgFillColor'), bgColorzIndex: 1, fgColorzIndex: 2 };
     }
-  }, [activeColorType, color1, color2, t]);
+  }, [activeColorType, bgColor, fgColor, t]);
   const dispatch = useAppDispatch();
   const onColorChange = useCallback(
     (color: RgbaColor) => {
-      if (activeColorType === 'color1') {
-        dispatch(settingsColor1Changed(color));
+      if (activeColorType === 'bgColor') {
+        dispatch(settingsBgColorChanged(color));
       } else {
-        dispatch(settingsColor2Changed(color));
+        dispatch(settingsFgColorChanged(color));
       }
     },
     [activeColorType, dispatch]
   );
 
+  useRegisteredHotkeys({
+    id: 'setFillColorsToDefault',
+    category: 'canvas',
+    callback: () => dispatch(settingsColorsSetToDefault()),
+    options: { preventDefault: true },
+    dependencies: [dispatch],
+  });
+
   useRegisteredHotkeys({
     id: 'toggleFillColor',
     category: 'canvas',
@@ -71,23 +80,23 @@ export const ToolFillColorPicker = memo(() => {
                 w={6}
                 h={6}
                 borderWidth={2}
-                bg={rgbaColorToString(color1)}
+                bg={rgbaColorToString(bgColor)}
                 position="absolute"
                 top="0"
                 left="0"
-                zIndex={color1zIndex}
+                zIndex={bgColorzIndex}
               />
               <Box
                 borderRadius="full"
                 borderColor="base.600"
                 w={6}
                 h={6}
                 borderWidth={2}
-                bg={rgbaColorToString(color2)}
+                bg={rgbaColorToString(fgColor)}
                 position="absolute"
                 top="2"
                 left="2"
-                zIndex={color2zIndex}
+                zIndex={fgColorzIndex}
               />
             </Flex>
           </Tooltip>

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts

@@ -10,10 +10,10 @@ import type { SubscriptionHandler } from 'features/controlLayers/konva/util';
 import { createReduxSubscription, getPrefixedId } from 'features/controlLayers/konva/util';
 import {
   selectCanvasSettingsSlice,
+  settingsBgColorChanged,
   settingsBrushWidthChanged,
-  settingsColor1Changed,
-  settingsColor2Changed,
   settingsEraserWidthChanged,
+  settingsFgColorChanged,
 } from 'features/controlLayers/store/canvasSettingsSlice';
 import {
   bboxChangedFromCanvas,
@@ -233,9 +233,9 @@ export class CanvasStateApiModule extends CanvasModuleBase {
    * Sets the drawing color, pushing state to redux.
    */
   setColor = (color: Partial<RgbaColor>) => {
-    return this.getSettings().activeColor === 'color1'
-      ? this.store.dispatch(settingsColor1Changed(color))
-      : this.store.dispatch(settingsColor2Changed(color));
+    return this.getSettings().activeColor === 'bgColor'
+      ? this.store.dispatch(settingsBgColorChanged(color))
+      : this.store.dispatch(settingsFgColorChanged(color));
   };
 
   /**
@@ -425,7 +425,7 @@ export class CanvasStateApiModule extends CanvasModuleBase {
    */
   getCurrentColor = (): RgbaColor => {
     let color: RgbaColor =
-      this.getSettings().activeColor === 'color1' ? this.getSettings().color1 : this.getSettings().color2;
+      this.getSettings().activeColor === 'bgColor' ? this.getSettings().bgColor : this.getSettings().fgColor;
     const selectedEntity = this.getSelectedEntityAdapter();
     if (selectedEntity) {
       // These two entity types use a compositing rect for opacity. Their fill is always a solid color.
@@ -453,7 +453,7 @@ export class CanvasStateApiModule extends CanvasModuleBase {
       // selected entity's fill color with 50% opacity.
       return { ...selectedEntity.state.fill.color, a: 0.5 };
     } else {
-      return this.getSettings().activeColor === 'color1' ? this.getSettings().color1 : this.getSettings().color2;
+      return this.getSettings().activeColor === 'bgColor' ? this.getSettings().bgColor : this.getSettings().fgColor;
     }
   };
 

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasColorPickerToolModule.ts

@@ -328,7 +328,7 @@ export class CanvasColorPickerToolModule extends CanvasModuleBase {
     const colorPickerOuterRadius = this.manager.stage.unscale(this.config.RING_OUTER_RADIUS);
     const onePixel = this.manager.stage.unscale(1);
     const twoPixels = this.manager.stage.unscale(2);
-    const color = settings.activeColor === 'color1' ? settings.color1 : settings.color2;
+    const color = settings.activeColor === 'bgColor' ? settings.bgColor : settings.fgColor;
 
     this.konva.ringCandidateColor.setAttrs({
       x,

invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts

@@ -3,7 +3,7 @@ import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import type { SliceConfig } from 'app/store/types';
 import type { RgbaColor } from 'features/controlLayers/store/types';
-import { zRgbaColor } from 'features/controlLayers/store/types';
+import { RGBA_BLACK, RGBA_WHITE, zRgbaColor } from 'features/controlLayers/store/types';
 import { z } from 'zod';
 
 const zAutoSwitchMode = z.enum(['off', 'switch_on_start', 'switch_on_finish']);
@@ -38,9 +38,9 @@ const zCanvasSettingsState = z.object({
   /**
    * The colors to use when drawing lines or filling shapes.
    */
-  activeColor: z.enum(['color1', 'color2']),
-  color1: zRgbaColor,
-  color2: zRgbaColor,
+  activeColor: z.enum(['bgColor', 'fgColor']),
+  bgColor: zRgbaColor,
+  fgColor: zRgbaColor,
   /**
    * Whether to composite inpainted/outpainted regions back onto the source image when saving canvas generations.
    *
@@ -103,9 +103,9 @@ const getInitialState = (): CanvasSettingsState => ({
   invertScrollForToolWidth: false,
   brushWidth: 50,
   eraserWidth: 50,
-  activeColor: 'color1',
-  color1: { r: 31, g: 160, b: 224, a: 1 }, // invokeBlue.500
-  color2: { r: 0, g: 0, b: 0, a: 1 }, // black
+  activeColor: 'fgColor',
+  bgColor: RGBA_BLACK,
+  fgColor: RGBA_WHITE,
   outputOnlyMaskedRegions: true,
   autoProcess: true,
   snapToGrid: true,
@@ -140,13 +140,17 @@ const slice = createSlice({
       state.eraserWidth = Math.round(action.payload);
     },
     settingsActiveColorToggled: (state) => {
-      state.activeColor = state.activeColor === 'color1' ? 'color2' : 'color1';
+      state.activeColor = state.activeColor === 'bgColor' ? 'fgColor' : 'bgColor';
     },
-    settingsColor1Changed: (state, action: PayloadAction<Partial<RgbaColor>>) => {
-      state.color1 = { ...state.color1, ...action.payload };
+    settingsBgColorChanged: (state, action: PayloadAction<Partial<RgbaColor>>) => {
+      state.bgColor = { ...state.bgColor, ...action.payload };
     },
-    settingsColor2Changed: (state, action: PayloadAction<Partial<RgbaColor>>) => {
-      state.color2 = { ...state.color2, ...action.payload };
+    settingsFgColorChanged: (state, action: PayloadAction<Partial<RgbaColor>>) => {
+      state.fgColor = { ...state.fgColor, ...action.payload };
+    },
+    settingsColorsSetToDefault: (state) => {
+      state.bgColor = RGBA_BLACK;
+      state.fgColor = RGBA_WHITE;
     },
     settingsInvertScrollForToolWidthChanged: (
       state,
@@ -203,8 +207,9 @@ export const {
   settingsBrushWidthChanged,
   settingsEraserWidthChanged,
   settingsActiveColorToggled,
-  settingsColor1Changed,
-  settingsColor2Changed,
+  settingsBgColorChanged,
+  settingsFgColorChanged,
+  settingsColorsSetToDefault,
   settingsInvertScrollForToolWidthChanged,
   settingsOutputOnlyMaskedRegionsToggled,
   settingsAutoProcessToggled,

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -82,6 +82,7 @@ export const zRgbaColor = zRgbColor.extend({
 });
 export type RgbaColor = z.infer<typeof zRgbaColor>;
 export const RGBA_BLACK: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };
+export const RGBA_WHITE: RgbaColor = { r: 255, g: 255, b: 255, a: 1 };
 
 const zOpacity = z.number().gte(0).lte(1);
 

invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts

@@ -118,6 +118,7 @@ export const useHotkeyData = (): HotkeysData => {
     addHotkey('canvas', 'selectRectTool', ['u']);
     addHotkey('canvas', 'selectViewTool', ['h']);
     addHotkey('canvas', 'selectColorPickerTool', ['i']);
+    addHotkey('canvas', 'setFillColorsToDefault', ['d']);
     addHotkey('canvas', 'toggleFillColor', ['x']);
     addHotkey('canvas', 'fitLayersToCanvas', ['mod+0']);
     addHotkey('canvas', 'fitBboxToCanvas', ['mod+shift+0']);