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

tidy(ui): CanvasImage

Browse Source
This commit is contained in:
psychedelicious 2024-07-17 14:34:36 +10:00
parent 47d415e31c
commit a69aa00155
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,8 @@ export class CanvasImage {
static PLACEHOLDER_RECT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-rect`; static PLACEHOLDER_RECT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-rect`;
static PLACEHOLDER_TEXT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-text`; static PLACEHOLDER_TEXT_NAME = `${CanvasImage.NAME_PREFIX}_placeholder-text`;
private state: ImageObject;
id: string; id: string;
konva: { konva: {
group: Konva.Group; group: Konva.Group;
@ -23,10 +25,9 @@ export class CanvasImage {
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
isLoading: boolean; isLoading: boolean;
isError: boolean; isError: boolean;
lastImageObject: ImageObject;
constructor(imageObject: ImageObject) { constructor(state: ImageObject) {
const { id, width, height, x, y } = imageObject; const { id, width, height, x, y } = state;
this.konva = { this.konva = {
group: new Konva.Group({ name: CanvasImage.GROUP_NAME, listening: false, x, y }), group: new Konva.Group({ name: CanvasImage.GROUP_NAME, listening: false, x, y }),
placeholder: { placeholder: {
@ -62,7 +63,7 @@ export class CanvasImage {
this.image = null; this.image = null;
this.isLoading = false; this.isLoading = false;
this.isError = false; this.isError = false;
this.lastImageObject = imageObject; this.state = state;
} }
async updateImageSource(imageName: string) { async updateImageSource(imageName: string) {
@ -88,15 +89,15 @@ export class CanvasImage {
name: CanvasImage.IMAGE_NAME, name: CanvasImage.IMAGE_NAME,
listening: false, listening: false,
image: imageEl, image: imageEl,
width: this.lastImageObject.width, width: this.state.width,
height: this.lastImageObject.height, height: this.state.height,
}); });
this.konva.group.add(this.image); this.konva.group.add(this.image);
} }
if (this.lastImageObject.filters.length > 0) { if (this.state.filters.length > 0) {
this.image.cache(); this.image.cache();
this.image.filters(this.lastImageObject.filters.map((f) => FILTER_MAP[f])); this.image.filters(this.state.filters.map((f) => FILTER_MAP[f]));
} else { } else {
this.image.clearCache(); this.image.clearCache();
this.image.filters([]); this.image.filters([]);
@ -116,10 +117,10 @@ export class CanvasImage {
} }
} }
async update(imageObject: ImageObject, force?: boolean): Promise<boolean> { async update(state: ImageObject, force?: boolean): Promise<boolean> {
if (this.lastImageObject !== imageObject || force) { if (this.state !== state || force) {
const { width, height, x, y, image, filters } = imageObject; const { width, height, x, y, image, filters } = state;
if (this.lastImageObject.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.image?.setAttrs({ x, y, width, height });
@ -132,7 +133,7 @@ export class CanvasImage {
} }
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 });
this.lastImageObject = imageObject; this.state = state;
return true; return true;
} else { } else {
return false; return false;