Changes color picker preview to circles

frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

@@ -3,6 +3,7 @@ import { useAppSelector } from 'app/store';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import React from 'react';
 import _ from 'lodash';
+import roundToHundreth from 'features/canvas/util/roundToHundreth';
 
 const cursorPositionSelector = createSelector(
   [canvasSelector],
@@ -14,7 +15,9 @@ const cursorPositionSelector = createSelector(
       : { cursorX: -1, cursorY: -1 };
 
     return {
-      cursorCoordinatesString: `(${cursorX}, ${cursorY})`,
+      cursorCoordinatesString: `(${roundToHundreth(cursorX)}, ${roundToHundreth(
+        cursorY
+      )})`,
     };
   },
   {

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

@@ -5,7 +5,10 @@ import { Circle, Group, Rect } from 'react-konva';
 import { useAppSelector } from 'app/store';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
-import { COLOR_PICKER_SIZE } from '../util/constants';
+import {
+  COLOR_PICKER_SIZE,
+  COLOR_PICKER_STROKE_RADIUS,
+} from '../util/constants';
 
 const canvasBrushPreviewSelector = createSelector(
   canvasSelector,
@@ -43,7 +46,12 @@ const canvasBrushPreviewSelector = createSelector(
       colorPickerSize: COLOR_PICKER_SIZE / stageScale,
       colorPickerOffset: COLOR_PICKER_SIZE / 2 / stageScale,
       colorPickerCornerRadius: COLOR_PICKER_SIZE / 5 / stageScale,
-      brushColorString: fill,
+      colorPickerOuterRadius: COLOR_PICKER_SIZE / stageScale,
+      colorPickerInnerRadius:
+        (COLOR_PICKER_SIZE - COLOR_PICKER_STROKE_RADIUS + 1) / stageScale,
+      maskColorString: rgbaColorToString({ ...maskColor, a: 0.5 }),
+      brushColorString: rgbaColorToString(brushColor),
+      colorPickerColorString: rgbaColorToString(colorPickerColor),
       tool,
       shouldShowBrush,
       shouldDrawBrushPreview:
@@ -73,7 +81,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
     width,
     height,
     radius,
-    brushColorString,
+    maskColorString,
     tool,
     shouldDrawBrushPreview,
     dotRadius,
@@ -81,6 +89,10 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
     colorPickerSize,
     colorPickerOffset,
     colorPickerCornerRadius,
+    brushColorString,
+    colorPickerColorString,
+    colorPickerInnerRadius,
+    colorPickerOuterRadius,
   } = useAppSelector(canvasBrushPreviewSelector);
 
   if (!shouldDrawBrushPreview) return null;
@@ -89,48 +101,21 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
     <Group listening={false} {...rest}>
       {tool === 'colorPicker' ? (
         <>
-          <Rect
+          <Circle
-            x={
+            x={cursorPosition ? cursorPosition.x : width / 2}
-              cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
+            y={cursorPosition ? cursorPosition.y : height / 2}
-            }
+            radius={colorPickerOuterRadius}
-            y={
+            stroke={brushColorString}
-              cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
+            strokeWidth={COLOR_PICKER_STROKE_RADIUS}
-            }
+            strokeScaleEnabled={false}
-            width={colorPickerSize}
-            height={colorPickerSize}
-            fill={brushColorString}
-            cornerRadius={colorPickerCornerRadius}
-            listening={false}
           />
-          <Rect
+          <Circle
-            x={
+            x={cursorPosition ? cursorPosition.x : width / 2}
-              cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
+            y={cursorPosition ? cursorPosition.y : height / 2}
-            }
+            radius={colorPickerInnerRadius}
-            y={
+            stroke={colorPickerColorString}
-              cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
+            strokeWidth={COLOR_PICKER_STROKE_RADIUS}
-            }
+            strokeScaleEnabled={false}
-            width={colorPickerSize}
-            height={colorPickerSize}
-            cornerRadius={colorPickerCornerRadius}
-            stroke={'rgba(255,255,255,0.4)'}
-            strokeWidth={strokeWidth * 2}
-            strokeEnabled={true}
-            listening={false}
-          />
-          <Rect
-            x={
-              cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
-            }
-            y={
-              cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
-            }
-            width={colorPickerSize}
-            height={colorPickerSize}
-            cornerRadius={colorPickerCornerRadius}
-            stroke={'rgba(0,0,0,1)'}
-            strokeWidth={strokeWidth}
-            strokeEnabled={true}
-            listening={false}
           />
         </>
       ) : (
@@ -183,3 +168,50 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
 };
 
 export default IAICanvasToolPreview;
+{
+  /* <>
+          <Rect
+            x={
+              cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
+            }
+            y={
+              cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
+            }
+            width={colorPickerSize}
+            height={colorPickerSize}
+            fill={brushColorString}
+            cornerRadius={colorPickerCornerRadius}
+            listening={false}
+          />
+          <Rect
+            x={
+              cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
+            }
+            y={
+              cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
+            }
+            width={colorPickerSize}
+            height={colorPickerSize}
+            cornerRadius={colorPickerCornerRadius}
+            stroke={'rgba(255,255,255,0.4)'}
+            strokeWidth={strokeWidth * 2}
+            strokeEnabled={true}
+            listening={false}
+          />
+          <Rect
+            x={
+              cursorPosition ? cursorPosition.x - colorPickerOffset : width / 2
+            }
+            y={
+              cursorPosition ? cursorPosition.y - colorPickerOffset : height / 2
+            }
+            width={colorPickerSize}
+            height={colorPickerSize}
+            cornerRadius={colorPickerCornerRadius}
+            stroke={'rgba(0,0,0,1)'}
+            strokeWidth={strokeWidth}
+            strokeEnabled={true}
+            listening={false}
+          />
+        </> */
+}

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

@@ -689,7 +689,6 @@ export const canvasSlice = createSlice({
     },
     commitColorPickerColor: (state) => {
       state.brushColor = state.colorPickerColor;
-      state.tool = 'brush';
     },
     setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
       state.pastLayerStates.push({

frontend/src/features/canvas/util/constants.ts

@@ -13,4 +13,5 @@ export const MAX_CANVAS_SCALE = 20;
 // padding given to initial image/bounding box when stage view is reset
 export const STAGE_PADDING_PERCENTAGE = 0.95;
 
-export const COLOR_PICKER_SIZE = 60;
+export const COLOR_PICKER_SIZE = 30;
+export const COLOR_PICKER_STROKE_RADIUS = 10;

frontend/src/features/canvas/util/roundToHundreth.ts

@@ -0,0 +1,5 @@
+const roundToHundreth = (val: number): number => {
+  return Math.round(val * 100) / 100;
+};
+
+export default roundToHundreth;