Fix "Output Area Size" button behavior using new sizing method

Refactored the "Output Area Size" button to use the new setOutputAreaSize method:

Correctly sets output area size and position based on current system logic (custom shape, extensions, outputAreaBounds)

Fully functional across all editor modes

New resizing logic:

Operates relative to the current center of the output area

Output area expands or contracts around its center without repositioning

Ensures center remains unchanged as expected

This fix provides precise control over layout dimensions and aligns with user expectations across workflows.

js/Canvas.js

@@ -328,6 +328,36 @@ export class Canvas {
         this.maskTool.updateMaskCanvasForOutputArea();
         return result;
     }
+    /**
+     * Ustawia nowy rozmiar output area zgodnie z nowym systemem (resetuje rozszerzenia, pozycję, rozmiar)
+     */
+    setOutputAreaSize(width, height) {
+        // Reset rozszerzeń
+        this.outputAreaExtensions = { top: 0, bottom: 0, left: 0, right: 0 };
+        this.outputAreaExtensionEnabled = false;
+        this.lastOutputAreaExtensions = { top: 0, bottom: 0, left: 0, right: 0 };
+        // Oblicz środek obecnego output area
+        const prevBounds = this.outputAreaBounds;
+        const centerX = prevBounds.x + prevBounds.width / 2;
+        const centerY = prevBounds.y + prevBounds.height / 2;
+        // Nowa pozycja lewego górnego rogu, by środek pozostał w miejscu
+        const newX = centerX - width / 2;
+        const newY = centerY - height / 2;
+        // Ustaw nowy rozmiar bazowy i pozycję
+        this.originalCanvasSize = { width, height };
+        this.originalOutputAreaPosition = { x: newX, y: newY };
+        // Ustaw outputAreaBounds na nowy rozmiar i pozycję
+        this.outputAreaBounds = {
+            x: newX,
+            y: newY,
+            width,
+            height
+        };
+        // Zaktualizuj rozmiar przez istniejącą metodę (ustawia maskę, itp.)
+        this.updateOutputAreaSize(width, height, true);
+        this.render();
+        this.saveState();
+    }
     /**
      * Eksportuje spłaszczony canvas jako blob
      */

js/CanvasView.js

@@ -262,7 +262,7 @@ async function createCanvasWidget(node, widget, app) {
                             const heightInput = document.getElementById('canvas-height');
                             const width = parseInt(widthInput.value) || canvas.width;
                             const height = parseInt(heightInput.value) || canvas.height;
-                            canvas.updateOutputAreaSize(width, height);
+                            canvas.setOutputAreaSize(width, height);
                             document.body.removeChild(dialog);
                         };
                         document.getElementById('cancel-size').onclick = () => {

src/Canvas.ts

@@ -428,6 +428,43 @@ export class Canvas {
         return result;
     }
 
+    /**
+     * Ustawia nowy rozmiar output area zgodnie z nowym systemem (resetuje rozszerzenia, pozycję, rozmiar)
+     */
+    setOutputAreaSize(width: number, height: number) {
+        // Reset rozszerzeń
+        this.outputAreaExtensions = { top: 0, bottom: 0, left: 0, right: 0 };
+        this.outputAreaExtensionEnabled = false;
+        this.lastOutputAreaExtensions = { top: 0, bottom: 0, left: 0, right: 0 };
+
+        // Oblicz środek obecnego output area
+        const prevBounds = this.outputAreaBounds;
+        const centerX = prevBounds.x + prevBounds.width / 2;
+        const centerY = prevBounds.y + prevBounds.height / 2;
+
+        // Nowa pozycja lewego górnego rogu, by środek pozostał w miejscu
+        const newX = centerX - width / 2;
+        const newY = centerY - height / 2;
+
+        // Ustaw nowy rozmiar bazowy i pozycję
+        this.originalCanvasSize = { width, height };
+        this.originalOutputAreaPosition = { x: newX, y: newY };
+
+        // Ustaw outputAreaBounds na nowy rozmiar i pozycję
+        this.outputAreaBounds = {
+            x: newX,
+            y: newY,
+            width,
+            height
+        };
+
+        // Zaktualizuj rozmiar przez istniejącą metodę (ustawia maskę, itp.)
+        this.updateOutputAreaSize(width, height, true);
+
+        this.render();
+        this.saveState();
+    }
+
     /**
      * Eksportuje spłaszczony canvas jako blob
      */

src/CanvasView.ts

@@ -293,9 +293,8 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                             const heightInput = document.getElementById('canvas-height') as HTMLInputElement;
                             const width = parseInt(widthInput.value) || canvas.width;
                             const height = parseInt(heightInput.value) || canvas.height;
-                            canvas.updateOutputAreaSize(width, height);
+                            canvas.setOutputAreaSize(width, height);
                             document.body.removeChild(dialog);
-
                         };
 
                         (document.getElementById('cancel-size') as HTMLButtonElement).onclick = () => {