fix: optimize drag performance while selecting multiple nodes #4201
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
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
Flags with carried forward coverage won't be shown. Click here to find out more. |
xiawenqi
changed the title
|
egde 的事件忘了？ |
| 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) |
There was a problem hiding this comment.
使用 cell:changed 确实会执行过于频繁。不过导致 box 修改的事件应该不止 angle/size 修改。
There was a problem hiding this comment.
@xiawenqi @NewByVector @OpportunityLiu 这个 PR 还有后续吗？看 PR 的视频效果，提升是很明显的。
There was a problem hiding this comment.
@OpportunityLiu 之前 cell 也不包含 edge 啊~
There was a problem hiding this comment.
edge 自己的事件不是在监听吗，只是不能通过框选选中而已啊
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4201 +/- ##
=======================================
Coverage 10.29% 10.29%
=======================================
Files 180 180
Lines 10620 10620
Branches 2590 2590
=======================================
Hits 1093 1093
Misses 9438 9438
Partials 89 89
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
|
#4797 |
Description
Motivation and Context
当利用框选插件选中多个节点时，拖拽性能下降非常严重。主要原因是插件监听了节点的change事件，当节点拖拽时多次触发重新创建节点，大量的DOM操作导致页面卡顿。
解决方式为不再在节点change时触发重新创建选框，改为分别监听节点的position、angle、size变更事件，position时只需要变更选框位置，angle和size变更时重绘选框DOM。
对比选中200节点时的拖拽效果, 优化前：
before.mp4
优化后：
after.mp4
Types of changes
Self Check before Merge