ImageTransformKJ: fix preview node sizing & grid alignment

[Nekodificador]

Hey Kijai — a bundle of preview/UI fixes for the new Image Transform KJ node. Everything is in web/js/image_transform.js, no Python touched. Several of these are generic patterns for any DOM-widget node that previews an image/canvas, so I've written them up in case they're useful for your other nodes too.

What was wrong & how it's fixed

1. Node grew enormous when loading an image
On a fresh image, load called fitNodeToImage(false) (exact resize → the node jumped to the image's pixel size). Now it keeps the current width and only fits the height to the image (fitNodeToImage(true, true)): the image scales to the node, the node never widens to the image.

2. Resize cropped the preview or left empty padding
The DOM widget only reported getMinHeight, so LiteGraph could give it more space (padding) or less (crop). Now the node height is locked to the canvas: getMinHeight == getMaxHeight == getHeight, plus a computeSize override and an onResize height-lock, so vertical drags always snap to the exact content height. It also shrinks when you switch to a smaller-ratio image instead of keeping the old margin.

3. Min width didn't hold in Vue Nodes mode
Worth flagging the cross-renderer gotcha: the canvas renderer honours computeSize()[0] as the min width, but Vue Nodes mode (useNodeResize) ignores computeSize and reads the node element's inline min-width. So the min width is set both ways — via computeSize for canvas, and el.style.minWidth on [data-node-id] for Vue.

4. Toolbar clipped / vanished

• Added flex-wrap so the toolbar flows to a 2nd row when narrow, and measure its height at runtime (ResizeObserver) instead of hardcoding it.
• mousedown did canvasEl.focus(), which auto-scrolled the overflow wrapper and hid the toolbar; fixed with focus({ preventScroll: true }).

5. Preview clipped a few px at the bottom (ratio-dependent)
This one is a LiteGraph layout quirk — the canvas-mode DOM-widget row gets reserved a few px short of the canvas (rounding/timing), and it also shows up on other canvas-preview nodes. Two parts: the wrapper uses overflow:visible so the canvas is never clipped, and the reserved height is based on the canvas's real offsetHeight (not a (width-30)*ratio estimate, whose rounding error scales with the aspect ratio and gave a different bottom margin per image). A small constant safety margin keeps the node border just past the canvas. The _syncLayout ResizeObserver re-locks the height once the canvas has rendered, so the first load looks the same as after a manual resize.

6. Grid overlay misaligned from its own snap with extra padding
With pad-first extra padding (pad_color/pad_edge), the snap (getCanvasScale) works in padded image pixels but getGridParams used unpadded dims, so the drawn cells took the image ratio (non-square) while the snap stayed square. getGridParams now adds the same pad-first padding, so cells stay square and aligned (keeps grid multiples correct for model-friendly crop sizes).

Testing

Manually verified in ComfyUI (canvas and Vue Nodes renderers): fresh load, switching between portrait/landscape images, resizing from every corner, narrow-width toolbar wrap, drawing/moving bboxes, and grid + extra-padding alignment. Export output is unchanged — these are preview-only fixes.