diff --git a/Auto-Image.js b/Auto-Image.js
index 8361b08..4b6d935 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -4386,9 +4386,12 @@
Paint White Pixels
-
-
-
+
+
+
+
+
+ 100%
@@ -4782,6 +4785,11 @@
const keepAspect = resizeContainer.querySelector("#keepAspect")
const paintWhiteToggle = resizeContainer.querySelector("#paintWhiteToggle");
const zoomSlider = resizeContainer.querySelector("#zoomSlider");
+ const zoomValue = resizeContainer.querySelector('#zoomValue');
+ const zoomInBtn = resizeContainer.querySelector('#zoomInBtn');
+ const zoomOutBtn = resizeContainer.querySelector('#zoomOutBtn');
+ const zoomFitBtn = resizeContainer.querySelector('#zoomFitBtn');
+ const zoomActualBtn = resizeContainer.querySelector('#zoomActualBtn');
const canvasStack = resizeContainer.querySelector('#resizeCanvasStack');
const baseCanvas = resizeContainer.querySelector('#resizeCanvas');
const maskCanvas = resizeContainer.querySelector('#maskCanvas');
@@ -5067,7 +5075,8 @@
heightSlider.value = initialH;
widthValue.textContent = initialW;
heightValue.textContent = initialH;
- zoomSlider.value = 1;
+ zoomSlider.value = 1;
+ if (zoomValue) zoomValue.textContent = '100%';
paintWhiteToggle.checked = state.paintWhitePixels;
let _previewTimer = null;
@@ -5205,7 +5214,7 @@
for (let i=0;i {
@@ -5217,6 +5226,12 @@
const curH = parseInt(heightSlider.value, 10);
state.resizeSettings = { baseWidth: width, baseHeight: height, width: curW, height: curH };
saveBotSettings();
+ // Auto-fit after size changes
+ const fit = (typeof computeFitZoom === 'function') ? computeFitZoom() : 1;
+ if (!isNaN(fit) && isFinite(fit)) {
+ const z = Math.max(0.05, Math.min(20, fit));
+ zoomSlider.value = z;
+ }
};
const onHeightInput = () => {
@@ -5228,6 +5243,12 @@
const curH = parseInt(heightSlider.value, 10);
state.resizeSettings = { baseWidth: width, baseHeight: height, width: curW, height: curH };
saveBotSettings();
+ // Auto-fit after size changes
+ const fit = (typeof computeFitZoom === 'function') ? computeFitZoom() : 1;
+ if (!isNaN(fit) && isFinite(fit)) {
+ const z = Math.max(0.05, Math.min(20, fit));
+ zoomSlider.value = z;
+ }
};
paintWhiteToggle.onchange = (e) => {
@@ -5235,11 +5256,30 @@
_updateResizePreview();
};
- // Zoom only affects CSS transform; avoid recomputing pixels
- zoomSlider.addEventListener('input', () => {
- _zoomLevel = parseFloat(zoomSlider.value);
+ const applyZoom = (z) => {
+ _zoomLevel = Math.max(0.05, Math.min(20, z || 1));
+ zoomSlider.value = _zoomLevel;
canvasStack.style.transform = `scale(${_zoomLevel})`;
+ if (zoomValue) zoomValue.textContent = `${Math.round(_zoomLevel * 100)}%`;
+ };
+ zoomSlider.addEventListener('input', () => {
+ applyZoom(parseFloat(zoomSlider.value));
});
+ if (zoomInBtn) zoomInBtn.addEventListener('click', () => applyZoom(parseFloat(zoomSlider.value) + 0.1));
+ if (zoomOutBtn) zoomOutBtn.addEventListener('click', () => applyZoom(parseFloat(zoomSlider.value) - 0.1));
+ const computeFitZoom = () => {
+ const wrap = resizeContainer.querySelector('.resize-preview-wrapper');
+ if (!wrap) return 1;
+ const wrapRect = wrap.getBoundingClientRect();
+ const w = baseCanvas.width || 1;
+ const h = baseCanvas.height || 1;
+ const margin = 10;
+ const scaleX = (wrapRect.width - margin) / w;
+ const scaleY = (wrapRect.height - margin) / h;
+ return Math.max(0.05, Math.min(20, Math.min(scaleX, scaleY)));
+ };
+ if (zoomFitBtn) zoomFitBtn.addEventListener('click', () => applyZoom(computeFitZoom()));
+ if (zoomActualBtn) zoomActualBtn.addEventListener('click', () => applyZoom(1));
const schedulePreview = () => {
if (_previewTimer) clearTimeout(_previewTimer);
const run = () => {
@@ -5579,6 +5619,16 @@
initializeColorPalette(resizeContainer);
_updateResizePreview();
+ setTimeout(() => {
+ if (typeof computeFitZoom === 'function') {
+ const z = computeFitZoom();
+ if (!isNaN(z) && isFinite(z)) {
+ zoomSlider.value = Math.max(0.05, Math.min(20, z));
+ // Trigger applyZoom to update value and transform
+ const ev = new Event('input'); zoomSlider.dispatchEvent(ev);
+ }
+ }
+ }, 0);
}
function closeResizeDialog() {