feat: snap group borders to the grid when fitting to nodes (#15070)

## Summary

Fitting a group to its nodes now leaves all four group borders on the
grid when snap-to-grid is enabled, instead of landing at arbitrary
sub-grid offsets.

## Changes

- **What**: `LGraphGroup.resizeTo` expands the fitted bounds out to the
nearest grid lines when `LiteGraph.alwaysSnapToGrid` is set. The
expansion lives in a new pure helper, `expandRectToGrid` in
`measure.ts`, alongside `snapPoint`.

## Review Focus

The rect is only ever grown, never shrunk — left/top floor, right/bottom
ceil — so the requested padding is never eaten and nothing that was
inside the group before the call ends up outside it. Rounding to nearest
would have been closer to `snapPoint`'s existing behaviour but can pull
a border inside the padding it just added.

Gated on `alwaysSnapToGrid` rather than on `getSnapToGridSize()` alone:
that getter returns `CANVAS_GRID_SIZE` regardless of the setting, so
using it by itself would snap groups for users who have snap-to-grid
switched off.

Applies to every fit path, since all of them funnel through `resizeTo` —
context menu, more-options menu, `useCoreCommands`, and `useFrameNodes`.

Fixes #1185

Author: kevinmastascusa

src/lib/litegraph/src/LGraphGroup.test.ts

@@ -1,7 +1,8 @@
-import { describe, expect, vi } from 'vitest'
+import { afterEach, describe, expect, vi } from 'vitest'
 
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import { LGraph, LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import { LGraph, LGraphGroup, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { containsRect } from '@/lib/litegraph/src/measure'
 import * as colorUtil from '@/utils/colorUtil'
 
 import { test } from './__fixtures__/testExtensions'
@@ -105,6 +106,49 @@ describe('LGraphGroup', () => {
     })
   })
 
+  describe('resizeTo', () => {
+    const alwaysSnapToGrid = LiteGraph.alwaysSnapToGrid
+    const gridSize = LiteGraph.CANVAS_GRID_SIZE
+
+    afterEach(() => {
+      LiteGraph.alwaysSnapToGrid = alwaysSnapToGrid
+      LiteGraph.CANVAS_GRID_SIZE = gridSize
+    })
+
+    function createGroupFittedToContent() {
+      const graph = new LGraph()
+      const group = new LGraphGroup('group')
+      graph.add(group)
+
+      const content = new LGraphGroup('content')
+      content.pos = [103, 207]
+      content.size = [140, 80]
+
+      group.resizeTo([content], 10)
+      return { group, content }
+    }
+
+    test('fits the group around its contents with padding', () => {
+      LiteGraph.alwaysSnapToGrid = false
+      const { group } = createGroupFittedToContent()
+
+      expect([...group.pos]).toEqual([93, 197 - group.titleHeight])
+      expect([...group.size]).toEqual([160, 100 + group.titleHeight])
+    })
+
+    test('expands every border to the grid when always snapping', () => {
+      LiteGraph.alwaysSnapToGrid = true
+      LiteGraph.CANVAS_GRID_SIZE = 10
+      const { group, content } = createGroupFittedToContent()
+
+      const [x, y, width, height] = group.boundingRect
+      expect([x, y, x + width, y + height].map((edge) => edge % 10)).toEqual([
+        0, 0, 0, 0
+      ])
+      expect(containsRect(group.boundingRect, content.boundingRect)).toBe(true)
+    })
+  })
+
   describe('draw', () => {
     test('lightens the title text for a very dark background', () => {
       const group = new LGraphGroup('Group')

src/lib/litegraph/src/LGraphGroup.ts

@@ -19,6 +19,7 @@ import {
   containsCentre,
   containsRect,
   createBounds,
+  expandRectToGrid,
   isInRect,
   isInRectangle,
   isPointInRect,
@@ -325,6 +326,9 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
 
   /**
    * Resizes and moves the group to neatly fit all given {@link objects}.
+   *
+   * When {@link LiteGraph.alwaysSnapToGrid} is enabled, the group is then
+   * expanded so that all four of its borders line up with the grid.
    * @param objects All objects that should be inside the group
    * @param padding Value in graph units to add to all sides of the group.  Default: 10
    */
@@ -336,6 +340,11 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
     this.pos[1] = boundingBox[1] - this.titleHeight
     this.size[0] = boundingBox[2]
     this.size[1] = boundingBox[3] + this.titleHeight
+
+    const snapTo = LiteGraph.alwaysSnapToGrid
+      ? this.graph?.getSnapToGridSize()
+      : undefined
+    if (snapTo) expandRectToGrid(this._bounding, snapTo)
   }
 
   /**

src/lib/litegraph/src/measure.test.ts

@@ -9,6 +9,7 @@ import {
   createBounds,
   dist2,
   distance,
+  expandRectToGrid,
   findPointOnCurve,
   getOrientation,
   isInRect,
@@ -144,6 +145,24 @@ test('snapPoint correctly snaps points to grid using ceil', ({ expect }) => {
   expect(point3).toEqual([20, -10])
 })
 
+test('expandRectToGrid grows every edge out to the grid', ({ expect }) => {
+  const rect: Rect = [12.3, 18.7, 20, 20]
+  expect(expandRectToGrid(rect, 10)).toBe(true)
+  expect(rect).toEqual([10, 10, 30, 30])
+
+  const alreadyAligned: Rect = [10, 20, 30, 40]
+  expect(expandRectToGrid(alreadyAligned, 10)).toBe(true)
+  expect(alreadyAligned).toEqual([10, 20, 30, 40])
+
+  const negative: Rect = [-12.3, -18.7, 5, 5]
+  expect(expandRectToGrid(negative, 10)).toBe(true)
+  expect(negative).toEqual([-20, -20, 20, 10])
+
+  const unsnapped: Rect = [12.3, 18.7, 20, 20]
+  expect(expandRectToGrid(unsnapped, 0)).toBe(false)
+  expect(unsnapped).toEqual([12.3, 18.7, 20, 20])
+})
+
 test('snapPoint correctly snaps points to grid using floor', ({ expect }) => {
   const point: Point = [12.3, 18.7]
   expect(snapPoint(point, 5, 'floor')).toBe(true)

src/lib/litegraph/src/measure.ts

@@ -363,6 +363,31 @@ export function snapPoint(
   return true
 }
 
+/**
+ * Expands a {@link Rect} outwards so that all four edges lie on a grid of size
+ * {@link snapTo}.
+ *
+ * Unlike {@link snapPoint}, the rect is only ever grown, never shrunk, so
+ * anything it contained before the call is still contained afterwards.
+ * @param rect The rect that will be expanded, modified in place
+ * @param snapTo The grid size to expand out to (multiples thereof)
+ * @returns `true` if snapTo is truthy, otherwise `false`
+ */
+export function expandRectToGrid(rect: Rect, snapTo: number): boolean {
+  if (!snapTo) return false
+
+  const right = snapTo * Math.ceil((rect[0] + rect[2]) / snapTo)
+  const bottom = snapTo * Math.ceil((rect[1] + rect[3]) / snapTo)
+  const left = snapTo * Math.floor(rect[0] / snapTo)
+  const top = snapTo * Math.floor(rect[1] / snapTo)
+
+  rect[0] = left
+  rect[1] = top
+  rect[2] = right - left
+  rect[3] = bottom - top
+  return true
+}
+
 /**
  * Aligns a {@link Rect} relative to the edges or centre of a {@link container} rectangle.
  *