[Bug] Fix input link slots (#3349)

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

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
+    }
+  }
+}