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): give up on thumbnail loading, causes flash during transformer

Browse Source
This commit is contained in:
psychedelicious 2024-08-08 18:23:38 +10:00
parent b0d8948428
commit 7b6ba3f690
1 changed files with 4 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
View File

@ -31,7 +31,6 @@ export class CanvasImageRenderer {
placeholder: { group: Konva.Group; rect: Konva.Rect; text: Konva.Text }; placeholder: { group: Konva.Group; rect: Konva.Rect; text: Konva.Text };
image: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately image: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
}; };
thumbnailElement: HTMLImageElement | null = null;
imageElement: HTMLImageElement | null = null; imageElement: HTMLImageElement | null = null;
isLoading: boolean = false; isLoading: boolean = false;
isError: boolean = false; isError: boolean = false;
@ -98,13 +97,6 @@ export class CanvasImageRenderer {
this.onFailedToLoadImage(); this.onFailedToLoadImage();
return; return;
} }
// Load the thumbnail first, but let the image load in parallel
loadImage(imageDTO.thumbnail_url)
.then((thumbnailElement) => {
this.thumbnailElement = thumbnailElement;
this.updateImageElement();
})
.catch(this.onFailedToLoadImage);
this.imageElement = await loadImage(imageDTO.image_url); this.imageElement = await loadImage(imageDTO.image_url);
await this.updateImageElement(); await this.updateImageElement();
@ -126,14 +118,13 @@ export class CanvasImageRenderer {
const release = await this.mutex.acquire(); const release = await this.mutex.acquire();
try { try {
const element = this.imageElement ?? this.thumbnailElement; if (this.imageElement) {
const { width, height } = this.state.image; const { width, height } = this.state.image;
if (element) {
if (this.konva.image) { if (this.konva.image) {
this.log.trace('Updating Konva image attrs'); this.log.trace('Updating Konva image attrs');
this.konva.image.setAttrs({ this.konva.image.setAttrs({
image: element, image: this.imageElement,
width, width,
height, height,
}); });
@ -142,7 +133,7 @@ export class CanvasImageRenderer {
this.konva.image = new Konva.Image({ this.konva.image = new Konva.Image({
name: CanvasImageRenderer.IMAGE_NAME, name: CanvasImageRenderer.IMAGE_NAME,
listening: false, listening: false,
image: element, image: this.imageElement,
width, width,
height, height,
}); });