antv/x6多个节点同时拖动

1,134 阅读1分钟

问题: 画布框选(多选)后不支持整体拖动

... debug了好久发现是版本问题,我的项目中使用的x6是v1.21.5,该版本selecting.showNodeSelectionBox属性设置为true会将moveble效果覆盖,也就是不能触发node:moved事件。

将x6升级到v1.24.5selecting上添加了一个新属性pointerEvents(然而,这个属性并没有添加到官方文档中...),selection的配置如下,实现框选后整体拖拽效果:

selecting:{
	 enabled: true,
	 pointerEvents: "none", // 新属性
   showNodeSelectionBox: true,
   multiple: true,
}

然而又出现了新的问题。。。

在拖动的过程中,节点的位置会乱跑,抓狂😤

找呀找,终于找到是设置对齐线snapline:true造成的,将其设置为false就不会有这个乱跑的现象了。然而对齐线是产品硬需求,还是要保留😓,官网也没有提供解决方案,所以只能自己来

// 既然框选/多选后拖动才会有问题,那在拖动的时候把对齐线禁用是不是就可以了,果然,可以解决问题😁
// 开始拖动事件
graph.on("node:move", () => {
    if (graph.getSelectedCells() && graph.getSelectedCells().length > 1) {
      graph.disableSnapline();
    } else {
      graph.enableSnapline();
    }
 });