Add polish

Only applied on input links

Once snapped, stays disabled

Simplified logic

Some actual themeing

src/lib/litegraph/src/LGraphCanvas.ts

@@ -1,7 +1,7 @@
 import { toString } from 'es-toolkit/compat'
 
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
-import { MovingLinkBase } from '@/lib/litegraph/src/canvas/MovingLinkBase'
+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'
@@ -4770,8 +4770,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
               }
             )
           }
-          if (renderLink instanceof MovingLinkBase)
-            renderLink.drawConnectionCircle(ctx)
+          if (renderLink instanceof MovingInputLink)
+            renderLink.drawConnectionCircle(ctx, this.graph_mouse)
 
           ctx.fillStyle = colour
           ctx.beginPath()

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

@@ -864,7 +864,7 @@ export class LinkConnector {
   dropOnNothing(event: CanvasPointerEvent): void {
     remove(
       this.renderLinks,
-      (link) => link instanceof MovingLinkBase && link.dropOnCanvas(event)
+      (link) => link instanceof MovingInputLink && link.disconnectOnDrop
     ).forEach((link) => (link as MovingLinkBase).disconnect())
     if (this.renderLinks.length === 0) return
     // For external event only.

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/lib/litegraph/src/canvas/MovingLinkBase.ts

@@ -11,7 +11,6 @@ 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'
 
@@ -145,19 +144,4 @@ 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()
-  }
 }