ComfyUI_frontend/browser_tests/tests/nodeGhostPlacement.spec.ts

import {
  comfyExpect as expect,
  comfyPageFixture as test
} from '../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 nodeRef = await comfyPage.nodeOps.addNode(
    'VAEDecode',
    { ghost: true },
    { x: centerX, y: centerY }
  )
  await comfyPage.nextFrame()

  return { nodeId: nodeRef.id, 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
      )

      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('moving ghost onto existing node and clicking places correctly', async ({
      comfyPage
    }) => {
      // Get existing KSampler node from the default workflow
      const [ksamplerRef] =
        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
      const ksamplerPos = await ksamplerRef.getPosition()
      const ksamplerSize = await ksamplerRef.getSize()
      const targetX = Math.round(ksamplerPos.x + ksamplerSize.width / 2)
      const targetY = Math.round(ksamplerPos.y + ksamplerSize.height / 2)

      // Start ghost placement away from the existing node
      const startX = 50
      const startY = 50
      await comfyPage.page.mouse.move(startX, startY, { steps: 20 })
      await comfyPage.nextFrame()

      const ghostRef = await comfyPage.nodeOps.addNode(
        'VAEDecode',
        { ghost: true },
        { x: startX, y: startY }
      )
      await comfyPage.nextFrame()

      // Move ghost onto the existing node
      await comfyPage.page.mouse.move(targetX, targetY, { steps: 20 })
      await comfyPage.nextFrame()

      // Click to finalize — on top of the existing node
      await comfyPage.page.mouse.click(targetX, targetY)
      await comfyPage.nextFrame()

      // Ghost should be placed (no longer ghost)
      const ghostResult = await getNodeById(comfyPage, ghostRef.id)
      expect(ghostResult).not.toBeNull()
      expect(ghostResult!.ghost).toBe(false)

      // Ghost node should have moved from its start position toward where we clicked
      const ghostPos = await ghostRef.getPosition()
      expect(
        Math.abs(ghostPos.x - startX) > 20 || Math.abs(ghostPos.y - startY) > 20
      ).toBe(true)

      // Existing node should NOT be selected
      const selectedIds = await comfyPage.nodeOps.getSelectedNodeIds()
      expect(selectedIds).not.toContain(ksamplerRef.id)
    })
  })
}