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 {
imageRemoved,
selectImagesEntities,
selectImagesIds,
} from 'features/gallery/store/imagesSlice';
import { resetCanvas } from 'features/canvas/store/canvasSlice';
@ -33,7 +32,6 @@ export const addRequestedImageDeletionListener = () => {
if (selectedImage && selectedImage === image_name) {
const ids = selectImagesIds(state);
const entities = selectImagesEntities(state);
const deletedImageIndex = ids.findIndex(
(result) => result.toString() === image_name
@ -49,10 +47,8 @@ export const addRequestedImageDeletionListener = () => {
const newSelectedImageId = filteredIds[newSelectedImageIndex];
const newSelectedImage = entities[newSelectedImageId];
if (newSelectedImageId) {
dispatch(imageSelected(newSelectedImageId));
dispatch(imageSelected(newSelectedImageId as string));
} else {
dispatch(imageSelected());
}
@ -84,7 +80,9 @@ export const addRequestedImageDeletionListener = () => {
// Wait for successful deletion, then trigger boards to re-fetch
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
);

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