Fix "Dragging from input slot connected to SubgraphInputNode creates new link instead of moving existing one" (#1184)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: bymyself <cbyrne@comfy.org>

src/canvas/LinkConnector.ts

@@ -150,25 +150,59 @@ export class LinkConnector {
       const link = network.links.get(linkId)
       if (!link) return
 
-      try {
-        const reroute = network.getReroute(link.parentId)
-        const renderLink = new MovingInputLink(network, link, reroute)
+      // Special handling for links from subgraph input nodes
+      if (link.origin_id === SUBGRAPH_INPUT_ID) {
+        // For subgraph input links, we need to handle them differently
+        // since they don't have a regular output node
+        const subgraphInput = network.inputNode?.slots[link.origin_slot]
+        if (!subgraphInput) {
+          console.warn(`Could not find subgraph input for slot [${link.origin_slot}]`)
+          return
+        }
 
-        const mayContinue = this.events.dispatch("before-move-input", renderLink)
-        if (mayContinue === false) return
+        try {
+          const reroute = network.getReroute(link.parentId)
+          const renderLink = new ToInputFromIoNodeLink(network, network.inputNode, subgraphInput, reroute, LinkDirection.CENTER, link)
 
-        renderLinks.push(renderLink)
+          // Note: We don't dispatch the before-move-input event for subgraph input links
+          // as the event type doesn't support ToInputFromIoNodeLink
 
-        this.listenUntilReset("input-moved", (e) => {
-          e.detail.link.disconnect(network, "output")
-        })
-      } catch (error) {
-        console.warn(`Could not create render link for link id: [${link.id}].`, link, error)
-        return
+          renderLinks.push(renderLink)
+
+          this.listenUntilReset("input-moved", () => {
+            link.disconnect(network, "input")
+          })
+        } catch (error) {
+          console.warn(`Could not create render link for subgraph input link id: [${link.id}].`, link, error)
+          return
+        }
+
+        link._dragging = true
+        inputLinks.push(link)
+      } else {
+        // Regular node links
+        try {
+          const reroute = network.getReroute(link.parentId)
+          const renderLink = new MovingInputLink(network, link, reroute)
+
+          const mayContinue = this.events.dispatch("before-move-input", renderLink)
+          if (mayContinue === false) return
+
+          renderLinks.push(renderLink)
+
+          this.listenUntilReset("input-moved", (e) => {
+            if ("link" in e.detail && e.detail.link) {
+              e.detail.link.disconnect(network, "output")
+            }
+          })
+        } catch (error) {
+          console.warn(`Could not create render link for link id: [${link.id}].`, link, error)
+          return
+        }
+
+        link._dragging = true
+        inputLinks.push(link)
       }
-
-      link._dragging = true
-      inputLinks.push(link)
     }
 
     state.connectingTo = "input"

src/canvas/ToInputFromIoNodeLink.ts

@@ -18,6 +18,7 @@ export class ToInputFromIoNodeLink implements RenderLink {
   readonly fromSlotIndex: number
   readonly fromPos: Point
   fromDirection: LinkDirection = LinkDirection.RIGHT
+  readonly existingLink?: LLink
 
   constructor(
     readonly network: LinkNetwork,
@@ -25,6 +26,7 @@ export class ToInputFromIoNodeLink implements RenderLink {
     readonly fromSlot: SubgraphInput,
     readonly fromReroute?: Reroute,
     public dragDirection: LinkDirection = LinkDirection.CENTER,
+    existingLink?: LLink,
   ) {
     const outputIndex = node.slots.indexOf(fromSlot)
     if (outputIndex === -1 && fromSlot !== node.emptySlot) {
@@ -35,6 +37,7 @@ export class ToInputFromIoNodeLink implements RenderLink {
     this.fromPos = fromReroute
       ? fromReroute.pos
       : fromSlot.pos
+    this.existingLink = existingLink
   }
 
   canConnectToInput(inputNode: NodeLike, input: INodeInputSlot): boolean {
@@ -46,10 +49,17 @@ export class ToInputFromIoNodeLink implements RenderLink {
   }
 
   connectToInput(node: LGraphNode, input: INodeInputSlot, events: CustomEventTarget<LinkConnectorEventMap>) {
-    const { fromSlot, fromReroute } = this
+    const { fromSlot, fromReroute, existingLink } = this
 
     const newLink = fromSlot.connect(input, node, fromReroute?.id)
-    events.dispatch("link-created", newLink)
+
+    if (existingLink) {
+      // Moving an existing link
+      events.dispatch("input-moved", this)
+    } else {
+      // Creating a new link
+      events.dispatch("link-created", newLink)
+    }
   }
 
   connectToSubgraphOutput(): void {
@@ -96,7 +106,14 @@ export class ToInputFromIoNodeLink implements RenderLink {
         }
       }
     }
-    events.dispatch("link-created", newLink)
+
+    if (this.existingLink) {
+      // Moving an existing link
+      events.dispatch("input-moved", this)
+    } else {
+      // Creating a new link
+      events.dispatch("link-created", newLink)
+    }
   }
 
   connectToOutput() {

src/infrastructure/LinkConnectorEventMap.ts

@@ -2,6 +2,7 @@ import type { FloatingRenderLink } from "@/canvas/FloatingRenderLink"
 import type { MovingInputLink } from "@/canvas/MovingInputLink"
 import type { MovingOutputLink } from "@/canvas/MovingOutputLink"
 import type { RenderLink } from "@/canvas/RenderLink"
+import type { ToInputFromIoNodeLink } from "@/canvas/ToInputFromIoNodeLink"
 import type { ToInputRenderLink } from "@/canvas/ToInputRenderLink"
 import type { LGraphNode } from "@/LGraphNode"
 import type { LLink } from "@/LLink"
@@ -26,7 +27,7 @@ export interface LinkConnectorEventMap {
   "before-move-input": MovingInputLink | FloatingRenderLink
   "before-move-output": MovingOutputLink | FloatingRenderLink
 
-  "input-moved": MovingInputLink | FloatingRenderLink
+  "input-moved": MovingInputLink | FloatingRenderLink | ToInputFromIoNodeLink
   "output-moved": MovingOutputLink | FloatingRenderLink
 
   "link-created": LLink | null | undefined