alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 14:25:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

Fix toggle mask switch UI sync with auto refresh

Browse Source 
Ensured the toggle mask switch UI stays in sync with mask visibility when auto_refresh_after_generation hides or shows the mask. The checkbox and switch now correctly reflect the current mask state, preventing UI desynchronization and improving user experience.
This commit is contained in:
Dariusz L
2025-08-03 22:25:25 +02:00
parent 3d34bfafd5
commit 3356c631bb
2 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/BatchPreviewManager.js
View File

@@ -123,10 +123,14 @@ export class BatchPreviewManager {
this.maskWasVisible = this.canvas.maskTool.isOverlayVisible; this.maskWasVisible = this.canvas.maskTool.isOverlayVisible;
if (this.maskWasVisible) { if (this.maskWasVisible) {
this.canvas.maskTool.toggleOverlayVisibility(); this.canvas.maskTool.toggleOverlayVisibility();
const toggleBtn = document.getElementById(`toggle-mask-btn-${this.canvas.node.id}`); const toggleSwitch = document.getElementById(`toggle-mask-switch-${this.canvas.node.id}`);
if (toggleBtn) { if (toggleSwitch) {
toggleBtn.classList.remove('primary'); const checkbox = toggleSwitch.querySelector('input[type="checkbox"]');
const iconContainer = toggleBtn.querySelector('.mask-icon-container'); if (checkbox) {
checkbox.checked = false;
}
toggleSwitch.classList.remove('primary');
const iconContainer = toggleSwitch.querySelector('.switch-icon');
if (iconContainer) { if (iconContainer) {
iconContainer.style.opacity = '0.5'; iconContainer.style.opacity = '0.5';
} }
@@ -165,10 +169,14 @@ export class BatchPreviewManager {
this.canvas.render(); this.canvas.render();
if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) { if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) {
this.canvas.maskTool.toggleOverlayVisibility(); this.canvas.maskTool.toggleOverlayVisibility();
const toggleBtn = document.getElementById(`toggle-mask-btn-${String(this.canvas.node.id)}`); const toggleSwitch = document.getElementById(`toggle-mask-switch-${String(this.canvas.node.id)}`);
if (toggleBtn) { if (toggleSwitch) {
toggleBtn.classList.add('primary'); const checkbox = toggleSwitch.querySelector('input[type="checkbox"]');
const iconContainer = toggleBtn.querySelector('.mask-icon-container'); if (checkbox) {
checkbox.checked = true;
}
toggleSwitch.classList.add('primary');
const iconContainer = toggleSwitch.querySelector('.switch-icon');
if (iconContainer) { if (iconContainer) {
iconContainer.style.opacity = '1'; iconContainer.style.opacity = '1';
} }

24
src/BatchPreviewManager.ts
View File

@@ -166,10 +166,14 @@ export class BatchPreviewManager {
this.maskWasVisible = this.canvas.maskTool.isOverlayVisible; this.maskWasVisible = this.canvas.maskTool.isOverlayVisible;
if (this.maskWasVisible) { if (this.maskWasVisible) {
this.canvas.maskTool.toggleOverlayVisibility(); this.canvas.maskTool.toggleOverlayVisibility();
const toggleBtn = document.getElementById(`toggle-mask-btn-${this.canvas.node.id}`); const toggleSwitch = document.getElementById(`toggle-mask-switch-${this.canvas.node.id}`);
if (toggleBtn) { if (toggleSwitch) {
toggleBtn.classList.remove('primary'); const checkbox = toggleSwitch.querySelector('input[type="checkbox"]') as HTMLInputElement;
const iconContainer = toggleBtn.querySelector('.mask-icon-container') as HTMLElement; if (checkbox) {
checkbox.checked = false;
}
toggleSwitch.classList.remove('primary');
const iconContainer = toggleSwitch.querySelector('.switch-icon') as HTMLElement;
if (iconContainer) { if (iconContainer) {
iconContainer.style.opacity = '0.5'; iconContainer.style.opacity = '0.5';
} }
@@ -218,10 +222,14 @@ export class BatchPreviewManager {
if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) { if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) {
this.canvas.maskTool.toggleOverlayVisibility(); this.canvas.maskTool.toggleOverlayVisibility();
const toggleBtn = document.getElementById(`toggle-mask-btn-${String(this.canvas.node.id)}`); const toggleSwitch = document.getElementById(`toggle-mask-switch-${String(this.canvas.node.id)}`);
if (toggleBtn) { if (toggleSwitch) {
toggleBtn.classList.add('primary'); const checkbox = toggleSwitch.querySelector('input[type="checkbox"]') as HTMLInputElement;
const iconContainer = toggleBtn.querySelector('.mask-icon-container') as HTMLElement; if (checkbox) {
checkbox.checked = true;
}
toggleSwitch.classList.add('primary');
const iconContainer = toggleSwitch.querySelector('.switch-icon') as HTMLElement;
if (iconContainer) { if (iconContainer) {
iconContainer.style.opacity = '1'; iconContainer.style.opacity = '1';
} }