Skip to content

fix: contextmenu cant be scrolled#7638

Open
h3110w0r1d-y wants to merge 1 commit intoantvis:v5from
h3110w0r1d-y:fix-contextmenu
Open

fix: contextmenu cant be scrolled#7638
h3110w0r1d-y wants to merge 1 commit intoantvis:v5from
h3110w0r1d-y:fix-contextmenu

Conversation

@h3110w0r1d-y
Copy link
Copy Markdown
Contributor

修复Contextmenu无法滚动的问题

Graph 初始化时,Contextmenu 的这三个函数触发顺序是这样的 initElement() -> unbindEvents() -> bindEvents(),导致 wheelHandler 添加后接着被移除

addEventListenerinitElement 中移动到 bindEvents 即可解决

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request moves the registration of the wheel event listener for the context menu from the initialization phase to the bindEvents method, which prevents wheel events from bubbling up and triggering canvas zoom logic. A review comment identifies a potential issue where the context menu might close unexpectedly when users interact with internal elements like scrollbars, suggesting an improvement to the click handling logic to ensure better usability.


document.addEventListener('click', this.onMenuItemClick);
// 阻止滚轮事件冒泡,防止触发画布的 zoom-canvas 拦截逻辑
this.$element.addEventListener('wheel', this.wheelHandler);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

这个修改解决了通过滚轮滚动菜单时触发画布缩放的问题。但是,我注意到 onMenuItemClick(第 244 行)的逻辑存在一个潜在问题:当用户点击菜单内部(例如点击滚动条进行拖动)但未点击到具体的菜单项时,如果 trigger 配置不是 'click'(默认是 'contextmenu'),菜单会因为触发了 document 上的点击事件而关闭。这会导致用户无法通过拖动滚动条来滚动菜单。建议后续优化 onMenuItemClick 的逻辑,增加对点击位置是否在菜单内部的判断,以确保滚动条操作的正常进行。

@codecov-commenter
Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.95%. Comparing base (6a5c08d) to head (f7b85d9).

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##               v5    #7638   +/-   ##
=======================================
  Coverage   94.95%   94.95%           
=======================================
  Files         188      188           
  Lines       10031    10031           
  Branches     2171     2171           
=======================================
  Hits         9525     9525           
  Misses        468      468           
  Partials       38       38           
Flag Coverage Δ
g6 94.95% <100.00%> (ø)

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

Files with missing lines Coverage Δ
packages/g6/src/plugins/contextmenu/index.ts 86.95% <100.00%> (ø)
🚀 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.

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