From 700dbe69f38772fb7b6098f7dee8839290b62cc8 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 15 Aug 2024 20:52:51 +1000 Subject: [PATCH] tidy(ui): tool components & translations --- invokeai/frontend/web/public/locales/en.json | 12 ++++++- .../components/ControlLayersToolbar.tsx | 14 ++++---- .../ToolBboxButton.tsx} | 8 ++--- .../ToolBrushButton.tsx} | 8 ++--- .../ToolBrushWidth.tsx} | 4 +-- .../components/Tool/ToolChooser.tsx | 34 +++++++++++++++++++ .../ToolEraserButton.tsx} | 8 ++--- .../ToolEraserWidth.tsx} | 4 +-- .../{ => Tool}/ToolEyeDropperButton.tsx | 4 +-- .../ToolFillColorPicker.tsx} | 4 +-- .../ToolMoveButton.tsx} | 8 ++--- .../ToolRectButton.tsx} | 8 ++--- .../ToolTransformButton.tsx} | 8 ++--- .../ToolViewButton.tsx} | 8 ++--- .../controlLayers/components/ToolChooser.tsx | 33 ------------------ .../controlLayers/konva/CanvasTool.ts | 15 +++----- 16 files changed, 93 insertions(+), 87 deletions(-) rename invokeai/frontend/web/src/features/controlLayers/components/{BboxToolButton.tsx => Tool/ToolBboxButton.tsx} (83%) rename invokeai/frontend/web/src/features/controlLayers/components/{BrushToolButton.tsx => Tool/ToolBrushButton.tsx} (86%) rename invokeai/frontend/web/src/features/controlLayers/components/{BrushWidth.tsx => Tool/ToolBrushWidth.tsx} (94%) create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx rename invokeai/frontend/web/src/features/controlLayers/components/{EraserToolButton.tsx => Tool/ToolEraserButton.tsx} (86%) rename invokeai/frontend/web/src/features/controlLayers/components/{EraserWidth.tsx => Tool/ToolEraserWidth.tsx} (94%) rename invokeai/frontend/web/src/features/controlLayers/components/{ => Tool}/ToolEyeDropperButton.tsx (90%) rename invokeai/frontend/web/src/features/controlLayers/components/{FillColorPicker.tsx => Tool/ToolFillColorPicker.tsx} (92%) rename invokeai/frontend/web/src/features/controlLayers/components/{MoveToolButton.tsx => Tool/ToolMoveButton.tsx} (84%) rename invokeai/frontend/web/src/features/controlLayers/components/{RectToolButton.tsx => Tool/ToolRectButton.tsx} (86%) rename invokeai/frontend/web/src/features/controlLayers/components/{TransformToolButton.tsx => Tool/ToolTransformButton.tsx} (88%) rename invokeai/frontend/web/src/features/controlLayers/components/{ViewToolButton.tsx => Tool/ToolViewButton.tsx} (83%) delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 96c3ff85e4..fab94554fc 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1698,7 +1698,17 @@ "objects_other": "{{count}} objects", "filter": "Filter", "convertToControlLayer": "Convert to Control Layer", - "convertToRasterLayer": "Convert to Raster Layer" + "convertToRasterLayer": "Convert to Raster Layer", + "tool": { + "brush": "Brush", + "eraser": "Eraser", + "rectangle": "Rectangle", + "bbox": "Bbox", + "move": "Move", + "view": "View", + "transform": "Transform", + "eyeDropper": "Eye Dropper" + } }, "upscaling": { "upscale": "Upscale", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx index dd98df8dab..69ec88c5cf 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx @@ -2,14 +2,14 @@ import { Flex, Switch } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; -import { BrushWidth } from 'features/controlLayers/components/BrushWidth'; import { CanvasResetViewButton } from 'features/controlLayers/components/CanvasResetViewButton'; import { CanvasScale } from 'features/controlLayers/components/CanvasScale'; import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover'; -import { EraserWidth } from 'features/controlLayers/components/EraserWidth'; -import { FillColorPicker } from 'features/controlLayers/components/FillColorPicker'; import { ResetCanvasButton } from 'features/controlLayers/components/ResetCanvasButton'; -import { ToolChooser } from 'features/controlLayers/components/ToolChooser'; +import { ToolBrushWidth } from 'features/controlLayers/components/Tool/ToolBrushWidth'; +import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'; +import { ToolEraserWidth } from 'features/controlLayers/components/Tool/ToolEraserWidth'; +import { ToolFillColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker'; import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup'; import { $canvasManager } from 'features/controlLayers/konva/CanvasManager'; import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton'; @@ -42,15 +42,15 @@ export const ControlLayersToolbar = memo(() => { - {tool === 'brush' && } - {tool === 'eraser' && } + {tool === 'brush' && } + {tool === 'eraser' && } debug - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/BboxToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx similarity index 83% rename from invokeai/frontend/web/src/features/controlLayers/components/BboxToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx index 6eecd06860..407efcb9f9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/BboxToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx @@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiBoundingBoxBold } from 'react-icons/pi'; -export const BboxToolButton = memo(() => { +export const ToolBboxButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isDisabled = useAppSelector((s) => s.canvasV2.session.isStaging || s.canvasV2.tool.isTransforming); @@ -20,8 +20,8 @@ export const BboxToolButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -31,4 +31,4 @@ export const BboxToolButton = memo(() => { ); }); -BboxToolButton.displayName = 'BboxToolButton'; +ToolBboxButton.displayName = 'ToolBboxButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/BrushToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/components/BrushToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx index 551568e7cf..f170e3f2de 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/BrushToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx @@ -7,7 +7,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiPaintBrushBold } from 'react-icons/pi'; -export const BrushToolButton = memo(() => { +export const ToolBrushButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'brush'); @@ -26,8 +26,8 @@ export const BrushToolButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -37,4 +37,4 @@ export const BrushToolButton = memo(() => { ); }); -BrushToolButton.displayName = 'BrushToolButton'; +ToolBrushButton.displayName = 'ToolBrushButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/BrushWidth.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx similarity index 94% rename from invokeai/frontend/web/src/features/controlLayers/components/BrushWidth.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx index fa72e54259..20a5115531 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/BrushWidth.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx @@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next'; const marks = [0, 100, 200, 300]; const formatPx = (v: number | string) => `${v} px`; -export const BrushWidth = memo(() => { +export const ToolBrushWidth = memo(() => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const width = useAppSelector((s) => s.canvasV2.tool.brush.width); @@ -53,4 +53,4 @@ export const BrushWidth = memo(() => { ); }); -BrushWidth.displayName = 'BrushSize'; +ToolBrushWidth.displayName = 'ToolBrushWidth'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx new file mode 100644 index 0000000000..c9349a069f --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx @@ -0,0 +1,34 @@ +import { ButtonGroup } from '@invoke-ai/ui-library'; +import { useAppSelector } from 'app/store/storeHooks'; +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 { ToolMoveButton } from 'features/controlLayers/components/Tool/ToolMoveButton'; +import { ToolRectButton } from 'features/controlLayers/components/Tool/ToolRectButton'; +import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey'; +import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey'; + +import { ToolEraserButton } from './ToolEraserButton'; +import { ToolTransformButton } from './ToolTransformButton'; +import { ToolViewButton } from './ToolViewButton'; + +export const ToolChooser: React.FC = () => { + useCanvasResetLayerHotkey(); + useCanvasDeleteLayerHotkey(); + const isTransforming = useAppSelector((s) => s.canvasV2.tool.isTransforming); + + return ( + <> + + + + + + + + + + + + ); +}; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/EraserToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/components/EraserToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx index f73d38a769..924c7098b6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/EraserToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx @@ -7,7 +7,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiEraserBold } from 'react-icons/pi'; -export const EraserToolButton = memo(() => { +export const ToolEraserButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'eraser'); @@ -26,8 +26,8 @@ export const EraserToolButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -37,4 +37,4 @@ export const EraserToolButton = memo(() => { ); }); -EraserToolButton.displayName = 'EraserToolButton'; +ToolEraserButton.displayName = 'ToolEraserButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/EraserWidth.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx similarity index 94% rename from invokeai/frontend/web/src/features/controlLayers/components/EraserWidth.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx index deff803bb1..e227e0bedd 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/EraserWidth.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx @@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next'; const marks = [0, 100, 200, 300]; const formatPx = (v: number | string) => `${v} px`; -export const EraserWidth = memo(() => { +export const ToolEraserWidth = memo(() => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const width = useAppSelector((s) => s.canvasV2.tool.eraser.width); @@ -53,4 +53,4 @@ export const EraserWidth = memo(() => { ); }); -EraserWidth.displayName = 'EraserWidth'; +ToolEraserWidth.displayName = 'ToolEraserWidth'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ToolEyeDropperButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEyeDropperButton.tsx similarity index 90% rename from invokeai/frontend/web/src/features/controlLayers/components/ToolEyeDropperButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEyeDropperButton.tsx index 7bf746ca60..df6ede28cb 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ToolEyeDropperButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEyeDropperButton.tsx @@ -20,8 +20,8 @@ export const ToolEyeDropperButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/FillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx similarity index 92% rename from invokeai/frontend/web/src/features/controlLayers/components/FillColorPicker.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx index 3d71523c62..477e23bc59 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/FillColorPicker.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx @@ -7,7 +7,7 @@ import type { RgbaColor } from 'features/controlLayers/store/types'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -export const FillColorPicker = memo(() => { +export const ToolFillColorPicker = memo(() => { const { t } = useTranslation(); const fill = useAppSelector((s) => s.canvasV2.tool.fill); const dispatch = useAppDispatch(); @@ -41,4 +41,4 @@ export const FillColorPicker = memo(() => { ); }); -FillColorPicker.displayName = 'BrushColorPicker'; +ToolFillColorPicker.displayName = 'ToolFillColorPicker'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/MoveToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx similarity index 84% rename from invokeai/frontend/web/src/features/controlLayers/components/MoveToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx index 5d97542369..4fb1984a03 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/MoveToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx @@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiCursorBold } from 'react-icons/pi'; -export const MoveToolButton = memo(() => { +export const ToolMoveButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'move'); @@ -22,8 +22,8 @@ export const MoveToolButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -33,4 +33,4 @@ export const MoveToolButton = memo(() => { ); }); -MoveToolButton.displayName = 'MoveToolButton'; +ToolMoveButton.displayName = 'ToolMoveButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RectToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/components/RectToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx index 3c8acd4ae8..530343b271 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RectToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx @@ -7,7 +7,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiRectangleBold } from 'react-icons/pi'; -export const RectToolButton = memo(() => { +export const ToolRectButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'rect'); @@ -26,8 +26,8 @@ export const RectToolButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -37,4 +37,4 @@ export const RectToolButton = memo(() => { ); }); -RectToolButton.displayName = 'RectToolButton'; +ToolRectButton.displayName = 'ToolRectButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/TransformToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolTransformButton.tsx similarity index 88% rename from invokeai/frontend/web/src/features/controlLayers/components/TransformToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolTransformButton.tsx index e26635f1ad..354da79c55 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/TransformToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolTransformButton.tsx @@ -8,7 +8,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiResizeBold } from 'react-icons/pi'; -export const TransformToolButton = memo(() => { +export const ToolTransformButton = memo(() => { const { t } = useTranslation(); const canvasManager = useStore($canvasManager); const transformingEntity = useStore($transformingEntity); @@ -50,8 +50,8 @@ export const TransformToolButton = memo(() => { return ( } variant="solid" onClick={onTransform} @@ -60,4 +60,4 @@ export const TransformToolButton = memo(() => { ); }); -TransformToolButton.displayName = 'TransformToolButton'; +ToolTransformButton.displayName = 'ToolTransformButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ViewToolButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx similarity index 83% rename from invokeai/frontend/web/src/features/controlLayers/components/ViewToolButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx index 184e38d7ad..22156a3401 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ViewToolButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx @@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { PiHandBold } from 'react-icons/pi'; -export const ViewToolButton = memo(() => { +export const ToolViewButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isSelected = useAppSelector((s) => s.canvasV2.tool.selected === 'view'); @@ -19,8 +19,8 @@ export const ViewToolButton = memo(() => { return ( } colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="outline" @@ -30,4 +30,4 @@ export const ViewToolButton = memo(() => { ); }); -ViewToolButton.displayName = 'ViewToolButton'; +ToolViewButton.displayName = 'ToolViewButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx deleted file mode 100644 index 0a0c2f98df..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ButtonGroup } from '@invoke-ai/ui-library'; -import { useAppSelector } from 'app/store/storeHooks'; -import { BboxToolButton } from 'features/controlLayers/components/BboxToolButton'; -import { BrushToolButton } from 'features/controlLayers/components/BrushToolButton'; -import { EraserToolButton } from 'features/controlLayers/components/EraserToolButton'; -import { MoveToolButton } from 'features/controlLayers/components/MoveToolButton'; -import { RectToolButton } from 'features/controlLayers/components/RectToolButton'; -import { ToolEyeDropperButton } from 'features/controlLayers/components/ToolEyeDropperButton'; -import { TransformToolButton } from 'features/controlLayers/components/TransformToolButton'; -import { ViewToolButton } from 'features/controlLayers/components/ViewToolButton'; -import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey'; -import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey'; - -export const ToolChooser: React.FC = () => { - useCanvasResetLayerHotkey(); - useCanvasDeleteLayerHotkey(); - const isTransforming = useAppSelector((s) => s.canvasV2.tool.isTransforming); - - return ( - <> - - - - - - - - - - - - ); -}; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts index f112fec3a7..37020570f8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts @@ -8,6 +8,7 @@ import { BRUSH_ERASER_BORDER_WIDTH, } from 'features/controlLayers/konva/constants'; import { alignCoordForTool, getPrefixedId } from 'features/controlLayers/konva/util'; +import type { Tool } from 'features/controlLayers/store/types'; import { isDrawableEntity } from 'features/controlLayers/store/types'; import Konva from 'konva'; import type { Logger } from 'roarr'; @@ -175,7 +176,7 @@ export class CanvasTool { }); }; - setToolVisibility = (tool: 'brush' | 'eraser' | 'eyeDropper' | 'none') => { + setToolVisibility = (tool: Tool) => { this.konva.brush.group.visible(tool === 'brush'); this.konva.eraser.group.visible(tool === 'eraser'); this.konva.eyeDropper.group.visible(tool === 'eyeDropper'); @@ -252,9 +253,6 @@ export class CanvasTool { y: cursorPos.y, radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale, }); - - this.scaleTool(); - this.setToolVisibility('brush'); } else if (cursorPos && tool === 'eraser') { const alignedCursorPos = alignCoordForTool(cursorPos, toolState.eraser.width); @@ -277,9 +275,6 @@ export class CanvasTool { y: cursorPos.y, radius: radius + BRUSH_ERASER_BORDER_WIDTH / scale, }); - - this.scaleTool(); - this.setToolVisibility('eraser'); } else if (cursorPos && colorUnderCursor) { this.konva.eyeDropper.fillCircle.setAttrs({ x: cursorPos.x, @@ -290,10 +285,10 @@ export class CanvasTool { x: cursorPos.x, y: cursorPos.y, }); - this.setToolVisibility('eyeDropper'); - } else { - this.setToolVisibility('none'); } + + this.scaleTool(); + this.setToolVisibility(tool); } }