[fix] Allow creating connections from empty subgraph slots (#1167)

src/LGraphCanvas.ts

@@ -6026,7 +6026,11 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       }
       const { name } = slotX
       iSlotConn = nodeX.slots.findIndex(s => s.name === name)
-      slotX = nodeX.slots[iSlotConn]
+      // If it's not found in the main slots, it might be the empty slot from a Subgraph node.
+      // In that case, the original `slotX` object is the correct one, so don't overwrite it.
+      if (iSlotConn !== -1) {
+        slotX = nodeX.slots[iSlotConn]
+      }
       if (!slotX) {
         console.warn("Cant get slot information", slotX)
         return

src/canvas/LinkConnector.ts

@@ -283,6 +283,8 @@ export class LinkConnector {
     this.renderLinks.push(renderLink)
 
     this.state.connectingTo = "input"
+
+    this.#setLegacyLinks(false)
   }
 
   dragNewFromSubgraphOutput(network: LinkNetwork, outputNode: SubgraphOutputNode, output: SubgraphOutput, fromReroute?: Reroute): void {
@@ -292,6 +294,8 @@ export class LinkConnector {
     this.renderLinks.push(renderLink)
 
     this.state.connectingTo = "output"
+
+    this.#setLegacyLinks(true)
   }
 
   /**
@@ -425,19 +429,15 @@ export class LinkConnector {
   }
 
   /**
-   * Connects the links being droppe
+   * Connects the links being dropped
    * @param event Contains the drop location, in canvas space
    */
   dropLinks(locator: ItemLocator, event: CanvasPointerEvent): void {
     if (!this.isConnecting) {
-      console.warn("Attempted to drop links when not connecting to anything.")
-      return
+      const mayContinue = this.events.dispatch("before-drop-links", { renderLinks: this.renderLinks, event })
+      if (mayContinue === false) return
     }
 
-    const { renderLinks } = this
-    const mayContinue = this.events.dispatch("before-drop-links", { renderLinks, event })
-    if (mayContinue === false) return
-
     try {
       const { canvasX, canvasY } = event
 
@@ -461,11 +461,11 @@ export class LinkConnector {
         }
       }
     } finally {
-      this.events.dispatch("after-drop-links", { renderLinks, event })
+      this.events.dispatch("after-drop-links", { renderLinks: this.renderLinks, event })
     }
   }
 
-  dropOnIoNode(ioNode: SubgraphInputNode | SubgraphOutputNode, event: CanvasPointerEvent) {
+  dropOnIoNode(ioNode: SubgraphInputNode | SubgraphOutputNode, event: CanvasPointerEvent): void {
     const { renderLinks, state } = this
     const { connectingTo } = state
     const { canvasX, canvasY } = event

src/subgraph/SubgraphInputNode.ts

@@ -103,6 +103,18 @@ export class SubgraphInputNode extends SubgraphIONodeBase<SubgraphInput> impleme
     const inputSlot = target_node.findInputByType(target_slotType)
     if (!inputSlot) return
 
+    if (slot === -1) {
+      // This indicates a connection is being made from the "Empty" slot.
+      // We need to create a new, concrete input on the subgraph that matches the target.
+      const newSubgraphInput = this.subgraph.addInput(inputSlot.slot.name, String(inputSlot.slot.type ?? ""))
+      const newSlotIndex = this.slots.indexOf(newSubgraphInput)
+      if (newSlotIndex === -1) {
+        console.error("Could not find newly created subgraph input slot.")
+        return
+      }
+      slot = newSlotIndex
+    }
+
     return this.slots[slot].connect(inputSlot.slot, target_node, optsIn?.afterRerouteId)
   }