X6 icon indicating copy to clipboard operation
X6 copied to clipboard

fix: optimize drag performance while selecting multiple nodes

Open xiawenqi opened this issue 4 months ago • 2 comments

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.

xiawenqi avatar Feb 14 '24 10:02 xiawenqi

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

Impacted file tree graph

@@            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.

see 1 file with indirect coverage changes

codecov[bot] avatar Feb 14 '24 10:02 codecov[bot]

egde 的事件忘了?

OpportunityLiu avatar Apr 04 '24 12:04 OpportunityLiu