fix: emit layout change for batch node bounds #5939
Conversation
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 10/11/2025, 03:00:16 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 10/11/2025, 02:42:09 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
christian-byrne
force-pushed
the
vue-node/fix-layout-mutation
branch
from
5f682ef to
1a14c1c
Compare
christian-byrne
added
the
claude-review
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
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: emit layout change for batch node bounds (#5939)
Impact: 113 additions, 16 deletions across 4 files
Issue Distribution
- Critical: 0
- High: 0
- Medium: 3
- Low: 3
Category Breakdown
- Architecture: 0 issues
- Security: 0 issues
- Performance: 2 issues
- Code Quality: 4 issues
Key Findings
Architecture & Design
The implementation follows good CRDT patterns by routing DOM-driven node bounds updates through a single operation type. The new BatchUpdateBoundsOperation properly integrates with the existing Yjs-based layout store architecture and maintains consistency with other operation handlers.
Security Considerations
No security issues identified. The implementation properly validates node existence and doesn't expose any attack vectors.
Performance Impact
Two performance considerations:
- Spatial index updates in loops may cause performance degradation for large batch operations
- Storing previousBounds increases memory footprint during batch operations
Integration Points
The integration with useLinkLayoutSync correctly handles link recomputation for updated nodes. The test coverage adequately validates the new functionality.
Positive Observations
- Good separation of concerns with dedicated operation type
- Proper integration with existing CRDT pipeline
- Comprehensive test coverage for the new functionality
- Consistent error handling patterns with existing codebase
- Clean type definitions for the new operation
Next Steps
- Address medium priority quality issues (null checks, type safety)
- Consider performance optimizations for large batch operations
- Replace arbitrary timeout in test with proper synchronization
- Validate OperationMeta interface usage in type definitions
This is a comprehensive automated review. For architectural decisions requiring human judgment, please request additional manual review.
christian-byrne
force-pushed
the
vue-node/fix-layout-mutation
branch
from
0f18640 to
5650ccb
Compare
dosubot
bot
added
the
size:L
christian-byrne
force-pushed
the
vue-node/fix-layout-mutation
branch
3 times, most recently
from
bad2ec6 to
24d1d03
Compare
| width: data.bounds.width, | ||
| height: data.bounds.height | ||
| }) | ||
| ynode.set('bounds', data.bounds) |
There was a problem hiding this comment.
I still hate that these are separate properties
| * More efficient than calling update() multiple times as it only invalidates cache once | ||
| */ | ||
| batchUpdate(updates: Array<{ nodeId: NodeId; bounds: Bounds }>): void { | ||
| for (const { nodeId, bounds } of updates) { |
There was a problem hiding this comment.
Does it really count as a batch if you do it for each item?
There was a problem hiding this comment.
Batching because we don't rebuild the tree until after.
| } | ||
| resize(screenSize) | ||
| // Set initial DOM size from layout store, but respect intrinsic content minimum | ||
| if (size.value && nodeContainerRef.value && transformState) { |
There was a problem hiding this comment.
But also, what happens if this boat gets missed?
There was a problem hiding this comment.
What do you mean exactly?
| const originalWidth = element.style.width | ||
| const originalHeight = element.style.height | ||
|
|
||
| // Temporarily set to auto to measure natural content size | ||
| element.style.width = 'auto' | ||
| element.style.height = 'auto' | ||
|
|
||
| const intrinsicRect = element.getBoundingClientRect() | ||
|
|
||
| // Restore original size | ||
| element.style.width = originalWidth | ||
| element.style.height = originalHeight | ||
|
|
||
| // Convert from screen coordinates to canvas coordinates | ||
| return { | ||
| width: intrinsicRect.width / scale, | ||
| height: intrinsicRect.height / scale | ||
| } |
There was a problem hiding this comment.
There's got to be a better way...
There was a problem hiding this comment.
Well, this is used in multiple places and this PR centralizes so this is the shared location - so if we find a better way it will be very easy to swap implementations later.
DrJKL
force-pushed
the
vue-node/fix-layout-mutation
branch
from
24d1d03 to
fda0cb2
Compare
|
/update-playwright |
|
Updating Playwright Expectations |
christian-byrne
force-pushed
the
vue-node/fix-layout-mutation
branch
from
fda0cb2 to
318a194
Compare
christian-byrne
added
the
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
## Summary Fixes issue where node size changes are not serialized by routing DOM-driven node bounds updates through a single CRDT operation so Vue node geometry stays synchronized with LiteGraph. ## Changes - **What**: Added `BatchUpdateBoundsOperation` to the layout store, applied it via the existing Yjs pipeline, notified link sync to recompute touched nodes, and covered the path with a regression test ## Review Focus Correctness of the new batch operation when multiple nodes update simultaneously, especially remote replay/undo scenarios and link geometry recomputation. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5939-fix-emit-layout-change-for-batch-node-bounds-2846d73d365081db8f8cca5bf7b85308) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>
## Summary Fixes issue where node size changes are not serialized by routing DOM-driven node bounds updates through a single CRDT operation so Vue node geometry stays synchronized with LiteGraph. ## Changes - **What**: Added `BatchUpdateBoundsOperation` to the layout store, applied it via the existing Yjs pipeline, notified link sync to recompute touched nodes, and covered the path with a regression test ## Review Focus Correctness of the new batch operation when multiple nodes update simultaneously, especially remote replay/undo scenarios and link geometry recomputation. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5939-fix-emit-layout-change-for-batch-node-bounds-2846d73d365081db8f8cca5bf7b85308) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>
## What's Changed ### 🚀 Features - Add MediaAssetCard presentation components (#5878) - Make Vue nodes' outputs/previews responsively sized and work with node resizing (#5970) - Allow connection to subgraphIOs in vue mode (#6016) - Add distribution detection pattern (#6028) - Make nodeData.widgets reactive (#6019) ### 🐛 Bug Fixes - Fix FLOAT widget incrementing broken & disabled state styles on widget number input (Vue) (#6036) - Fix Vue node border styles in different states (executing, error, selected) (#6018) - Fix Vue node opacity conditions (user node opacity, bypass state, muted state) (#6022) - Fix: emit layout change for batch node bounds (#5939) - Safer restoration of widgets_values on subgraph nodes (#6015) - Fix(execution): reset progress state after runs to unfreeze tab title/favicon (main) (#6026) - Use type check instead of cast (#6041) ### 🎨 Style & Design - [style] match widget border/outline styles with designs (#6021) - [style] make Vue widget/slot/label width and spacing align with designs (#6023) ### ♿ Accessibility - Add aria labels on vue node widgets (#6032) ### 🔧 Maintenance - [refactor] adjust Vue node fixtures to not be coupled to Litegraph (#6033) - [refactor] reorganize devtools test nodes into modules (#6020) ### 🧪 Testing - [test] add browser test for control+a selection of Vue nodes (#6031) ### 🔄 CI/CD - [ci] fix update locales workflow (#6017) **Full Changelog**: v1.29.1...v1.29.2 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6045-1-29-2-28c6d73d3650817a8c36fba944ce69a8) by [Unito](https://www.unito.io) --------- Co-authored-by: arjansingh <[email protected]> Co-authored-by: github-actions <[email protected]>
Summary
Fixes issue where node size changes are not serialized by routing DOM-driven node bounds updates through a single CRDT operation so Vue node geometry stays synchronized with LiteGraph.
Changes
BatchUpdateBoundsOperationto the layout store, applied it via the existing Yjs pipeline, notified link sync to recompute touched nodes, and covered the path with a regression testReview Focus
Correctness of the new batch operation when multiple nodes update simultaneously, especially remote replay/undo scenarios and link geometry recomputation.
┆Issue is synchronized with this Notion page by Unito