antv x6开启Selection拖动多个图元卡顿

        在官网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;
}

修改完后,可能在多选时,无法知道框柱了哪些设备,但是拖拽起来会快一点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值