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

fix(ui): fix duplicate image selection

Browse Source 
Selections were not being `uniqBy()`'d, or were `uniqBy()`'d without a proper iteratee. This results in duplicate images in selections in certain situations.

Add correct `uniqBy()` to the reducer to prevent this in the future.
This commit is contained in:
psychedelicious 2023-10-04 21:27:41 +11:00
parent 2acc93eb8e
commit 3e8d62b1d1
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
View File

@ -3,13 +3,12 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import { uniq } from 'lodash-es';
import { MouseEvent, useCallback, useMemo } from 'react'; import { MouseEvent, useCallback, useMemo } from 'react';
import { useListImagesQuery } from 'services/api/endpoints/images'; import { useListImagesQuery } from 'services/api/endpoints/images';
import { ImageDTO } from 'services/api/types'; import { ImageDTO } from 'services/api/types';
import { selectionChanged } from '../store/gallerySlice';
import { imagesSelectors } from 'services/api/util'; import { imagesSelectors } from 'services/api/util';
import { useFeatureStatus } from '../../system/hooks/useFeatureStatus'; import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
import { selectionChanged } from '../store/gallerySlice';
const selector = createSelector( const selector = createSelector(
[stateSelector, selectListImagesBaseQueryArgs], [stateSelector, selectListImagesBaseQueryArgs],
@ -60,7 +59,7 @@ export const useMultiselect = (imageDTO?: ImageDTO) => {
const start = Math.min(lastClickedIndex, currentClickedIndex); const start = Math.min(lastClickedIndex, currentClickedIndex);
const end = Math.max(lastClickedIndex, currentClickedIndex); const end = Math.max(lastClickedIndex, currentClickedIndex);
const imagesToSelect = imageDTOs.slice(start, end + 1); const imagesToSelect = imageDTOs.slice(start, end + 1);
dispatch(selectionChanged(uniq(selection.concat(imagesToSelect)))); dispatch(selectionChanged(selection.concat(imagesToSelect)));
} }
} else if (e.ctrlKey || e.metaKey) { } else if (e.ctrlKey || e.metaKey) {
if ( if (
@ -73,7 +72,7 @@ export const useMultiselect = (imageDTO?: ImageDTO) => {
) )
); );
} else { } else {
dispatch(selectionChanged(uniq(selection.concat(imageDTO)))); dispatch(selectionChanged(selection.concat(imageDTO)));
} }
} else { } else {
dispatch(selectionChanged([imageDTO])); dispatch(selectionChanged([imageDTO]));

3
invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
View File

@ -4,6 +4,7 @@ import { boardsApi } from 'services/api/endpoints/boards';
import { imagesApi } from 'services/api/endpoints/images'; import { imagesApi } from 'services/api/endpoints/images';
import { ImageDTO } from 'services/api/types'; import { ImageDTO } from 'services/api/types';
import { BoardId, GalleryState, GalleryView } from './types'; import { BoardId, GalleryState, GalleryView } from './types';
import { uniqBy } from 'lodash-es';
export const initialGalleryState: GalleryState = { export const initialGalleryState: GalleryState = {
selection: [], selection: [],
@ -24,7 +25,7 @@ export const gallerySlice = createSlice({
state.selection = action.payload ? [action.payload] : []; state.selection = action.payload ? [action.payload] : [];
}, },
selectionChanged: (state, action: PayloadAction<ImageDTO[]>) => { selectionChanged: (state, action: PayloadAction<ImageDTO[]>) => {
state.selection = action.payload; state.selection = uniqBy(action.payload, (i) => i.image_name);
}, },
shouldAutoSwitchChanged: (state, action: PayloadAction<boolean>) => { shouldAutoSwitchChanged: (state, action: PayloadAction<boolean>) => {
state.shouldAutoSwitch = action.payload; state.shouldAutoSwitch = action.payload;