Add Auto-Resize feature and UI fixes

Implemented automatic image resizing based on selected scaling mode (Manual/Resolution/Megapixels) with toggle option; fixed section overflow and manual scale reset.

Author: Azornes

README.md

@@ -137,8 +137,22 @@ Extensive preset library organized by use case:
 
 ### Auto-Detect Section
 - **Auto-detect Toggle**: ON/OFF switch for automatic dimension detection from connected images
+  - Monitors input connection every second
+  - Updates dimensions when new image is detected
+  - Shows detected resolution in green text
 - **🎯 Auto-fit Button**: Finds best matching preset for current dimensions
-- **Auto Checkbox**: When checked, automatically applies Auto-fit when new image is detected
+  - Analyzes both aspect ratio and total pixels
+  - Checks both normal and flipped orientations
+  - Applies category-specific scaling when Custom Calc is enabled
+- **Auto Checkbox**: Enable automatic fitting when dimensions change
+  - Located next to Auto-Fit button
+  - Only active when category is selected and image detected
+- **📐 Auto-Resize Button**: Applies scaling based on selected mode (Manual/Resolution/Megapixels)
+  - Integrates with active scaling mode from Scaling section
+  - Maintains manual scale value without reset to 1.0x
+- **Auto Checkbox**: Automatically apply scaling when new image is detected
+  - Works in sequence after Auto-fit (if enabled)
+  - Applies chosen scaling mode to detected dimensions
 - **Detected Text (green)**: Click to apply the detected image's original dimensions
 - **⚡ Auto-calc Button**: Applies model-specific calculations to current dimensions
 - **Calc Checkbox**: Enables automatic model-specific optimizations

js/ResolutionMaster.js

@@ -94,7 +94,7 @@ class ResolutionMasterCanvas {
         const sectionHeights = {
             actions: this.collapsedSections?.actions ? 25 : 55,      // 25 for header, +30 for content
             scaling: this.collapsedSections?.scaling ? 25 : 130,    // 25 for header, +105 for content
-            autoDetect: this.collapsedSections?.autoDetect ? 25 : 90, // 25 for header, +65 for content
+            autoDetect: this.collapsedSections?.autoDetect ? 25 : 125, // 25 for header, +100 for content (3 rows)
             presets: this.collapsedSections?.presets ? 25 : 55       // 25 for header, +30 for content
         };
 
@@ -144,6 +144,7 @@ class ResolutionMasterCanvas {
             rescaleValue: 1.0,
             autoDetect: false,
             autoFitOnChange: false,
+            autoResizeOnChange: false,
             selectedCategory: "Standard",
             selectedPreset: null,
             useCustomCalc: false,
@@ -340,7 +341,7 @@ class ResolutionMasterCanvas {
 
             collapsibleSection("Auto-Detect", "autoDetect", (ctx, y, preview) => {
                 if (!preview) return this.drawAutoDetectSection(ctx, y);
-                return 65;
+                return 100;
             });
 
             collapsibleSection("Presets", "presets", (ctx, y, preview) => {
@@ -790,7 +791,7 @@ class ResolutionMasterCanvas {
         ctx.textAlign = "left";
         ctx.fillText("Auto", autoCheckboxX + checkboxWidth + 4, currentY + 14);
 
-        // Drugi rząd: Detected info (po lewej) + Auto-calc button + Calc checkbox (idealnie pod Auto-fit)
+        // Drugi rząd: Detected info (po lewej) + Auto-Resize button + Auto checkbox
         currentY += 35;
 
         // Klikalny napis "Detected" wycentrowany pod switchem Auto-detect
@@ -822,12 +823,27 @@ class ResolutionMasterCanvas {
             ctx.fillText(detectedText, textX, currentY + 14);
         }
 
-        // Auto-calc button idealnie pod Auto-fit button
+        // Auto-Resize button pod Auto-fit button
+        this.controls.autoResizeBtn = { x: autoFitStartX, y: currentY, w: autoFitWidth, h: 28 };
+        this.drawButton(ctx, autoFitStartX, currentY, autoFitWidth, 28, "📐 Auto-Resize", this.hoverElement === 'autoResizeBtn');
+        
+        // Auto-Resize checkbox pod Auto checkbox
+        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);
+        
+        // Trzeci rząd: Auto-calc button + Calc checkbox
+        currentY += 35;
+        
         this.controls.autoCalcBtn = { x: autoFitStartX, y: currentY, w: autoFitWidth, h: 28 };
         const calcEnabled = props.useCustomCalc && props.selectedCategory;
         this.drawButton(ctx, autoFitStartX, currentY, autoFitWidth, 28, "⚡ Auto-calc", this.hoverElement === 'autoCalcBtn', !calcEnabled);
 
-        // Calc checkbox idealnie pod Auto checkbox
+        // Calc checkbox
         this.controls.customCalcCheckbox = { x: autoCheckboxX, y: currentY + 5, w: checkboxWidth, h: 18 };
         this.drawCheckbox(ctx, autoCheckboxX, currentY + 5, checkboxWidth, props.useCustomCalc, this.hoverElement === 'customCalcCheckbox');
 
@@ -836,7 +852,7 @@ class ResolutionMasterCanvas {
         ctx.textAlign = "left";
         ctx.fillText("Calc", autoCheckboxX + checkboxWidth + 4, currentY + 14);
 
-        return 65;
+        return 100;
     }
 
     drawPresetSection(ctx, y) {
@@ -1468,6 +1484,7 @@ class ResolutionMasterCanvas {
             resolutionBtn: () => this.handleResolutionScale(),
             megapixelsBtn: () => this.handleMegapixelsScale(),
             autoFitBtn: () => this.handleAutoFit(),
+            autoResizeBtn: () => this.handleAutoResize(),
             autoCalcBtn: () => this.handleAutoCalc(),
             detectedInfo: () => this.handleDetectedClick()
         };
@@ -1490,6 +1507,8 @@ class ResolutionMasterCanvas {
         const props = this.node.properties;
         if (checkboxName === 'autoFitCheckbox' && props.selectedCategory) {
             props.autoFitOnChange = !props.autoFitOnChange;
+        } else if (checkboxName === 'autoResizeCheckbox') {
+            props.autoResizeOnChange = !props.autoResizeOnChange;
         } else if (checkboxName === 'customCalcCheckbox') {
             props.useCustomCalc = !props.useCustomCalc;
         }
@@ -1878,10 +1897,7 @@ class ResolutionMasterCanvas {
     }
 
     handleScale() {
-        this.applyScaling(
-            () => this.node.properties.upscaleValue,
-            () => { this.node.properties.upscaleValue = 1.0; }
-        );
+        this.applyScaling(() => this.node.properties.upscaleValue);
     }
 
     handleResolutionScale() {
@@ -1980,6 +1996,28 @@ class ResolutionMasterCanvas {
         log.debug(`Auto-calc applied: ${currentWidth}x${currentHeight} → ${result.width}x${result.height} (${props.selectedCategory})`);
     }
 
+    handleAutoResize() {
+        // Funkcja Auto-Resize - stosuje skalowanie zgodnie z zaznaczonym radio button
+        const props = this.node.properties;
+        
+        if (!this.widthWidget || !this.heightWidget) {
+            log.debug("Auto-Resize: Width or height widget not found");
+            return;
+        }
+        
+        // Sprawdź który tryb skalowania jest zaznaczony i zastosuj odpowiednie skalowanie
+        if (props.rescaleMode === 'manual') {
+            this.handleScale();
+            log.debug(`Auto-Resize: Applied manual scaling with factor ${props.upscaleValue}`);
+        } else if (props.rescaleMode === 'resolution') {
+            this.handleResolutionScale();
+            log.debug(`Auto-Resize: Applied resolution scaling to ${props.targetResolution}p`);
+        } else if (props.rescaleMode === 'megapixels') {
+            this.handleMegapixelsScale();
+            log.debug(`Auto-Resize: Applied megapixels scaling to ${props.targetMegapixels}MP`);
+        }
+    }
+    
     handleDetectedClick() {
         // Funkcja obsługująca kliknięcie na napis "Detected" - nakłada oryginalne wymiary wykrytego zdjęcia
         if (!this.detectedDimensions) {
@@ -2363,6 +2401,11 @@ class ResolutionMasterCanvas {
                         this.setDimensions(this.detectedDimensions.width, this.detectedDimensions.height);
                     }
 
+                    // Auto-Resize: Jeśli autoResizeOnChange jest włączone, zastosuj automatyczne skalowanie
+                    if (props.autoResizeOnChange) {
+                        this.handleAutoResize();
+                    }
+                    
                     app.graph.setDirtyCanvas(true);
                 }
             }

js/utils/ResolutionMasterConfig.js

@@ -29,6 +29,8 @@ export const tooltips = {
     autoDetectToggle: "Automatically detect resolution from connected image input",
     autoFitBtn: "Find and apply best preset match for current resolution",
     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",
     detectedInfo: "Click to apply detected image resolution directly",
 
     // Preset controls

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "Comfyui-Resolution-Master"
 description = "ResolutionMaster is for total control over resolution and aspect ratio. It provides an intuitive interface with an interactive canvas, advanced scaling options, extensive presets (SDXL, Flux, WAN), and model-specific optimizations for high-quality AI image generation."
-version = "1.4.6"
+version = "1.4.7"
 license = { text = "MIT License" }
 
 [project.urls]