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): move CanvasImage's konva image to correct object

Browse Source
This commit is contained in:
psychedelicious 2024-07-31 14:35:04 +10:00
parent 0b6b6f97ad
commit 8d72e7d9e8
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,9 +23,9 @@ export class CanvasImage {
konva: { konva: {
group: Konva.Group; group: Konva.Group;
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
}; };
imageName: string | null; imageName: string | null;
image: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
isLoading: boolean; isLoading: boolean;
isError: boolean; isError: boolean;
@ -63,13 +63,13 @@ export class CanvasImage {
listening: false, listening: false,
}), }),
}, },
image: null,
}; };
this.konva.placeholder.group.add(this.konva.placeholder.rect); this.konva.placeholder.group.add(this.konva.placeholder.rect);
this.konva.placeholder.group.add(this.konva.placeholder.text); this.konva.placeholder.group.add(this.konva.placeholder.text);
this.konva.group.add(this.konva.placeholder.group); this.konva.group.add(this.konva.placeholder.group);
this.imageName = null; this.imageName = null;
this.image = null;
this.isLoading = false; this.isLoading = false;
this.isError = false; this.isError = false;
this.state = state; this.state = state;
@ -82,7 +82,7 @@ export class CanvasImage {
this.isLoading = true; this.isLoading = true;
this.konva.group.visible(true); this.konva.group.visible(true);
if (!this.image) { if (!this.konva.image) {
this.konva.placeholder.group.visible(false); this.konva.placeholder.group.visible(false);
this.konva.placeholder.text.text(t('common.loadingImage', 'Loading Image')); this.konva.placeholder.text.text(t('common.loadingImage', 'Loading Image'));
} }
@ -91,27 +91,27 @@ export class CanvasImage {
assert(imageDTO !== null, 'imageDTO is null'); assert(imageDTO !== null, 'imageDTO is null');
const imageEl = await loadImage(imageDTO.image_url); const imageEl = await loadImage(imageDTO.image_url);
if (this.image) { if (this.konva.image) {
this.image.setAttrs({ this.konva.image.setAttrs({
image: imageEl, image: imageEl,
}); });
} else { } else {
this.image = new Konva.Image({ this.konva.image = new Konva.Image({
name: CanvasImage.IMAGE_NAME, name: CanvasImage.IMAGE_NAME,
listening: false, listening: false,
image: imageEl, image: imageEl,
width: this.state.width, width: this.state.width,
height: this.state.height, height: this.state.height,
}); });
this.konva.group.add(this.image); this.konva.group.add(this.konva.image);
} }
if (this.state.filters.length > 0) { if (this.state.filters.length > 0) {
this.image.cache(); this.konva.image.cache();
this.image.filters(this.state.filters.map((f) => FILTER_MAP[f])); this.konva.image.filters(this.state.filters.map((f) => FILTER_MAP[f]));
} else { } else {
this.image.clearCache(); this.konva.image.clearCache();
this.image.filters([]); this.konva.image.filters([]);
} }
this.imageName = imageName; this.imageName = imageName;
@ -119,7 +119,7 @@ export class CanvasImage {
this.isError = false; this.isError = false;
this.konva.placeholder.group.visible(false); this.konva.placeholder.group.visible(false);
} catch { } catch {
this.image?.visible(false); this.konva.image?.visible(false);
this.imageName = null; this.imageName = null;
this.isLoading = false; this.isLoading = false;
this.isError = true; this.isError = true;
@ -136,13 +136,13 @@ export class CanvasImage {
if (this.state.image.name !== image.name || force) { if (this.state.image.name !== image.name || force) {
await this.updateImageSource(image.name); await this.updateImageSource(image.name);
} }
this.image?.setAttrs({ x, y, width, height }); this.konva.image?.setAttrs({ x, y, width, height });
if (filters.length > 0) { if (filters.length > 0) {
this.image?.cache(); this.konva.image?.cache();
this.image?.filters(filters.map((f) => FILTER_MAP[f])); this.konva.image?.filters(filters.map((f) => FILTER_MAP[f]));
} else { } else {
this.image?.clearCache(); this.konva.image?.clearCache();
this.image?.filters([]); this.konva.image?.filters([]);
} }
this.konva.placeholder.rect.setAttrs({ width, height }); this.konva.placeholder.rect.setAttrs({ width, height });
this.konva.placeholder.text.setAttrs({ width, height, fontSize: width / 16 }); this.konva.placeholder.text.setAttrs({ width, height, fontSize: width / 16 });