test: add unit tests for auto-pan and findCompatibleNodes

Amp-Thread-ID: https://ampcode.com/threads/T-019c3056-108e-7248-9c30-7d236197edcc

src/lib/litegraph/src/LGraphCanvas.autopan.test.ts

@@ -0,0 +1,225 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+type AutopanContext = {
+  canvas: { getBoundingClientRect: () => DOMRect }
+  _autopanVelocity: [number, number]
+  _autopanRAF: number | null
+  _autopanLastTime: number
+  linkConnector: { isConnecting: boolean }
+  ds: { offset: number[]; scale: number }
+  setDirty: ReturnType<typeof vi.fn>
+  _stopAutopan: () => void
+}
+
+const updateVelocity = LGraphCanvas.prototype[
+  '_updateAutopanVelocity' as keyof LGraphCanvas
+] as (e: PointerEvent) => void
+
+const autopanTick = LGraphCanvas.prototype[
+  '_autopanTick' as keyof LGraphCanvas
+] as (timestamp: number) => void
+
+const stopAutopan = LGraphCanvas.prototype[
+  '_stopAutopan' as keyof LGraphCanvas
+] as () => void
+
+const EDGE = LGraphCanvas.AUTOPAN_EDGE_PX
+const MAX_SPEED = LGraphCanvas.AUTOPAN_MAX_SPEED
+
+function makeCtx(overrides?: Partial<AutopanContext>): AutopanContext {
+  const ctx = {
+    canvas: {
+      getBoundingClientRect: () => new DOMRect(0, 0, 800, 600)
+    },
+    _autopanVelocity: [0, 0],
+    _autopanRAF: null,
+    _autopanLastTime: 0,
+    linkConnector: { isConnecting: true },
+    ds: { offset: [0, 0], scale: 1 },
+    setDirty: vi.fn(),
+    ...overrides
+  } as AutopanContext
+  ctx._stopAutopan = stopAutopan.bind(ctx)
+  return ctx
+}
+
+function pointerEvent(clientX: number, clientY: number): PointerEvent {
+  return { clientX, clientY } as PointerEvent
+}
+
+describe('LGraphCanvas autopan', () => {
+  let mockRAF: ReturnType<typeof vi.fn>
+  let mockCancelRAF: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    mockRAF = vi.fn().mockReturnValue(42)
+    mockCancelRAF = vi.fn()
+    vi.stubGlobal('requestAnimationFrame', mockRAF)
+    vi.stubGlobal('cancelAnimationFrame', mockCancelRAF)
+    vi.stubGlobal('performance', { now: vi.fn().mockReturnValue(0) })
+  })
+
+  describe('_updateAutopanVelocity', () => {
+    it('sets positive vx when cursor near left edge', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(10, 300))
+      expect(ctx._autopanVelocity[0]).toBeCloseTo(
+        ((EDGE - 10) / EDGE) * MAX_SPEED
+      )
+      expect(ctx._autopanVelocity[1]).toBe(0)
+    })
+
+    it('sets negative vx when cursor near right edge', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(790, 300))
+      const distRight = 800 - 790
+      expect(ctx._autopanVelocity[0]).toBeCloseTo(
+        -(((EDGE - distRight) / EDGE) * MAX_SPEED)
+      )
+      expect(ctx._autopanVelocity[1]).toBe(0)
+    })
+
+    it('sets positive vy when cursor near top edge', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(400, 5))
+      expect(ctx._autopanVelocity[0]).toBe(0)
+      expect(ctx._autopanVelocity[1]).toBeCloseTo(
+        ((EDGE - 5) / EDGE) * MAX_SPEED
+      )
+    })
+
+    it('sets negative vy when cursor near bottom edge', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(400, 580))
+      const distBottom = 600 - 580
+      expect(ctx._autopanVelocity[0]).toBe(0)
+      expect(ctx._autopanVelocity[1]).toBeCloseTo(
+        -(((EDGE - distBottom) / EDGE) * MAX_SPEED)
+      )
+    })
+
+    it('sets zero velocity when cursor in center', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(400, 300))
+      expect(ctx._autopanVelocity).toEqual([0, 0])
+    })
+
+    it('scales linearly with proximity', () => {
+      const ctx = makeCtx()
+
+      updateVelocity.call(ctx, pointerEvent(0, 300))
+      const atEdge = ctx._autopanVelocity[0]
+      expect(atEdge).toBeCloseTo(MAX_SPEED)
+
+      updateVelocity.call(ctx, pointerEvent(EDGE, 300))
+      expect(ctx._autopanVelocity[0]).toBe(0)
+
+      updateVelocity.call(ctx, pointerEvent(EDGE / 2, 300))
+      expect(ctx._autopanVelocity[0]).toBeCloseTo(MAX_SPEED / 2)
+    })
+
+    it('starts rAF loop when velocity becomes non-zero and _autopanRAF is null', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(10, 300))
+      expect(mockRAF).toHaveBeenCalledOnce()
+      expect(ctx._autopanRAF).toBe(42)
+    })
+
+    it('does not start rAF loop when _autopanRAF is already set', () => {
+      const ctx = makeCtx({ _autopanRAF: 99 })
+      updateVelocity.call(ctx, pointerEvent(10, 300))
+      expect(mockRAF).not.toHaveBeenCalled()
+      expect(ctx._autopanRAF).toBe(99)
+    })
+
+    it('does not start rAF loop when velocity is zero', () => {
+      const ctx = makeCtx()
+      updateVelocity.call(ctx, pointerEvent(400, 300))
+      expect(mockRAF).not.toHaveBeenCalled()
+      expect(ctx._autopanRAF).toBeNull()
+    })
+  })
+
+  describe('_autopanTick', () => {
+    it('applies velocity to ds.offset divided by scale', () => {
+      const ctx = makeCtx({
+        _autopanVelocity: [900, 450],
+        _autopanLastTime: 900,
+        ds: { offset: [0, 0], scale: 2 }
+      })
+      autopanTick.call(ctx, 1000)
+      const dt = 0.1
+      expect(ctx.ds.offset[0]).toBeCloseTo((900 * dt) / 2)
+      expect(ctx.ds.offset[1]).toBeCloseTo((450 * dt) / 2)
+    })
+
+    it('calls setDirty(true, true)', () => {
+      const ctx = makeCtx({
+        _autopanVelocity: [100, 0],
+        _autopanLastTime: 0
+      })
+      autopanTick.call(ctx, 16)
+      expect(ctx.setDirty).toHaveBeenCalledWith(true, true)
+    })
+
+    it('stops when linkConnector.isConnecting is false', () => {
+      const ctx = makeCtx({
+        _autopanVelocity: [100, 0],
+        _autopanLastTime: 0,
+        _autopanRAF: 42,
+        linkConnector: { isConnecting: false }
+      })
+      autopanTick.call(ctx, 16)
+      expect(ctx._autopanRAF).toBeNull()
+      expect(ctx._autopanVelocity).toEqual([0, 0])
+      expect(ctx.setDirty).not.toHaveBeenCalled()
+    })
+
+    it('stops when velocity is [0, 0]', () => {
+      const ctx = makeCtx({
+        _autopanVelocity: [0, 0],
+        _autopanLastTime: 0,
+        _autopanRAF: 42
+      })
+      autopanTick.call(ctx, 16)
+      expect(ctx._autopanRAF).toBeNull()
+      expect(ctx.setDirty).not.toHaveBeenCalled()
+    })
+
+    it('caps dt at 0.1s', () => {
+      const ctx = makeCtx({
+        _autopanVelocity: [900, 0],
+        _autopanLastTime: 0,
+        ds: { offset: [0, 0], scale: 1 }
+      })
+      autopanTick.call(ctx, 5000)
+      expect(ctx.ds.offset[0]).toBeCloseTo(900 * 0.1)
+    })
+  })
+
+  describe('_stopAutopan', () => {
+    it('cancels rAF and sets _autopanRAF to null', () => {
+      const ctx = makeCtx({ _autopanRAF: 77 })
+      stopAutopan.call(ctx)
+      expect(mockCancelRAF).toHaveBeenCalledWith(77)
+      expect(ctx._autopanRAF).toBeNull()
+    })
+
+    it('resets velocity to [0, 0]', () => {
+      const ctx = makeCtx({
+        _autopanVelocity: [500, 300],
+        _autopanRAF: 77
+      })
+      stopAutopan.call(ctx)
+      expect(ctx._autopanVelocity).toEqual([0, 0])
+    })
+
+    it('does not call cancelAnimationFrame when _autopanRAF is null', () => {
+      const ctx = makeCtx({ _autopanRAF: null })
+      stopAutopan.call(ctx)
+      expect(mockCancelRAF).not.toHaveBeenCalled()
+    })
+  })
+})

src/lib/litegraph/src/LGraphCanvas.findCompatibleNodes.test.ts

@@ -0,0 +1,260 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type {
+  INodeInputSlot,
+  INodeOutputSlot,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphCanvas,
+  LGraphEventMode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
+import {
+  createMockLGraphNode,
+  createMockNodeInputSlot,
+  createMockNodeOutputSlot
+} from '@/utils/__tests__/litegraphTestUtils'
+
+type CompatibleResult = Array<{
+  node: LGraphNode
+  slotIndex: number
+  slotInfo: INodeInputSlot | INodeOutputSlot
+}>
+
+const findCompatibleNodes = LGraphCanvas.prototype[
+  'findCompatibleNodes' as keyof LGraphCanvas
+] as (
+  sourceNode: LGraphNode,
+  sourceSlot: INodeInputSlot | INodeOutputSlot,
+  sourceIsInput: boolean,
+  maxResults?: number
+) => CompatibleResult
+
+function createCanvasContext(nodes: LGraphNode[]) {
+  return { graph: { _nodes: nodes } }
+}
+
+describe('LGraphCanvas.findCompatibleNodes', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.spyOn(LiteGraph, 'isValidConnection').mockImplementation(
+      (a: unknown, b: unknown) => a === b
+    )
+  })
+
+  it('returns compatible input nodes for an output slot', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const candidate = createMockLGraphNode({
+      id: 2,
+      pos: [0, 100],
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, candidate])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(1)
+    expect(results[0].node).toBe(candidate)
+    expect(results[0].slotIndex).toBe(0)
+  })
+
+  it('returns compatible output nodes for an input slot', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeInputSlot({ type: 'INT' })
+
+    const candidate = createMockLGraphNode({
+      id: 2,
+      pos: [0, 50],
+      outputs: [createMockNodeOutputSlot({ type: 'INT' })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, candidate])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, true)
+
+    expect(results).toHaveLength(1)
+    expect(results[0].node).toBe(candidate)
+    expect(results[0].slotIndex).toBe(0)
+  })
+
+  it('skips self-node', () => {
+    const sourceNode = createMockLGraphNode({
+      id: 1,
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+    })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const ctx = createCanvasContext([sourceNode])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('skips bypassed nodes (mode === NEVER)', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const bypassed = createMockLGraphNode({
+      id: 2,
+      mode: LGraphEventMode.NEVER,
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, bypassed])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('returns empty for wildcard source slot type "*"', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: '*' })
+
+    const candidate = createMockLGraphNode({
+      id: 2,
+      inputs: [createMockNodeInputSlot({ type: '*', link: null })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, candidate])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('returns empty for wildcard source slot type ""', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: '' })
+
+    const ctx = createCanvasContext([sourceNode])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('returns empty for wildcard source slot type 0', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 0 })
+
+    const ctx = createCanvasContext([sourceNode])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('skips candidate slots with wildcard type', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const candidate = createMockLGraphNode({
+      id: 2,
+      pos: [0, 0],
+      inputs: [
+        createMockNodeInputSlot({ type: '*', link: null }),
+        createMockNodeInputSlot({ type: '', link: null }),
+        createMockNodeInputSlot({ type: 0 as unknown as string, link: null })
+      ]
+    })
+
+    const ctx = createCanvasContext([sourceNode, candidate])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('skips already-connected inputs', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const candidate = createMockLGraphNode({
+      id: 2,
+      pos: [0, 0],
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: 42 })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, candidate])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('sorts results by Y position', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const nodeA = createMockLGraphNode({
+      id: 2,
+      pos: [0, 300],
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+    })
+    const nodeB = createMockLGraphNode({
+      id: 3,
+      pos: [0, 100],
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+    })
+    const nodeC = createMockLGraphNode({
+      id: 4,
+      pos: [0, 200],
+      inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, nodeA, nodeB, nodeC])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(3)
+    expect(results[0].node).toBe(nodeB)
+    expect(results[1].node).toBe(nodeC)
+    expect(results[2].node).toBe(nodeA)
+  })
+
+  it('limits results to maxResults', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const candidates = Array.from({ length: 5 }, (_, i) =>
+      createMockLGraphNode({
+        id: i + 2,
+        pos: [0, i * 100],
+        inputs: [createMockNodeInputSlot({ type: 'FLOAT', link: null })]
+      })
+    )
+
+    const ctx = createCanvasContext([sourceNode, ...candidates])
+    const results = findCompatibleNodes.call(
+      ctx,
+      sourceNode,
+      sourceSlot,
+      false,
+      3
+    )
+
+    expect(results).toHaveLength(3)
+  })
+
+  it('returns empty when no nodes match', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const candidate = createMockLGraphNode({
+      id: 2,
+      pos: [0, 0],
+      inputs: [createMockNodeInputSlot({ type: 'STRING', link: null })]
+    })
+
+    const ctx = createCanvasContext([sourceNode, candidate])
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+
+  it('returns empty when graph is null', () => {
+    const sourceNode = createMockLGraphNode({ id: 1 })
+    const sourceSlot = createMockNodeOutputSlot({ type: 'FLOAT' })
+
+    const ctx = { graph: null }
+    const results = findCompatibleNodes.call(ctx, sourceNode, sourceSlot, false)
+
+    expect(results).toHaveLength(0)
+  })
+})

src/lib/litegraph/src/LGraphCanvas.ts

@@ -176,6 +176,12 @@ interface IDialogExtensions extends ICloseable {
 interface IDialog extends HTMLDivElement, IDialogExtensions {}
 type PromptDialog = Omit<IDialog, 'modified'>
 
+interface CompatibleNodeResult {
+  node: LGraphNode
+  slotIndex: number
+  slotInfo: INodeInputSlot | INodeOutputSlot
+}
+
 interface IDialogOptions {
   position?: Point
   event?: MouseEvent
@@ -316,6 +322,13 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     selectionChanged: false
   }
 
+  static readonly AUTOPAN_EDGE_PX = 48
+  static readonly AUTOPAN_MAX_SPEED = 900
+
+  private _autopanRAF: number | null = null
+  private _autopanLastTime: number = 0
+  private _autopanVelocity: [number, number] = [0, 0]
+
   private _subgraph?: Subgraph
   get subgraph(): Subgraph | undefined {
     return this._subgraph
@@ -821,6 +834,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     this.linkConnector.events.addEventListener('reset', () => {
       this.connecting_links = null
       this.dirty_bgcanvas = true
+      this._stopAutopan()
     })
 
     // Dropped a link on the canvas
@@ -3233,7 +3247,10 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       (this.allow_interaction || node?.flags.allow_interaction) &&
       !this.read_only
     ) {
-      if (linkConnector.isConnecting) this.dirty_canvas = true
+      if (linkConnector.isConnecting) {
+        this.dirty_canvas = true
+        this._updateAutopanVelocity(e)
+      }
 
       // remove mouseover flag
       this.updateMouseOverNodes(node, e)
@@ -3552,6 +3569,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     if (!graph) return
 
     this._finishDragZoom()
+    this._stopAutopan()
 
     LGraphCanvas.active_canvas = this
 
@@ -8299,6 +8317,104 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     return group.getMenuOptions()
   }
 
+  private _updateAutopanVelocity(e: PointerEvent): void {
+    const rect = this.canvas.getBoundingClientRect()
+    const edge = LGraphCanvas.AUTOPAN_EDGE_PX
+    const maxSpeed = LGraphCanvas.AUTOPAN_MAX_SPEED
+
+    let vx = 0
+    let vy = 0
+
+    const distLeft = e.clientX - rect.left
+    const distRight = rect.right - e.clientX
+    const distTop = e.clientY - rect.top
+    const distBottom = rect.bottom - e.clientY
+
+    if (distLeft < edge) vx = ((edge - distLeft) / edge) * maxSpeed
+    else if (distRight < edge) vx = -(((edge - distRight) / edge) * maxSpeed)
+
+    if (distTop < edge) vy = ((edge - distTop) / edge) * maxSpeed
+    else if (distBottom < edge) vy = -(((edge - distBottom) / edge) * maxSpeed)
+
+    this._autopanVelocity[0] = vx
+    this._autopanVelocity[1] = vy
+
+    if ((vx !== 0 || vy !== 0) && this._autopanRAF === null) {
+      this._autopanLastTime = performance.now()
+      this._autopanRAF = requestAnimationFrame((t) => this._autopanTick(t))
+    }
+  }
+
+  private _autopanTick(timestamp: number): void {
+    const [vx, vy] = this._autopanVelocity
+    if (!this.linkConnector.isConnecting || (vx === 0 && vy === 0)) {
+      this._stopAutopan()
+      return
+    }
+
+    const dt = Math.min((timestamp - this._autopanLastTime) / 1000, 0.1)
+    this._autopanLastTime = timestamp
+
+    this.ds.offset[0] += (vx * dt) / this.ds.scale
+    this.ds.offset[1] += (vy * dt) / this.ds.scale
+
+    this.setDirty(true, true)
+    this._autopanRAF = requestAnimationFrame((t) => this._autopanTick(t))
+  }
+
+  private _stopAutopan(): void {
+    if (this._autopanRAF !== null) {
+      cancelAnimationFrame(this._autopanRAF)
+      this._autopanRAF = null
+    }
+    this._autopanVelocity[0] = 0
+    this._autopanVelocity[1] = 0
+  }
+
+  private findCompatibleNodes(
+    sourceNode: LGraphNode,
+    sourceSlot: INodeInputSlot | INodeOutputSlot,
+    sourceIsInput: boolean,
+    maxResults: number = 15
+  ): CompatibleNodeResult[] {
+    if (!this.graph) return []
+
+    const slotType = sourceSlot.type
+    if (slotType === '*' || slotType === '' || slotType === 0) return []
+
+    const results: CompatibleNodeResult[] = []
+
+    for (const candidate of this.graph._nodes) {
+      if (candidate.id === sourceNode.id) continue
+      if (candidate.mode === LGraphEventMode.NEVER) continue
+      if (candidate instanceof SubgraphIONodeBase) continue
+
+      if (sourceIsInput) {
+        if (!candidate.outputs) continue
+        for (let i = 0; i < candidate.outputs.length; i++) {
+          const output = candidate.outputs[i]
+          if (output.type === '*' || output.type === '' || output.type === 0)
+            continue
+          if (LiteGraph.isValidConnection(output.type, sourceSlot.type))
+            results.push({ node: candidate, slotIndex: i, slotInfo: output })
+        }
+      } else {
+        if (!candidate.inputs) continue
+        for (let i = 0; i < candidate.inputs.length; i++) {
+          const input = candidate.inputs[i]
+          if (input.link != null) continue
+          if (input.type === '*' || input.type === '' || input.type === 0)
+            continue
+          if (LiteGraph.isValidConnection(sourceSlot.type, input.type))
+            results.push({ node: candidate, slotIndex: i, slotInfo: input })
+        }
+      }
+    }
+
+    results.sort((a, b) => a.node.pos[1] - b.node.pos[1])
+    return results.slice(0, maxResults)
+  }
+
   processContextMenu(
     node: LGraphNode | undefined,
     event: CanvasPointerEvent
@@ -8350,6 +8466,46 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
             menu_info.push(...node.getExtraSlotMenuOptions(slot))
           }
         }
+
+        const isInput = !!slot.input
+        const slotInfo = slot.input || slot.output
+        if (slotInfo) {
+          const compatibleNodes = this.findCompatibleNodes(
+            node,
+            slotInfo,
+            isInput
+          )
+
+          if (compatibleNodes.length > 0) {
+            menu_info.push(null)
+            menu_info.push({
+              content: 'Connect to...',
+              has_submenu: true,
+              submenu: {
+                title: slotInfo.type?.toString() || '*',
+                options: compatibleNodes.map((candidate) => ({
+                  content: `${candidate.slotInfo.name} @ ${candidate.node.title || candidate.node.type}`,
+                  callback: () => {
+                    if (!node.graph) return
+                    if (isInput) {
+                      candidate.node.connect(
+                        candidate.slotIndex,
+                        node,
+                        slot.slot
+                      )
+                    } else {
+                      node.connect(
+                        slot.slot,
+                        candidate.node,
+                        candidate.slotIndex
+                      )
+                    }
+                  }
+                }))
+              }
+            })
+          }
+        }
         // @ts-expect-error Slot type can be number and has number checks
         options.title = (slot.input ? slot.input.type : slot.output.type) || '*'
         if (slot.input && slot.input.type == LiteGraph.ACTION)