From 2c8e48fb7e0d09b3832360671f83e4c3117dc6c8 Mon Sep 17 00:00:00 2001 From: Austin Mroz Date: Mon, 15 Dec 2025 10:19:04 -0800 Subject: [PATCH] Fix disconnection coordinates in vue --- src/lib/litegraph/src/LGraphCanvas.ts | 2 +- src/lib/litegraph/src/canvas/LinkConnector.ts | 17 ++++++++++++++--- src/lib/litegraph/src/canvas/MovingInputLink.ts | 17 +++++++++++------ .../core/canvas/links/linkConnectorAdapter.ts | 15 +++++++-------- 4 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts index fd94a8a7a..f2cea61e4 100644 --- a/src/lib/litegraph/src/LGraphCanvas.ts +++ b/src/lib/litegraph/src/LGraphCanvas.ts @@ -4771,7 +4771,7 @@ export class LGraphCanvas implements CustomEventDispatcher ) } if (renderLink instanceof MovingInputLink) - renderLink.drawConnectionCircle(ctx, this.graph_mouse) + renderLink.drawConnectionCircle(ctx, highlightPos) ctx.fillStyle = colour ctx.beginPath() diff --git a/src/lib/litegraph/src/canvas/LinkConnector.ts b/src/lib/litegraph/src/canvas/LinkConnector.ts index 55f9180e2..42f02e434 100644 --- a/src/lib/litegraph/src/canvas/LinkConnector.ts +++ b/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', diff --git a/src/lib/litegraph/src/canvas/MovingInputLink.ts b/src/lib/litegraph/src/canvas/MovingInputLink.ts index 73ce7ef38..3e8ddce58 100644 --- a/src/lib/litegraph/src/canvas/MovingInputLink.ts +++ b/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) { 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 } } diff --git a/src/renderer/core/canvas/links/linkConnectorAdapter.ts b/src/renderer/core/canvas/links/linkConnectorAdapter.ts index 129dd9878..1e8e312ef 100644 --- a/src/renderer/core/canvas/links/linkConnectorAdapter.ts +++ b/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,