fix(ui): flash of original layer when applying filter/segment

Let the parent module adopt the filtered/segemented image instead of destroying it and making the parent re-create it, which results in a brief flash of the parent layer's original objects before the new image is rendered.
This commit is contained in:
psychedelicious
2024-10-30 07:26:16 +10:00
parent 7852aacd11
commit 2e3cba6416
2 changed files with 20 additions and 2 deletions

View File

@@ -323,6 +323,12 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
}
this.log.trace('Applying');
// Have the parent adopt the image module - this prevents a flash of the original layer content before the filtered
// image is rendered
if (this.imageModule) {
this.parent.renderer.adoptObjectRenderer(this.imageModule);
}
// Rasterize the entity, replacing the objects with the masked image
const rect = this.parent.transformer.getRelativeRect();
this.manager.stateApi.rasterizeEntity({
@@ -392,7 +398,10 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
this.abortController.abort();
}
this.abortController = null;
if (this.imageModule) {
// If the image module exists, and is a child of the group, destroy it. It might not be a child of the group if
// the user has applied the filter and the image has been adopted by the parent entity.
if (this.imageModule && this.imageModule.konva.group.parent === this.konva.group) {
this.imageModule.destroy();
this.imageModule = null;
}

View File

@@ -705,6 +705,12 @@ export class CanvasSegmentAnythingModule extends CanvasModuleBase {
}
this.log.trace(`Saving as ${type}`);
// Have the parent adopt the image module - this prevents a flash of the original layer content before the
// segmented image is rendered
if (this.imageModule) {
this.parent.renderer.adoptObjectRenderer(this.imageModule);
}
// Create the new entity with the masked image as its only object
const rect = this.parent.transformer.getRelativeRect();
const arg = {
@@ -796,7 +802,10 @@ export class CanvasSegmentAnythingModule extends CanvasModuleBase {
for (const point of this.$points.get()) {
point.konva.circle.destroy();
}
if (this.imageModule) {
// If the image module exists, and is a child of the group, destroy it. It might not be a child of the group if
// the user has applied the segmented image and the image has been adopted by the parent entity.
if (this.imageModule && this.imageModule.konva.group.parent === this.konva.group) {
this.imageModule.destroy();
this.imageModule = null;
}