feat: support both mouse selection with the left mouse button and panning with the middle mouse button in the graph

[aMoonkin]

Description

support both mouse selection with the left mouse button and panning with the middle mouse button in the graph.

在画布中同时支持左键框选和中键 panning

Motivation and Context

Problem

Expected to support both mouse selection with the left mouse button and panning with the middle mouse button in the graph. But

1. x6-plugin-selection does not support selection with specified buttons.
2. x6 doesn't support only mouse wheel down panning

---

期待在在画布中同时支持左键框选和中键 panning

1. x6-plugin-selection 不支持指定鼠标按键框选
2. panning 不支持仅鼠标中键移动

---

Changes

• added the "eventTypes" option to selection options, to specify the mouse buttons that triggers the interaction
• added "mouseWheelDown" to the "eventTypes" option of panning, to handle panning only when the mouse wheel is down.
• modified the selection example

---

• 为 selection 增加了 "eventTypes" 选项, 用于指定产生交互的鼠标按键
• 为 panning 选项中的 "eventTypes" 增加了 mouseWheelDown, 用于处理仅在鼠标滚轮点击时的移动行为
• 修改了 selection example

---

Concern

• In plugin-selection, when merging default configurations, using deep copy may not work as expected, e.g. passing multipleSelectionModifiers: [], in the selection configuration actually expects not to use any of the multiple selection buttons, but still makes the default configuration ['ctrl', 'meta'] take effect, so I used the following code to handle the behavior of eventType in my code. 'meta'] to take effect, so I handled the behavior of eventType in my code with the following code.

if (!Array.isArray(this.options.eventTypes)) {
  // a new option, compatible with the behavior of older versions
  this.options.eventTypes = ['leftMouseDown', 'mouseWheelDown']
}

• The leftMouseDown of the eventTypes option in panning does not actually distinguish between the mouse down behavior of the left mouse button and the mouse wheel, whereas the leftMouseDown of the selection eventTypes option in panning only represents the mouse down behavior of the left mouse button. behavior of the left mouse button. Consider whether to accept this difference, and whether it is possible to support left mouse button and scroll wheel clicks independently on a larger scale.

---

• plugin-selection 中, merge 默认配置时, 使用深拷贝可能是不符合预期的, 比如在 selection 配置中传入multipleSelectionModifiers: [],, 实际是期待不使用任意一个多选按键, 但依然会使得默认配置 ['ctrl', 'meta'] 生效, 因此我在代码中用以下代码处理了 eventType 的行为.

if (!Array.isArray(this.options.eventTypes)) {
  // a new option, compatible with the behavior of older versions
  this.options.eventTypes = ['leftMouseDown', 'mouseWheelDown']
}

• panning 中 eventTypes 选项的 leftMouseDown 实际没有区分鼠标左键和滚轮的 mouse down 行为, 而在本次新增的 selection eventTypes 选项中的 leftMouseDown 却仅代表鼠标左键的 mouse down 行为. 考虑是否接受这种差异性, 以及能否在更大规模的范围中独立支持鼠标左键和滚轮的点击行为.

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.

[x6-bot]

👋 @aMoonkin

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript, JavaScript, CSS and React coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov]

Codecov Report

Merging #3965 (62e1eec) into master (b92a23e) will not change coverage.
The diff coverage is 0.00%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3965   +/-   ##
=======================================
  Coverage   10.35%   10.35%           
=======================================
  Files         180      180           
  Lines       10529    10529           
  Branches     2565     2565           
=======================================
  Hits         1090     1090           
  Misses       9350     9350           
  Partials       89       89           

Flag	Coverage Δ
x6	10.35% <0.00%> (ø)

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

Files	Coverage Δ
packages/x6/src/graph/panning.ts	4.39% <0.00%> (ø)

[NewByVector]

不好意思，这么晚才来 review 你的代码。十分抱歉。这里我感觉这样更合理：

protected allowBlankMouseDown() {
  const eventTypes = this.options.eventTypes
  return eventTypes.includes('leftMouseDown') && e.button === 0 || eventTypes.includes('mouseWheelDown') && e.button === 1
}

[aMoonkin]

谢谢, 我周末修一下

[NewByVector]

同上

[TalentJY]

请问 这个功能能支持动态修改交互的鼠标按键吗？ 比如我想要一开始默认是中键移动画布，然后想动态修改为左键和中键一起能移动等等 @aMoonkin

[aMoonkin]

请问 这个功能能支持动态修改交互的鼠标按键吗？ 比如我想要一开始默认是中键移动画布，然后想动态修改为左键和中键一起能移动等等 @aMoonkin

目前不支持, 理论来说好支持, Selection 暴露一个接口就可以了.

[x6-bot]

👋 @aMoonkin

Congrats on merging your first pull request! 🎉🎉🎉