ComfyUI_frontend/browser_tests/tests/nodeGhostPlacement.spec.ts

import {
  comfyExpect as expect,
  comfyPageFixture as test
} from '@e2e/fixtures/ComfyPage'

type ComfyPage = Parameters<Parameters<typeof test>[2]>[0]['comfyPage']

async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', enabled)
  if (enabled) {
    await comfyPage.vueNodes.waitForNodes()
  }
}

async function addGhostAtCenter(comfyPage: ComfyPage) {
  await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
  await comfyPage.nextFrame()

  const viewport = comfyPage.page.viewportSize()!
  const centerX = Math.round(viewport.width / 2)
  const centerY = Math.round(viewport.height / 2)

  await comfyPage.page.mouse.move(centerX, centerY)
  await comfyPage.nextFrame()

  const nodeId = await comfyPage.page.evaluate(
    ([clientX, clientY]) => {
      const node = window.LiteGraph!.createNode('VAEDecode')!
      const event = new MouseEvent('click', { clientX, clientY })
      window.app!.graph.add(node, { ghost: true, dragEvent: event })
      return node.id
    },
    [centerX, centerY] as const
  )
  await comfyPage.nextFrame()

  return { nodeId, centerX, centerY }
}

function getNodeById(comfyPage: ComfyPage, nodeId: number | string) {
  return comfyPage.page.evaluate((id) => {
    const node = window.app!.graph.getNodeById(id)
    if (!node) return null
    return { ghost: !!node.flags.ghost }
  }, nodeId)
}

for (const mode of ['litegraph', 'vue'] as const) {
  test.describe(`Ghost node placement (${mode} mode)`, () => {
    test.beforeEach(async ({ comfyPage }) => {
      await setVueMode(comfyPage, mode === 'vue')
    })

    test('positions ghost node at cursor', async ({ comfyPage }) => {
      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
      await comfyPage.nextFrame()

      const viewport = comfyPage.page.viewportSize()!
      const centerX = Math.round(viewport.width / 2)
      const centerY = Math.round(viewport.height / 2)

      await comfyPage.page.mouse.move(centerX, centerY)
      await comfyPage.nextFrame()

      const result = await comfyPage.page.evaluate(
        ([clientX, clientY]) => {
          const node = window.LiteGraph!.createNode('VAEDecode')!
          const event = new MouseEvent('click', { clientX, clientY })
          window.app!.graph.add(node, { ghost: true, dragEvent: event })

          const canvas = window.app!.canvas
          const rect = canvas.canvas.getBoundingClientRect()
          const cursorCanvasX =
            (clientX - rect.left) / canvas.ds.scale - canvas.ds.offset[0]
          const cursorCanvasY =
            (clientY - rect.top) / canvas.ds.scale - canvas.ds.offset[1]

          return {
            diffX: node.pos[0] + node.size[0] / 2 - cursorCanvasX,
            diffY: node.pos[1] - 10 - cursorCanvasY
          }
        },
        [centerX, centerY] as const
      )
      await comfyPage.nextFrame()

      expect(Math.abs(result.diffX)).toBeLessThan(5)
      expect(Math.abs(result.diffY)).toBeLessThan(5)
    })

    test('left-click confirms ghost placement', async ({ comfyPage }) => {
      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)

      const before = await getNodeById(comfyPage, nodeId)
      expect(before).not.toBeNull()
      expect(before!.ghost).toBe(true)

      await comfyPage.page.mouse.click(centerX, centerY)
      await comfyPage.nextFrame()

      const after = await getNodeById(comfyPage, nodeId)
      expect(after).not.toBeNull()
      expect(after!.ghost).toBe(false)
    })

    test('Escape cancels ghost placement', async ({ comfyPage }) => {
      const { nodeId } = await addGhostAtCenter(comfyPage)

      const before = await getNodeById(comfyPage, nodeId)
      expect(before).not.toBeNull()
      expect(before!.ghost).toBe(true)

      await comfyPage.page.keyboard.press('Escape')
      await comfyPage.nextFrame()

      const after = await getNodeById(comfyPage, nodeId)
      expect(after).toBeNull()
    })

    test('Delete cancels ghost placement', async ({ comfyPage }) => {
      const { nodeId } = await addGhostAtCenter(comfyPage)

      const before = await getNodeById(comfyPage, nodeId)
      expect(before).not.toBeNull()
      expect(before!.ghost).toBe(true)

      await comfyPage.page.keyboard.press('Delete')
      await comfyPage.nextFrame()

      const after = await getNodeById(comfyPage, nodeId)
      expect(after).toBeNull()
    })

    test('Backspace cancels ghost placement', async ({ comfyPage }) => {
      const { nodeId } = await addGhostAtCenter(comfyPage)

      const before = await getNodeById(comfyPage, nodeId)
      expect(before).not.toBeNull()
      expect(before!.ghost).toBe(true)

      await comfyPage.page.keyboard.press('Backspace')
      await comfyPage.nextFrame()

      const after = await getNodeById(comfyPage, nodeId)
      expect(after).toBeNull()
    })

    test('right-click cancels ghost placement', async ({ comfyPage }) => {
      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)

      const before = await getNodeById(comfyPage, nodeId)
      expect(before).not.toBeNull()
      expect(before!.ghost).toBe(true)

      await comfyPage.page.mouse.click(centerX, centerY, { button: 'right' })
      await comfyPage.nextFrame()

      const after = await getNodeById(comfyPage, nodeId)
      expect(after).toBeNull()
    })

    test(
      'Escape during ghost placement inside a subgraph cancels the ghost without exiting the subgraph',
      { tag: ['@subgraph'] },
      async ({ comfyPage }) => {
        await comfyPage.settings.setSetting(
          'Comfy.NodeSearchBoxImpl',
          'default'
        )
        await comfyPage.settings.setSetting(
          'Comfy.NodeSearchBoxImpl.FollowCursor',
          true
        )
        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')

        if (mode === 'vue') {
          await comfyPage.vueNodes.waitForNodes()
          await comfyPage.vueNodes.enterSubgraph('2')
        } else {
          const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
          await subgraphNode.navigateIntoSubgraph()
        }
        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)

        // `subgraph.getActiveGraphId()` is not on core/1.43; inline via app state
        const getActiveGraphId = () =>
          comfyPage.page.evaluate(() => window.app!.canvas?.graph?.id ?? null)

        const subgraphId = await getActiveGraphId()
        const initialNodeCount = await comfyPage.subgraph.getNodeCount()

        // `searchBoxV2.open()` is not on core/1.43; the canvas double-click
        // opens the v2 search box when Comfy.NodeSearchBoxImpl is set to default
        const { searchBoxV2 } = comfyPage
        await comfyPage.canvas.dblclick({ position: { x: 400, y: 300 } })
        await expect(searchBoxV2.input).toBeVisible()
        await searchBoxV2.input.fill('KSampler')
        await expect(searchBoxV2.results.first()).toBeVisible()
        await comfyPage.page.keyboard.press('Enter')
        await expect(searchBoxV2.input).toBeHidden()

        await expect
          .poll(() =>
            comfyPage.page.evaluate(
              () => window.app!.canvas.state.ghostNodeId != null
            )
          )
          .toBe(true)

        await comfyPage.page.keyboard.press('Escape')

        await expect
          .poll(() => comfyPage.subgraph.isInSubgraph(), {
            message:
              'Escape during ghost placement should cancel the ghost, not exit the subgraph'
          })
          .toBe(true)
        await expect.poll(() => getActiveGraphId()).toBe(subgraphId)
        await expect
          .poll(() =>
            comfyPage.page.evaluate(() => window.app!.canvas.state.ghostNodeId)
          )
          .toBeNull()
        await expect
          .poll(() => comfyPage.subgraph.getNodeCount())
          .toBe(initialNodeCount)
      }
    )
  })
}