fix(ui): extraneous entity preview updates

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

View File

@ -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();

View File

@ -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();
}
);