From 7aa75f8da5aca1392368898b6504df23ebc64876 Mon Sep 17 00:00:00 2001
From: 7est <30688527+7est@users.noreply.github.com>
Date: Sat, 30 Aug 2025 19:07:58 +0900
Subject: [PATCH] Add transparent pixel toggle to settings

---
 Auto-Image.js | 72 ++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index be24527..65e4cae 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3686,6 +3686,24 @@ function applyTheme() {
                     accent-color: ${theme.highlight || '#48dbfb'};
                   "/>
               </label>
+              <!-- Paint White Pixels Toggle -->
+              <label for="settingsPaintWhiteToggle" class="wplace-blue-marble-toggle">
+                  <div>
+                      <span class="wplace-blue-marble-title" style="color: ${theme.text || 'white'};">${Utils.t("paintWhitePixels")}</span>
+                  </div>
+                  <input type="checkbox" id="settingsPaintWhiteToggle" ${state.paintWhitePixels ? 'checked' : ''} class="wplace-blue-marble-checkbox" style="
+                    accent-color: ${theme.highlight || '#48dbfb'};
+                  "/>
+              </label>
+              <!-- Paint Transparent Pixels Toggle -->
+              <label for="settingsPaintTransparentToggle" class="wplace-blue-marble-toggle">
+                  <div>
+                      <span class="wplace-blue-marble-title" style="color: ${theme.text || 'white'};">${Utils.t("paintTransparentPixels")}</span>
+                  </div>
+                  <input type="checkbox" id="settingsPaintTransparentToggle" ${state.paintTransparentPixels ? 'checked' : ''} class="wplace-blue-marble-checkbox" style="
+                    accent-color: ${theme.highlight || '#48dbfb'};
+                  "/>
+              </label>
           </div>
         </div>
 
@@ -4436,17 +4454,33 @@ function applyTheme() {
         })
       }
 
-      const overlayOpacitySlider = settingsContainer.querySelector("#overlayOpacitySlider");
-      const overlayOpacityValue = settingsContainer.querySelector("#overlayOpacityValue");
-      const enableBlueMarbleToggle = settingsContainer.querySelector("#enableBlueMarbleToggle");
+        const overlayOpacitySlider = settingsContainer.querySelector("#overlayOpacitySlider");
+        const overlayOpacityValue = settingsContainer.querySelector("#overlayOpacityValue");
+        const enableBlueMarbleToggle = settingsContainer.querySelector("#enableBlueMarbleToggle");
+        const settingsPaintWhiteToggle = settingsContainer.querySelector("#settingsPaintWhiteToggle");
+        const settingsPaintTransparentToggle = settingsContainer.querySelector("#settingsPaintTransparentToggle");
 
-      if (overlayOpacitySlider && overlayOpacityValue) {
-        overlayOpacitySlider.addEventListener('input', (e) => {
-          const opacity = parseFloat(e.target.value);
-          state.overlayOpacity = opacity;
-          overlayOpacityValue.textContent = `${Math.round(opacity * 100)}%`;
-        });
-      }
+        if (overlayOpacitySlider && overlayOpacityValue) {
+          overlayOpacitySlider.addEventListener('input', (e) => {
+            const opacity = parseFloat(e.target.value);
+            state.overlayOpacity = opacity;
+            overlayOpacityValue.textContent = `${Math.round(opacity * 100)}%`;
+          });
+        }
+
+        if (settingsPaintWhiteToggle) {
+          settingsPaintWhiteToggle.addEventListener('change', (e) => {
+            state.paintWhitePixels = e.target.checked;
+            saveBotSettings();
+          });
+        }
+
+        if (settingsPaintTransparentToggle) {
+          settingsPaintTransparentToggle.addEventListener('change', (e) => {
+            state.paintTransparentPixels = e.target.checked;
+            saveBotSettings();
+          });
+        }
 
       // Speed slider event listener
       const speedSlider = settingsContainer.querySelector("#speedSlider");
@@ -5012,15 +5046,17 @@ function applyTheme() {
   if (!isNaN(fit) && isFinite(fit)) applyZoom(fit);
       };
 
-      paintWhiteToggle.onchange = (e) => {
-        state.paintWhitePixels = e.target.checked;
-        _updateResizePreview();
-      };
+        paintWhiteToggle.onchange = (e) => {
+          state.paintWhitePixels = e.target.checked;
+          _updateResizePreview();
+          saveBotSettings();
+        };
 
-      paintTransparentToggle.onchange = (e) => {
-        state.paintTransparentPixels = e.target.checked;
-        _updateResizePreview();
-      };
+        paintTransparentToggle.onchange = (e) => {
+          state.paintTransparentPixels = e.target.checked;
+          _updateResizePreview();
+          saveBotSettings();
+        };
 
       let panX = 0, panY = 0;
       const clampPan = () => {