Implement drop-on-canvas + linkconnectoradapter consolidation

browser_tests/fixtures/VueNodeHelpers.ts

@@ -13,6 +13,13 @@ export class VueNodeHelpers {
     return this.page.locator('[data-node-id]')
   }
 
+  /**
+   * Get locator for a Vue node by its NodeId
+   */
+  getNodeLocator(nodeId: string): Locator {
+    return this.page.locator(`[data-node-id="${nodeId}"]`)
+  }
+
   /**
    * Get locator for selected Vue node components (using visual selection indicators)
    */

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -693,4 +693,266 @@ test.describe('Vue Node Link Interaction', () => {
       if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
     }
   })
+
+  test('should snap to node center while dragging and link on drop', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    // Start drag from CLIP output[0]
+    const clipOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      clipNode.id,
+      0,
+      false
+    )
+
+    // Drag to the visual center of the KSampler Vue node (not a slot)
+    const samplerVue = comfyPage.vueNodes.getNodeLocator(String(samplerNode.id))
+    await expect(samplerVue).toBeVisible()
+    const samplerCenter = await getCenter(samplerVue)
+
+    await comfyMouse.move(clipOutputCenter)
+    await comfyMouse.drag(samplerCenter)
+
+    // During drag, the preview should snap/highlight a compatible input on KSampler
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-node.png')
+
+    // Drop to create the link
+    await comfyMouse.drop()
+    await comfyPage.nextFrame()
+
+    // Validate a link was created to one of KSampler's compatible inputs (1 or 2)
+    const linkOnInput1 = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      1
+    )
+    const linkOnInput2 = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      2
+    )
+
+    const linked = linkOnInput1 ?? linkOnInput2
+    expect(linked).not.toBeNull()
+    expect(linked?.originId).toBe(clipNode.id)
+    expect(linked?.targetId).toBe(samplerNode.id)
+  })
+
+  test('should snap to a specific compatible slot when targeting it', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    // Drag from CLIP output[0] to KSampler input[2] (third slot) which is the
+    // second compatible input for CLIP
+    const clipOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      clipNode.id,
+      0,
+      false
+    )
+    const samplerInput3Center = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      2,
+      true
+    )
+
+    await comfyMouse.move(clipOutputCenter)
+    await comfyMouse.drag(samplerInput3Center)
+
+    // Expect the preview to show snapping to the targeted slot
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-slot.png')
+
+    // Finish the connection
+    await comfyMouse.drop()
+    await comfyPage.nextFrame()
+
+    const linkDetails = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      2
+    )
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails).toMatchObject({
+      originId: clipNode.id,
+      targetId: samplerNode.id,
+      targetSlot: 2
+    })
+  })
+
+  test.describe('Release actions (Shift-drop)', () => {
+    test('Context menu opens and endpoint is pinned on Shift-drop', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.LinkRelease.ActionShift',
+        'context menu'
+      )
+
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+
+      const dropPos = { x: outputCenter.x + 180, y: outputCenter.y - 140 }
+
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      // Context menu should be visible
+      const contextMenu = comfyPage.page.locator('.litecontextmenu')
+      await expect(contextMenu).toBeVisible()
+
+      // Pinned endpoint should not change with mouse movement while menu is open
+      const before = await comfyPage.page.evaluate(() => {
+        const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
+        return Array.isArray(snap) ? [snap[0], snap[1]] : null
+      })
+      expect(before).not.toBeNull()
+
+      // Move mouse elsewhere and verify snap position is unchanged
+      await comfyMouse.move({ x: dropPos.x + 160, y: dropPos.y + 100 })
+      const after = await comfyPage.page.evaluate(() => {
+        const snap = window['app']?.canvas?.linkConnector?.state?.snapLinksPos
+        return Array.isArray(snap) ? [snap[0], snap[1]] : null
+      })
+      expect(after).toEqual(before)
+    })
+
+    test('Context menu -> Search pre-filters by link type and connects after selection', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting(
+        'Comfy.LinkRelease.ActionShift',
+        'context menu'
+      )
+      await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const dropPos = { x: outputCenter.x + 200, y: outputCenter.y - 120 }
+
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      // Open Search from the context menu
+      await comfyPage.clickContextMenuItem('Search')
+
+      // Search box opens with prefilled type filter based on link type (LATENT)
+      await expect(comfyPage.searchBox.input).toBeVisible()
+      const chips = comfyPage.searchBox.filterChips
+      // Ensure at least one filter chip exists and it matches the link type
+      const chipCount = await chips.count()
+      expect(chipCount).toBeGreaterThan(0)
+      await expect(chips.first()).toContainText('LATENT')
+
+      // Choose a compatible node and verify it auto-connects
+      await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
+      await comfyPage.nextFrame()
+
+      // KSampler output should now have an outgoing link
+      const samplerOutput = await samplerNode.getOutput(0)
+      expect(await samplerOutput.getLinkCount()).toBe(1)
+
+      // One of the VAEDecode nodes should have an incoming link on input[0]
+      const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+      let linked = false
+      for (const vae of vaeNodes) {
+        const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
+        if (details) {
+          expect(details.originId).toBe(samplerNode.id)
+          linked = true
+          break
+        }
+      }
+      expect(linked).toBe(true)
+    })
+
+    test('Search box opens on Shift-drop and connects after selection', async ({
+      comfyPage,
+      comfyMouse
+    }) => {
+      await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'search box')
+
+      const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+      expect(samplerNode).toBeTruthy()
+
+      const outputCenter = await getSlotCenter(
+        comfyPage.page,
+        samplerNode.id,
+        0,
+        false
+      )
+      const dropPos = { x: outputCenter.x + 140, y: outputCenter.y - 100 }
+
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      try {
+        await comfyMouse.drag(dropPos)
+        await comfyMouse.drop()
+      } finally {
+        await comfyPage.page.keyboard.up('Shift').catch(() => {})
+      }
+
+      // Search box should open directly
+      await expect(comfyPage.searchBox.input).toBeVisible()
+      await expect(comfyPage.searchBox.filterChips.first()).toContainText(
+        'LATENT'
+      )
+
+      // Select a compatible node and verify connection
+      await comfyPage.searchBox.fillAndSelectFirstNode('VAEDecode')
+      await comfyPage.nextFrame()
+
+      const samplerOutput = await samplerNode.getOutput(0)
+      expect(await samplerOutput.getLinkCount()).toBe(1)
+
+      const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+      let linked = false
+      for (const vae of vaeNodes) {
+        const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
+        if (details) {
+          expect(details.originId).toBe(samplerNode.id)
+          linked = true
+          break
+        }
+      }
+      expect(linked).toBe(true)
+    })
+  })
 })

src/components/graph/GraphCanvas.vue

@@ -112,7 +112,6 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { attachSlotLinkPreviewRenderer } from '@/renderer/core/canvas/links/slotLinkPreviewRenderer'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
@@ -391,7 +390,6 @@ onMounted(async () => {
 
   // @ts-expect-error fixme ts strict error
   await comfyApp.setup(canvasRef.value)
-  attachSlotLinkPreviewRenderer(comfyApp.canvas)
   canvasStore.canvas = comfyApp.canvas
   canvasStore.canvas.render_canvas_border = false
   workspaceStore.spinner = false

src/lib/litegraph/src/LGraphCanvas.ts

@@ -5626,7 +5626,9 @@ export class LGraphCanvas
           const { link, inputNode, input } = resolved
           if (!inputNode || !input) continue
 
-          const endPos = inputNode.getInputPos(link.target_slot)
+          const endPos = LiteGraph.vueNodesMode
+            ? getSlotPosition(inputNode, link.target_slot, true)
+            : inputNode.getInputPos(link.target_slot)
 
           this.#renderAllLinkSegments(
             ctx,
@@ -5651,7 +5653,9 @@ export class LGraphCanvas
         const { link, outputNode, output } = resolved
         if (!outputNode || !output) continue
 
-        const startPos = outputNode.getOutputPos(link.origin_slot)
+        const startPos = LiteGraph.vueNodesMode
+          ? getSlotPosition(outputNode, link.origin_slot, false)
+          : outputNode.getOutputPos(link.origin_slot)
 
         this.#renderAllLinkSegments(
           ctx,

src/renderer/core/canvas/interaction/canvasPointerEvent.ts

@@ -0,0 +1,74 @@
+import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
+import type {
+  CanvasPointerEvent,
+  CanvasPointerExtensions
+} from '@/lib/litegraph/src/types/events'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+type PointerOffsets = {
+  x: number
+  y: number
+}
+
+const pointerHistory = new Map<number, PointerOffsets>()
+
+const defineEnhancements = (
+  event: PointerEvent,
+  enhancement: CanvasPointerExtensions
+) => {
+  Object.defineProperties(event, {
+    canvasX: { value: enhancement.canvasX, configurable: true, writable: true },
+    canvasY: { value: enhancement.canvasY, configurable: true, writable: true },
+    deltaX: { value: enhancement.deltaX, configurable: true, writable: true },
+    deltaY: { value: enhancement.deltaY, configurable: true, writable: true },
+    safeOffsetX: {
+      value: enhancement.safeOffsetX,
+      configurable: true,
+      writable: true
+    },
+    safeOffsetY: {
+      value: enhancement.safeOffsetY,
+      configurable: true,
+      writable: true
+    }
+  })
+}
+
+const createEnhancement = (event: PointerEvent): CanvasPointerExtensions => {
+  const conversion = useSharedCanvasPositionConversion()
+  conversion.update()
+
+  const [canvasX, canvasY] = conversion.clientPosToCanvasPos([
+    event.clientX,
+    event.clientY
+  ])
+
+  const canvas = useCanvasStore().getCanvas()
+  const { offset, scale } = canvas.ds
+
+  const [originClientX, originClientY] = conversion.canvasPosToClientPos([0, 0])
+  const left = originClientX - offset[0] * scale
+  const top = originClientY - offset[1] * scale
+
+  const safeOffsetX = event.clientX - left
+  const safeOffsetY = event.clientY - top
+
+  const previous = pointerHistory.get(event.pointerId)
+  const deltaX = previous ? safeOffsetX - previous.x : 0
+  const deltaY = previous ? safeOffsetY - previous.y : 0
+  pointerHistory.set(event.pointerId, { x: safeOffsetX, y: safeOffsetY })
+
+  return { canvasX, canvasY, deltaX, deltaY, safeOffsetX, safeOffsetY }
+}
+
+export const toCanvasPointerEvent = <T extends PointerEvent>(
+  event: T
+): T & CanvasPointerEvent => {
+  const enhancement = createEnhancement(event)
+  defineEnhancements(event, enhancement)
+  return event as T & CanvasPointerEvent
+}
+
+export const clearCanvasPointerHistory = (pointerId: number) => {
+  pointerHistory.delete(pointerId)
+}