@@ -4395,17 +4483,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");
@@ -4456,6 +4560,7 @@ function applyTheme() {
const heightValue = resizeContainer.querySelector("#heightValue")
const keepAspect = resizeContainer.querySelector("#keepAspect")
const paintWhiteToggle = resizeContainer.querySelector("#paintWhiteToggle");
+ const paintTransparentToggle = resizeContainer.querySelector("#paintTransparentToggle");
const zoomSlider = resizeContainer.querySelector("#zoomSlider");
const zoomValue = resizeContainer.querySelector('#zoomValue');
const zoomInBtn = resizeContainer.querySelector('#zoomInBtn');
@@ -4767,6 +4872,7 @@ function applyTheme() {
zoomSlider.value = 1;
if (zoomValue) zoomValue.textContent = '100%';
paintWhiteToggle.checked = state.paintWhitePixels;
+ paintTransparentToggle.checked = state.paintTransparentPixels;
let _previewTimer = null;
let _previewJobId = 0;
@@ -4870,7 +4976,7 @@ function applyTheme() {
const idx = y * w + x;
const i4 = idx * 4;
const r = data[i4], g = data[i4 + 1], b = data[i4 + 2], a = data[i4 + 3];
- const isEligible = a >= tThresh && (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
+ const isEligible = (state.paintTransparentPixels || a >= tThresh) && (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
eligible[idx] = isEligible ? 1 : 0;
work[idx * 3] = r;
work[idx * 3 + 1] = g;
@@ -4922,7 +5028,7 @@ function applyTheme() {
} else {
for (let i = 0; i < data.length; i += 4) {
const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];
- if (a < tThresh || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
+ if ((!state.paintTransparentPixels && a < tThresh) || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
data[i + 3] = 0;
continue;
}
@@ -4969,10 +5075,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();
+ saveBotSettings();
+ };
let panX = 0, panY = 0;
const clampPan = () => {
@@ -5406,7 +5519,7 @@ function applyTheme() {
const i4 = idx * 4;
const r = data[i4], g = data[i4 + 1], b = data[i4 + 2], a = data[i4 + 3];
const masked = mask && mask[idx];
- const isEligible = !masked && a >= tThresh2 && (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
+ const isEligible = !masked && (state.paintTransparentPixels || a >= tThresh2) && (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
eligible[idx] = isEligible ? 1 : 0;
work[idx * 3] = r;
work[idx * 3 + 1] = g;
@@ -5463,7 +5576,7 @@ function applyTheme() {
for (let i = 0; i < data.length; i += 4) {
const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];
const masked = mask && mask[(i>>2)];
- const isTransparent = a < tThresh2 || masked;
+ const isTransparent = (!state.paintTransparentPixels && a < tThresh2) || masked;
const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(r, g, b);
if (isTransparent || isWhiteAndSkipped) {
data[i + 3] = 0; // overlay transparency
@@ -5597,7 +5710,7 @@ function applyTheme() {
let totalValidPixels = 0;
for (let i = 0; i < pixels.length; i += 4) {
- const isTransparent = pixels[i + 3] < (state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD);
+ const isTransparent = !state.paintTransparentPixels && pixels[i + 3] < (state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD);
const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(pixels[i], pixels[i + 1], pixels[i + 2]);
if (!isTransparent && !isWhiteAndSkipped) {
totalValidPixels++;
@@ -5842,7 +5955,7 @@ function applyTheme() {
const isEligibleAt = (x, y) => {
const idx = (y * width + x) * 4;
const r = pixels[idx], g = pixels[idx + 1], b = pixels[idx + 2], a = pixels[idx + 3];
- if (a < tThresh2) return false;
+ if (!state.paintTransparentPixels && a < tThresh2) return false;
if (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b)) return false;
return true;
};
@@ -5890,8 +6003,8 @@ function applyTheme() {
const alpha = pixels[idx + 3]
const tThresh2 = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD;
- if (alpha < tThresh2 || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
- if (alpha < tThresh2) {
+ if ((!state.paintTransparentPixels && alpha < tThresh2) || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
+ if (!state.paintTransparentPixels && alpha < tThresh2) {
skippedPixels.transparent++;
} else {
skippedPixels.white++;
@@ -6288,6 +6401,7 @@ function applyTheme() {
customTransparencyThreshold: state.customTransparencyThreshold,
customWhiteThreshold: state.customWhiteThreshold,
paintWhitePixels: state.paintWhitePixels,
+ paintTransparentPixels: state.paintTransparentPixels,
resizeSettings: state.resizeSettings,
originalImage: state.originalImage,
// Save ignore mask (as base64) with its dimensions
@@ -6333,6 +6447,7 @@ function applyTheme() {
state.customTransparencyThreshold = settings.customTransparencyThreshold ?? CONFIG.TRANSPARENCY_THRESHOLD;
state.customWhiteThreshold = settings.customWhiteThreshold ?? CONFIG.WHITE_THRESHOLD;
state.paintWhitePixels = settings.paintWhitePixels ?? true;
+ state.paintTransparentPixels = settings.paintTransparentPixels ?? false;
state.resizeSettings = settings.resizeSettings ?? null;
state.originalImage = settings.originalImage ?? null;
// Notifications
diff --git a/auto-image-styles.css b/auto-image-styles.css
index e3fecf3..5406b16 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1119,6 +1119,10 @@
font-size: 16px;
}
+.wplace-icon-paint {
+ font-size: 16px;
+}
+
/* Section wrapper styling */
.wplace-settings-section-wrapper {
padding: 18px;
@@ -1816,6 +1820,7 @@
.wplace-icon-bell { font-size: 16px; }
.wplace-icon-palette { font-size: 16px; }
.wplace-icon-globe { font-size: 16px; }
+.wplace-icon-paint { font-size: 16px; }
.wplace-icon-eye { font-size: 16px; }
/* Overlay Settings Controls */
diff --git a/themes/classic-light.css b/themes/classic-light.css
index be9b103..6f3736e 100644
--- a/themes/classic-light.css
+++ b/themes/classic-light.css
@@ -425,6 +425,7 @@
.wplace-theme--classic-light .wplace-icon-bell { color: #ffc107; }
.wplace-theme--classic-light .wplace-icon-palette { color: #f093fb; }
.wplace-theme--classic-light .wplace-icon-globe { color: #ffeaa7; }
+.wplace-theme--classic-light .wplace-icon-paint { color: #4facfe; }
.wplace-theme--classic-light .wplace-icon-eye { color: #6f42c1; }
/* Clean light theme animations */
diff --git a/themes/classic.css b/themes/classic.css
index 9ba0962..3c09bc4 100644
--- a/themes/classic.css
+++ b/themes/classic.css
@@ -480,13 +480,18 @@
}
:root .wplace-icon-globe,
-.wplace-theme--classic .wplace-icon-globe {
- color: #ffeaa7;
+.wplace-theme--classic .wplace-icon-globe {
+ color: #ffeaa7;
+}
+
+:root .wplace-icon-paint,
+.wplace-theme--classic .wplace-icon-paint {
+ color: #4facfe;
}
:root .wplace-icon-eye,
-.wplace-theme--classic .wplace-icon-eye {
- color: var(--wplace-highlight);
+.wplace-theme--classic .wplace-icon-eye {
+ color: var(--wplace-highlight);
}
/* Form controls and sliders for classic theme */
From 83e77ec000dadb1f2a04c805c48aabb21783d46e Mon Sep 17 00:00:00 2001
From: 7est <30688527+7est@users.noreply.github.com>
Date: Sat, 30 Aug 2025 19:58:38 +0900
Subject: [PATCH 2/2] Style paint options like desktop notifications
---
Auto-Image.js | 37 +++++++++++--------------------------
1 file changed, 11 insertions(+), 26 deletions(-)
diff --git a/Auto-Image.js b/Auto-Image.js
index 8c5da8f..246ec3d 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3707,32 +3707,17 @@ function applyTheme() {
${Utils.t("paintOptions")}
-