diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 48373ff3..e04e8361 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -730,34 +730,6 @@ export class ComfyApp { } } - const calculateGrid = (w, h, n) => { - let columns, rows, cellsize - - if (w > h) { - cellsize = h - columns = Math.ceil(w / cellsize) - rows = Math.ceil(n / columns) - } else { - cellsize = w - rows = Math.ceil(h / cellsize) - columns = Math.ceil(n / rows) - } - - while (columns * rows < n) { - cellsize++ - if (w >= h) { - columns = Math.ceil(w / cellsize) - rows = Math.ceil(n / columns) - } else { - rows = Math.ceil(h / cellsize) - columns = Math.ceil(n / rows) - } - } - - const cell_size = Math.min(w / columns, h / rows) - return { cell_size, columns, rows } - } - const is_all_same_aspect_ratio = (imgs) => { // assume: imgs.length >= 2 let ratio = imgs[0].naturalWidth / imgs[0].naturalHeight @@ -838,17 +810,23 @@ export class ComfyApp { if (!compact_mode) { // use rectangle cell style and border line cell_padding = 2 - const { cell_size, columns, rows } = calculateGrid( - dw, - dh, - numImages + // Prevent infinite canvas2d scale-up + const largestDimension = this.imgs.reduce( + (acc, current) => + Math.max(acc, current.naturalWidth, current.naturalHeight), + 0 ) - cols = columns - - cellWidth = cell_size - cellHeight = cell_size - shiftX = (dw - cell_size * cols) / 2 - shiftY = (dh - cell_size * rows) / 2 + top + const fakeImgs = [] + fakeImgs.length = this.imgs.length + fakeImgs[0] = { + naturalWidth: largestDimension, + naturalHeight: largestDimension + } + ;({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid( + fakeImgs, + dw, + dh + )) } else { cell_padding = 0 ;({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid(