From 36e8232ab6409e13949dc0e122bf2f8450d4ac08 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:14:18 +1000 Subject: [PATCH] tidy(ui): "eye dropper" -> "color picker" --- invokeai/frontend/web/public/locales/en.json | 2 +- .../components/Tool/ToolChooser.tsx | 4 +-- .../components/Tool/ToolEyeDropperButton.tsx | 12 ++++----- .../controlLayers/konva/CanvasToolModule.ts | 26 +++++++++---------- .../features/controlLayers/konva/events.ts | 4 +-- .../src/features/controlLayers/store/types.ts | 2 +- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index faed7ce4b6..c2ce7701ef 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1750,7 +1750,7 @@ "move": "Move", "view": "View", "transform": "Transform", - "eyeDropper": "Eye Dropper" + "colorPicker": "Color Picker" }, "filter": { "filter": "Filter", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx index 44409e8374..bb3a424d4e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx +++ b/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 = () => { - + ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEyeDropperButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEyeDropperButton.tsx index d1783b93ab..de791a8afc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEyeDropperButton.tsx +++ b/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 ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -37,4 +37,4 @@ export const ToolEyeDropperButton = memo(() => { ); }); -ToolEyeDropperButton.displayName = 'ToolEyeDropperButton'; +ToolColorPickerButton.displayName = 'ToolColorPickerButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts index b2915d1e0b..fc06cadb44 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts +++ b/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, }); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts index a514d65e98..fc5c112abb 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts +++ b/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 { diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts index 8f386f6f7c..b9ac58c819 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts @@ -456,7 +456,7 @@ export const IMAGE_FILTERS: { [key in FilterConfig['type']]: ImageFilterData; const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, {