From fcb5565a28ea221ba21e1f317449684da4a02992 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Wed, 30 Jul 2025 11:17:48 +0200
Subject: [PATCH] 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      | 30 ++++++++++++++++++++++++++++++
 js/CanvasView.js  |  2 +-
 src/Canvas.ts     | 37 +++++++++++++++++++++++++++++++++++++
 src/CanvasView.ts |  3 +--
 4 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/js/Canvas.js b/js/Canvas.js
index f8342f6..7f4c847 100644
--- a/js/Canvas.js
+++ b/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
      */
diff --git a/js/CanvasView.js b/js/CanvasView.js
index 29e939b..f50935d 100644
--- a/js/CanvasView.js
+++ b/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 = () => {
diff --git a/src/Canvas.ts b/src/Canvas.ts
index d854a40..405b483 100644
--- a/src/Canvas.ts
+++ b/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
      */
diff --git a/src/CanvasView.ts b/src/CanvasView.ts
index f8cb4de..f340c50 100644
--- a/src/CanvasView.ts
+++ b/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 = () => {