After drag-canvas is configured enable, there is a problem with drag-element #6280
songxiaoyu321 posted onGitHub
Describe the bug / 问题描述
为防止drag-canvas和brush-select冲突配置如下, { type: 'drag-canvas', enable: (event) => event.shiftKey === false, } 结果drag-element出现问题,拖拽一个节点其他也会跟着移动
Reproduction link / 重现链接
https://g6-next.antv.antgroup.com/examples/layout/dagre/#antv-dagre
Steps to Reproduce the Bug or Issue / 重现步骤
//代码修改如下
import { Graph } from '@antv/g6';
const data = { nodes: [ { id: '0' }, { id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }, { id: '7' }, { id: '8' }, { id: '9' }, ], edges: [], };
const graph = new Graph({ container: 'container', animation: false, data, layout: { type: 'antv-dagre', nodesep: 20, rankdir: 'LR', controlPoints: true, }, node: { type: 'rect', style: { size: [60, 30], radius: 8, labelPlacement: 'center', labelText: (d) => d.id, }, }, edge: { type: 'polyline', style: { endArrow: true, lineWidth: 2, stroke: '#C2C8D5', }, }, autoFit: 'view', behaviors: [ 'drag-element', { type: 'drag-canvas', enable: (event) => event.shiftKey === false, }, { key: 'brush-select', type: 'brush-select', mode: 'diff', trigger: 'shift', style: { fill: '#00f', fillOpacity: 0.2, stroke: '#0ff', }, }, 'zoom-canvas' ], });
graph.render();
window.addPanel((gui) => { const config = { layout: 'default' }; const layouts = { default: { type: 'antv-dagre', nodesep: 100, ranksep: 70, controlPoints: true }, LR: { type: 'antv-dagre', rankdir: 'LR', align: 'DL', nodesep: 50, ranksep: 70, controlPoints: true }, 'LR&UL': { type: 'antv-dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 50, ranksep: 70 }, };
gui.add(config, 'layout', Object.keys(layouts)).onChange(async (layout) => { graph.setLayout(layouts[layout]); await graph.layout(); graph.fitCenter(); }); });
G6 Version / G6 版本
🆕 5.x
Operating System / 操作系统
macOS
Browser / 浏览器
Chrome
Additional context / 补充说明
No response