From b35f93d919f95322723556b83fd1c8aca63b8b07 Mon Sep 17 00:00:00 2001 From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com> Date: Wed, 2 Jul 2025 11:06:33 -0400 Subject: [PATCH] Change implementation to check $ispending --- .../SimpleSession/StagingAreaItemsList.tsx | 4 ++-- .../components/SimpleSession/context.tsx | 10 ++++++++ .../konva/CanvasStagingAreaModule.ts | 23 ++++++++++++++++--- .../src/services/events/setEventListeners.tsx | 10 -------- 4 files changed, 32 insertions(+), 15 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx index 519898d2cd..ea0ef60651 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx @@ -17,8 +17,8 @@ export const StagingAreaItemsList = memo(() => { return; } - return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData); - }, [canvasManager, ctx.$progressData, ctx.$selectedItemId]); + return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData, ctx.$isPending); + }, [canvasManager, ctx.$progressData, ctx.$selectedItemId, ctx.$isPending]); return ( 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 b5dd130680..0a832e91f5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx @@ -92,6 +92,7 @@ type CanvasSessionContextValue = { $items: Atom; $itemCount: Atom; $hasItems: Atom; + $isPending: Atom; $progressData: ProgressDataMap; $selectedItemId: WritableAtom; $selectedItem: Atom; @@ -170,6 +171,13 @@ export const CanvasSessionContextProvider = memo( */ const $hasItems = useState(() => computed([$items], (items) => items.length > 0))[0]; + /** + * Whether there are any pending or in-progress items. Computed from the queue items array. + */ + const $isPending = useState(() => + computed([$items], (items) => items.some((item) => item.status === 'pending' || item.status === 'in_progress')) + )[0]; + /** * The currently selected queue item, or null if one is not selected. */ @@ -506,6 +514,7 @@ export const CanvasSessionContextProvider = memo( session, $items, $hasItems, + $isPending, $progressData, $selectedItemId, $autoSwitch, @@ -523,6 +532,7 @@ export const CanvasSessionContextProvider = memo( $autoSwitch, $items, $hasItems, + $isPending, $progressData, $selectedItem, $selectedItemId, diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts index eb5a096ac3..a305d259c9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts @@ -59,6 +59,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { $shouldShowStagedImage = atom(true); $isStaging = atom(false); + $isPending = atom(false); constructor(manager: CanvasManager) { super(); @@ -152,7 +153,11 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { this.$isStaging.set(this.manager.stateApi.runSelector(selectIsStaging)); }; - connectToSession = ($selectedItemId: Atom, $progressData: ProgressDataMap) => { + connectToSession = ( + $selectedItemId: Atom, + $progressData: ProgressDataMap, + $isPending: Atom + ) => { const cb = (selectedItemId: number | null, progressData: Record) => { if (!selectedItemId) { this.$imageSrc.set(null); @@ -176,7 +181,17 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { cb($selectedItemId.get(), $progressData.get()); this.render(); - return effect([$selectedItemId, $progressData], cb); + // Sync the $isPending flag with the computed + const unsubIsPending = effect([$isPending], (isPending) => { + this.$isPending.set(isPending); + }); + + const unsubImageSrc = effect([$selectedItemId, $progressData], cb); + + return () => { + unsubIsPending(); + unsubImageSrc(); + }; }; private _getImageFromSrc = ( @@ -206,6 +221,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { const { x, y, width, height } = this.manager.stateApi.getBbox().rect; const shouldShowStagedImage = this.$shouldShowStagedImage.get(); + const isPending = this.$isPending.get(); this.konva.group.position({ x, y }); @@ -226,7 +242,8 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { } else { this.image?.destroy(); this.image = null; - this.konva.placeholder.group.visible(true); + // Only show placeholder if there are pending items, otherwise show nothing + this.konva.placeholder.group.visible(isPending); } this.konva.group.visible(shouldShowStagedImage && this.$isStaging.get()); diff --git a/invokeai/frontend/web/src/services/events/setEventListeners.tsx b/invokeai/frontend/web/src/services/events/setEventListeners.tsx index 2cbdbb0795..96a24b6b47 100644 --- a/invokeai/frontend/web/src/services/events/setEventListeners.tsx +++ b/invokeai/frontend/web/src/services/events/setEventListeners.tsx @@ -9,7 +9,6 @@ import { $queueId } from 'app/store/nanostores/queueId'; import type { AppStore } from 'app/store/store'; import { deepClone } from 'common/util/deepClone'; import { forEach, isNil, round } from 'es-toolkit/compat'; -import { canvasSessionReset, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice'; import { $isInPublishFlow, $outputNodeId, @@ -348,15 +347,6 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis log.debug({ data }, `Queue item ${item_id} status updated: ${status}`); - // If this queue item was canceled and it belongs to the current canvas session, reset the canvas session - if (status === 'canceled' && destination) { - const currentCanvasSessionId = selectCanvasSessionId(getState()); - if (currentCanvasSessionId === destination) { - dispatch(canvasSessionReset()); - log.debug(`Canvas session reset due to canceled queue item ${item_id}`); - } - } - // Invalidate caches for things we cannot easily update const tagsToInvalidate: ApiTagDescription[] = [ 'SessionQueueStatus',