fix: selection box updating on dragging

[GaoFuhong]

📝 Description

在拖拽框选节点时，selection box 随节点、边的变化实时更新。

🖼️ Screenshot

Before	After

💡 Motivation and Context

🧩 Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

🔍 Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical bug in the Selection plugin where selection boxes failed to update dynamically during dragging operations. The changes introduce a more robust drag preview mechanism that ensures selection boxes accurately reflect the real-time positions and geometries of selected nodes and edges, even when the graph is scaled. This significantly improves the user experience by providing immediate visual feedback during interactive graph manipulation.

Highlights

• Real-time Selection Box Updates: The selection box now updates in real-time when dragging selected nodes and edges, ensuring visual consistency during interactive graph manipulation.
• Enhanced Drag Preview Logic: Introduced draggingPreviewMode to differentiate between translation-only and geometry-based updates for selection boxes during dragging, allowing for more accurate visual feedback.
• Improved Container Positioning: Refactored the internal mechanism for updating and resetting the selection container's position, specifically addressing behavior during graph scaling and dragging.
• New Test Cases: Added dedicated test cases to validate the new drag preview behaviors for nodes, edges, and graph scaling scenarios.
• Documentation Updates: Updated the Selection plugin documentation to include new options such as enabled, rubberNode, and rubberEdge.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

该 PR 修复了在拖动过程中选框更新不正确的问题，尤其是在选中了边或缩放画布时。通过引入 geometry 拖动预览模式，正确地为边重新计算了选框。同时，也改进了在拖动过程中处理画布变换的逻辑。代码变更经过了充分的测试，并包含了文档更新。总体而言，这是一项很好的改进。

[gemini-code-assist]

为了提高测试的健壮性和错误信息的可读性，在 querySelector 之后检查元素是否存在是一个好习惯。这可以避免下游代码出现潜在的 null 引用错误，并在找不到选框时提供更具体的错误信息。

    const getSelectionBox = (cellId: string) => {
      const box = selection['selectionImpl']['container'].querySelector<HTMLElement>(
        `[data-cell-id="${cellId}"]`,
      );
      if (!box) {
        throw new Error(`Selection box for cell '${cellId}' not found.`);
      }
      return box;
    }

[codecov-commenter]

Codecov Report

❌ Patch coverage is 82.19178% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.54%. Comparing base (e348a94) to head (32736f8).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/plugin/selection/selection.ts	82.19%	13 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5046      +/-   ##
==========================================
+ Coverage   83.46%   83.54%   +0.07%     
==========================================
  Files         332      332              
  Lines       38535    38588      +53     
  Branches     7921     7942      +21     
==========================================
+ Hits        32163    32238      +75     
+ Misses       6349     6327      -22     
  Partials       23       23              

Flag	Coverage Δ
x6	83.54% <82.19%> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/plugin/selection/selection.ts	90.05% <82.19%> (+2.40%)	⬆️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.