tidy(ui): "eye dropper" -> "color picker"

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

@@ -1745,7 +1745,7 @@
             "move": "Move",
             "view": "View",
             "transform": "Transform",
-            "eyeDropper": "Eye Dropper"
+            "colorPicker": "Color Picker"
         },
         "filter": {
             "filter": "Filter",

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

@@ -1,7 +1,7 @@
 import { ButtonGroup } from '@invoke-ai/ui-library';
 import { ToolBboxButton } from 'features/controlLayers/components/Tool/ToolBboxButton';
 import { ToolBrushButton } from 'features/controlLayers/components/Tool/ToolBrushButton';
-import { ToolEyeDropperButton } from 'features/controlLayers/components/Tool/ToolEyeDropperButton';
+import { ToolColorPickerButton } from 'features/controlLayers/components/Tool/ToolEyeDropperButton';
 import { ToolMoveButton } from 'features/controlLayers/components/Tool/ToolMoveButton';
 import { ToolRectButton } from 'features/controlLayers/components/Tool/ToolRectButton';
 import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey';
@@ -23,7 +23,7 @@ export const ToolChooser: React.FC = () => {
         <ToolMoveButton />
         <ToolViewButton />
         <ToolBboxButton />
-        <ToolEyeDropperButton />
+        <ToolColorPickerButton />
       </ButtonGroup>
     </>
   );

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

@@ -7,11 +7,11 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiEyedropperBold } from 'react-icons/pi';
 
-export const ToolEyeDropperButton = memo(() => {
+export const ToolColorPickerButton = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isTransforming = useIsTransforming();
-  const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'eyeDropper');
+  const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'colorPicker');
   const isStaging = useAppSelector((s) => s.canvasV2.session.isStaging);
 
   const isDisabled = useMemo(() => {
@@ -19,15 +19,15 @@ export const ToolEyeDropperButton = memo(() => {
   }, [isStaging, isTransforming]);
 
   const onClick = useCallback(() => {
-    dispatch(toolChanged('eyeDropper'));
+    dispatch(toolChanged('colorPicker'));
   }, [dispatch]);
 
   useHotkeys('i', onClick, { enabled: !isDisabled || isSelected }, [onClick, isSelected, isDisabled]);
 
   return (
     <IconButton
-      aria-label={`${t('controlLayers.tool.eyeDropper')} (I)`}
-      tooltip={`${t('controlLayers.tool.eyeDropper')} (I)`}
+      aria-label={`${t('controlLayers.tool.colorPicker')} (I)`}
+      tooltip={`${t('controlLayers.tool.colorPicker')} (I)`}
       icon={<PiEyedropperBold />}
       colorScheme={isSelected ? 'invokeBlue' : 'base'}
       variant="outline"
@@ -37,4 +37,4 @@ export const ToolEyeDropperButton = memo(() => {
   );
 });
 
-ToolEyeDropperButton.displayName = 'ToolEyeDropperButton';
+ToolColorPickerButton.displayName = 'ToolColorPickerButton';

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

@@ -36,7 +36,7 @@ export class CanvasToolModule {
       innerBorderCircle: Konva.Circle;
       outerBorderCircle: Konva.Circle;
     };
-    eyeDropper: {
+    colorPicker: {
       group: Konva.Group;
       fillCircle: Konva.Circle;
       transparentCenterCircle: Konva.Circle;
@@ -102,10 +102,10 @@ export class CanvasToolModule {
           strokeEnabled: true,
         }),
       },
-      eyeDropper: {
-        group: new Konva.Group({ name: `${this.type}:eyeDropper_group`, listening: false }),
+      colorPicker: {
+        group: new Konva.Group({ name: `${this.type}:color_picker_group`, listening: false }),
         fillCircle: new Konva.Circle({
-          name: `${this.type}:eyeDropper_fill_circle`,
+          name: `${this.type}:color_picker_fill_circle`,
           listening: false,
           fill: '',
           radius: 20,
@@ -114,7 +114,7 @@ export class CanvasToolModule {
           strokeScaleEnabled: false,
         }),
         transparentCenterCircle: new Konva.Circle({
-          name: `${this.type}:eyeDropper_fill_circle`,
+          name: `${this.type}:color_picker_fill_circle`,
           listening: false,
           strokeEnabled: false,
           fill: 'white',
@@ -133,9 +133,9 @@ export class CanvasToolModule {
     this.konva.eraser.group.add(this.konva.eraser.outerBorderCircle);
     this.konva.group.add(this.konva.eraser.group);
 
-    this.konva.eyeDropper.group.add(this.konva.eyeDropper.fillCircle);
-    this.konva.eyeDropper.group.add(this.konva.eyeDropper.transparentCenterCircle);
-    this.konva.group.add(this.konva.eyeDropper.group);
+    this.konva.colorPicker.group.add(this.konva.colorPicker.fillCircle);
+    this.konva.colorPicker.group.add(this.konva.colorPicker.transparentCenterCircle);
+    this.konva.group.add(this.konva.colorPicker.group);
 
     this.subscriptions.add(
       this.manager.stateApi.$stageAttrs.listen(() => {
@@ -179,7 +179,7 @@ export class CanvasToolModule {
   setToolVisibility = (tool: Tool) => {
     this.konva.brush.group.visible(tool === 'brush');
     this.konva.eraser.group.visible(tool === 'eraser');
-    this.konva.eyeDropper.group.visible(tool === 'eyeDropper');
+    this.konva.colorPicker.group.visible(tool === 'colorPicker');
   };
 
   render() {
@@ -206,8 +206,8 @@ export class CanvasToolModule {
       // Bbox tool gets default
     } else if (tool === 'bbox') {
       stage.container.style.cursor = 'default';
-    } else if (tool === 'eyeDropper') {
-      // Eyedropper gets none
+    } else if (tool === 'colorPicker') {
+      // Color picker gets none
       stage.container.style.cursor = 'none';
     } else if (isDrawable) {
       if (tool === 'move') {
@@ -281,12 +281,12 @@ export class CanvasToolModule {
           radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale,
         });
       } else if (cursorPos && colorUnderCursor) {
-        this.konva.eyeDropper.fillCircle.setAttrs({
+        this.konva.colorPicker.fillCircle.setAttrs({
           x: cursorPos.x,
           y: cursorPos.y,
           fill: rgbaColorToString(colorUnderCursor),
         });
-        this.konva.eyeDropper.transparentCenterCircle.setAttrs({
+        this.konva.colorPicker.transparentCenterCircle.setAttrs({
           x: cursorPos.x,
           y: cursorPos.y,
         });

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

@@ -193,7 +193,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
     const pos = updateLastCursorPos(stage, $lastCursorPos.set);
     const selectedEntity = getSelectedEntity();
 
-    if (toolState.selected === 'eyeDropper') {
+    if (toolState.selected === 'colorPicker') {
       const color = getColorUnderCursor(stage);
       manager.stateApi.$colorUnderCursor.set(color);
       if (color) {
@@ -343,7 +343,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
     const pos = updateLastCursorPos(stage, $lastCursorPos.set);
     const selectedEntity = getSelectedEntity();
 
-    if (toolState.selected === 'eyeDropper') {
+    if (toolState.selected === 'colorPicker') {
       const color = getColorUnderCursor(stage);
       manager.stateApi.$colorUnderCursor.set(color);
     } else {

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

@@ -456,7 +456,7 @@ export const IMAGE_FILTERS: { [key in FilterConfig['type']]: ImageFilterData<key
   },
 } as const;
 
-const zTool = z.enum(['brush', 'eraser', 'move', 'rect', 'view', 'bbox', 'eyeDropper']);
+const zTool = z.enum(['brush', 'eraser', 'move', 'rect', 'view', 'bbox', 'colorPicker']);
 export type Tool = z.infer<typeof zTool>;
 
 const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, {