fix: hover rect is frozen when scroll canvas

[gene9831]

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Background and solution

What is the current behavior?

滚动画布时，hover框不会随着元素位置变动更新

Issue Number: #1227

What is the new behavior?

滚动画布时，hover框会随着元素位置变动更新。需要注意的是，鼠标只有滚轮滚动时，不会触发mouse hover事件。所以滚动页面时，并不会hover新的元素，而是会随着之前hover的元素位置变动更新

Does this PR introduce a breaking change?

• Yes
• No

Other information

[coderabbitai]

Walkthrough

The changes update element hover management within the canvas container. An id property is added to the initial rectangle state, and the syncNodeScroll function has been revised to include a call to the new updateHoverRect function after refreshing the selection state. The new updateHoverRect function retrieves an element by its ID and updates hover state dimensions and position accordingly. Additionally, the setHoverRect function now assigns the element's ID to the hover state for improved synchronization.

Changes

File(s)	Change Summary
packages/canvas/.../container.ts	- Added id: '' to initialRectState - Modified syncNodeScroll() to call updateHoverRect() after refreshSelectionState() - Introduced new updateHoverRect(id?: string) function - Updated setHoverRect to include id assignment

Sequence Diagram(s)

sequenceDiagram
    participant C as Container
    participant R as refreshSelectionState
    participant U as updateHoverRect
    participant E as Element

    C->>R: refreshSelectionState()
    C->>U: updateHoverRect()
    U->>E: Retrieve element by provided/current hover ID
    E-->>U: Return element dimensions & position
    U-->>C: Update hover state with element details and id

Loading

Possibly related PRs

• refact: getRect logic #1132: Updates hover node logic and event handling, which aligns with the hover state enhancements in this pull request.

Suggested labels

bug, enhancement

Suggested reviewers

• chilingling
• hexqi

Poem

I'm a little rabbit, hopping with delight,
I see the code changes, shining oh so bright.
New hover states and sync flows make my day,
Bounding through the files in a joyful way.
With carrots 🥕 and code so fine, I cheer today!
Happy coding from your fluffy friend!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3739ce2 and 9cec566.

📒 Files selected for processing (1)

• packages/canvas/container/src/container.ts (4 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: push-check

🔇 Additional comments (4)

packages/canvas/container/src/container.ts (4)

87-87: Good addition to fix hover state during scrolling.

Adding the id property to the initial rectangle state is necessary for the hover rectangle tracking functionality. This enables elements to be identified properly when the canvas is scrolled.

---

600-600: Essential update for element tracking.

Storing the element's ID in the hover state is crucial for the fix to work properly. This allows the hover rectangle to be updated based on the element's current position during scrolling.

---

611-627: Well-implemented hover rectangle update function.

This function efficiently finds the previously hovered element by its ID and updates its dimensions and position in the hover state. The early return when no element is found is a good defensive programming practice.

---

654-657: Core fix for the hover rectangle scrolling issue.

Adding the call to updateHoverRect() after refreshing selection state solves the problem described in issue #1227. Now when the canvas is scrolled, both selection and hover states will be properly updated, ensuring the hover rectangle stays synchronized with the actual element position.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.