mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
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:
@@ -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()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user