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 56aa3c7b870..4f638ce3320 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts @@ -529,6 +529,22 @@ export abstract class CanvasEntityAdapterBase< } this.log.trace(isVisible ? 'Showing' : 'Hiding'); this.konva.layer.visible(isVisible); + if (isVisible) { + /** + * When a layer is created and initially not visible, its compositing rect won't be set up properly. Then, when + * we show it in this method, it the layer will not render as it should. + * + * For example, if an inpaint mask is created via select-object while the isolated layer preview feature is + * enabled, it will be hidden on its first render, and the compositing rect will not be sized/positioned/filled. + * When next show the layer, the its underlying objects will be rendered directly, without the compositing rect + * providing the correct fill. + * + * The simplest way to ensure this doesn't happen is to always update the compositing rect when showing the layer. + */ + this.renderer.updateCompositingRectSize(); + this.renderer.updateCompositingRectPosition(); + this.renderer.updateCompositingRectFill(); + } this.renderer.syncKonvaCache(); }; diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts index b2ec20f25dc..d8c6ef56200 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts @@ -386,10 +386,6 @@ export class CanvasEntityFilterer extends CanvasModuleBase { default: assert>(false); } - - // Final cleanup and teardown, returning user to main canvas UI - this.resetEphemeralState(); - this.teardown(); }; resetEphemeralState = () => { diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts index 222dcba555e..10ae1831b38 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts @@ -223,10 +223,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase { return; } - this.log.trace('Updating compositing rect fill'); + if ( + !this.konva.compositing || + (this.parent.state.type !== 'inpaint_mask' && this.parent.state.type !== 'regional_guidance') + ) { + return; + } - assert(this.konva.compositing, 'Missing compositing rect'); - assert(this.parent.state.type === 'inpaint_mask' || this.parent.state.type === 'regional_guidance'); + this.log.trace('Updating compositing rect fill'); const fill = this.parent.state.fill; @@ -252,9 +256,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase { return; } - this.log.trace('Updating compositing rect size'); + if ( + !this.konva.compositing || + (this.parent.state.type !== 'inpaint_mask' && this.parent.state.type !== 'regional_guidance') + ) { + return; + } - assert(this.konva.compositing, 'Missing compositing rect'); + this.log.trace('Updating compositing rect size'); const scale = this.manager.stage.unscale(1); @@ -274,9 +283,14 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase { return; } - this.log.trace('Updating compositing rect position'); + if ( + !this.konva.compositing || + (this.parent.state.type !== 'inpaint_mask' && this.parent.state.type !== 'regional_guidance') + ) { + return; + } - assert(this.konva.compositing, 'Missing compositing rect'); + this.log.trace('Updating compositing rect position'); this.konva.compositing.rect.setAttrs({ ...this.manager.stage.getScaledStageRect(), diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts index a4088a23a6f..93618c4bb5c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasSegmentAnythingModule.ts @@ -740,10 +740,6 @@ export class CanvasSegmentAnythingModule extends CanvasModuleBase { default: assert>(false); } - - // Final cleanup and teardown, returning user to main canvas UI - this.resetEphemeralState(); - this.teardown(); }; /**