mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-21 20:52:12 -03:00
Fix canvas sizing bug by separating display and output dimensions
The canvas was getting corrupted to a small strip because of confusion between two different dimension types: - Output area dimensions (logical working area, e.g. 512x512) - Display canvas dimensions (actual pixels shown on screen) Root cause: Setting canvas.width/height attributes to match output area while also using CSS width:100%/height:100% created conflicts. When zooming or reloading, wrong dimensions would be read and saved. Fix: Remove canvas element width/height attribute assignments. Let the render loop control display size based on clientWidth/clientHeight. Keep output area dimensions separate. This prevents the canvas from being saved with corrupted tiny dimensions and fixes the issue where canvas would only show in a small strip after zooming or reloading workflows.
This commit is contained in:
@@ -443,8 +443,8 @@ export class Canvas {
|
|||||||
* Inicjalizuje podstawowe właściwości canvas
|
* Inicjalizuje podstawowe właściwości canvas
|
||||||
*/
|
*/
|
||||||
initCanvas() {
|
initCanvas() {
|
||||||
this.canvas.width = this.width;
|
// Don't set canvas.width/height here - let the render loop handle it based on clientWidth/clientHeight
|
||||||
this.canvas.height = this.height;
|
// this.width and this.height are for the OUTPUT AREA, not the display canvas
|
||||||
this.canvas.style.border = '1px solid black';
|
this.canvas.style.border = '1px solid black';
|
||||||
this.canvas.style.maxWidth = '100%';
|
this.canvas.style.maxWidth = '100%';
|
||||||
this.canvas.style.backgroundColor = '#606060';
|
this.canvas.style.backgroundColor = '#606060';
|
||||||
|
|||||||
@@ -1100,8 +1100,8 @@ export class CanvasLayers {
|
|||||||
this.canvas.width = width;
|
this.canvas.width = width;
|
||||||
this.canvas.height = height;
|
this.canvas.height = height;
|
||||||
this.canvas.maskTool.resize(width, height);
|
this.canvas.maskTool.resize(width, height);
|
||||||
this.canvas.canvas.width = width;
|
// Don't set canvas.width/height - the render loop will handle display size
|
||||||
this.canvas.canvas.height = height;
|
// this.canvas.width/height are for OUTPUT AREA dimensions, not display canvas
|
||||||
this.canvas.render();
|
this.canvas.render();
|
||||||
if (saveHistory) {
|
if (saveHistory) {
|
||||||
this.canvas.canvasState.saveStateToDB();
|
this.canvas.canvasState.saveStateToDB();
|
||||||
|
|||||||
@@ -578,8 +578,8 @@ export class Canvas {
|
|||||||
* Inicjalizuje podstawowe właściwości canvas
|
* Inicjalizuje podstawowe właściwości canvas
|
||||||
*/
|
*/
|
||||||
initCanvas() {
|
initCanvas() {
|
||||||
this.canvas.width = this.width;
|
// Don't set canvas.width/height here - let the render loop handle it based on clientWidth/clientHeight
|
||||||
this.canvas.height = this.height;
|
// this.width and this.height are for the OUTPUT AREA, not the display canvas
|
||||||
this.canvas.style.border = '1px solid black';
|
this.canvas.style.border = '1px solid black';
|
||||||
this.canvas.style.maxWidth = '100%';
|
this.canvas.style.maxWidth = '100%';
|
||||||
this.canvas.style.backgroundColor = '#606060';
|
this.canvas.style.backgroundColor = '#606060';
|
||||||
|
|||||||
@@ -1263,8 +1263,8 @@ export class CanvasLayers {
|
|||||||
this.canvas.height = height;
|
this.canvas.height = height;
|
||||||
this.canvas.maskTool.resize(width, height);
|
this.canvas.maskTool.resize(width, height);
|
||||||
|
|
||||||
this.canvas.canvas.width = width;
|
// Don't set canvas.width/height - the render loop will handle display size
|
||||||
this.canvas.canvas.height = height;
|
// this.canvas.width/height are for OUTPUT AREA dimensions, not display canvas
|
||||||
|
|
||||||
this.canvas.render();
|
this.canvas.render();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user