[Bug] Fix input link slots (#3349)

Co-authored-by: github-actions <github-actions@github.com>

src/scripts/app.ts

@@ -47,7 +47,11 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { ExtensionManager } from '@/types/extensionTypes'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
-import { executeWidgetsCallback, isImageNode } from '@/utils/litegraphUtil'
+import {
+  executeWidgetsCallback,
+  fixLinkInputSlots,
+  isImageNode
+} from '@/utils/litegraphUtil'
 import {
   findLegacyRerouteNodes,
   noNativeReroutes
@@ -705,7 +709,9 @@ export class ComfyApp {
   #addAfterConfigureHandler() {
     const app = this
     const onConfigure = app.graph.onConfigure
-    app.graph.onConfigure = function (...args) {
+    app.graph.onConfigure = function (this: LGraph, ...args) {
+      fixLinkInputSlots(this)
+
       // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
       for (const node of app.graph.nodes) {
         node.onGraphConfigured?.()

src/utils/litegraphUtil.ts

@@ -1,4 +1,4 @@
-import type { ColorOption } from '@comfyorg/litegraph'
+import type { ColorOption, LGraph } from '@comfyorg/litegraph'
 import { LGraphGroup, LGraphNode, isColorable } from '@comfyorg/litegraph'
 import type {
   IComboWidget,
@@ -104,3 +104,43 @@ export function migrateWidgetsValues<TWidgetValue>(
   }
   return widgetsValues
 }
+
+/**
+ * Fix link input slots after loading a graph. Because the node inputs follows
+ * the node definition after 1.16, the node inputs array from previous versions,
+ * might get added items in the middle, which can cause shift to link's slot index.
+ * For example, the node inputs definition is:
+ * "required": {
+ *   "input1": ["INT", { forceInput: true }],
+ *   "input2": ["MODEL", { forceInput: false }],
+ *   "input3": ["MODEL", { forceInput: false }]
+ * }
+ *
+ * previously node inputs array was:
+ * [{name: 'input2'}, {name: 'input3'}, {name: 'input1'}]
+ * because input1 is created as widget first, then convert to input socket after
+ * input 2 and 3.
+ *
+ * Now, the node inputs array just follows the definition order:
+ * [{name: 'input1'}, {name: 'input2'}, {name: 'input3'}]
+ *
+ * We need to update the slot index of corresponding links to match the new
+ * node inputs array order.
+ *
+ * Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348
+ *
+ * @param graph - The graph to fix links for.
+ */
+export function fixLinkInputSlots(graph: LGraph) {
+  for (const node of graph.nodes) {
+    for (const [inputIndex, input] of node.inputs.entries()) {
+      const linkId = input.link
+      if (!linkId) continue
+
+      const link = graph.links.get(linkId)
+      if (!link) continue
+
+      link.target_slot = inputIndex
+    }
+  }
+}