fix LiteGraph capturing node pointer events if Vue and LG node positions become desynced (#6058)

## Summary

Added Vue mode guards to LiteGraph canvas to prevent dual event handling
between Vue node components and LiteGraph node event handlers. Fixes a
bug where the litegraph and vue positions become out of sync and then
there are effectively dead spots on the canvas (the user should still be
able to interact with the graph even if the positions desync - the only
real downside of desync should just be mispositioned nodes in the
serialized state).

Returns early only in `processNodeClick` and the node-related
(alt+click+drag node cloning) canvas handlers. In general, the LiteGraph
canvas still owns some events/interactions - but the node interactions
are fully owned by Vue when in Vue nodes mode.

## Changes

- **What**: Added `LiteGraph.vueNodesMode` checks in
[LGraphCanvas.ts](src/lib/litegraph/src/LGraphCanvas.ts) to skip native
event processing when Vue components handle interactions
- **Breaking**: This could have some side effects or break some
extensions if anything was relying on these. However, prior to this
change, things like `processNodeClick` should only have been getting the
click events in de-sync scenarios anyway (described in
[Summary](##Summary) section)

## Review Focus

Any possible side-effects you can think of.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6058-fix-LiteGraph-capturing-node-pointer-events-if-Vue-and-LG-node-positions-become-desynced-28c6d73d365081f389f8c72299c31b0b)
by [Unito](https://www.unito.io)
This commit is contained in:
Christian Byrne
2025-10-16 18:46:37 -07:00
committed by GitHub
parent 09b1e1702c
commit e48e11e434

View File

@@ -2377,6 +2377,7 @@ export class LGraphCanvas
// clone node ALT dragging
if (
!LiteGraph.vueNodesMode &&
LiteGraph.alt_drag_do_clone_nodes &&
e.altKey &&
!e.ctrlKey &&
@@ -2675,6 +2676,12 @@ export class LGraphCanvas
ctrlOrMeta: boolean,
node: LGraphNode
): void {
// In Vue nodes mode, Vue components own all node-level interactions
// Skip LiteGraph handling to prevent dual event processing
if (LiteGraph.vueNodesMode) {
return
}
const { pointer, graph, linkConnector } = this
if (!graph) throw new NullGraphError()