feat: add Auto-Snap toggle with checkbox and button to auto-detect controls

- New autoSnapOnChange property on ResolutionMasterCanvas with persistent default
- Auto-Snap button and checkbox rendered in the Auto-detect / Auto-Resize UI area
- autoSnapCheckbox click toggles autoSnapOnChange in the click handler map
- handleSnap() is automatically called after image detection when autoSnapOnChange is true
- autoDetect section height raised 125→160 and Collapse Presets section height raised 100→135 to accommodate new control
- Tooltip keys added in ResolutionMasterConfig.js: autoSnapBtn, autoSnapCheckbox

Author: Azornes

js/ResolutionMaster.js

@@ -126,7 +126,7 @@ class ResolutionMasterCanvas {
         const sectionHeights = {
             actions: this.collapsedSections?.actions ? 25 : 55,      
             scaling: this.collapsedSections?.scaling ? 25 : 130,    
-            autoDetect: this.collapsedSections?.autoDetect ? 25 : 125, 
+            autoDetect: this.collapsedSections?.autoDetect ? 25 : 160, 
             presets: this.collapsedSections?.presets ? 25 : 90       
         };
         Object.values(sectionHeights).forEach(height => {
@@ -175,6 +175,7 @@ class ResolutionMasterCanvas {
             autoDetect: false,
             autoFitOnChange: false,
             autoResizeOnChange: false,
+            autoSnapOnChange: false,
             selectedCategory: "Standard",
             selectedPreset: null,
             useCustomCalc: false,
@@ -478,7 +479,7 @@ class ResolutionMasterCanvas {
 
                 collapsibleSection("Auto-Detect", "autoDetect", (ctx, y, preview) => {
                     if (!preview) return this.drawAutoDetectSection(ctx, y);
-                    return 100;
+                    return 135;
                 });
 
                 collapsibleSection("Presets", "presets", (ctx, y, preview) => {
@@ -987,6 +988,17 @@ class ResolutionMasterCanvas {
         this.controls.autoResizeCheckbox = { x: autoCheckboxX, y: currentY + 5, w: checkboxWidth, h: 18 };
         this.drawCheckbox(ctx, autoCheckboxX, currentY + 5, checkboxWidth, props.autoResizeOnChange, this.hoverElement === 'autoResizeCheckbox');
 
+        ctx.fillStyle = "#ddd";
+        ctx.font = "11px Arial";
+        ctx.textAlign = "left";
+        ctx.fillText("Auto", autoCheckboxX + checkboxWidth + 4, currentY + 14);
+        currentY += 35;
+
+        this.controls.autoSnapBtn = { x: autoFitStartX, y: currentY, w: autoFitWidth, h: 28 };
+        this.drawButton(ctx, autoFitStartX, currentY, autoFitWidth, 28, this.icons.snap, this.hoverElement === 'autoSnapBtn', false, "Auto-Snap");
+        this.controls.autoSnapCheckbox = { x: autoCheckboxX, y: currentY + 5, w: checkboxWidth, h: 18 };
+        this.drawCheckbox(ctx, autoCheckboxX, currentY + 5, checkboxWidth, props.autoSnapOnChange, this.hoverElement === 'autoSnapCheckbox');
+        
         ctx.fillStyle = "#ddd";
         ctx.font = "11px Arial";
         ctx.textAlign = "left";
@@ -1004,7 +1016,7 @@ class ResolutionMasterCanvas {
         ctx.textAlign = "left";
         ctx.fillText("Calc", autoCheckboxX + checkboxWidth + 4, currentY + 14);
 
-        return 100;
+        return 135;
     }
 
     drawPresetSection(ctx, y) {
@@ -1640,6 +1652,7 @@ class ResolutionMasterCanvas {
             megapixelsBtn: () => this.handleMegapixelsScale(),
             autoFitBtn: () => this.handleAutoFit(),
             autoResizeBtn: () => this.handleAutoResize(),
+            autoSnapBtn: () => this.handleSnap(),
             autoCalcBtn: () => this.handleAutoCalc(),
             detectedInfo: () => this.handleDetectedClick(),
             managePresetsBtn: () => this.handleManagePresets(),
@@ -1720,6 +1733,8 @@ class ResolutionMasterCanvas {
             props.autoFitOnChange = !props.autoFitOnChange;
         } else if (checkboxName === 'autoResizeCheckbox') {
             props.autoResizeOnChange = !props.autoResizeOnChange;
+        } else if (checkboxName === 'autoSnapCheckbox') {
+            props.autoSnapOnChange = !props.autoSnapOnChange;
         } else if (checkboxName === 'customCalcCheckbox') {
             props.useCustomCalc = !props.useCustomCalc;
         } else if (checkboxName === 'preserveScalingRatioCheckbox') {
@@ -2670,6 +2685,9 @@ class ResolutionMasterCanvas {
                     if (props.autoResizeOnChange) {
                         this.handleAutoResize();
                     }
+                    if (props.autoSnapOnChange) {
+                        this.handleSnap();
+                    }
                     if (props.useCustomCalc && props.selectedCategory) {
                         this.handleAutoCalc();
                     }

js/utils/ResolutionMasterConfig.js

@@ -34,6 +34,8 @@ export const tooltips = {
     autoFitCheckbox: "Automatically find and apply the best preset for the new detected image resolution",
     autoResizeBtn: "Apply scaling based on selected mode (Manual/Resolution/Megapixels)",
     autoResizeCheckbox: "Automatically apply scaling when new image is detected",
+    autoSnapBtn: "Snap current resolution to the nearest snap value",
+    autoSnapCheckbox: "Automatically snap after Auto-Resize when a new image is detected",
     detectedInfo: "Click to apply detected image resolution directly",
 
     // Preset controls