Skip to content

Improve link drag & drop #380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
webfiltered merged 6 commits into from
Mar 3, 2025
Merged

Improve link drag & drop #380

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3189c22
Split processMouseUp into smaller chunks
webfiltered Dec 15, 2024
1d559ff
[Refactor] Re-order code to where it is used
webfiltered Mar 3, 2025
c27881d
Fix drag input link breaks reroutes
webfiltered Dec 15, 2024
9184f67
Remove redundant code
webfiltered Dec 15, 2024
e336c61
nit
webfiltered Dec 15, 2024
bc829e4
Fix drag link onto itself disconnects
webfiltered Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 108 additions & 91 deletions src/LGraphCanvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2242,16 +2242,16 @@ export class LGraphCanvas implements ConnectionColorContext {
if (!link) continue

const slot = link.target_slot
const linked_node = graph._nodes_by_id[link.target_id]
const input = linked_node.inputs[slot]
const pos = linked_node.getConnectionPos(true, slot)
const otherNode = graph._nodes_by_id[link.target_id]
const input = otherNode.inputs[slot]
const pos = otherNode.getConnectionPos(true, slot)

this.connecting_links.push({
node: linked_node,
slot: slot,
input: input,
node: otherNode,
slot,
input,
output: null,
pos: pos,
pos,
direction: LinkDirection.RIGHT,
})
}
Expand Down Expand Up @@ -2320,13 +2320,20 @@ export class LGraphCanvas implements ConnectionColorContext {
slot,
output: linked_node.outputs[slot],
pos: linked_node.getConnectionPos(false, slot),
afterRerouteId: link_info.parentId,
}
this.connecting_links = [connecting]

pointer.onDragStart = () => {
if (this.allow_reconnect_links && !LiteGraph.click_do_break_link_to)
connecting.output = linked_node.outputs[slot]
}
pointer.onDragEnd = (upEvent) => {
if (this.allow_reconnect_links && !LiteGraph.click_do_break_link_to) {
node.disconnectInput(i)
}
this.#processConnectingLinks(upEvent)
connecting.output = linked_node.outputs[slot]
this.connecting_links = null
}

this.dirty_bgcanvas = true
Expand Down Expand Up @@ -2902,92 +2909,10 @@ export class LGraphCanvas implements ConnectionColorContext {

const x = e.canvasX
const y = e.canvasY
const node = graph.getNodeOnPos(x, y, this.visible_nodes)

if (this.connecting_links?.length) {
// node below mouse
const firstLink = this.connecting_links[0]
if (node) {
for (const link of this.connecting_links) {
// dragging a connection
this.#dirty()

// slot below mouse? connect
if (link.output) {
const slot = this.isOverNodeInput(node, x, y)
if (slot != -1) {
link.node.connect(link.slot, node, slot, link.afterRerouteId)
} else if (this.link_over_widget) {
this.emitEvent({
subType: "connectingWidgetLink",
link,
node,
widget: this.link_over_widget,
})
this.link_over_widget = null
} else {
// not on top of an input
// look for a good slot
link.node.connectByType(link.slot, node, link.output.type, {
afterRerouteId: link.afterRerouteId,
})
}
} else if (link.input) {
const slot = this.isOverNodeOutput(node, x, y)

if (slot != -1) {
// this is inverted has output-input nature like
node.connect(slot, link.node, link.slot, link.afterRerouteId)
} else {
// not on top of an input
// look for a good slot
link.node.connectByTypeOutput(
link.slot,
node,
link.input.type,
{ afterRerouteId: link.afterRerouteId },
)
}
}
}
} else if (firstLink.input || firstLink.output) {
// For external event only.
const linkReleaseContextExtended: LinkReleaseContextExtended = {
links: this.connecting_links,
}
this.emitEvent({
subType: "empty-release",
originalEvent: e,
linkReleaseContext: linkReleaseContextExtended,
})
// No longer in use
// add menu when releasing link in empty space
if (LiteGraph.release_link_on_empty_shows_menu) {
const linkReleaseContext = firstLink.output
? {
node_from: firstLink.node,
slot_from: firstLink.output,
type_filter_in: firstLink.output.type,
}
: {
node_to: firstLink.node,
slot_from: firstLink.input,
type_filter_out: firstLink.input?.type,
}

if (e.shiftKey) {
if (this.allow_searchbox) {
this.showSearchBox(e, linkReleaseContext)
}
} else {
if (firstLink.output) {
this.showConnectionMenu({ nodeFrom: firstLink.node, slotFrom: firstLink.output, e: e })
} else if (firstLink.input) {
this.showConnectionMenu({ nodeTo: firstLink.node, slotTo: firstLink.input, e: e })
}
}
}
}
this.#processConnectingLinks(e)
} else {
this.dirty_canvas = true

Expand Down Expand Up @@ -3019,6 +2944,98 @@ export class LGraphCanvas implements ConnectionColorContext {
return
}

#processConnectingLinks(e: CanvasPointerEvent) {
const { graph, connecting_links } = this
if (!graph) throw new NullGraphError()
if (!connecting_links) return

const { canvasX: x, canvasY: y } = e
const node = graph.getNodeOnPos(x, y, this.visible_nodes)
const firstLink = connecting_links[0]

if (node) {
for (const link of connecting_links) {
// dragging a connection
this.#dirty()

// slot below mouse? connect
if (link.output) {
const slot = this.isOverNodeInput(node, x, y)
if (slot != -1) {
link.node.connect(link.slot, node, slot, link.afterRerouteId)
} else if (this.link_over_widget) {
this.emitEvent({
subType: "connectingWidgetLink",
link,
node,
widget: this.link_over_widget,
})
this.link_over_widget = null
} else {
// not on top of an input
// look for a good slot
link.node.connectByType(link.slot, node, link.output.type, {
afterRerouteId: link.afterRerouteId,
})
}
} else if (link.input) {
const slot = this.isOverNodeOutput(node, x, y)

if (slot != -1) {
// this is inverted has output-input nature like
node.connect(slot, link.node, link.slot, link.afterRerouteId)
} else {
// not on top of an input
// look for a good slot
link.node.connectByTypeOutput(
link.slot,
node,
link.input.type,
{ afterRerouteId: link.afterRerouteId },
)
}
}
}
} else if (firstLink.input || firstLink.output) {
// For external event only.
const linkReleaseContextExtended: LinkReleaseContextExtended = {
links: connecting_links,
}
this.emitEvent({
subType: "empty-release",
originalEvent: e,
linkReleaseContext: linkReleaseContextExtended,
})
// No longer in use
// add menu when releasing link in empty space
if (LiteGraph.release_link_on_empty_shows_menu) {
const linkReleaseContext = firstLink.output
? {
node_from: firstLink.node,
slot_from: firstLink.output,
type_filter_in: firstLink.output.type,
}
: {
node_to: firstLink.node,
slot_from: firstLink.input,
type_filter_out: firstLink.input?.type,
}

if (e.shiftKey) {
if (this.allow_searchbox) {
this.showSearchBox(e, linkReleaseContext)
}
} else {
if (firstLink.output) {
this.showConnectionMenu({ nodeFrom: firstLink.node, slotFrom: firstLink.output, e: e })
} else if (firstLink.input) {
this.showConnectionMenu({ nodeTo: firstLink.node, slotTo: firstLink.input, e: e })
}
}
}
}
}

/**
* Called when the mouse moves off the canvas. Clears all node hover states.
* @param e
Expand Down
Loading