Skip to content

fix(stage-ui): cancel animation frames and remove drag listeners on unmount - #2286

Open
bitxwolf wants to merge 7 commits into
moeru-ai:mainfrom
bitxwolf:bitxwolf/fix/cancel-raf-drag-listeners-on-unmount
Open

fix(stage-ui): cancel animation frames and remove drag listeners on unmount#2286
bitxwolf wants to merge 7 commits into
moeru-ai:mainfrom
bitxwolf:bitxwolf/fix/cancel-raf-drag-listeners-on-unmount

Conversation

@bitxwolf

@bitxwolf bitxwolf commented Aug 14, 2026

Copy link
Copy Markdown

What

Fixes three memory leaks in packages/stage-ui where event listeners and
animation frame loops were started in onMounted but never cleaned up when
the component unmounts.

Why

Per AGENTS.md: "Vue composables that register event listeners or timers
without a corresponding cleanup in onUnmounted/onBeforeUnmount" are a bug.

Changes

  • cursor-momentum.vue — stores the requestAnimationFrame ID and calls
    cancelAnimationFrame in onUnmounted. The RAF loop previously ran forever
    after unmount, burning CPU on a detached component.

  • property-number.vue — calls stopDrag() in onUnmounted so that
    mousemove/mouseup document listeners are removed if the component
    unmounts during an active drag.

  • property-point.vue — same fix as property-number.vue.

How to verify

  1. Open the app and navigate to a page containing these components
  2. Open DevTools → Performance tab
  3. Unmount the components (navigate away)
  4. Confirm CPU usage drops and no orphaned animation frames remain

Summary by CodeRabbit

  • Bug Fixes
    • Improved cleanup when numeric and point controls are closed or removed, preventing lingering drag behavior.
    • Prevented document cursor changes and mouse listeners from remaining active after controls are destroyed.
    • Ensured momentum animations stop cleanly when the related component is unmounted.

@bitxwolf bitxwolf changed the title 'bug: animation frame and drag listeners not cleaned up on unmount in stage-ui components' fix(stage-ui): cancel animation frames and remove drag listeners on unmount Aug 14, 2026
@coderabbitai

coderabbitai Bot commented Aug 15, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9f6f0f54-3e01-45f8-8065-bc0f2db0b50e

📥 Commits

Reviewing files that changed from the base of the PR and between c9b7b0e and 72a0c98.

📒 Files selected for processing (2)
  • packages/stage-ui/src/components/data-pane/property-number.vue
  • packages/stage-ui/src/components/data-pane/property-point.vue
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/stage-ui/src/components/data-pane/property-number.vue
  • packages/stage-ui/src/components/data-pane/property-point.vue

📝 Walkthrough

Walkthrough

The components now clean up document listeners, cursor state, and pending animation frames when they unmount.

Changes

Lifecycle cleanup

Layer / File(s) Summary
Drag lifecycle cleanup
packages/stage-ui/src/components/data-pane/property-number.vue, packages/stage-ui/src/components/data-pane/property-point.vue
The property components register unmount hooks that call stopDrag() and remove active drag listeners.
Momentum animation cleanup
packages/stage-ui/src/components/physics/cursor-momentum.vue
The component stores the scheduled animation frame ID and cancels it during unmount. The mouse listener is also removed.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 72a0c

The change adds unmount cleanup for animation frames and drag listeners in three stage UI components. No actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main changes: canceling animation frames and removing drag listeners when components unmount.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c9b7b0e165

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread packages/stage-ui/src/components/data-pane/property-number.vue Outdated
@bitxwolf
bitxwolf force-pushed the bitxwolf/fix/cancel-raf-drag-listeners-on-unmount branch from c9b7b0e to 72a0c98 Compare August 15, 2026 17:58
@bitxwolf

Copy link
Copy Markdown
Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Swish!

Reviewed commit: 8692c2b7a4

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

@github-actions

Copy link
Copy Markdown
Contributor

⏳ Approval required for deploying to Cloudflare Workers (Preview) for stage-web.

Name Link
🔭 Waiting for approval For maintainers, approve here

Hey, maintainers, kindly take some time to review and approve this deployment when you are available. Thank you! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants