fix: preserve Vue node reactivity during undo/redo operations #7222
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
the
size:M
Contributor
📝 WalkthroughWalkthroughThe PR modifies the layout store to preserve node reactive references during undo/redo operations and properly clean them up when Vue components unmount, addressing an issue where undo operations caused the graph to lose track of nodes and connections. Changes
Possibly related PRs
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/08/2025, 03:34:50 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/08/2025, 03:43:00 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • 🔴 +160 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 976 kB (baseline 976 kB) • 🔴 +68 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 177 kB (baseline 177 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/renderer/core/layout/store/layoutStore.ts (1)
971-1012: Initialization behavior change is sound but may double‑trigger watchersNot clearing
nodeRefs/nodeTriggersininitializeFromLiteGraphand instead triggering all existing triggers is a reasonable way to preserve Vue reactivity across re‑initialization and matches the undo/redo root cause described in the PR.However:
this.ynodes.clear()+ subsequentsetcalls will already emit YjsYMapEvents for each affected node, and theynodes.observehandler above will call the correspondingnodeTriggers.- The explicit
this.nodeTriggers.forEach((trigger) => trigger())at the end can therefore cause each active consumer to recompute twice per initialization.For typical graph sizes this is probably fine, but if initialization becomes hot or graphs get large, you may want to:
- Either rely solely on the Yjs observer for node‑id‑scoped triggers, or
- Justify this extra pass with a comment explaining the specific case Yjs events don’t cover.
It would be good to add or extend a test that initializes from LiteGraph, performs a delete + undo cycle, and asserts that node layouts remain reactive, to lock in this behavior.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/renderer/core/layout/store/layoutStore.ts(4 hunks)src/renderer/extensions/vueNodes/layout/useNodeLayout.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively; no new JavaScript code
Files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
🧠 Learnings (13)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.tssrc/renderer/core/layout/store/layoutStore.ts
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Use `computed` instead of a `ref` and `watch` if possible
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-12-06T00:52:35.750Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Avoid using `ref` if a prop would accomplish the design goals; avoid using `computed` if a `ref` or prop directly would work
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-12-04T21:43:49.363Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in stores
Applied to files:
src/renderer/core/layout/store/layoutStore.ts
🧬 Code graph analysis (2)
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts (1)
src/renderer/core/layout/store/layoutStore.ts (1)
layoutStore(1485-1485)
src/renderer/core/layout/store/layoutStore.ts (3)
src/lib/litegraph/src/LGraphNode.ts (2)
NodeId(94-94)trigger(1392-1414)src/renderer/core/layout/types.ts (1)
NodeId(40-40)src/lib/litegraph/src/LGraph.ts (1)
trigger(1205-1217)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: collect
- GitHub Check: test
🔇 Additional comments (2)
src/renderer/core/layout/store/layoutStore.ts (1)
1095-1127: Keeping nodeRefs/nodeTriggers on delete fixes undo but relies on external teardownThe change in
handleDeleteNodeto stop deletingnodeRefsandnodeTriggersis exactly what’s needed to allowfinalizeOperationand the Yjs observer to re‑use the same triggers on undo/redo so Vue sees the recreated node.Two follow‑ups to keep this robust:
- This now assumes that components using
getNodeLayoutRefwill callcleanupNodeRefon unmount; otherwise refs/triggers for permanently deleted nodes will stay around and keep being triggered unnecessarily.- Please consider adding a regression test for the specific failure reported in #7040 (e.g., delete a node, undo, and assert the Vue node remains draggable / layout updates) so future refactors of delete/undo behavior can’t reintroduce this bug.
As per store guidelines, this keeps the public surface small but does rely on consumers respecting the lifecycle contract.
src/renderer/extensions/vueNodes/layout/useNodeLayout.ts (1)
1-23: onUnmounted cleanup correctly complements the store changesWiring
onUnmountedtolayoutStore.cleanupNodeRef(nodeId)is a good match for the new store API and addresses subscription cleanup for node‑specific refs, aligning with the “clean up subscriptions in state management” guidance.A couple of points to verify:
useNodeLayoutshould only be called from component setup (or an effect scope tied to a component), otherwiseonUnmountedwon’t be registered correctly.nodeIdMaybeshould be stable for the lifetime of the component (which matches current expectations for node components), sincetoValueis called once and that value is used for cleanup.If those assumptions hold, this change looks solid. It would be useful to add a component‑level test (or e2e test) that mounts a Vue node, deletes it, undoes the delete, and confirms the node remains interactive and the UI doesn’t break as in #7040.
AustinMroz
approved these changes
Dec 8, 2025
Collaborator
AustinMroz
left a comment
AustinMroz
left a comment
There was a problem hiding this comment.
The increased reliance on onUnmounted is concerning, but from testing, the changes appear both sufficient and minimal.
christian-byrne
added
needs-backport
github-actions bot
pushed a commit
that referenced
this pull request
Dec 9, 2025
## Summary preserve Vue node reactivity during undo/redo operations Root Cause: The Vue reactivity chain was broken during undo/redo operations: 1. handleDeleteNode was deleting nodeRefs and nodeTriggers 2. Vue components still held references to the old refs 3. When nodes were recreated, finalizeOperation tried to call triggers but they were already deleted 4. Vue didn't know the data had changed, so nodes didn't visually update fix #7040 ## Screenshots https://github.com/user-attachments/assets/2feb294a-36e8-4bbe-b3f7-b7015066abc5 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7222-fix-preserve-Vue-node-reactivity-during-undo-redo-operations-2c36d73d3650819ab72afb10cbdaf39a) by [Unito](https://www.unito.io)
Member
github-actions
bot
removed
the
needs-backport
christian-byrne
pushed a commit
that referenced
this pull request
Dec 9, 2025
…do operations (#7257) Backport of #7222 to `core/1.33` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7257-backport-core-1-33-fix-preserve-Vue-node-reactivity-during-undo-redo-operations-2c46d73d36508184aff1c7c0e8e82408) by [Unito](https://www.unito.io) Co-authored-by: Terry Jia <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
preserve Vue node reactivity during undo/redo operations
Root Cause: The Vue reactivity chain was broken during undo/redo operations:
fix #7040
Screenshots
2025-12-07.22-27-30.mp4
┆Issue is synchronized with this Notion page by Unito