Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
psychedelicious 2024-08-23 17:14:18 +10:00
parent 72722a73be
commit 36e8232ab6
6 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/public/locales/en.json
View File

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

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

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

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

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

26
invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts
View File

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

4
invokeai/frontend/web/src/features/controlLayers/konva/events.ts
View File

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

2
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@ -456,7 +456,7 @@ export const IMAGE_FILTERS: { [key in FilterConfig['type']]: ImageFilterData<key
}, },
} as const; } 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>; export type Tool = z.infer<typeof zTool>;
const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, { const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, {