fixed the persistent shape preview bug

fixed the persistent shape preview bug where blue dashed lines would remain visible even when the user was no longer interacting with the slider. The issue was caused by race conditions and timing problems in the preview system.
This commit is contained in:
Dariusz L
2025-07-28 16:38:45 +02:00
parent f57b9f6b58
commit 0bae8c9c9d
4 changed files with 27 additions and 2 deletions

View File

@@ -88,6 +88,8 @@ export class CustomShapeMenu {
`;
// Add main auto-apply checkbox to the new container
const checkboxContainer = this._createCheckbox(() => `${this.canvas.autoApplyShapeMask ? "☑" : "☐"} Auto-apply shape mask`, () => {
// Always hide any active shape preview lines first to prevent them from getting stuck
this.canvas.maskTool.hideShapePreview();
this.canvas.autoApplyShapeMask = !this.canvas.autoApplyShapeMask;
if (this.canvas.autoApplyShapeMask) {
this.canvas.maskTool.applyShapeMask();
@@ -108,6 +110,7 @@ export class CustomShapeMenu {
this.canvas.shapeMaskExpansion = !this.canvas.shapeMaskExpansion;
this._updateUI();
if (this.canvas.autoApplyShapeMask) {
this.canvas.maskTool.hideShapePreview();
this.canvas.maskTool.applyShapeMask();
this.canvas.render();
}
@@ -201,6 +204,7 @@ export class CustomShapeMenu {
this.canvas.shapeMaskFeather = !this.canvas.shapeMaskFeather;
this._updateUI();
if (this.canvas.autoApplyShapeMask) {
this.canvas.maskTool.hideShapePreview();
this.canvas.maskTool.applyShapeMask();
this.canvas.render();
}

View File

@@ -1005,11 +1005,18 @@ export class MaskTool {
* Hide shape preview and switch back to normal mode
*/
hideShapePreview() {
// Cancel any pending throttled preview updates to prevent race conditions
if (this.shapePreviewThrottleTimeout !== null) {
clearTimeout(this.shapePreviewThrottleTimeout);
this.shapePreviewThrottleTimeout = null;
}
// Clear any pending preview parameters
this.pendingPreviewParams = null;
this.isPreviewMode = false;
this.shapePreviewVisible = false;
this.clearShapePreview();
this.shapePreviewCanvas.style.display = 'none';
log.debug("Shape preview hidden");
log.debug("Shape preview hidden and all pending operations cancelled");
}
/**
* Clear shape preview canvas

View File

@@ -113,6 +113,9 @@ export class CustomShapeMenu {
const checkboxContainer = this._createCheckbox(
() => `${this.canvas.autoApplyShapeMask ? "☑" : "☐"} Auto-apply shape mask`,
() => {
// Always hide any active shape preview lines first to prevent them from getting stuck
this.canvas.maskTool.hideShapePreview();
this.canvas.autoApplyShapeMask = !this.canvas.autoApplyShapeMask;
if (this.canvas.autoApplyShapeMask) {
@@ -140,6 +143,7 @@ export class CustomShapeMenu {
this._updateUI();
if (this.canvas.autoApplyShapeMask) {
this.canvas.maskTool.hideShapePreview();
this.canvas.maskTool.applyShapeMask();
this.canvas.render();
}
@@ -252,6 +256,7 @@ export class CustomShapeMenu {
this._updateUI();
if (this.canvas.autoApplyShapeMask) {
this.canvas.maskTool.hideShapePreview();
this.canvas.maskTool.applyShapeMask();
this.canvas.render();
}

View File

@@ -1265,11 +1265,20 @@ export class MaskTool {
* Hide shape preview and switch back to normal mode
*/
hideShapePreview(): void {
// Cancel any pending throttled preview updates to prevent race conditions
if (this.shapePreviewThrottleTimeout !== null) {
clearTimeout(this.shapePreviewThrottleTimeout);
this.shapePreviewThrottleTimeout = null;
}
// Clear any pending preview parameters
this.pendingPreviewParams = null;
this.isPreviewMode = false;
this.shapePreviewVisible = false;
this.clearShapePreview();
this.shapePreviewCanvas.style.display = 'none';
log.debug("Shape preview hidden");
log.debug("Shape preview hidden and all pending operations cancelled");
}
/**