Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: optimize drag performance while selecting multiple nodes #4201

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

xiawenqi
Copy link
Contributor

Description

fix #1325

Motivation and Context

当利用框选插件选中多个节点时,拖拽性能下降非常严重。主要原因是插件监听了节点的change事件,当节点拖拽时多次触发重新创建节点,大量的DOM操作导致页面卡顿。

解决方式为不再在节点change时触发重新创建选框,改为分别监听节点的position、angle、size变更事件,position时只需要变更选框位置,angle和size变更时重绘选框DOM。

对比选中200节点时的拖拽效果, 优化前:

before.mp4

优化后:

after.mp4

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 x6-bot bot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. PR: unreviewed PR does not have any reviews. labels Feb 14, 2024
Copy link

codecov bot commented Feb 14, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

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%) ⬇️

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

see 1 file with indirect coverage changes

@xiawenqi xiawenqi changed the title fix: optimize move performance while select multiple nodes fix: optimize drag performance while selecting multiple nodes Feb 17, 2024
@OpportunityLiu
Copy link
Contributor

egde 的事件忘了?

@@ -83,7 +83,8 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
collection.on('reseted', this.onReseted, this)
collection.on('updated', this.onCollectionUpdated, this)
collection.on('node:change:position', this.onNodePositionChanged, this)
collection.on('cell:changed', this.onCellChanged, this)
collection.on('node:change:angle', this.onCellChanged, this)
Copy link
Contributor

Choose a reason for hiding this comment

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

使用 cell:changed 确实会执行过于频繁。不过导致 box 修改的事件应该不止 angle/size 修改。

@x6-bot x6-bot bot added PR: reviewed-changes-requested PR has reviewed and got Change request event. and removed PR: unreviewed PR does not have any reviews. labels Apr 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: reviewed-changes-requested PR has reviewed and got Change request event. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

选中大量节点时性能差
3 participants