在官网https://x6.antv.antgroup.com/examples/showcase/practices/#flowchart这个实例里面,测试了大概框选100个设备,拖动起来会存在卡顿。
在X6框选源码中
框选多个图元时,会自动把为框选住的每一个图元再加上一个小框
想办法直接去除红色的小框,多选时只展示大框
import { Graph} from '@antv/x6'
import { Selection } from '@antv/x6-plugin-selection'
// 此处是你引用的graph对象
let graph = new Graph({
...
})
// 图形框选插件 实例 根据自己项目来
graph.use(
new Selection({
enabled: true,
multiple: true, //启用后按住 ctrl 或 command 键点击节点实现多选
rubberband: true, //启用框选节点功能
showNodeSelectionBox: true, //显示节点的选择框
showEdgeSelectionBox: true,
}),
)
// 重写X6 框选的代码
let selectionYuan = graph.getPlugin('selection').selectionImpl;
selectionYuan.createSelectionBox = function(cell) {
selectionYuan.addCellSelectedClassName(cell);
// 框选一个图元时,可以使用官网之前的
if (selectionYuan.canShowSelectionBox(cell) && selectionYuan.collection.length == 1) {
const view = graph.renderer.findViewByCell(cell);
if (view) {
const bbox = view.getBBox({
useCellGeometry: true,
});
const className = selectionYuan.boxClassName;
const box = document.createElement('div');
const pointerEvents = selectionYuan.options.pointerEvents;
Dom.addClass(box, className);
Dom.addClass(box, `${className}-${cell.isNode() ? 'node' : 'edge'}`);
Dom.attr(box, 'data-cell-id', cell.id);
Dom.css(box, {
position: 'absolute',
left: bbox.x,
top: bbox.y,
width: bbox.width,
height: bbox.height,
pointerEvents: pointerEvents
? selectionYuan.getPointerEventsValue(pointerEvents)
: 'auto',
});
Dom.appendTo(box, selectionYuan.container);
selectionYuan.showSelected();
selectionYuan.boxCount += 1;
}
}else {
// 框选多个时跳出
selectionYuan.showSelected();
}
}
selectionYuan.confirmUpdate = function() {
if (selectionYuan.boxCount) {
selectionYuan.hide();
for (let i = 0, $boxes = selectionYuan.$boxes, len = $boxes.length; i < len; i += 1) {
const box = $boxes[i];
const cellId = Dom.attr(box, 'data-cell-id');
Dom.remove(box);
selectionYuan.boxCount -= 1;
const cell = selectionYuan.collection.get(cellId);
if (cell) {
selectionYuan.createSelectionBox(cell);
}
}
selectionYuan.updateContainer();
}else {
selectionYuan.updateContainer();
}
return 0;
}
修改完后,可能在多选时,无法知道框柱了哪些设备,但是拖拽起来会快一点