Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): staging area rendering

Browse Source
This commit is contained in:
psychedelicious 2024-07-03 18:51:16 +10:00
parent a8f962eb3f
commit a27cbc13b6
1 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
invokeai/frontend/web/src/features/controlLayers/konva/renderers/stagingArea.ts
View File

@ -1,17 +1,20 @@
import { KonvaImage, KonvaProgressImage } from 'features/controlLayers/konva/renderers/objects'; import { KonvaImage, KonvaProgressImage } from 'features/controlLayers/konva/renderers/objects';
import type { CanvasV2State } from 'features/controlLayers/store/types'; import type { CanvasV2State } from 'features/controlLayers/store/types';
import Konva from 'konva'; import Konva from 'konva';
import type { ImageDTO } from 'services/api/types';
import type { InvocationDenoiseProgressEvent } from 'services/events/types'; import type { InvocationDenoiseProgressEvent } from 'services/events/types';
export class CanvasStagingArea { export class CanvasStagingArea {
group: Konva.Group; group: Konva.Group;
image: KonvaImage | null; image: KonvaImage | null;
progressImage: KonvaProgressImage | null; progressImage: KonvaProgressImage | null;
imageDTO: ImageDTO | null;
constructor() { constructor() {
this.group = new Konva.Group({ listening: false }); this.group = new Konva.Group({ listening: false });
this.image = null; this.image = null;
this.progressImage = null; this.progressImage = null;
this.imageDTO = null;
} }
async render( async render(
@ -21,21 +24,21 @@ export class CanvasStagingArea {
lastProgressEvent: InvocationDenoiseProgressEvent | null, lastProgressEvent: InvocationDenoiseProgressEvent | null,
resetLastProgressEvent: () => void resetLastProgressEvent: () => void
) { ) {
const imageDTO = stagingArea.images[stagingArea.selectedImageIndex]; this.imageDTO = stagingArea.images[stagingArea.selectedImageIndex] ?? null;
if (imageDTO) { if (this.imageDTO) {
if (this.image) { if (this.image) {
if (!this.image.isLoading && !this.image.isError && this.image.imageName !== imageDTO.image_name) { if (!this.image.isLoading && !this.image.isError && this.image.imageName !== this.imageDTO.image_name) {
await this.image.updateImageSource(imageDTO.image_name); await this.image.updateImageSource(this.imageDTO.image_name);
} }
this.image.konvaImageGroup.x(bbox.x); this.image.konvaImageGroup.x(bbox.x);
this.image.konvaImageGroup.y(bbox.y); this.image.konvaImageGroup.y(bbox.y);
this.image.konvaImageGroup.visible(shouldShowStagedImage); this.image.konvaImageGroup.visible(shouldShowStagedImage);
this.progressImage?.konvaImageGroup.visible(false); this.progressImage?.konvaImageGroup.visible(false);
} else { } else {
const { image_name, width, height } = imageDTO; const { image_name, width, height } = this.imageDTO;
this.image = new KonvaImage({ this.image = new KonvaImage(
imageObject: { {
id: 'staging-area-image', id: 'staging-area-image',
type: 'image', type: 'image',
x: bbox.x, x: bbox.x,
@ -49,12 +52,18 @@ export class CanvasStagingArea {
height, height,
}, },
}, },
onLoad: () => { {
resetLastProgressEvent(); onLoad: (konvaImage) => {
}, if (this.imageDTO) {
}); konvaImage.width(this.imageDTO.width);
konvaImage.height(this.imageDTO.height);
}
resetLastProgressEvent();
},
}
);
this.group.add(this.image.konvaImageGroup); this.group.add(this.image.konvaImageGroup);
await this.image.updateImageSource(imageDTO.image_name); await this.image.updateImageSource(this.imageDTO.image_name);
this.image.konvaImageGroup.visible(shouldShowStagedImage); this.image.konvaImageGroup.visible(shouldShowStagedImage);
this.progressImage?.konvaImageGroup.visible(false); this.progressImage?.konvaImageGroup.visible(false);
} }
@ -84,7 +93,7 @@ export class CanvasStagingArea {
} }
} }
if (!imageDTO && !lastProgressEvent) { if (!this.imageDTO && !lastProgressEvent) {
if (this.image) { if (this.image) {
this.image.konvaImageGroup.visible(false); this.image.konvaImageGroup.visible(false);
} }