Merge branch 'main' into glary/resize-corner-e2e-tests

Move the bounding-box edge accessors from local helpers in resize.spec
into the fixture so resize tests can read 'expect.poll(node.pollWidth)'
instead of repeating the inline 'async () => (await node.boundingBox()).X'
shape. The opposite-edge anchoring test now references node-bound poll
helpers directly and the per-test edge-of factories disappear from the
spec.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/11408#discussion_r3107737141

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -1,8 +1,16 @@
+import { expect } from '@playwright/test'
 import type { Locator } from '@playwright/test'
 
+import type { CompassCorners } from '@/lib/litegraph/src/interfaces'
+
 import { TitleEditor } from '@e2e/fixtures/components/TitleEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 
+interface BoxOrigin {
+  readonly x: number
+  readonly y: number
+}
+
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
   public readonly header: Locator
@@ -60,4 +68,100 @@ export class VueNodeFixture {
   boundingBox(): ReturnType<Locator['boundingBox']> {
     return this.locator.boundingBox()
   }
+
+  /**
+   * Click the node header to select it, then return its bounding box.
+   * Throws if the node is not laid out (no bounding box) — resize and other
+   * geometry-sensitive tests cannot proceed without coordinates.
+   */
+  async selectAndGetBox(): Promise<{
+    x: number
+    y: number
+    width: number
+    height: number
+  }> {
+    await this.header.click()
+    const box = await this.boundingBox()
+    if (!box) {
+      throw new Error('Node bounding box not found after select')
+    }
+    return box
+  }
+
+  /**
+   * Assert this node's top-left origin stays within `precision` decimal
+   * places of `expected`. Wraps the polled bounding-box pattern that drift
+   * tests repeat for both axes.
+   */
+  async expectAnchoredAt(
+    expected: BoxOrigin,
+    { precision = 1 }: { precision?: number } = {}
+  ): Promise<void> {
+    await expect.poll(this.pollLeftEdge).toBeCloseTo(expected.x, precision)
+    await expect.poll(this.pollTopEdge).toBeCloseTo(expected.y, precision)
+  }
+
+  /** Poll the node's left/x edge for use with `expect.poll`. */
+  pollLeftEdge = async (): Promise<number | null> =>
+    (await this.boundingBox())?.x ?? null
+
+  /** Poll the node's top/y edge for use with `expect.poll`. */
+  pollTopEdge = async (): Promise<number | null> =>
+    (await this.boundingBox())?.y ?? null
+
+  /** Poll the node's right edge (x + width) for use with `expect.poll`. */
+  pollRightEdge = async (): Promise<number | null> => {
+    const b = await this.boundingBox()
+    return b ? b.x + b.width : null
+  }
+
+  /** Poll the node's bottom edge (y + height) for use with `expect.poll`. */
+  pollBottomEdge = async (): Promise<number | null> => {
+    const b = await this.boundingBox()
+    return b ? b.y + b.height : null
+  }
+
+  /** Poll the node's width for use with `expect.poll`. */
+  pollWidth = async (): Promise<number | null> =>
+    (await this.boundingBox())?.width ?? null
+
+  /** Poll the node's height for use with `expect.poll`. */
+  pollHeight = async (): Promise<number | null> =>
+    (await this.boundingBox())?.height ?? null
+
+  /** Locator for the resize handle at the given corner, scoped to this node. */
+  getResizeHandle(corner: CompassCorners): Locator {
+    return this.root.locator(`[data-corner="${corner}"]`)
+  }
+
+  /**
+   * Drag the resize handle at `corner` by (deltaX, deltaY) viewport pixels.
+   * Uses `hover()` to land the pointer on the handle with Playwright's
+   * actionability checks before starting the mouse sequence, which protects
+   * against occluding overlays and subpixel hit-test misses.
+   */
+  async resizeFromCorner(
+    corner: CompassCorners,
+    deltaX: number,
+    deltaY: number
+  ): Promise<void> {
+    const handle = this.getResizeHandle(corner)
+    await handle.hover()
+    const box = await handle.boundingBox()
+    if (!box) {
+      throw new Error(
+        `Resize handle for corner "${corner}" has no bounding box`
+      )
+    }
+
+    const page = this.locator.page()
+    const startX = box.x + box.width / 2
+    const startY = box.y + box.height / 2
+    await page.mouse.move(startX, startY)
+    await page.mouse.down()
+    await page.mouse.move(startX + deltaX, startY + deltaY, {
+      steps: 5
+    })
+    await page.mouse.up()
+  }
 }

browser_tests/tests/vueNodes/interactions/node/resize.spec.ts

@@ -1,56 +1,165 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
+import { MIN_NODE_WIDTH } from '@/renderer/core/layout/transform/graphRenderTransform'
+import {
+  RESIZE_HANDLES,
+  hasNorthEdge,
+  hasWestEdge
+} from '@/renderer/extensions/vueNodes/interactions/resize/resizeHandleConfig'
 
-test.describe('Vue Node Resizing', { tag: '@vue-nodes' }, () => {
-  test('should resize node without position drift after selecting', async ({
-    comfyPage
-  }) => {
-    // Get a Vue node fixture
-    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
-    const initialBox = await node.boundingBox()
-    if (!initialBox) throw new Error('Node bounding box not found')
+async function setupResizableNode(comfyPage: ComfyPage, title: string) {
+  await expect(comfyPage.vueNodes.getNodeByTitle(title)).toHaveCount(1)
+  const node = await comfyPage.vueNodes.getFixtureByTitle(title)
+  const box = await node.selectAndGetBox()
+  return { node, box }
+}
 
-    // Select the node first (this was causing the bug)
-    await node.header.click()
+test.describe(
+  'Vue Node Resizing',
+  { tag: ['@vue-nodes', '@canvas', '@node'] },
+  () => {
+    let originalMinimapVisible: boolean | undefined
 
-    // Get position after selection
-    const selectedBox = await node.boundingBox()
-    if (!selectedBox)
-      throw new Error('Node bounding box not found after select')
+    // Minimap overlays the canvas and intercepts pointer events that land in
+    // its hit area during resize drags, so disable it for this suite. Capture
+    // and restore the prior value to avoid leaking the override to other specs
+    // that run on the same user-data-dir.
+    test.beforeEach(async ({ comfyPage }) => {
+      originalMinimapVisible = await comfyPage.settings.getSetting<boolean>(
+        'Comfy.Minimap.Visible'
+      )
+      await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
+      await comfyPage.canvasOps.resetView()
+    })
 
-    // Verify position unchanged after selection
-    await expect
-      .poll(async () => (await node.boundingBox())?.x)
-      .toBeCloseTo(initialBox.x, 1)
-    await expect
-      .poll(async () => (await node.boundingBox())?.y)
-      .toBeCloseTo(initialBox.y, 1)
+    test.afterEach(async ({ comfyPage }) => {
+      if (originalMinimapVisible !== undefined) {
+        await comfyPage.settings.setSetting(
+          'Comfy.Minimap.Visible',
+          originalMinimapVisible
+        )
+      }
+    })
 
-    // Now resize from bottom-right corner
-    const resizeStartX = selectedBox.x + selectedBox.width - 5
-    const resizeStartY = selectedBox.y + selectedBox.height - 5
+    test('should resize node without position drift after selecting', async ({
+      comfyPage
+    }) => {
+      const { node, box: initialBox } = await setupResizableNode(
+        comfyPage,
+        'Load Checkpoint'
+      )
 
-    await comfyPage.page.mouse.move(resizeStartX, resizeStartY)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
-    await comfyPage.page.mouse.up()
+      await node.expectAnchoredAt(initialBox)
 
-    // Position should NOT have changed (the bug was position drift)
-    await expect
-      .poll(async () => (await node.boundingBox())?.x)
-      .toBeCloseTo(initialBox.x, 1)
-    await expect
-      .poll(async () => (await node.boundingBox())?.y)
-      .toBeCloseTo(initialBox.y, 1)
+      await node.resizeFromCorner('SE', 50, 30)
 
-    // Size should have increased
-    await expect
-      .poll(async () => (await node.boundingBox())?.width)
-      .toBeGreaterThan(initialBox.width)
-    await expect
-      .poll(async () => (await node.boundingBox())?.height)
-      .toBeGreaterThan(initialBox.height)
-  })
-})
+      await node.expectAnchoredAt(initialBox)
+
+      await expect.poll(node.pollWidth).toBeGreaterThan(initialBox.width)
+      await expect.poll(node.pollHeight).toBeGreaterThan(initialBox.height)
+    })
+
+    const cornerCases = RESIZE_HANDLES.map((h) => ({
+      corner: h.corner,
+      dragX: hasWestEdge(h.corner) ? -50 : 50,
+      dragY: hasNorthEdge(h.corner) ? -40 : 40
+    }))
+
+    test.describe('corner resize directions', () => {
+      cornerCases.forEach(({ corner, dragX, dragY }) => {
+        test(`${corner}: size increases and correct edges shift`, async ({
+          comfyPage
+        }) => {
+          const { node, box } = await setupResizableNode(comfyPage, 'KSampler')
+
+          await node.resizeFromCorner(corner, dragX, dragY)
+
+          await expect.poll(node.pollWidth).toBeGreaterThan(box.width)
+          await expect.poll(node.pollHeight).toBeGreaterThan(box.height)
+
+          if (hasWestEdge(corner)) {
+            await expect.poll(node.pollLeftEdge).toBeLessThan(box.x)
+          } else {
+            await expect.poll(node.pollLeftEdge).toBeCloseTo(box.x, 0)
+          }
+
+          if (hasNorthEdge(corner)) {
+            await expect.poll(node.pollTopEdge).toBeLessThan(box.y)
+          } else {
+            await expect.poll(node.pollTopEdge).toBeCloseTo(box.y, 0)
+          }
+        })
+      })
+    })
+
+    test.describe('opposite edge anchoring', () => {
+      cornerCases.forEach(({ corner, dragX, dragY }) => {
+        test(`${corner} resize keeps opposite corner fixed`, async ({
+          comfyPage
+        }) => {
+          const { node, box } = await setupResizableNode(comfyPage, 'KSampler')
+
+          const pollAnchorX = hasWestEdge(corner)
+            ? node.pollRightEdge
+            : node.pollLeftEdge
+          const pollAnchorY = hasNorthEdge(corner)
+            ? node.pollBottomEdge
+            : node.pollTopEdge
+
+          const anchorX = hasWestEdge(corner) ? box.x + box.width : box.x
+          const anchorY = hasNorthEdge(corner) ? box.y + box.height : box.y
+
+          await node.resizeFromCorner(corner, dragX, dragY)
+
+          await expect.poll(pollAnchorX).toBeCloseTo(anchorX, 0)
+          await expect.poll(pollAnchorY).toBeCloseTo(anchorY, 0)
+        })
+      })
+    })
+
+    test.describe('minimum size enforcement', () => {
+      test('SW resize clamps width, keeping right edge fixed', async ({
+        comfyPage
+      }) => {
+        const { node, box } = await setupResizableNode(comfyPage, 'KSampler')
+        const rightEdge = box.x + box.width
+
+        await node.resizeFromCorner('SW', box.width + 100, 0)
+
+        await expect.poll(node.pollRightEdge).toBeCloseTo(rightEdge, 0)
+        await expect.poll(node.pollWidth).toBeGreaterThanOrEqual(MIN_NODE_WIDTH)
+      })
+
+      test('NE resize clamps height at its lower bound', async ({
+        comfyPage
+      }) => {
+        const { node } = await setupResizableNode(comfyPage, 'KSampler')
+
+        // Default nodes render at content-minimum height; grow from SE so NE
+        // has room to shrink back down to the clamp.
+        await node.resizeFromCorner('SE', 0, 200)
+
+        const expandedBox = await node.boundingBox()
+        if (!expandedBox)
+          throw new Error('Node bounding box not found after SE grow')
+        const bottomEdge = expandedBox.y + expandedBox.height
+
+        // Overdrag once to hit the clamp, then again to prove further dragging
+        // does not shrink past the minimum (idempotent clamp).
+        await node.resizeFromCorner('NE', 0, expandedBox.height + 100)
+        const clampedHeight = (await node.boundingBox())?.height
+        if (clampedHeight === undefined)
+          throw new Error('Node bounding box not found after NE clamp')
+        expect(clampedHeight).toBeLessThan(expandedBox.height)
+
+        await node.resizeFromCorner('NE', 0, 200)
+
+        await expect.poll(node.pollHeight).toBeCloseTo(clampedHeight, 0)
+        await expect.poll(node.pollBottomEdge).toBeCloseTo(bottomEdge, 0)
+      })
+    })
+  }
+)

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -216,6 +216,7 @@
         v-for="handle in RESIZE_HANDLES"
         :key="handle.corner"
         role="button"
+        :data-corner="handle.corner"
         :aria-label="t(handle.i18nKey)"
         :class="
           cn(

src/renderer/extensions/vueNodes/interactions/resize/resizeHandleConfig.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+
+import type { CompassCorners } from '@/lib/litegraph/src/interfaces'
+
+import { RESIZE_HANDLES, hasNorthEdge, hasWestEdge } from './resizeHandleConfig'
+
+describe('hasWestEdge', () => {
+  it.each<[CompassCorners, boolean]>([
+    ['NW', true],
+    ['SW', true],
+    ['NE', false],
+    ['SE', false]
+  ])('corner %s -> %s', (corner, expected) => {
+    expect(hasWestEdge(corner)).toBe(expected)
+  })
+})
+
+describe('hasNorthEdge', () => {
+  it.each<[CompassCorners, boolean]>([
+    ['NW', true],
+    ['NE', true],
+    ['SW', false],
+    ['SE', false]
+  ])('corner %s -> %s', (corner, expected) => {
+    expect(hasNorthEdge(corner)).toBe(expected)
+  })
+})
+
+describe('RESIZE_HANDLES', () => {
+  it('defines exactly one entry per CompassCorners member', () => {
+    const expected = new Set<CompassCorners>(['NE', 'NW', 'SE', 'SW'])
+    const actual = new Set(RESIZE_HANDLES.map((handle) => handle.corner))
+    expect(actual).toEqual(expected)
+    expect(RESIZE_HANDLES).toHaveLength(expected.size)
+  })
+})

src/renderer/extensions/vueNodes/interactions/resize/resizeHandleConfig.ts

@@ -43,3 +43,11 @@ export const RESIZE_HANDLES: ResizeHandle[] = [
     svgTransform: 'scale(-1, -1)'
   }
 ] as const
+
+/** True for corners on the left edge of a node (SW, NW) — these move the x-origin when dragged. */
+export const hasWestEdge = (corner: CompassCorners): boolean =>
+  corner === 'SW' || corner === 'NW'
+
+/** True for corners on the top edge of a node (NE, NW) — these move the y-origin when dragged. */
+export const hasNorthEdge = (corner: CompassCorners): boolean =>
+  corner === 'NE' || corner === 'NW'

src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts

@@ -8,6 +8,10 @@ import { MIN_NODE_WIDTH } from '@/renderer/core/layout/transform/graphRenderTran
 import { useNodeSnap } from '@/renderer/extensions/vueNodes/composables/useNodeSnap'
 import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useShiftKeySync'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import {
+  hasNorthEdge,
+  hasWestEdge
+} from '@/renderer/extensions/vueNodes/interactions/resize/resizeHandleConfig'
 
 export interface ResizeCallbackPayload {
   size: Size
@@ -135,20 +139,23 @@ export function useNodeResize(
           break
       }
 
+      const isWestCorner = hasWestEdge(activeCorner)
+      const isNorthCorner = hasNorthEdge(activeCorner)
+
       // Apply snap-to-grid
       if (shouldSnap(moveEvent)) {
         // Snap position first for N/W corners, then compensate size
-        if (activeCorner.includes('N') || activeCorner.includes('W')) {
+        if (isNorthCorner || isWestCorner) {
           const originalX = newX
           const originalY = newY
           const snapped = applySnapToPosition({ x: newX, y: newY })
           newX = snapped.x
           newY = snapped.y
 
-          if (activeCorner.includes('N')) {
+          if (isNorthCorner) {
             newHeight += originalY - newY
           }
-          if (activeCorner.includes('W')) {
+          if (isWestCorner) {
             newWidth += originalX - newX
           }
         }
@@ -166,7 +173,7 @@ export function useNodeResize(
         parseFloat(nodeElement.style.getPropertyValue('min-width') || '0') ||
         MIN_NODE_WIDTH
       if (newWidth < minWidth) {
-        if (activeCorner.includes('W')) {
+        if (isWestCorner) {
           newX =
             resizeStartPosition.value.x + resizeStartSize.value.width - minWidth
         }
@@ -179,7 +186,7 @@ export function useNodeResize(
       // a responsive breakpoint.
       const minContentHeight = measureMinContentHeight(newWidth)
       if (newHeight < minContentHeight) {
-        if (activeCorner.includes('N')) {
+        if (isNorthCorner) {
           newY =
             resizeStartPosition.value.y +
             resizeStartSize.value.height -