diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts index c12f58e38b..b52f9eb3e3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts @@ -229,6 +229,12 @@ export class CanvasEntityTransformer extends CanvasModuleBase { this.manager.stateApi.createStoreSubscription(selectSelectedEntityIdentifier, this.syncInteractionState) ); + /** + * When the canvas global state changes, we need to update the transformer's interaction state. This implies + * a change to staging or some other global state that affects the transformer. + */ + this.subscriptions.add(this.manager.$isBusy.listen(this.syncInteractionState)); + this.parent.konva.layer.add(this.konva.outlineRect); this.parent.konva.layer.add(this.konva.proxyRect); this.parent.konva.layer.add(this.konva.transformer); @@ -459,6 +465,13 @@ export class CanvasEntityTransformer extends CanvasModuleBase { syncInteractionState = () => { this.log.trace('Syncing interaction state'); + if (this.manager.$isBusy.get() && !this.$isTransforming.get()) { + // The canvas is busy, we can't interact with the transformer + this.parent.konva.layer.listening(false); + this._setInteractionMode('off'); + return; + } + // Not all entities have a filterer - only raster layer and control layer adapters if (this.parent.filterer?.$isFiltering.get()) { // May not interact with the entity when the filter is active