Fix disconnection coordinates in vue

src/lib/litegraph/src/LGraphCanvas.ts

@@ -4771,7 +4771,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
             )
           }
           if (renderLink instanceof MovingInputLink)
-            renderLink.drawConnectionCircle(ctx, this.graph_mouse)
+            renderLink.drawConnectionCircle(ctx, highlightPos)
 
           ctx.fillStyle = colour
           ctx.beginPath()

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

@@ -15,7 +15,8 @@ import type {
   INodeOutputSlot,
   ItemLocator,
   LinkNetwork,
-  LinkSegment
+  LinkSegment,
+  Point
 } from '@/lib/litegraph/src/interfaces'
 import { EmptySubgraphInput } from '@/lib/litegraph/src/subgraph/EmptySubgraphInput'
 import { EmptySubgraphOutput } from '@/lib/litegraph/src/subgraph/EmptySubgraphOutput'
@@ -132,7 +133,11 @@ export class LinkConnector {
   }
 
   /** Drag an existing link to a different input. */
-  moveInputLink(network: LinkNetwork, input: INodeInputSlot): void {
+  moveInputLink(
+    network: LinkNetwork,
+    input: INodeInputSlot,
+    opts?: { startPoint?: Point }
+  ): void {
     if (this.isConnecting) throw new Error('Already dragging links.')
 
     const { state, inputLinks, renderLinks } = this
@@ -223,7 +228,13 @@ export class LinkConnector {
         // Regular node links
         try {
           const reroute = network.getReroute(link.parentId)
-          const renderLink = new MovingInputLink(network, link, reroute)
+          const renderLink = new MovingInputLink(
+            network,
+            link,
+            reroute,
+            undefined,
+            opts?.startPoint
+          )
 
           const mayContinue = this.events.dispatch(
             'before-move-input',

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

@@ -26,12 +26,14 @@ export class MovingInputLink extends MovingLinkBase {
   readonly fromDirection: LinkDirection
   readonly fromSlotIndex: number
   disconnectOnDrop: boolean
+  readonly disconnectOrigin: Point
 
   constructor(
     network: LinkNetwork,
     link: LLink,
     fromReroute?: Reroute,
-    dragDirection: LinkDirection = LinkDirection.CENTER
+    dragDirection: LinkDirection = LinkDirection.CENTER,
+    startPoint?: Point
   ) {
     super(network, link, 'input', fromReroute, dragDirection)
 
@@ -41,6 +43,7 @@ export class MovingInputLink extends MovingLinkBase {
     this.fromDirection = LinkDirection.NONE
     this.fromSlotIndex = this.outputIndex
     this.disconnectOnDrop = true
+    this.disconnectOrigin = startPoint ?? this.inputPos
   }
 
   canConnectToInput(
@@ -134,20 +137,22 @@ export class MovingInputLink extends MovingLinkBase {
     return this.inputNode.disconnectInput(this.inputIndex, true)
   }
 
-  drawConnectionCircle(ctx: CanvasRenderingContext2D, to: Point) {
+  drawConnectionCircle(ctx: CanvasRenderingContext2D, to: Readonly<Point>) {
     if (!this.disconnectOnDrop) return
+
+    const [originX, originY] = this.disconnectOrigin
     const radius = 35
+    const distSquared = (originX - to[0]) ** 2 + (originY - to[1]) ** 2
+
     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.moveTo(originX + radius, originY)
+    ctx.arc(originX, originY, 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,4 +1,5 @@
 import type { SlotLayout } from '@/renderer/core/layout/types'
+import type { Point } from '@/lib/litegraph/src/interfaces'
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { RerouteId } from '@/lib/litegraph/src/Reroute'
@@ -74,24 +75,22 @@ export class LinkConnectorAdapter {
     nodeId: NodeId,
     inputIndex: number,
     opts?: {
-      moveExisting?: boolean
       fromRerouteId?: RerouteId
-      layout: SlotLayout
+      layout?: SlotLayout
+      moveExisting?: boolean
     }
   ): 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)
 
     if (opts?.moveExisting) {
-      this.linkConnector.moveInputLink(this.network, input)
+      const startPoint: Point | undefined = opts.layout
+        ? [opts.layout.position.x, opts.layout.position.y]
+        : undefined
+      this.linkConnector.moveInputLink(this.network, input, { startPoint })
     } else {
       this.linkConnector.dragNewFromInput(
         this.network,