Skip to content

Conversation

christian-byrne
Copy link
Contributor

@christian-byrne christian-byrne commented Oct 14, 2025

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 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 section)

Review Focus

Any possible side-effects you can think of.

┆Issue is synchronized with this Notion page by Unito

In Vue nodes mode, Vue components own all node-level pointer interactions
(clicks, drags, slots, widgets). LiteGraph should skip processing these
events to prevent duplicate handling and ghost hit targets.

Changes:
- Guard #processNodeClick to early return in vueNodesMode
- Guard alt-drag clone to skip in vueNodesMode

Canvas-level interactions (panning, groups, reroutes, background clicks)
continue to work normally in both modes.

Follows existing pattern from LGraphNode.ts:1973
@dosubot dosubot bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Oct 14, 2025
Copy link

github-actions bot commented Oct 14, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 10/14/2025, 09:00:49 PM UTC

🔗 Links


🎉 Your Storybook is ready for review!

Copy link

github-actions bot commented Oct 14, 2025

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/14/2025, 09:16:55 PM UTC

📈 Summary

  • Total Tests: 498
  • Passed: 465 ✅
  • Failed: 0
  • Flaky: 3 ⚠️
  • Skipped: 30 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 456 / ❌ 0 / ⚠️ 3 / ⏭️ 30
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@christian-byrne christian-byrne merged commit e48e11e into main Oct 17, 2025
38 checks passed
@christian-byrne christian-byrne deleted the vue-node/fix/lg-pointer branch October 17, 2025 01:46
christian-byrne added a commit that referenced this pull request Oct 17, 2025
…ons 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:node-interaction area:vue-migration size:XS This PR changes 0-9 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant