Fix/vue nodes snap to grid

[simula-r]

Summary

Enable node snap to grid in vue nodes mirroring the same behavior as litegraph.

• Show node snap preview (semi transparent white box target behind node)
• Resize snap to grid
• Shift + drag / Auto snap
• Multi select + group snap

Changes

• What: useNodeSnap.ts useShifyKeySync.ts setups the core hooks into both the vue node positioning/resizing system and the event forwarding technique for communicating to litegraph.

Review Focus

Both new composables and specifically the useNodeLayout modifications to batch the mutations when snapping.
A key tradeoff/note is why we are using the useShifyKeySync.ts which dispatches a new shift event to the canvas layer. This approach is the cleaner / more declaritive method mimicking how other vue node -> litegraph realtime events are passed.

Screenshots (if applicable)

vue-nodes-feat-grid-snapping.mp4

┆Issue is synchronized with this Notion page by Unito

[github-actions]

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/09/2025, 03:33:32 AM UTC

🔗 Links

• 📊 View Workflow Run
• 🎨 View Storybook

---

🎉 Your Storybook is ready for review!

[github-actions]

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/09/2025, 03:44:26 AM UTC

📈 Summary

• Total Tests: 488
• Passed: 455 ✅
• Failed: 0
• Flaky: 3 ⚠️
• Skipped: 30 ⏭️

📊 Test Reports by Browser

• ✅ chromium: View Report • ✅ 446 / ❌ 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.

[github-actions]

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

• ESLint auto-fixes
• Prettier formatting

[claude]

Comprehensive PR Review

This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.

Review Summary

PR: Fix/vue nodes snap to grid (#5973)
Impact: 133 additions, 15 deletions across 4 files

Issue Distribution

• Critical: 0
• High: 1
• Medium: 4
• Low: 2

Category Breakdown

• Architecture: 3 issues
• Security: 0 issues
• Performance: 2 issues
• Code Quality: 2 issues

Key Findings

Architecture & Design

The PR successfully integrates snap-to-grid functionality across Vue nodes and LiteGraph canvas. The new useNodeSnap composable follows Vue 3 composition API patterns well. However, the global event listener change in LGraphCanvas.ts poses integration risks by moving keydown listeners from canvas to document scope, which could interfere with other application components.

Security Considerations

No security vulnerabilities were identified. The code follows safe practices for DOM manipulation and event handling.

Performance Impact

Several performance optimizations could be implemented:

1. Avoid redundant position mutations when snap positions haven't changed
2. Consider caching intrinsic element sizes to reduce DOM manipulation during resize operations
3. The addition of snap functionality adds minimal runtime overhead

Integration Points

The changes properly integrate with the existing layout mutation system and respect the Vue/LiteGraph boundary. The snap functionality correctly uses the existing settings system and maintains consistency with LiteGraph behavior.

Positive Observations

• Clean separation of concerns with dedicated useNodeSnap composable
• Proper integration with existing layout mutation system
• Good TypeScript typing and interface definitions
• Consistent code style and documentation
• Proper use of Vue 3 Composition API patterns
• Integration with settings system for user preferences

References

• Repository Architecture Guide

Next Steps

1. Address the high priority global event listener scope change
2. Consider implementing suggested performance optimizations
3. Add error handling for edge cases in snap operations
4. Consider adding unit tests for the new snap functionality

---

This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.

[simula-r]

This approach mimics how other events get forwarded to litegraph such as mouseWheel. I think its better scoped and declarative as opposed to registering litegraph’s event listener on a parent element and filtering out view node input/textarea targets.

[simula-r]

This lets us listen for the shift key event only when a vue node is being dragged. Also by managing its own listener we only need to use trackShiftKey() once in useNodeLayout.ts and useNodeResizer.ts and it will be auto cleaned up.

[christian-byrne]

LGTM