Unify Brush and Eraser Sizes

frontend/src/features/canvas/components/IAICanvasBrushPreview.tsx

@@ -13,7 +13,6 @@ const canvasBrushPreviewSelector = createSelector(
       cursorPosition,
       stageDimensions: { width, height },
       brushSize,
-      eraserSize,
       maskColor,
       brushColor,
       tool,
@@ -28,7 +27,7 @@ const canvasBrushPreviewSelector = createSelector(
       cursorPosition,
       width,
       height,
-      radius: tool === 'brush' ? brushSize / 2 : eraserSize / 2,
+      radius: brushSize / 2,
       brushColorString: rgbaColorToString(
         layer === 'mask' ? { ...maskColor, a: 0.5 } : brushColor
       ),

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasEraserButtonPopover.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { setEraserSize, setTool } from 'features/canvas/store/canvasSlice';
+import { setBrushSize, setTool } from 'features/canvas/store/canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -16,11 +16,11 @@ import {
 export const selector = createSelector(
   [canvasSelector, isStagingSelector],
   (canvas, isStaging) => {
-    const { eraserSize, tool } = canvas;
+    const { brushSize, tool } = canvas;
 
     return {
       tool,
-      eraserSize,
+      brushSize,
       isStaging,
     };
   },
@@ -32,7 +32,7 @@ export const selector = createSelector(
 );
 const IAICanvasEraserButtonPopover = () => {
   const dispatch = useAppDispatch();
-  const { tool, eraserSize, isStaging } = useAppSelector(selector);
+  const { tool, brushSize, isStaging } = useAppSelector(selector);
 
   const handleSelectEraserTool = () => dispatch(setTool('eraser'));
 
@@ -51,25 +51,25 @@ const IAICanvasEraserButtonPopover = () => {
   useHotkeys(
     ['['],
     () => {
-      dispatch(setEraserSize(Math.max(eraserSize - 5, 5)));
+      dispatch(setBrushSize(Math.max(brushSize - 5, 5)));
     },
     {
       enabled: () => true,
       preventDefault: true,
     },
-    [eraserSize]
+    [brushSize]
   );
 
   useHotkeys(
     [']'],
     () => {
-      dispatch(setEraserSize(Math.min(eraserSize + 5, 500)));
+      dispatch(setBrushSize(Math.min(brushSize + 5, 500)));
     },
     {
       enabled: () => true,
       preventDefault: true,
     },
-    [eraserSize]
+    [brushSize]
   );
 
   return (
@@ -89,9 +89,9 @@ const IAICanvasEraserButtonPopover = () => {
       <Flex minWidth={'15rem'} direction={'column'} gap={'1rem'}>
         <IAISlider
           label="Size"
-          value={eraserSize}
+          value={brushSize}
           withInput
-          onChange={(newSize) => dispatch(setEraserSize(newSize))}
+          onChange={(newSize) => dispatch(setBrushSize(newSize))}
         />
       </Flex>
     </IAIPopover>

frontend/src/features/canvas/store/canvasSlice.ts

@@ -47,7 +47,6 @@ const initialCanvasState: CanvasState = {
   canvasContainerDimensions: { width: 0, height: 0 },
   cursorPosition: null,
   doesCanvasNeedScaling: false,
-  eraserSize: 50,
   futureLayerStates: [],
   inpaintReplace: 0.1,
   isCanvasInitialized: false,
@@ -115,9 +114,6 @@ export const canvasSlice = createSlice({
     setBrushSize: (state, action: PayloadAction<number>) => {
       state.brushSize = action.payload;
     },
-    setEraserSize: (state, action: PayloadAction<number>) => {
-      state.eraserSize = action.payload;
-    },
     clearMask: (state) => {
       state.pastLayerStates.push(state.layerState);
       state.layerState.objects = state.layerState.objects.filter(
@@ -275,11 +271,11 @@ export const canvasSlice = createSlice({
       };
     },
     addLine: (state, action: PayloadAction<number[]>) => {
-      const { tool, layer, brushColor, brushSize, eraserSize } = state;
+      const { tool, layer, brushColor, brushSize } = state;
 
       if (tool === 'move') return;
 
-      const newStrokeWidth = tool === 'brush' ? brushSize / 2 : eraserSize / 2;
+      const newStrokeWidth = brushSize / 2;
 
       // set & then spread this to only conditionally add the "color" key
       const newColor =
@@ -608,7 +604,6 @@ export const {
   setLayer,
   setBrushColor,
   setBrushSize,
-  setEraserSize,
   addLine,
   addPointToCurrentLine,
   setShouldPreserveMaskedArea,

frontend/src/features/canvas/store/canvasTypes.ts

@@ -76,7 +76,6 @@ export interface CanvasState {
   canvasContainerDimensions: Dimensions;
   cursorPosition: Vector2d | null;
   doesCanvasNeedScaling: boolean;
-  eraserSize: number;
   futureLayerStates: CanvasLayerState[];
   inpaintReplace: number;
   intermediateImage?: InvokeAI.Image;