diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx index 5f9b8e804d..0dadd7be3c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx @@ -4,6 +4,7 @@ import { comparedImagesSwapped, comparisonFitChanged, comparisonModeChanged, + comparisonModeCycled, imageToCompareChanged, } from 'features/gallery/store/gallerySlice'; import { memo, useCallback } from 'react'; @@ -36,6 +37,10 @@ export const CompareToolbar = memo(() => { dispatch(imageToCompareChanged(null)); }, [dispatch]); useHotkeys('esc', exitCompare, [exitCompare]); + const nextMode = useCallback(() => { + dispatch(comparisonModeCycled()); + }, [dispatch]); + useHotkeys('m', nextMode, [nextMode]); return ( diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts index d5928c52f8..b1b673d10c 100644 --- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts +++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts @@ -46,6 +46,19 @@ export const gallerySlice = createSlice({ comparisonModeChanged: (state, action: PayloadAction) => { state.comparisonMode = action.payload; }, + comparisonModeCycled: (state) => { + switch (state.comparisonMode) { + case 'slider': + state.comparisonMode = 'side-by-side'; + break; + case 'side-by-side': + state.comparisonMode = 'hover'; + break; + case 'hover': + state.comparisonMode = 'slider'; + break; + } + }, shouldAutoSwitchChanged: (state, action: PayloadAction) => { state.shouldAutoSwitch = action.payload; }, @@ -143,6 +156,7 @@ export const { comparisonModeChanged, comparedImagesSwapped, comparisonFitChanged, + comparisonModeCycled, } = gallerySlice.actions; const isAnyBoardDeleted = isAnyOf(