POC for fast link disconnection

When a link is dragged only a short disctance from an input slot before
being dropped on canvas, immediately disconnect it instead of displaying
the node search dialogue

src/lib/litegraph/src/LGraphCanvas.ts

@@ -2,6 +2,7 @@ import { toString } from 'es-toolkit/compat'
 import { toValue } from 'vue'
 
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
+import { MovingLinkBase } from '@/lib/litegraph/src/canvas/MovingLinkBase'
 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'
@@ -5014,6 +5015,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
           }
         )
       }
+      if (renderLink instanceof MovingLinkBase)
+        renderLink.drawConnectionCircle(ctx)
 
       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 MovingLinkBase && link.dropOnCanvas(event)
+    ).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/MovingLinkBase.ts

@@ -11,6 +11,7 @@ import type {
 } from '@/lib/litegraph/src/interfaces'
 import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
 import type { SubgraphOutput } from '@/lib/litegraph/src/subgraph/SubgraphOutput'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { NodeLike } from '@/lib/litegraph/src/types/NodeLike'
 import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
 
@@ -144,4 +145,19 @@ export abstract class MovingLinkBase implements RenderLink {
   ): void
 
   abstract disconnect(): boolean
+  dropOnCanvas(event: CanvasPointerEvent): boolean {
+    const fromPos = this.inputPos
+    const distSquared =
+      (fromPos[0] - event.canvasX) ** 2 + (fromPos[1] - event.canvasY) ** 2
+    return distSquared < 35 ** 2
+  }
+  drawConnectionCircle(ctx: CanvasRenderingContext2D) {
+    ctx.save()
+    ctx.strokeStyle = 'black'
+    ctx.beginPath()
+    ctx.moveTo(this.inputPos[0] + 35, this.inputPos[1])
+    ctx.arc(...this.inputPos, 35, 0, Math.PI * 2)
+    ctx.stroke()
+    ctx.restore()
+  }
 }