From 196e43b5e5a403664ea2dd438c567684b926bd08 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 24 Aug 2024 11:28:05 +1000 Subject: [PATCH] fix(ui): extraneous entity preview updates --- .../konva/CanvasObjectRenderer.ts | 12 ++++---- .../controlLayers/konva/CanvasTransformer.ts | 28 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts index b9d9dab456..f5b7b57404 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts @@ -27,6 +27,7 @@ import type { import { imageDTOToImageObject } from 'features/controlLayers/store/types'; import Konva from 'konva'; import type { GroupConfig } from 'konva/lib/Group'; +import { debounce } from 'lodash-es'; import { atom } from 'nanostores'; import type { Logger } from 'roarr'; import { getImageDTO, uploadImage } from 'services/api/endpoints/images'; @@ -209,9 +210,7 @@ export class CanvasObjectRenderer { this.log.trace('Caching object group'); this.konva.objectGroup.clearCache(); 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; }; - updatePreviewCanvas = () => { + updatePreviewCanvas = debounce(() => { + if (this.parent.transformer.isPendingRectCalculation) { + return; + } if (this.parent.transformer.pixelRect.width === 0 || this.parent.transformer.pixelRect.height === 0) { return; } @@ -558,7 +560,7 @@ export class CanvasObjectRenderer { }; this.$canvasCache.set({ rect, canvas }); } - }; + }, 300); cloneObjectGroup = (attrs?: GroupConfig): Konva.Group => { const clone = this.konva.objectGroup.clone(); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts index ac690bd2e8..1df7aa7532 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts @@ -602,7 +602,6 @@ export class CanvasTransformer { if (this.isPendingRectCalculation) { this.syncInteractionState(); - this.parent.renderer.updatePreviewCanvas(); return; } @@ -613,20 +612,19 @@ export class CanvasTransformer { // The layer is fully transparent but has objects - reset it this.manager.stateApi.resetEntity({ entityIdentifier: this.parent.getEntityIdentifier() }); this.syncInteractionState(); - this.parent.renderer.updatePreviewCanvas(); - return; + } else { + 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(); }; @@ -649,8 +647,8 @@ export class CanvasTransformer { if (!this.parent.renderer.needsPixelBbox()) { this.nodeRect = { ...rect }; this.pixelRect = { ...rect }; - this.isPendingRectCalculation = false; this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect }, 'Got bbox from client rect'); + this.isPendingRectCalculation = false; this.updateBbox(); return; } @@ -674,8 +672,8 @@ export class CanvasTransformer { this.nodeRect = getEmptyRect(); this.pixelRect = getEmptyRect(); } - this.isPendingRectCalculation = false; this.log.trace({ nodeRect: this.nodeRect, pixelRect: this.pixelRect, extents }, `Got bbox from worker`); + this.isPendingRectCalculation = false; this.updateBbox(); } );