From 135430ed235afbed86bbc1c65099a3f55ce7de69 Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Mon, 16 Dec 2024 00:43:45 +1100 Subject: [PATCH 1/5] Split processMouseUp into smaller chunks Moves connecting links processing to its own method --- src/LGraphCanvas.ts | 166 +++++++++++++++++++++++--------------------- 1 file changed, 85 insertions(+), 81 deletions(-) diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 74a400e..20f5ba9 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -3166,87 +3166,7 @@ export class LGraphCanvas { 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) { - node.connect(slot, link.node, link.slot, link.afterRerouteId) // this is inverted has output-input nature like - } 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) { - 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, - } - // 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) { - 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(node, x, y, e) } else { this.dirty_canvas = true @@ -3278,6 +3198,90 @@ export class LGraphCanvas { return } + #processConnectingLinks(node: LGraphNode, x: number, y: number, e: PointerEvent & CanvasMouseEvent) { + // 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) { + node.connect(slot, link.node, link.slot, link.afterRerouteId) // this is inverted has output-input nature like + } 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) { + 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, + } + // 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) { + 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 From 0ba8b72f9a008da60f6182e1315326c73fc54141 Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Mon, 16 Dec 2024 01:41:09 +1100 Subject: [PATCH 2/5] Remove redundant code --- src/LGraphCanvas.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 20f5ba9..2ace9d1 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -3163,10 +3163,9 @@ export class LGraphCanvas { const x = e.canvasX const y = e.canvasY - const node = graph.getNodeOnPos(x, y, this.visible_nodes) if (this.connecting_links?.length) { - this.#processConnectingLinks(node, x, y, e) + this.#processConnectingLinks(x, y, e) } else { this.dirty_canvas = true @@ -3198,7 +3197,9 @@ export class LGraphCanvas { return } - #processConnectingLinks(node: LGraphNode, x: number, y: number, e: PointerEvent & CanvasMouseEvent) { + #processConnectingLinks(x: number, y: number, e: PointerEvent & CanvasMouseEvent) { + const node = this.graph.getNodeOnPos(x, y, this.visible_nodes) + // node below mouse const firstLink = this.connecting_links[0] if (node) { From 35f3cab849c0f680f9682b3144c0cecc51bf4346 Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Mon, 16 Dec 2024 02:10:09 +1100 Subject: [PATCH 3/5] Fix drag input link breaks reroutes --- src/LGraphCanvas.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 2ace9d1..3d86a89 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -2449,13 +2449,18 @@ export class LGraphCanvas { slot, output: linked_node.outputs[slot], pos: linked_node.getConnectionPos(false, slot), + afterRerouteId: link_info.parentId, } this.connecting_links = [connecting] pointer.onDragStart = () => { + connecting.output = linked_node.outputs[slot] + } + pointer.onDragEnd = (upEvent) => { + this.#processConnectingLinks(upEvent.canvasX, upEvent.canvasY, upEvent) if (this.allow_reconnect_links && !LiteGraph.click_do_break_link_to) node.disconnectInput(i) - connecting.output = linked_node.outputs[slot] + this.connecting_links = null } this.dirty_bgcanvas = true From fbcbbb8fd7df8ff6befadac1e997afad44ce627c Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Mon, 16 Dec 2024 02:22:31 +1100 Subject: [PATCH 4/5] Remove redundant code --- src/LGraphCanvas.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 3d86a89..5b3b0ea 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -2457,7 +2457,7 @@ export class LGraphCanvas { connecting.output = linked_node.outputs[slot] } pointer.onDragEnd = (upEvent) => { - this.#processConnectingLinks(upEvent.canvasX, upEvent.canvasY, upEvent) + this.#processConnectingLinks(upEvent) if (this.allow_reconnect_links && !LiteGraph.click_do_break_link_to) node.disconnectInput(i) this.connecting_links = null @@ -3170,7 +3170,7 @@ export class LGraphCanvas { const y = e.canvasY if (this.connecting_links?.length) { - this.#processConnectingLinks(x, y, e) + this.#processConnectingLinks(e) } else { this.dirty_canvas = true @@ -3202,7 +3202,8 @@ export class LGraphCanvas { return } - #processConnectingLinks(x: number, y: number, e: PointerEvent & CanvasMouseEvent) { + #processConnectingLinks(e: PointerEvent & CanvasMouseEvent) { + const { canvasX: x, canvasY: y } = e const node = this.graph.getNodeOnPos(x, y, this.visible_nodes) // node below mouse From 4530e3cdcb3d81bd3bf625cafb202ea5e836579d Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Mon, 16 Dec 2024 02:22:41 +1100 Subject: [PATCH 5/5] nit --- src/LGraphCanvas.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 5b3b0ea..ae377d7 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -2374,16 +2374,16 @@ export class LGraphCanvas { for (const linkId of output.links) { const link = graph._links.get(linkId) 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: node.horizontal !== true ? LinkDirection.RIGHT : LinkDirection.CENTER, }) }