From 50079ea349fc537a154b99e46d557b017cf840ab Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 9 Jul 2025 18:37:27 +1000 Subject: [PATCH] fix(ui): big red cancel button has diff behaviour than staging discard --- .../components/SimpleSession/context.tsx | 24 +++++++++++++++++++ .../StagingAreaToolbarDiscardAllButton.tsx | 16 +++---------- ...tagingAreaToolbarDiscardSelectedButton.tsx | 14 +---------- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx index b5fb2cd813..38f3388a6a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx @@ -5,6 +5,7 @@ import { selectStagingAreaAutoSwitch } from 'features/controlLayers/store/canvas import { buildSelectSessionQueueItems, canvasQueueItemDiscarded, + canvasSessionReset, } from 'features/controlLayers/store/canvasStagingAreaSlice'; import type { ProgressImage } from 'features/nodes/types/common'; import type { Atom, MapStore, StoreValue, WritableAtom } from 'nanostores'; @@ -101,6 +102,7 @@ type CanvasSessionContextValue = { selectLast: () => void; onImageLoad: (itemId: number) => void; discard: (itemId: number) => void; + discardAll: () => void; }; const CanvasSessionContext = createContext(null); @@ -229,6 +231,10 @@ export const CanvasSessionContextProvider = memo( [store] ); + const discardAll = useCallback(() => { + store.dispatch(canvasSessionReset()); + }, [store]); + const selectNext = useCallback(() => { const selectedItemId = $selectedItemId.get(); if (selectedItemId === null) { @@ -478,6 +484,22 @@ export const CanvasSessionContextProvider = memo( queueApi.endpoints.listAllQueueItems.initiate({ destination: session.id }) ); + // const unsubListener = store.dispatch( + // addAppListener({ + // matcher: queueApi.endpoints.cancelQueueItem.matchFulfilled, + // effect: ({ payload }, { getState }) => { + // const { item_id } = payload; + + // const items = selectQueueItems(getState()); + // if (items.length === 0) { + // $selectedItemId.set(null); + // } else if ($selectedItemId.get() === null) { + // $selectedItemId.set(items[0].item_id); + // } + // }, + // }) + // ); + // Clean up all subscriptions and top-level (i.e. non-computed/derived state) return () => { unsubHandleAutoSwitch(); @@ -518,6 +540,7 @@ export const CanvasSessionContextProvider = memo( selectLast, onImageLoad, discard, + discardAll, }), [ $items, @@ -536,6 +559,7 @@ export const CanvasSessionContextProvider = memo( selectLast, onImageLoad, discard, + discardAll, ] ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx index 66a30ad1a3..1a76f2cdde 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx @@ -1,7 +1,5 @@ import { IconButton } from '@invoke-ai/ui-library'; -import { useAppDispatch } from 'app/store/storeHooks'; import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context'; -import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice'; import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,21 +7,13 @@ import { PiTrashSimpleBold } from 'react-icons/pi'; export const StagingAreaToolbarDiscardAllButton = memo(({ isDisabled }: { isDisabled?: boolean }) => { const ctx = useCanvasSessionContext(); - const dispatch = useAppDispatch(); const { t } = useTranslation(); const cancelQueueItemsByDestination = useCancelQueueItemsByDestination(); const discardAll = useCallback(() => { - if (ctx.$isPending.get()) { - cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false }); - } - if (ctx.session.type === 'advanced') { - dispatch(canvasSessionReset()); - } else { - // ctx.session.type === 'simple' - dispatch(generateSessionReset()); - } - }, [cancelQueueItemsByDestination, ctx.$isPending, ctx.session.id, ctx.session.type, dispatch]); + ctx.discardAll(); + cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false }); + }, [cancelQueueItemsByDestination, ctx]); return ( { - const dispatch = useAppDispatch(); const ctx = useCanvasSessionContext(); const cancelQueueItem = useCancelQueueItem(); const selectedItemId = useStore(ctx.$selectedItemId); @@ -20,18 +17,9 @@ export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { i if (selectedItemId === null) { return; } - const itemCount = ctx.$itemCount.get(); ctx.discard(selectedItemId); await cancelQueueItem.trigger(selectedItemId, { withToast: false }); - if (itemCount <= 1) { - if (ctx.session.type === 'advanced') { - dispatch(canvasSessionReset()); - } else { - // ctx.session.type === 'simple' - dispatch(generateSessionReset()); - } - } - }, [selectedItemId, ctx, cancelQueueItem, dispatch]); + }, [selectedItemId, ctx, cancelQueueItem]); return (