X6
X6 copied to clipboard
fix: optimize drag performance while selecting multiple nodes
Description
fix #1325
Motivation and Context
当利用框选插件选中多个节点时,拖拽性能下降非常严重。主要原因是插件监听了节点的change事件,当节点拖拽时多次触发重新创建节点,大量的DOM操作导致页面卡顿。
解决方式为不再在节点change时触发重新创建选框,改为分别监听节点的position、angle、size变更事件,position时只需要变更选框位置,angle和size变更时重绘选框DOM。
对比选中200节点时的拖拽效果, 优化前:
https://github.com/antvis/X6/assets/3120383/20d5a101-91b0-48fd-bb1f-9628e960b722
优化后:
https://github.com/antvis/X6/assets/3120383/dfcfd18a-8519-4c0d-ab3e-699a6661c175
Types of changes
- [x] 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
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have read the CONTRIBUTING document.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Comparison is base (
f29fe2d
) 10.36% compared to head (7307a72
) 10.35%. Report is 26 commits behind head on master.
Additional details and impacted files
@@ Coverage Diff @@
## master #4201 +/- ##
==========================================
- Coverage 10.36% 10.35% -0.01%
==========================================
Files 180 180
Lines 10563 10572 +9
Branches 2572 2574 +2
==========================================
Hits 1095 1095
- Misses 9379 9388 +9
Partials 89 89
Flag | Coverage Δ | |
---|---|---|
x6 | 10.35% <ø> (-0.01%) |
:arrow_down: |
Flags with carried forward coverage won't be shown. Click here to find out more.
egde 的事件忘了?