Add functionality to quickly disconnect moved input links

src/lib/litegraph/src/LGraphCanvas.ts

@@ -1,6 +1,7 @@
 import { toString } from 'es-toolkit/compat'
 
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
+import { MovingInputLink } from '@/lib/litegraph/src/canvas/MovingInputLink'
 import { LitegraphLinkAdapter } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
@@ -4769,6 +4770,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
               }
             )
           }
+          if (renderLink instanceof MovingInputLink)
+            renderLink.drawConnectionCircle(ctx, this.graph_mouse)
 
           ctx.fillStyle = colour
           ctx.beginPath()

src/lib/litegraph/src/canvas/LinkConnector.ts

@@ -1,3 +1,5 @@
+import { remove } from 'es-toolkit'
+
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LLink } from '@/lib/litegraph/src/LLink'
 import type { Reroute } from '@/lib/litegraph/src/Reroute'
@@ -860,6 +862,11 @@ export class LinkConnector {
   }
 
   dropOnNothing(event: CanvasPointerEvent): void {
+    remove(
+      this.renderLinks,
+      (link) => link instanceof MovingInputLink && link.disconnectOnDrop
+    ).forEach((link) => (link as MovingLinkBase).disconnect())
+    if (this.renderLinks.length === 0) return
     // For external event only.
     const mayContinue = this.events.dispatch('dropped-on-canvas', event)
     if (mayContinue === false) return

src/lib/litegraph/src/canvas/MovingInputLink.ts

@@ -1,4 +1,5 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LLink } from '@/lib/litegraph/src/LLink'
 import type { Reroute } from '@/lib/litegraph/src/Reroute'
 import type { CustomEventTarget } from '@/lib/litegraph/src/infrastructure/CustomEventTarget'
@@ -24,6 +25,7 @@ export class MovingInputLink extends MovingLinkBase {
   readonly fromPos: Point
   readonly fromDirection: LinkDirection
   readonly fromSlotIndex: number
+  disconnectOnDrop: boolean
 
   constructor(
     network: LinkNetwork,
@@ -38,6 +40,7 @@ export class MovingInputLink extends MovingLinkBase {
     this.fromPos = fromReroute?.pos ?? this.outputPos
     this.fromDirection = LinkDirection.NONE
     this.fromSlotIndex = this.outputIndex
+    this.disconnectOnDrop = true
   }
 
   canConnectToInput(
@@ -130,4 +133,21 @@ export class MovingInputLink extends MovingLinkBase {
   disconnect(): boolean {
     return this.inputNode.disconnectInput(this.inputIndex, true)
   }
+
+  drawConnectionCircle(ctx: CanvasRenderingContext2D, to: Point) {
+    if (!this.disconnectOnDrop) return
+    const radius = 35
+    ctx.save()
+    ctx.strokeStyle = LiteGraph.WIDGET_OUTLINE_COLOR
+    ctx.lineWidth = 2
+    ctx.beginPath()
+    ctx.moveTo(this.inputPos[0] + radius, this.inputPos[1])
+    ctx.arc(...this.inputPos, radius, 0, Math.PI * 2)
+    ctx.stroke()
+    ctx.restore()
+
+    const [fromX, fromY] = this.inputPos
+    const distSquared = (fromX - to[0]) ** 2 + (fromY - to[1]) ** 2
+    this.disconnectOnDrop = distSquared < radius ** 2
+  }
 }

src/renderer/core/canvas/links/linkConnectorAdapter.ts

@@ -1,3 +1,4 @@
+import type { SlotLayout } from '@/renderer/core/layout/types'
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { RerouteId } from '@/lib/litegraph/src/Reroute'
@@ -72,11 +73,20 @@ export class LinkConnectorAdapter {
   beginFromInput(
     nodeId: NodeId,
     inputIndex: number,
-    opts?: { moveExisting?: boolean; fromRerouteId?: RerouteId }
+    opts?: {
+      moveExisting?: boolean
+      fromRerouteId?: RerouteId
+      layout: SlotLayout
+    }
   ): void {
     const node = this.network.getNodeById(nodeId)
     const input = node?.inputs?.[inputIndex]
     if (!node || !input) return
+    if (opts?.layout)
+      input.pos = [
+        opts.layout.position.x - node.pos[0],
+        opts.layout.position.y - node.pos[1]
+      ]
 
     const fromReroute = this.network.getReroute(opts?.fromRerouteId)
 

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts

@@ -671,7 +671,8 @@ export function useSlotLinkInteraction({
       })
     } else {
       activeAdapter.beginFromInput(localNodeId, index, {
-        moveExisting: shouldMoveExistingInput
+        moveExisting: shouldMoveExistingInput,
+        layout
       })
     }