From eb7b559529aefd24f711309eb5c01701beaa09aa Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 1 Nov 2024 08:28:08 +1000 Subject: [PATCH 1/5] fix(ui): sync canvas layer visibility when staging state changes --- .../konva/CanvasEntity/CanvasEntityAdapterBase.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts index 4f638ce332..b791fb78c5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts @@ -285,6 +285,10 @@ export abstract class CanvasEntityAdapterBase< this.subscriptions.add( this.manager.stateApi.createStoreSubscription(selectIsolatedLayerPreview, this.syncVisibility) ); + this.subscriptions.add( + this.manager.stateApi.createStoreSubscription(selectIsolatedStagingPreview, this.syncVisibility) + ); + this.subscriptions.add(this.manager.stateApi.createStoreSubscription(selectIsStaging, this.syncVisibility)); this.subscriptions.add(this.manager.stateApi.$filteringAdapter.listen(this.syncVisibility)); this.subscriptions.add(this.manager.stateApi.$transformingAdapter.listen(this.syncVisibility)); this.subscriptions.add(this.manager.stateApi.$segmentingAdapter.listen(this.syncVisibility)); From 83538c4b2b783f18591d45edab7e821231c7da5e Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 1 Nov 2024 08:36:13 +1000 Subject: [PATCH 2/5] fix(ui): flash of canvas state between last progress image and generation result --- .../features/controlLayers/konva/CanvasProgressImageModule.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts index f7cfa96091..a215235a53 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasProgressImageModule.ts @@ -59,7 +59,9 @@ export class CanvasProgressImageModule extends CanvasModuleBase { this.hasActiveGeneration = true; } else { this.hasActiveGeneration = false; - this.$lastProgressEvent.set(null); + if (!this.manager.stagingArea.$isStaging.get()) { + this.$lastProgressEvent.set(null); + } } }) ); From 49047007510a71143eed3e0d1f517c9bfde025a5 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 1 Nov 2024 09:19:32 +1000 Subject: [PATCH 3/5] feat(ui): more info in state module repr --- .../controlLayers/konva/CanvasStateApiModule.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts index 9c4a477108..8635e0ce0d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts @@ -680,4 +680,20 @@ export class CanvasStateApiModule extends CanvasModuleBase { * Whether the shift key is currently pressed. */ $shiftKey = $shift; + + repr = () => { + return { + id: this.id, + type: this.type, + path: this.path, + $filteringAdapter: this.$filteringAdapter.get()?.entityIdentifier, + $isFiltering: this.$isFiltering.get(), + $transformingAdapter: this.$transformingAdapter.get()?.entityIdentifier, + $isTransforming: this.$isTransforming.get(), + $rasterizingAdapter: this.$rasterizingAdapter.get()?.entityIdentifier, + $isRasterizing: this.$isRasterizing.get(), + $segmentingAdapter: this.$segmentingAdapter.get()?.entityIdentifier, + $isSegmenting: this.$isSegmenting.get(), + }; + }; } From 40f7b0d171a799105ec50906a59ce164d428ba5c Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 1 Nov 2024 09:19:46 +1000 Subject: [PATCH 4/5] fix(ui): cursor disappearing on empty layers --- .../konva/CanvasEntity/CanvasEntityTransformer.ts | 8 ++++++++ .../konva/CanvasTool/CanvasMoveToolModule.ts | 14 +++++++++----- .../konva/CanvasTool/CanvasToolModule.ts | 2 +- 3 files changed, 18 insertions(+), 6 deletions(-) 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 bc98cc8830..66f4da193f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts @@ -296,6 +296,14 @@ export class CanvasEntityTransformer extends CanvasModuleBase { this.syncInteractionState(); }; + syncCursorStyle = () => { + if (!this.parent.renderer.hasObjects()) { + this.manager.stage.setCursor('not-allowed'); + } else { + this.manager.stage.setCursor('default'); + } + }; + anchorStyleFunc = (anchor: Konva.Rect): void => { // Give the rotater special styling if (anchor.hasName('rotater')) { diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts index 7ec69e8d28..75ccddb552 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts @@ -2,7 +2,6 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule'; import { getPrefixedId } from 'features/controlLayers/konva/util'; -import { noop } from 'lodash-es'; import type { Logger } from 'roarr'; export class CanvasMoveToolModule extends CanvasModuleBase { @@ -24,8 +23,13 @@ export class CanvasMoveToolModule extends CanvasModuleBase { this.log.debug('Creating module'); } - /** - * This is a noop. Entity transformers handle cursor style when the move tool is active. - */ - syncCursorStyle = noop; + syncCursorStyle = () => { + const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter(); + if (!selectedEntity) { + this.manager.stage.setCursor('not-allowed'); + } else { + // The cursor is on an entity, defer to transformer to handle the cursor + selectedEntity.transformer.syncCursorStyle(); + } + }; } diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts index 3eb9e3fe3e..f65f04ca1c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts @@ -170,7 +170,7 @@ export class CanvasToolModule extends CanvasModuleBase { } else if (segmentingAdapter) { segmentingAdapter.segmentAnything.syncCursorStyle(); } else if (transformingAdapter) { - // The transformer handles cursor style via events + transformingAdapter.transformer.syncCursorStyle(); } else if (this.manager.stateApi.$isFiltering.get()) { stage.setCursor('not-allowed'); } else if (this.manager.stagingArea.$isStaging.get()) { From 26f95d6a97f778bd28343b6468a6321bf1960ead Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 1 Nov 2024 09:24:15 +1000 Subject: [PATCH 5/5] fix(ui): disable move tool when staging --- .../konva/CanvasEntity/CanvasEntityTransformer.ts | 7 +++++++ 1 file changed, 7 insertions(+) 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 66f4da193f..7929ba97d9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts @@ -599,6 +599,13 @@ export class CanvasEntityTransformer extends CanvasModuleBase { syncInteractionState = () => { this.log.trace('Syncing interaction state'); + if (this.manager.stagingArea.$isStaging.get()) { + // While staging, the layer should not be interactable + this.parent.konva.layer.listening(false); + this._setInteractionMode('off'); + return; + } + if (this.parent.segmentAnything?.$isSegmenting.get()) { // When segmenting, the layer should listen but the transformer should not be interactable this.parent.konva.layer.listening(true);