antvis/G6

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出现问题,拖拽一个节点其他也会跟着移动

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


启用 DragCanvas 且仅在画布上触发:

{
      type: 'drag-canvas',
      enable: (event) => event.shiftKey === false && event.targetType === 'canvas',
}
posted by Aarebecca 8 months ago

Fund this Issue

$0.00
Funded

Pull requests