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): extraneous entity preview updates

Browse Source
This commit is contained in:
psychedelicious 2024-08-24 11:28:05 +10:00
parent c3f7554053
commit 41cc650031
2 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
View File

@ -27,6 +27,7 @@ import type {
import { imageDTOToImageObject } from 'features/controlLayers/store/types'; import { imageDTOToImageObject } from 'features/controlLayers/store/types';
import Konva from 'konva'; import Konva from 'konva';
import type { GroupConfig } from 'konva/lib/Group'; import type { GroupConfig } from 'konva/lib/Group';
import { debounce } from 'lodash-es';
import { atom } from 'nanostores'; import { atom } from 'nanostores';
import type { Logger } from 'roarr'; import type { Logger } from 'roarr';
import { getImageDTO, uploadImage } from 'services/api/endpoints/images'; import { getImageDTO, uploadImage } from 'services/api/endpoints/images';
@ -209,9 +210,7 @@ export class CanvasObjectRenderer {
this.log.trace('Caching object group'); this.log.trace('Caching object group');
this.konva.objectGroup.clearCache(); this.konva.objectGroup.clearCache();
this.konva.objectGroup.cache({ pixelRatio: 1 }); this.konva.objectGroup.cache({ pixelRatio: 1 });
if (!this.parent.transformer.isPendingRectCalculation) { this.parent.renderer.updatePreviewCanvas();
this.parent.renderer.updatePreviewCanvas();
}
} }
}; };
@ -542,7 +541,10 @@ export class CanvasObjectRenderer {
return imageDTO; return imageDTO;
}; };
updatePreviewCanvas = () => { updatePreviewCanvas = debounce(() => {
if (this.parent.transformer.isPendingRectCalculation) {
return;
}
if (this.parent.transformer.pixelRect.width === 0 || this.parent.transformer.pixelRect.height === 0) { if (this.parent.transformer.pixelRect.width === 0 || this.parent.transformer.pixelRect.height === 0) {
return; return;
} }
@ -558,7 +560,7 @@ export class CanvasObjectRenderer {
}; };
this.$canvasCache.set({ rect, canvas }); this.$canvasCache.set({ rect, canvas });
} }
}; }, 300);
cloneObjectGroup = (attrs?: GroupConfig): Konva.Group => { cloneObjectGroup = (attrs?: GroupConfig): Konva.Group => {
const clone = this.konva.objectGroup.clone(); const clone = this.konva.objectGroup.clone();

28
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
View File

@ -602,7 +602,6 @@ export class CanvasTransformer {
if (this.isPendingRectCalculation) { if (this.isPendingRectCalculation) {
this.syncInteractionState(); this.syncInteractionState();
this.parent.renderer.updatePreviewCanvas();
return; return;
} }
@ -613,20 +612,19 @@ export class CanvasTransformer {
// The layer is fully transparent but has objects - reset it // The layer is fully transparent but has objects - reset it
this.manager.stateApi.resetEntity({ entityIdentifier: this.parent.getEntityIdentifier() }); this.manager.stateApi.resetEntity({ entityIdentifier: this.parent.getEntityIdentifier() });
this.syncInteractionState(); this.syncInteractionState();
this.parent.renderer.updatePreviewCanvas(); } else {
return; this.syncInteractionState();
this.update(this.parent.state.position, this.pixelRect);
const groupAttrs: Partial<GroupConfig> = {
x: this.parent.state.position.x + this.pixelRect.x,
y: this.parent.state.position.y + this.pixelRect.y,
offsetX: this.pixelRect.x,
offsetY: this.pixelRect.y,
};
this.parent.renderer.konva.objectGroup.setAttrs(groupAttrs);
this.parent.renderer.konva.bufferGroup.setAttrs(groupAttrs);
} }
this.syncInteractionState();
this.update(this.parent.state.position, this.pixelRect);
const groupAttrs: Partial<GroupConfig> = {
x: this.parent.state.position.x + this.pixelRect.x,
y: this.parent.state.position.y + this.pixelRect.y,
offsetX: this.pixelRect.x,
offsetY: this.pixelRect.y,
};
this.parent.renderer.konva.objectGroup.setAttrs(groupAttrs);
this.parent.renderer.konva.bufferGroup.setAttrs(groupAttrs);
this.parent.renderer.updatePreviewCanvas(); this.parent.renderer.updatePreviewCanvas();
}; };
@ -649,8 +647,8 @@ export class CanvasTransformer {
if (!this.parent.renderer.needsPixelBbox()) { if (!this.parent.renderer.needsPixelBbox()) {
this.nodeRect = { ...rect }; this.nodeRect = { ...rect };
this.pixelRect = { ...rect }; this.pixelRect = { ...rect };
this.isPendingRectCalculation = false;
this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect }, 'Got bbox from client rect'); this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect }, 'Got bbox from client rect');
this.isPendingRectCalculation = false;
this.updateBbox(); this.updateBbox();
return; return;
} }
@ -674,8 +672,8 @@ export class CanvasTransformer {
this.nodeRect = getEmptyRect(); this.nodeRect = getEmptyRect();
this.pixelRect = getEmptyRect(); this.pixelRect = getEmptyRect();
} }
this.isPendingRectCalculation = false;
this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect, extents }, `Got bbox from worker`); this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect, extents }, `Got bbox from worker`);
this.isPendingRectCalculation = false;
this.updateBbox(); this.updateBbox();
} }
); );