From e3afb3d309c440c2aa037a3bd161578e6c36f181 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 9 May 2024 06:42:01 +1000 Subject: [PATCH 1/3] fix(ui): canvas toolbar centering --- .../canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 9b45bb3860a..686577b4a79 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -219,7 +219,7 @@ const IAICanvasToolbar = () => { const value = useMemo(() => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], [layer]); return ( - + From 680a728daf141c55e535860aea007894d1b46de5 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 9 May 2024 06:50:39 +1000 Subject: [PATCH 2/3] feat(ui): add invert brush scroll checkbox to control layers settings --- .../ControlLayersSettingsPopover.tsx | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx index 89032b7c76a..1f3307bdf1f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx @@ -1,12 +1,30 @@ -import { Flex, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@invoke-ai/ui-library'; +import { + Checkbox, + Flex, + FormControl, + FormLabel, + IconButton, + Popover, + PopoverBody, + PopoverContent, + PopoverTrigger, +} from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { setShouldInvertBrushSizeScrollDirection } from 'features/canvas/store/canvasSlice'; import { GlobalMaskLayerOpacity } from 'features/controlLayers/components/GlobalMaskLayerOpacity'; -import { memo } from 'react'; +import type { ChangeEvent } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { RiSettings4Fill } from 'react-icons/ri'; const ControlLayersSettingsPopover = () => { const { t } = useTranslation(); - + const dispatch = useAppDispatch(); + const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection); + const handleChangeShouldInvertBrushSizeScrollDirection = useCallback( + (e: ChangeEvent) => dispatch(setShouldInvertBrushSizeScrollDirection(e.target.checked)), + [dispatch] + ); return ( @@ -16,6 +34,13 @@ const ControlLayersSettingsPopover = () => { + + {t('unifiedCanvas.invertBrushSizeScrollDirection')} + + From fd9ec4afab092b891dfbbf73fb52e473ddd8e748 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 9 May 2024 06:57:13 +1000 Subject: [PATCH 3/3] feat(ui): add `data-testid`s to control layers components: - Add Layer Menu Button: `control-layers-add-layer-menu-button` - Delete All Layers Button: `control-layers-delete-all-layers-button` - CL Layer List: `control-layers-layer-list` - CL Canvas: `control-layers-canvas` - Toggle Metadata Button: `toggle-show-metadata-button` - Toggle Progress Button: `toggle-show-progress-button` - Toggle Viewer Menu Button: `toggle-viewer-menu-button` - Settings Tab Button: `generation-tab-settings-tab-button` - Control Layers Tab Button: `generation-tab-control-layers-tab-button` --- .../features/controlLayers/components/AddLayerButton.tsx | 7 ++++++- .../components/ControlLayersPanelContent.tsx | 2 +- .../controlLayers/components/DeleteAllLayersButton.tsx | 1 + .../features/controlLayers/components/StageComponent.tsx | 9 ++++++++- .../ImageViewer/ToggleMetadataViewerButton.tsx | 1 + .../components/ImageViewer/ToggleProgressButton.tsx | 1 + .../gallery/components/ImageViewer/ViewerToggleMenu.tsx | 2 +- .../ui/components/ParametersPanelTextToImage.tsx | 8 ++++++-- 8 files changed, 25 insertions(+), 6 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx index 3102e4afa84..c7a49da8c7e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx @@ -18,7 +18,12 @@ export const AddLayerButton = memo(() => { return ( - } variant="ghost"> + } + variant="ghost" + data-testid="control-layers-add-layer-menu-button" + > {t('controlLayers.addLayer')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx index 1dd79d0220d..d3ddc071395 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx @@ -32,7 +32,7 @@ export const ControlLayersPanelContent = memo(() => { {layerIdTypePairs.length > 0 && ( - + {layerIdTypePairs.map(({ id, type }) => ( ))} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx index dad102b4708..00487fcc43e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx @@ -20,6 +20,7 @@ export const DeleteAllLayersButton = memo(() => { variant="ghost" colorScheme="error" isDisabled={isDisabled} + data-testid="control-layers-delete-all-layers-button" > {t('controlLayers.deleteAll')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx index d0d693a5f2e..16bf4aa1216 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx @@ -233,7 +233,14 @@ export const StageComponent = memo(({ asPreview = false }: Props) => { return ( - + ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx index a298ebda56f..4bf55116dbc 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx @@ -35,6 +35,7 @@ export const ToggleMetadataViewerButton = memo(() => { isDisabled={!imageDTO} variant="outline" colorScheme={shouldShowImageDetails ? 'invokeBlue' : 'base'} + data-testid="toggle-show-metadata-button" /> ); }); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx index 994a8bf10e5..ee698130fbc 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx @@ -22,6 +22,7 @@ export const ToggleProgressButton = memo(() => { onClick={onClick} variant="outline" colorScheme={shouldShowProgressInViewer ? 'invokeBlue' : 'base'} + data-testid="toggle-show-progress-button" /> ); }); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx index dd4268b2084..3552c28a5bc 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx @@ -21,7 +21,7 @@ export const ViewerToggleMenu = () => { return ( -