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): improve image deletion handling

Browse Source
This commit is contained in:
psychedelicious 2023-06-21 15:10:51 +10:00
parent be3bdae847
commit ac477cf5d6
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
View File

@ -6,7 +6,6 @@ import { clamp } from 'lodash-es';
import { imageSelected } from 'features/gallery/store/gallerySlice'; import { imageSelected } from 'features/gallery/store/gallerySlice';
import { import {
imageRemoved, imageRemoved,
selectImagesEntities,
selectImagesIds, selectImagesIds,
} from 'features/gallery/store/imagesSlice'; } from 'features/gallery/store/imagesSlice';
import { resetCanvas } from 'features/canvas/store/canvasSlice'; import { resetCanvas } from 'features/canvas/store/canvasSlice';
@ -33,7 +32,6 @@ export const addRequestedImageDeletionListener = () => {
if (selectedImage && selectedImage === image_name) { if (selectedImage && selectedImage === image_name) {
const ids = selectImagesIds(state); const ids = selectImagesIds(state);
const entities = selectImagesEntities(state);
const deletedImageIndex = ids.findIndex( const deletedImageIndex = ids.findIndex(
(result) => result.toString() === image_name (result) => result.toString() === image_name
@ -49,10 +47,8 @@ export const addRequestedImageDeletionListener = () => {
const newSelectedImageId = filteredIds[newSelectedImageIndex]; const newSelectedImageId = filteredIds[newSelectedImageIndex];
const newSelectedImage = entities[newSelectedImageId];
if (newSelectedImageId) { if (newSelectedImageId) {
dispatch(imageSelected(newSelectedImageId)); dispatch(imageSelected(newSelectedImageId as string));
} else { } else {
dispatch(imageSelected()); dispatch(imageSelected());
} }
@ -84,7 +80,9 @@ export const addRequestedImageDeletionListener = () => {
// Wait for successful deletion, then trigger boards to re-fetch // Wait for successful deletion, then trigger boards to re-fetch
const wasImageDeleted = await condition( const wasImageDeleted = await condition(
(action) => action.meta.requestId === requestId, (action): action is ReturnType<typeof imageDeleted.fulfilled> =>
imageDeleted.fulfilled.match(action) &&
action.meta.requestId === requestId,
30000 30000
); );

26
invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
View File

@ -27,9 +27,12 @@ import { defaultSelectorOptions } from '../../../../app/store/util/defaultMemoiz
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { RootState } from '../../../../app/store/store'; import { RootState } from '../../../../app/store/store';
import { import {
useAddImageToBoardMutation,
useDeleteBoardMutation, useDeleteBoardMutation,
useGetImageDTOQuery,
useUpdateBoardMutation, useUpdateBoardMutation,
} from 'services/apiSlice'; } from 'services/apiSlice';
import { skipToken } from '@reduxjs/toolkit/dist/query';
const coverImageSelector = (imageName: string | undefined) => const coverImageSelector = (imageName: string | undefined) =>
createSelector( createSelector(
@ -53,8 +56,9 @@ interface HoverableBoardProps {
const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => { const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { coverImage } = useAppSelector(
coverImageSelector(board?.cover_image_name) const { data: coverImage } = useGetImageDTOQuery(
board.cover_image_name ?? skipToken
); );
const { board_name, board_id } = board; const { board_name, board_id } = board;
@ -69,6 +73,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
const [deleteBoard, { isLoading: isDeleteBoardLoading }] = const [deleteBoard, { isLoading: isDeleteBoardLoading }] =
useDeleteBoardMutation(); useDeleteBoardMutation();
const [addImageToBoard, { isLoading: isAddImageToBoardLoading }] =
useAddImageToBoardMutation();
const handleUpdateBoardName = (newBoardName: string) => { const handleUpdateBoardName = (newBoardName: string) => {
updateBoard({ board_id, changes: { board_name: newBoardName } }); updateBoard({ board_id, changes: { board_name: newBoardName } });
}; };
@ -82,16 +89,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
if (droppedImage.board_id === board_id) { if (droppedImage.board_id === board_id) {
return; return;
} }
dispatch( addImageToBoard({ board_id, image_name: droppedImage.image_name });
imageAddedToBoard({
requestBody: {
board_id,
image_name: droppedImage.image_name,
}, },
}) [addImageToBoard, board_id]
);
},
[board_id, dispatch]
); );
return ( return (
@ -141,7 +141,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
}} }}
> >
<IAIDndImage <IAIDndImage
image={coverImage} image={
board.cover_image_name && coverImage ? coverImage : undefined
}
onDrop={handleDrop} onDrop={handleDrop}
fallback={<IAIImageFallback sx={{ bg: 'none' }} />} fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
isUploadDisabled={true} isUploadDisabled={true}