feat(ui): better buffer commit logic

This commit is contained in:
psychedelicious 2024-08-20 11:37:01 +10:00
parent 0df26e967c
commit fe65a5a2db

View File

@ -400,33 +400,35 @@ export class CanvasObjectRenderer {
/** /**
* Commits the current buffer object, pushing the buffer object state back to the application state. * Commits the current buffer object, pushing the buffer object state back to the application state.
*/ */
commitBuffer = () => { commitBuffer = (options?: { pushToState?: boolean }) => {
if (!this.bufferState) { const { pushToState } = { ...options, pushToState: true };
if (!this.bufferState || !this.bufferRenderer) {
this.log.trace('No buffer to commit'); this.log.trace('No buffer to commit');
return; return;
} }
this.log.trace('Committing buffer'); this.log.trace('Committing buffer');
// We need to give the objects a fresh ID else they will be considered the same object when they are re-rendered as // Move the buffer to the persistent objects group/renderers
// a non-buffer object, and we won't trigger things like bbox calculation this.bufferRenderer.konva.group.moveTo(this.konva.objectGroup);
this.bufferState.id = getPrefixedId(this.bufferState.type); this.renderers.set(this.bufferState.id, this.bufferRenderer);
if (this.bufferState.type === 'brush_line') { if (pushToState) {
this.manager.stateApi.addBrushLine({ const entityIdentifier = this.parent.getEntityIdentifier();
entityIdentifier: this.parent.getEntityIdentifier(), if (this.bufferState.type === 'brush_line') {
brushLine: this.bufferState, this.manager.stateApi.addBrushLine({ entityIdentifier, brushLine: this.bufferState });
}); } else if (this.bufferState.type === 'eraser_line') {
} else if (this.bufferState.type === 'eraser_line') { this.manager.stateApi.addEraserLine({ entityIdentifier, eraserLine: this.bufferState });
this.manager.stateApi.addEraserLine({ } else if (this.bufferState.type === 'rect') {
entityIdentifier: this.parent.getEntityIdentifier(), this.manager.stateApi.addRect({ entityIdentifier, rect: this.bufferState });
eraserLine: this.bufferState, } else {
}); this.log.warn({ buffer: this.bufferState }, 'Invalid buffer object type');
} else if (this.bufferState.type === 'rect') { }
this.manager.stateApi.addRect({ entityIdentifier: this.parent.getEntityIdentifier(), rect: this.bufferState });
} else {
this.log.warn({ buffer: this.bufferState }, 'Invalid buffer object type');
} }
this.bufferRenderer = null;
this.bufferState = null;
}; };
hideObjects = (except: string[] = []) => { hideObjects = (except: string[] = []) => {
@ -509,8 +511,8 @@ export class CanvasObjectRenderer {
imageDTO = await uploadImage(blob, `${this.id}_rasterized.png`, 'other', true); imageDTO = await uploadImage(blob, `${this.id}_rasterized.png`, 'other', true);
const imageObject = imageDTOToImageObject(imageDTO); const imageObject = imageDTOToImageObject(imageDTO);
if (replaceObjects) { if (replaceObjects) {
this.bufferState = imageObject; await this.setBuffer(imageObject);
await this.renderBufferObject(); this.commitBuffer({ pushToState: false });
} }
this.manager.stateApi.rasterizeEntity({ this.manager.stateApi.rasterizeEntity({
entityIdentifier: this.parent.getEntityIdentifier(), entityIdentifier: this.parent.getEntityIdentifier(),