拖动节点x6-widget-selection-box的边框会移除重绘导致拖动性能降低

[bighhhh]

问题描述

拖动节点x6-widget-selection-box的边框会移除重绘导致拖动性能降低
多选时x6-widget-selection-boxzhege这个边框可以不用绘制的，因为这个是每个图元的选择框，其实多选是绘制没有意义，而且这个每次拖动都移除重新插入是在降低太多性能，60个图元就需要重绘60个图元和60个选择框

重现链接

无

重现步骤

无

预期行为

多节点拖拽减少卡顿

平台

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

屏幕截图或视频（可选）

补充说明（可选）

No response

[bighhhh]

showNodeSelectionBox和不能设置为false，因为设置为false后多选后的大框也不显示了，两难选项

[bighhhh]

我去掉x6-widget-selection-box这些div后60多图元拖拽从原来的1秒多渲染时间变成忽略不计

[light-years-run]

可以采用动态修改节点位置的方式，来临时解决

[wtjperi2003]

确实，选中多个节点拖动时，很卡顿，是个大问题，也一直很头疼这个问题，希望能优化下

[bighhhh]

确实，选中多个节点拖动时，很卡顿，是个大问题，也一直很头疼这个问题，希望能优化下

这个其实多选时不绘制每个节点的选择框就解决了，因为有外边那个大的选择框，不知道为什么不修复

[bighhhh]

可以采用动态修改节点位置的方式，来临时解决

动态修改位置在哪里配置？

[bighhhh]

可以采用动态修改节点位置的方式，来临时解决

动态修改位置在哪里配置？

不是配置，是写事件，修改节点位置坐标，我是鼠标框选移动的时候，自己渲染一个外包盒，移动只移动这个外包盒，鼠标弹起的时候，根据移动偏差，把框选的节点移动过过来

你那个外包围盒是用x6做的吗？

[bighhhh]

可以采用动态修改节点位置的方式，来临时解决

动态修改位置在哪里配置？

不是配置，是写事件，修改节点位置坐标，我是鼠标框选移动的时候，自己渲染一个外包盒，移动只移动这个外包盒，鼠标弹起的时候，根据移动偏差，把框选的节点移动过过来

这样的话性能应该能提高，但是应该没有对齐线等东西了吧？

[bighhhh]

目前有个解决方案，可以使400多个不卡顿https://juejin.cn/post/7278974923682644024

[bighhhh]

确实，选中多个节点拖动时，很卡顿，是个大问题，也一直很头疼这个问题，希望能优化下

目前有个解决方案，可以使400多个不卡顿https://juejin.cn/post/7278974923682644024

[wtjperi2003]

确实，选中多个节点拖动时，很卡顿，是个大问题，也一直很头疼这个问题，希望能优化下

目前有个解决方案，可以使400多个不卡顿https://juejin.cn/post/7278974923682644024

哇，兄弟，可以啊。看了你做的组态。我目前也在做一个类似的东西，是公司管理后台里的一部分，没办法单独部署显示。请教下，你组态那里，图形可以锁定，不让移动，这个是怎么实现的，x6官方没有提供相应配置。另外，我能用里面的一些图片吗

[bighhhh]

确实，选中多个节点拖动时，很卡顿，是个大问题，也一直很头疼这个问题，希望能优化下

目前有个解决方案，可以使400多个不卡顿https://juejin.cn/post/7278974923682644024

哇，兄弟，可以啊。看了你做的组态。我目前也在做一个类似的东西，是公司管理后台里的一部分，没办法单独部署显示。请教下，你组态那里，图形可以锁定，不让移动，这个是怎么实现的，x6官方没有提供相应配置。另外，我能用里面的一些图片吗

里边的一些图片我也是在网络上找的资源，锁定图元官方是有提供的，
graph.use(
new Transform({
resizing: {
enabled: (cell) => {
let lock = cell.prop('lock');
return !lock;
},
orthogonal: true,
preserveAspectRatio: (node) => {
return node.store.data.preserveAspectRatio;
}
},
rotating: {
enabled: (cell) => {
let lock = cell.prop('lock');
return !lock;
}
}
})
);
这是锁定图元代码

[oyal]

我把 showNodeSelectionBox 和 showEdgeSelectionBox 设置为 false，纯节点拖动倒没那么卡，加上边的话卡得要命，特别是曼哈顿路由。
10个节点+10个边要比500个节点更卡

节点（个）	边（个）	单事件耗时（ms）	效果
10	0	0.5	无卡顿
300	0	6.7	无卡顿
500	0	12	卡顿不明显
10	10（默认路由）	35	CPU30-40%，轻微卡顿
10	10（曼哈顿路由）	60	CPU100%，明显卡顿
30	30（曼哈顿路由）	175	CPU100%，明显卡顿

[oyal]

我把 showNodeSelectionBox 和 showEdgeSelectionBox 设置为 false，纯节点拖动倒没那么卡，加上边的话卡得要命，特别是曼哈顿路由。 10个节点+10个边要比500个节点更卡
节点（个） 边（个） 单事件耗时（ms） 效果
10 0 0.5 无卡顿
300 0 6.7 无卡顿
500 0 12 卡顿不明显
10 10（默认路由） 35 CPU30-40%，轻微卡顿
10 10（曼哈顿路由） 60 CPU100%，明显卡顿
30 30（曼哈顿路由） 175 CPU100%，明显卡顿

动态修改节点位置就行，自己渲染一个外包盒，鼠标移动，只移动外包盒，然后根据外包盒的位置偏差，移动选中的图形

这样也会带来一些问题，比如：
拖拽过程页面滚动（Scroller插件）带来偏移问题、
画布页面缩放导致框选样式问题
无法触发选中节点的事件，比如单击选中的节点变为单选、点击盒子的空白处取消框选。使用pointerEvents: none就无法触发拖拽事件了
还要对拖拽范围进行限制，实在不够友好

[bighhhh]

我把 showNodeSelectionBox 和 showEdgeSelectionBox 设置为 false，纯节点拖动倒没那么卡，加上边的话卡得要命，特别是曼哈顿路由。 10个节点+10个边要比500个节点更卡

节点（个） 边（个） 单事件耗时（ms） 效果
10 0 0.5 无卡顿
300 0 6.7 无卡顿
500 0 12 卡顿不明显
10 10（默认路由） 35 CPU30-40%，轻微卡顿
10 10（曼哈顿路由） 60 CPU100%，明显卡顿
30 30（曼哈顿路由） 175 CPU100%，明显卡顿

还有一个问题，这个要等官方更新，我是重写了事件绑定逻辑来解决的，下面已经提bug了
#3930

[bighhhh]

我把 showNodeSelectionBox 和 showEdgeSelectionBox 设置为 false，纯节点拖动倒没那么卡，加上边的话卡得要命，特别是曼哈顿路由。 10个节点+10个边要比500个节点更卡

节点（个） 边（个） 单事件耗时（ms） 效果
10 0 0.5 无卡顿
300 0 6.7 无卡顿
500 0 12 卡顿不明显
10 10（默认路由） 35 CPU30-40%，轻微卡顿
10 10（曼哈顿路由） 60 CPU100%，明显卡顿
30 30（曼哈顿路由） 175 CPU100%，明显卡顿

但你这个拖动边卡我确实没遇到过，你是用的2.0吗？

[oyal]

我把 showNodeSelectionBox 和 showEdgeSelectionBox 设置为 false，纯节点拖动倒没那么卡，加上边的话卡得要命，特别是曼哈顿路由。 10个节点+10个边要比500个节点更卡
节点（个） 边（个） 单事件耗时（ms） 效果
10 0 0.5 无卡顿
300 0 6.7 无卡顿
500 0 12 卡顿不明显
10 10（默认路由） 35 CPU30-40%，轻微卡顿
10 10（曼哈顿路由） 60 CPU100%，明显卡顿
30 30（曼哈顿路由） 175 CPU100%，明显卡顿

但你这个拖动边卡我确实没遇到过，你是用的2.0吗？

2.0。你可以测试一下（本地会更卡） https://codesandbox.io/p/sandbox/goofy-tdd-syyl2d
框选30个节点30个 manhattan 边基本就不行了，我的项目还是用的 Vue 组件，性能还要再打一个折扣。节点一多能把浏览器卡炸

[wtjperi2003]

bandicam.2023-11-23.14-29-03-129.mp4

我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

[oyal]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

哇，你这个很不错啊，你用到了x6的边了吗？

[wtjperi2003]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

哇，你这个很不错啊，你用到了x6的边了吗？

边也是用边做的，所以，选中的边是覆盖一个边在上面，不是个矩形包围框。多选时，里面就算有边，移动边也会整体一起移动。但是由于x6边是不能缩放和旋转的。导致多选时不能旋转，缩放只能缩放里面的节点。

bandicam.2023-11-24.15-57-19-603.mp4

[bighhhh]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

哇，你这个很不错啊，你用到了x6的边了吗？

边也是用边做的，所以，选中的边是覆盖一个边在上面，不是个矩形包围框。多选时，里面就算有边，移动边也会整体一起移动。但是由于x6边是不能缩放和旋转的。导致多选时不能旋转，缩放只能缩放里面的节点。

bandicam.2023-11-24.15-57-19-603.mp4

第一个视频的缩放效果真棒，但是第二个视频为什么缩放时两个图元的相对位置变了，都只是依照左上角缩放了

[bighhhh]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

这个缩放时会调整图元之间的相对位置吗？

[wtjperi2003]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

这个缩放时会调整图元之间的相对位置吗？

等比计算的。整体面积变小了。图形之间的位置肯定要变小的。所以缩放要考虑图形的size和position的变化。写起来真的挺麻烦的

[zzjjbbaa]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

@wtjperi2003 大佬，请教下你这个项目里，PQUI这些动态数据，你是怎么实现的，单设备PQUI封装成一个对应的子node?

[wtjperi2003]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

@wtjperi2003 大佬，请教下你这个项目里，PQUI这些动态数据，你是怎么实现的，单设备PQUI封装成一个对应的子node?

PQUI?这是什么东西？

[zzjjbbaa]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

@wtjperi2003 大佬，请教下你这个项目里，PQUI这些动态数据，你是怎么实现的，单设备PQUI封装成一个对应的子node?

PQUI?这是什么东西？

设备的有功无功电压电流

[wtjperi2003]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

@wtjperi2003 大佬，请教下你这个项目里，PQUI这些动态数据，你是怎么实现的，单设备PQUI封装成一个对应的子node?

PQUI?这是什么东西？

设备的有功无功电压电流

这个有点属于业务层面的东西了。从设计上来讲。有文本节点这种东西，允许用户随意添加，也能配置样式，文本的颜色，字体，大小等。后面就要考虑和系统集成。我这里是针对每个node可以配置设备的数据，指定设备的某个数据后，预览时前端订阅该设备的这个数。然后这个设备发送数据上来，推送到前端，前端收到数据根据配置去改变样式。

[zzjjbbaa]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

@wtjperi2003 大佬，请教下你这个项目里，PQUI这些动态数据，你是怎么实现的，单设备PQUI封装成一个对应的子node?

PQUI?这是什么东西？

设备的有功无功电压电流

这个有点属于业务层面的东西了。从设计上来讲。有文本节点这种东西，允许用户随意添加，也能配置样式，文本的颜色，字体，大小等。后面就要考虑和系统集成。我这里是针对每个node可以配置设备的数据，指定设备的某个数据后，预览时前端订阅该设备的这个数。然后这个设备发送数据上来，推送到前端，前端收到数据根据配置去改变样式。

那你就是用文本节点实现的了，但是怎么处理他和设备节点的关系，用父子吗，我感觉用父子的话，这个关系就必须锁定不能被改变，但是这样的话复制粘贴操作，历史操作等都不太好处理

[oyal]

@wtjperi2003 兄弟你有用到曼哈顿路由吗？关于边拖拽卡顿的问题你是怎么解决的？我给 EdgeView 的 update 加了防抖，虽然不怎么卡顿了但是感觉体验也不好 #4204

[zlc0522]

bandicam.2023-11-23.14-29-03-129.mp4
我自己写了个插件。把框选变形整合在一起。能支持多选缩放。测试2000个节点也能移动。反而多选缩放2000个还比较卡

@wtjperi2003 大神，能分享下这个插件吗？