曼哈顿路由框选拖拽卡顿如何优化？

[oyal]

问题描述

20个节点＋20个曼哈顿路由连线拖拽过程卡顿非常明显，应该是拖拽过程频繁计算路径导致的

重现链接

x6-example-features

重现步骤

框选拖拽多个曼哈顿路由连线，卡顿

预期行为

不要这么卡顿，有没有什么方法优化？

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[oyal]

性能分析工具似乎是 node 的 translate 导致的，但是纯节点拖拽没这么卡顿，加上曼哈顿路由才变得这么卡的

[oyal]

梳理了下流程，更新节点的位置，会更新相关边的视图

@antv/x6/packages/x6/src/renderer/scheduler.ts

const effectedEdges = this.getEffectedEdges(view)
effectedEdges.forEach((edge) => {
  this.requestViewUpdate(edge.view, edge.flag, options, priority, false)
})

频繁触发 @antv/x6/packages/x6/src/view/edge.ts 中的 updateConnection，不断更新 translate，导致卡顿

加上 100ms 防抖，虽说不卡顿了，但是拖拽过程边又不跟手

[cuidong626]

梳理了下流程，更新节点的位置，会更新相关边的视图

@antv/x6/packages/x6/src/renderer/scheduler.ts

const effectedEdges = this.getEffectedEdges(view)
effectedEdges.forEach((edge) => {
  this.requestViewUpdate(edge.view, edge.flag, options, priority, false)
})

频繁触发 @antv/x6/packages/x6/src/view/edge.ts 中的 updateConnection，不断更新 translate，导致卡顿

加上 100ms 防抖，虽说不卡顿了，但是拖拽过程边又不跟手

我是按照我们的业务规则实现的路由，但是也遇到这个问题。我现在的处理手段目前有两个。

1. 合并edge的操作。effectedEdges 会存在一次更新target，一次更新source。合并一下，一次性更新避免同一个edge多次计算的问题。
2. 判断是不是translate,如果是translate的话，edge采用translateBy进行平移edge。

[oyal]

@cuidong626 我发现拖动过程节点也在一直计算、移动，比较影响性能，在大量节点的情况下还是挺卡的，目前我又换了一种方式，单选节点拖拽时按照默认的更新，多选拖拽的时候等到鼠标松开再更新位置。这种能比未做任何优化的性能提升 7 倍。

[cuidong626]

@cuidong626 我发现拖动过程节点也在一直计算、移动，比较影响性能，在大量节点的情况下还是挺卡的，目前我又换了一种方式，单选节点拖拽时按照默认的更新，多选拖拽的时候等到鼠标松开再更新位置。这种能比未做任何优化的性能提升 7 倍。

selection 插件好像有这种功能属性，不是实时拖拽的。following 属性，不知道2.0有没有用处

[cuidong626]

[cuidong626]

我现在的逻辑场景是，利用selection做框选处理、选中处理（不展示选中样式），选中状态用transform进行样式展示。
这两个插件都有一定的性能损耗。对部分逻辑进行了重写，勉强满足现有的需求。
我看了draw.io这个网站的处理方式是，当达到一定节点用你的方案进行处理，没有达到的话就实时渲染。

[oyal]

@cuidong626 我发现拖动过程节点也在一直计算、移动，比较影响性能，在大量节点的情况下还是挺卡的，目前我又换了一种方式，单选节点拖拽时按照默认的更新，多选拖拽的时候等到鼠标松开再更新位置。这种能比未做任何优化的性能提升 7 倍。

selection 插件好像有这种功能属性，不是实时拖拽的。following 属性，不知道2.0有没有用处

看了下 2.0 文档没有任何 following 相关描述，源码倒是有，经过尝试需要 showNodeSelectionBox: true, following: false 才有那种效果，并且似乎有 bug，移动后框的位置偏移很多。

Selection 的边框移动太卡了我也没用，我是修改 NodeView 的更新以及在 Selection 插件中监听鼠标的按下以及松开，也方便实现 draw.io 那种超出一定数量节点再批量更新的效果。

[ryh-zz]

我采取的方案是 拖拽过程中 先删除edge， 当拖拽完成后 再将线添加回来