feat(vue-nodes): snap link preview; connect on drop

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,99 @@ 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
+    })
+  })
 })

src/lib/litegraph/src/LGraphCanvas.ts

@@ -5617,7 +5617,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,
@@ -5642,7 +5644,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/links/slotLinkPreviewRenderer.ts

@@ -49,7 +49,9 @@ export function attachSlotLinkPreviewRenderer(canvas: LGraphCanvas) {
     const renderLinks = createLinkConnectorAdapter()?.renderLinks
     if (!renderLinks || renderLinks.length === 0) return
 
-    const to: ReadOnlyPoint = [pointer.canvas.x, pointer.canvas.y]
+    const to: ReadOnlyPoint = state.candidate?.compatible
+      ? [state.candidate.layout.position.x, state.candidate.layout.position.y]
+      : [pointer.canvas.x, pointer.canvas.y]
     ctx.save()
     for (const link of renderLinks) {
       const startDir = link.fromDirection ?? LinkDirection.RIGHT

src/renderer/extensions/vueNodes/composables/slotLinkDragSession.ts

@@ -0,0 +1,45 @@
+import type { SlotLayout } from '@/renderer/core/layout/types'
+
+interface PendingMoveData {
+  clientX: number
+  clientY: number
+  target: EventTarget | null
+}
+
+interface SlotLinkDragSession {
+  compatCache: Map<string, boolean>
+  nodePreferred: Map<
+    number,
+    { index: number; key: string; layout: SlotLayout } | null
+  >
+  lastHoverSlotKey: string | null
+  lastHoverNodeId: number | null
+  lastCandidateKey: string | null
+  pendingMove: PendingMoveData | null
+  reset: () => void
+  dispose: () => void
+}
+
+export function createSlotLinkDragSession(): SlotLinkDragSession {
+  const state: SlotLinkDragSession = {
+    compatCache: new Map(),
+    nodePreferred: new Map(),
+    lastHoverSlotKey: null,
+    lastHoverNodeId: null,
+    lastCandidateKey: null,
+    pendingMove: null,
+    reset: () => {
+      state.compatCache = new Map()
+      state.nodePreferred = new Map()
+      state.lastHoverSlotKey = null
+      state.lastHoverNodeId = null
+      state.lastCandidateKey = null
+      state.pendingMove = null
+    },
+    dispose: () => {
+      state.reset()
+    }
+  }
+
+  return state
+}

src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts

@@ -17,19 +17,17 @@ import {
   isSizeEqual
 } from '@/renderer/core/layout/utils/geometry'
 import { useNodeSlotRegistryStore } from '@/renderer/extensions/vueNodes/stores/nodeSlotRegistryStore'
+import { createRafBatch } from '@/utils/rafBatch'
 
 // RAF batching
 const pendingNodes = new Set<string>()
-let rafId: number | null = null
+const raf = createRafBatch(() => {
+  flushScheduledSlotLayoutSync()
+})
 
 function scheduleSlotLayoutSync(nodeId: string) {
   pendingNodes.add(nodeId)
-  if (rafId == null) {
-    rafId = requestAnimationFrame(() => {
-      rafId = null
-      flushScheduledSlotLayoutSync()
-    })
-  }
+  raf.schedule()
 }
 
 function flushScheduledSlotLayoutSync() {