From 152a3f7dff886c02078d56efc79d226b53032786 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Thu, 3 Jul 2025 02:26:44 +0200
Subject: [PATCH] Auto-hide and restore mask overlay in batch preview

BatchPreviewManager now automatically hides the mask overlay when batch preview starts and restores its previous state when preview ends. The mask toggle button's state and label are updated accordingly. Also, mask toggle button IDs are now unique per canvas node.
---
 js/BatchPreviewManager.js | 25 +++++++++++++++++++++++++
 js/CanvasView.js          |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/js/BatchPreviewManager.js b/js/BatchPreviewManager.js
index a2a4b5a..7bd79c7 100644
--- a/js/BatchPreviewManager.js
+++ b/js/BatchPreviewManager.js
@@ -10,6 +10,7 @@ export class BatchPreviewManager {
         this.currentIndex = 0;
         this.element = null;
         this.uiInitialized = false;
+        this.maskWasVisible = false;
     }
 
     _createUI() {
@@ -90,6 +91,18 @@ export class BatchPreviewManager {
 
         this._createUI();
 
+        // Auto-hide mask logic
+        this.maskWasVisible = this.canvas.maskTool.isOverlayVisible;
+        if (this.maskWasVisible) {
+            this.canvas.maskTool.toggleOverlayVisibility();
+            const toggleBtn = document.getElementById(`toggle-mask-btn-${this.canvas.node.id}`);
+            if (toggleBtn) {
+                toggleBtn.classList.remove('primary');
+                toggleBtn.textContent = "Hide Mask";
+            }
+            this.canvas.render();
+        }
+
         log.info(`Showing batch preview for ${layers.length} layers.`);
         this.layers = layers;
         this.currentIndex = 0;
@@ -104,6 +117,18 @@ export class BatchPreviewManager {
         this.active = false;
         this.layers = [];
         this.currentIndex = 0;
+
+        // Restore mask visibility if it was hidden by this manager
+        if (this.maskWasVisible && !this.canvas.maskTool.isOverlayVisible) {
+            this.canvas.maskTool.toggleOverlayVisibility();
+            const toggleBtn = document.getElementById(`toggle-mask-btn-${this.canvas.node.id}`);
+            if (toggleBtn) {
+                toggleBtn.classList.add('primary');
+                toggleBtn.textContent = "Show Mask";
+            }
+        }
+        this.maskWasVisible = false; // Reset state
+
         // Make all layers visible again upon closing
         this.canvas.layers.forEach(l => l.visible = true);
         this.canvas.render();
diff --git a/js/CanvasView.js b/js/CanvasView.js
index 04609a2..d537863 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -871,7 +871,7 @@ async function createCanvasWidget(node, widget, app) {
             $el("div.painter-separator"),
             $el("div.painter-button-group", {id: "mask-controls"}, [
                 $el("button.painter-button.primary", {
-                    id: "toggle-mask-btn",
+                    id: `toggle-mask-btn-${node.id}`,
                     textContent: "Show Mask",
                     title: "Toggle mask overlay visibility",
                     onclick: (e) => {