test: add unit tests for auto-pan and findCompatibleNodes

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

browser_tests/assets/missing/replaceable_nodes.json

@@ -1,59 +0,0 @@
-{
-  "last_node_id": 3,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "T2IAdapterLoader",
-      "pos": [100, 100],
-      "size": { "0": 300, "1": 58 },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "CONTROL_NET",
-          "type": "CONTROL_NET",
-          "links": null
-        }
-      ],
-      "properties": { "Node name for S&R": "T2IAdapterLoader" },
-      "widgets_values": ["t2iadapter_model.safetensors"]
-    },
-    {
-      "id": 2,
-      "type": "ImageBatch",
-      "pos": [100, 200],
-      "size": { "0": 210, "1": 46 },
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "image1", "type": "IMAGE", "link": null },
-        { "name": "image2", "type": "IMAGE", "link": null }
-      ],
-      "outputs": [{ "name": "IMAGE", "type": "IMAGE", "links": [1] }],
-      "properties": { "Node name for S&R": "ImageBatch" }
-    },
-    {
-      "id": 3,
-      "type": "UNKNOWN_NO_REPLACEMENT",
-      "pos": [100, 300],
-      "size": { "0": 210, "1": 46 },
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [{ "name": "image", "type": "IMAGE", "link": 1 }],
-      "outputs": [{ "name": "IMAGE", "type": "IMAGE", "links": null }],
-      "properties": { "Node name for S&R": "UNKNOWN_NO_REPLACEMENT" }
-    }
-  ],
-  "links": [[1, 2, 0, 3, 0, "IMAGE"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": { "scale": 1, "offset": [0, 0] }
-  },
-  "version": 0.4
-}

browser_tests/tests/dialog.spec.ts

@@ -34,33 +34,6 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
     expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
     expect(warningText).toContain('in subgraph')
   })
-
-  test('Should show replacement UI for replaceable missing nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeReplacement.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('missing/replaceable_nodes')
-
-    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
-    await expect(missingNodesWarning).toBeVisible()
-
-    // Verify "Replaceable" badges appear for nodes with replacements
-    const replaceableBadges = missingNodesWarning.getByText('Replaceable')
-    await expect(replaceableBadges.first()).toBeVisible()
-    expect(await replaceableBadges.count()).toBeGreaterThanOrEqual(2)
-
-    // Verify individual "Replace" buttons appear
-    const replaceButtons = missingNodesWarning.getByRole('button', {
-      name: 'Replace'
-    })
-    expect(await replaceButtons.count()).toBeGreaterThanOrEqual(2)
-
-    // Verify "Replace All" button appears in footer
-    const replaceAllButton = comfyPage.page.getByRole('button', {
-      name: 'Replace All'
-    })
-    await expect(replaceAllButton).toBeVisible()
-  })
 })
 
 test('Does not report warning on undo/redo', async ({ comfyPage }) => {

src/components/dialog/content/MissingNodesContent.vue

@@ -25,25 +25,10 @@
           :key="i"
           class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
         >
-          <div class="flex items-center gap-2">
-            <StatusBadge
-              v-if="node.isReplaceable"
-              :label="$t('nodeReplacement.replaceable')"
-              severity="default"
-            />
-            <span class="text-xs">{{ node.label }}</span>
-            <span v-if="node.hint" class="text-xs text-muted-foreground">
-              {{ node.hint }}
-            </span>
-          </div>
-          <Button
-            v-if="node.isReplaceable"
-            variant="secondary"
-            size="sm"
-            @click="emit('replace', node.label)"
-          >
-            {{ $t('nodeReplacement.replace') }}
-          </Button>
+          <span class="text-xs">
+            {{ node.label }}
+          </span>
+          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
         </div>
       </div>
 
@@ -64,9 +49,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import type { MissingNodeType } from '@/types/comfy'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -75,10 +58,6 @@ const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-const emit = defineEmits<{
-  (e: 'replace', nodeType: string): void
-}>()
-
 // Get missing core nodes for OSS mode
 const { missingCoreNodes } = useMissingNodes()
 
@@ -96,12 +75,10 @@ const uniqueNodes = computed(() => {
         return {
           label: node.type,
           hint: node.hint,
-          action: node.action,
-          isReplaceable: node.isReplaceable ?? false,
-          replacement: node.replacement
+          action: node.action
         }
       }
-      return { label: node, isReplaceable: false }
+      return { label: node }
     })
 })
 </script>

src/components/dialog/content/MissingNodesFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- Cloud mode: Learn More + Replace All + Got It buttons -->
+  <!-- Cloud mode: Learn More + Got It buttons -->
   <div
     v-if="isCloud"
     class="flex w-full items-center justify-between gap-2 py-2 px-4"
@@ -15,34 +15,16 @@
       <i class="icon-[lucide--info]"></i>
       <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
     </Button>
-    <div class="flex gap-1">
-      <Button
-        v-if="hasReplaceableNodes"
-        variant="primary"
-        size="md"
-        @click="emit('replaceAll')"
-      >
-        {{ $t('nodeReplacement.replaceAll') }}
-      </Button>
-      <Button variant="secondary" size="md" @click="handleGotItClick">{{
-        $t('missingNodes.cloud.gotIt')
-      }}</Button>
-    </div>
+    <Button variant="secondary" size="md" @click="handleGotItClick">{{
+      $t('missingNodes.cloud.gotIt')
+    }}</Button>
   </div>
 
-  <!-- OSS mode: Open Manager + Replace All + Install All buttons -->
+  <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
     <Button variant="textonly" @click="openManager">{{
       $t('g.openManager')
     }}</Button>
-    <Button
-      v-if="hasReplaceableNodes"
-      variant="primary"
-      size="md"
-      @click="emit('replaceAll')"
-    >
-      {{ $t('nodeReplacement.replaceAll') }}
-    </Button>
     <PackInstallButton
       v-if="showInstallAllButton"
       type="secondary"
@@ -69,25 +51,12 @@ import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
-const { missingNodeTypes = [] } = defineProps<{
-  missingNodeTypes?: MissingNodeType[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'replaceAll'): void
-}>()
-
-const hasReplaceableNodes = computed(() =>
-  missingNodeTypes.some((n) => typeof n === 'object' && n.isReplaceable)
-)
-
 const dialogStore = useDialogStore()
 const { t } = useI18n()
 

src/composables/graph/useGraphNodeManager.ts

@@ -432,7 +432,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     } else {
       // Not during workflow loading - initialize layout immediately
       // This handles individual node additions during normal operation
-      requestAnimationFrame(initializeVueNodeLayout)
+      initializeVueNodeLayout()
     }
 
     // Call original callback if provided

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)

src/locales/en/main.json

@@ -2806,14 +2806,6 @@
       "replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
     }
   },
-  "nodeReplacement": {
-    "replaceable": "Replaceable",
-    "replace": "Replace",
-    "replaceAll": "Replace All",
-    "replacedNode": "Replaced node: {nodeType}",
-    "replacedAllNodes": "Replaced {count} node type(s)",
-    "replaceFailed": "Failed to replace nodes"
-  },
   "rightSidePanel": {
     "togglePanel": "Toggle properties panel",
     "noSelection": "Select a node to see its properties and info.",

src/platform/nodeReplacement/nodeReplacementStore.test.ts

@@ -22,7 +22,8 @@ function mockSettingStore(enabled: boolean) {
         return enabled
       }
       return false
-    })
+    }),
+    load: vi.fn().mockResolvedValue(undefined)
   })
 }
 
@@ -227,6 +228,16 @@ describe('useNodeReplacementStore', () => {
       consoleErrorSpy.mockRestore()
     })
 
+    it('should not fetch when feature is disabled', async () => {
+      vi.mocked(fetchNodeReplacements).mockResolvedValue({})
+      store = createStore(false)
+
+      await store.load()
+
+      expect(fetchNodeReplacements).not.toHaveBeenCalled()
+      expect(store.isLoaded).toBe(false)
+    })
+
     it('should not re-fetch when called twice', async () => {
       vi.mocked(fetchNodeReplacements).mockResolvedValue(mockReplacements)
       store = createStore()
@@ -236,15 +247,5 @@ describe('useNodeReplacementStore', () => {
 
       expect(fetchNodeReplacements).toHaveBeenCalledOnce()
     })
-
-    it('should not call API when setting is disabled', async () => {
-      vi.mocked(fetchNodeReplacements).mockResolvedValue(mockReplacements)
-      store = createStore(false)
-
-      await store.load()
-
-      expect(fetchNodeReplacements).not.toHaveBeenCalled()
-      expect(store.isLoaded).toBe(false)
-    })
   })
 })

src/platform/nodeReplacement/nodeReplacementStore.ts

@@ -15,7 +15,7 @@ export const useNodeReplacementStore = defineStore('nodeReplacement', () => {
   )
 
   async function load() {
-    if (!isEnabled.value || isLoaded.value) return
+    if (isLoaded.value || !isEnabled.value) return
 
     try {
       replacements.value = await fetchNodeReplacements()

src/platform/nodeReplacement/useNodeReplacement.ts

@@ -1,195 +0,0 @@
-import { clone } from 'es-toolkit/compat'
-
-import { t } from '@/i18n'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import type { MissingNodeType } from '@/types/comfy'
-
-import { useNodeReplacementStore } from './nodeReplacementStore'
-
-/**
- * Modify workflow data to replace missing node types with their replacements
- * @param graphData The workflow JSON data
- * @param replacements Map of old node type to new node type
- * @returns Modified workflow data with node types replaced
- */
-function applyNodeReplacements(
-  graphData: ComfyWorkflowJSON,
-  replacements: Map<string, string>
-): ComfyWorkflowJSON {
-  const modifiedData = clone(graphData)
-
-  // Helper function to process nodes array
-  function processNodes(nodes: ComfyWorkflowJSON['nodes']) {
-    if (!Array.isArray(nodes)) return
-
-    for (const node of nodes) {
-      const replacement = replacements.get(node.type)
-      if (replacement) {
-        node.type = replacement
-      }
-    }
-  }
-
-  // Process top-level nodes
-  processNodes(modifiedData.nodes)
-
-  // Process nodes in subgraphs
-  if (modifiedData.definitions?.subgraphs) {
-    for (const subgraph of modifiedData.definitions.subgraphs) {
-      if (subgraph && 'nodes' in subgraph) {
-        processNodes(subgraph.nodes as ComfyWorkflowJSON['nodes'])
-      }
-    }
-  }
-
-  return modifiedData
-}
-
-export function useNodeReplacement() {
-  const nodeReplacementStore = useNodeReplacementStore()
-  const workflowStore = useWorkflowStore()
-  const toastStore = useToastStore()
-
-  /**
-   * Build a map of replacements from missing node types
-   */
-  function buildReplacementMap(
-    missingNodeTypes: MissingNodeType[]
-  ): Map<string, string> {
-    const replacements = new Map<string, string>()
-
-    for (const nodeType of missingNodeTypes) {
-      if (typeof nodeType === 'object' && nodeType.isReplaceable) {
-        const replacement = nodeType.replacement
-        if (replacement) {
-          replacements.set(nodeType.type, replacement.new_node_id)
-        }
-      }
-    }
-
-    return replacements
-  }
-
-  /**
-   * Replace a single node type with its replacement
-   * This reloads the entire workflow with the replacement applied
-   * @param nodeType The type of the missing node to replace
-   * @returns true if replacement was successful
-   */
-  async function replaceNode(nodeType: string): Promise<boolean> {
-    const replacement = nodeReplacementStore.getReplacementFor(nodeType)
-    if (!replacement) {
-      console.warn(`No replacement found for node type: ${nodeType}`)
-      return false
-    }
-
-    const activeWorkflow = workflowStore.activeWorkflow
-    if (!activeWorkflow?.isLoaded) {
-      console.error('No active workflow or workflow not loaded')
-      return false
-    }
-
-    try {
-      // Use current graph state, not originalContent, to preserve prior replacements
-      const currentData =
-        app.rootGraph.serialize() as unknown as ComfyWorkflowJSON
-
-      // Create replacement map for single node
-      const replacements = new Map<string, string>()
-      replacements.set(nodeType, replacement.new_node_id)
-
-      // Apply replacements
-      const modifiedData = applyNodeReplacements(currentData, replacements)
-
-      // Reload the workflow with modified data
-      await app.loadGraphData(modifiedData, true, false, activeWorkflow, {
-        showMissingNodesDialog: true,
-        showMissingModelsDialog: true
-      })
-
-      toastStore.add({
-        severity: 'success',
-        summary: t('g.success'),
-        detail: t('nodeReplacement.replacedNode', { nodeType }),
-        life: 3000
-      })
-
-      return true
-    } catch (error) {
-      console.error('Failed to replace node:', error)
-      toastStore.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: t('nodeReplacement.replaceFailed'),
-        life: 5000
-      })
-      return false
-    }
-  }
-
-  /**
-   * Replace all replaceable missing nodes
-   * This reloads the entire workflow with all replacements applied
-   * @param missingNodeTypes Array of missing node types (from dialog props)
-   * @returns Number of node types that were replaced
-   */
-  async function replaceAllNodes(
-    missingNodeTypes: MissingNodeType[]
-  ): Promise<number> {
-    const replacements = buildReplacementMap(missingNodeTypes)
-
-    if (replacements.size === 0) {
-      console.warn('No replaceable nodes found')
-      return 0
-    }
-
-    const activeWorkflow = workflowStore.activeWorkflow
-    if (!activeWorkflow?.isLoaded) {
-      console.error('No active workflow or workflow not loaded')
-      return 0
-    }
-
-    try {
-      // Use current graph state, not originalContent, to preserve any prior changes
-      const currentData =
-        app.rootGraph.serialize() as unknown as ComfyWorkflowJSON
-
-      // Apply all replacements
-      const modifiedData = applyNodeReplacements(currentData, replacements)
-
-      // Reload the workflow with modified data
-      await app.loadGraphData(modifiedData, true, false, activeWorkflow, {
-        showMissingNodesDialog: true,
-        showMissingModelsDialog: true
-      })
-
-      toastStore.add({
-        severity: 'success',
-        summary: t('g.success'),
-        detail: t('nodeReplacement.replacedAllNodes', {
-          count: replacements.size
-        }),
-        life: 3000
-      })
-
-      return replacements.size
-    } catch (error) {
-      console.error('Failed to replace nodes:', error)
-      toastStore.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: t('nodeReplacement.replaceFailed'),
-        life: 5000
-      })
-      return 0
-    }
-  }
-
-  return {
-    replaceNode,
-    replaceAllNodes
-  }
-}

src/platform/settings/constants/coreSettings.ts

@@ -1198,7 +1198,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     tooltip:
       'When enabled, missing nodes can be automatically replaced with their newer equivalents if a replacement mapping exists.',
     type: 'boolean',
-    defaultValue: true,
+    defaultValue: false,
     experimental: true,
     versionAdded: '1.40.0'
   }

src/scripts/app.ts

@@ -1137,25 +1137,25 @@ export class ComfyApp {
         return
       }
       for (let n of nodes) {
+        // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
+        if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
+        if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
+        if (n.type == 'SDV_img2vid_Conditioning')
+          n.type = 'SVD_img2vid_Conditioning' //typo fix
+        if (n.type == 'Load3DAnimation') n.type = 'Load3D' // Animation node merged into Load3D
+        if (n.type == 'Preview3DAnimation') n.type = 'Preview3D' // Animation node merged into Load3D
+
         // Find missing node types
         if (!(n.type in LiteGraph.registered_node_types)) {
-          const nodeReplacementStore = useNodeReplacementStore()
-          const replacement = nodeReplacementStore.getReplacementFor(n.type)
-
-          // TODO: Remove debug log
-          console.log('[MissingNode]', n.type, {
-            isReplaceable: replacement !== null,
-            replacement,
-            allReplacements: nodeReplacementStore.replacements
-          })
-
-          missingNodeTypes.push({
-            type: n.type,
-            ...(path && { hint: `in subgraph '${path}'` }),
-            isReplaceable: replacement !== null,
-            replacement: replacement ?? undefined
-          })
-
+          // Include context about subgraph location if applicable
+          if (path) {
+            missingNodeTypes.push({
+              type: n.type,
+              hint: `in subgraph '${path}'`
+            })
+          } else {
+            missingNodeTypes.push(n.type)
+          }
           n.type = sanitizeNodeName(n.type)
         }
 

src/services/dialogService.ts

@@ -7,7 +7,6 @@ import PromptDialogContent from '@/components/dialog/content/PromptDialogContent
 import { t } from '@/i18n'
 import { useTelemetry } from '@/platform/telemetry'
 import { isCloud } from '@/platform/distribution/types'
-import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useDialogStore } from '@/stores/dialogStore'
 import type {
@@ -15,7 +14,6 @@ import type {
   ShowDialogOptions
 } from '@/stores/dialogStore'
 
-import type { MissingNodeType } from '@/types/comfy'
 import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 import type { ComponentAttrs } from 'vue-component-type-helpers'
 
@@ -96,17 +94,6 @@ export const useDialogService = () => {
       lazyMissingNodesFooter()
     ])
 
-    const { replaceNode, replaceAllNodes } = useNodeReplacement()
-
-    const handleReplace = async (nodeType: string) => {
-      await replaceNode(nodeType)
-    }
-
-    const handleReplaceAll = async () => {
-      await replaceAllNodes(props.missingNodeTypes as MissingNodeType[])
-      dialogStore.closeDialog({ key: 'global-missing-nodes' })
-    }
-
     dialogStore.showDialog({
       key: 'global-missing-nodes',
       headerComponent: MissingNodesHeader,
@@ -126,14 +113,7 @@ export const useDialogService = () => {
           }
         }
       },
-      props: {
-        ...props,
-        onReplace: handleReplace
-      },
-      footerProps: {
-        missingNodeTypes: props.missingNodeTypes,
-        onReplaceAll: handleReplaceAll
-      }
+      props
     })
   }
 

src/types/comfy.ts

@@ -3,7 +3,6 @@ import type {
   Positionable
 } from '@/lib/litegraph/src/interfaces'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { Keybinding } from '@/platform/keybindings/types'
@@ -94,8 +93,6 @@ export type MissingNodeType =
         text: string
         callback: () => void
       }
-      isReplaceable?: boolean
-      replacement?: NodeReplacement
     }
 
 export interface ComfyExtension {