[Bug]: 分组展开时,框选分组内的点,再去拖拽某个点,画布会跟随拖拽
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
复现代码
import { Graph, CommonEvent } from '@antv/g6';
import { useEffect, useRef, useState } from 'react';
export default () => {
const containerRef = useRef(null);
const graphRef = useRef(undefined);
useEffect(() => {
const graph = new Graph({
container: containerRef.current!,
width: 800,
height: 800,
data: {
nodes: [
{
id: 'node-1',
style: { x: 50, y: 100 },
state: {
dim: {
fillOpacity: 0.08,
},
brushSelect: {
lineWidth: 3,
halo: true,
stroke: '#1B324F',
},
},
combo: '1',
},
{
id: 'node-2',
style: { x: 100, y: 100 },
state: {
dim: {
fillOpacity: 0.08,
},
brushSelect: {
lineWidth: 3,
halo: true,
stroke: '#1B324F',
},
},
combo: '1',
},
{
id: 'node-3',
style: { x: 150, y: 150 },
state: {
dim: {
fillOpacity: 0.08,
},
brushSelect: {
lineWidth: 3,
halo: true,
stroke: '#1B324F',
},
},
combo: '1',
},
{
id: 'node4',
style: { x: 150, y: 100 },
state: {
dim: {
fillOpacity: 0.08,
},
brushSelect: {
lineWidth: 3,
halo: true,
stroke: '#1B324F',
},
},
combo: '1',
},
{
id: 'node5',
style: { x: 300, y: 100 },
state: {
dim: {
fillOpacity: 0.08,
},
brushSelect: {
lineWidth: 3,
halo: true,
stroke: '#1B324F',
},
},
},
],
edges: [
{
id: 'edge-1',
source: 'node-1',
target: 'node5',
state: {
dim: {
fillOpacity: 0.08,
},
brushSelect: {
lineWidth: 3,
halo: true,
stroke: '#1B324F',
},
},
},
],
combos: [{ id: '1' }],
},
behaviors: [
{
type: 'drag-canvas',
key: 'drag-canvas',
},
{
type: 'drag-element',
key: 'drag-element',
},
{
type: 'brush-select',
key: 'brush-select',
enable: false,
// state: 'brushSelect',
enableElements: ['node', 'edge'],
},
],
});
graph.render();
graphRef.current = graph;
}, []);
useEffect(() => {
if (!graphRef.current) return;
const graph = graphRef.current;
const updateBehaviors = (enableBrush) => {
graph.updateBehavior({
key: 'drag-canvas',
enable: !enableBrush,
});
graph.updateBehavior({
key: 'drag-element',
enable: !enableBrush,
});
graph.updateBehavior({
key: 'brush-select',
enable: enableBrush,
trigger: ['Shift'],
});
};
graph.on(CommonEvent.KEY_DOWN, (e: any) => {
if (e.key === 'Shift') {
updateBehaviors(true);
}
});
graph.on(CommonEvent.KEY_UP, (e: any) => {
if (e.key === 'Shift') {
updateBehaviors(false);
}
});
}, [graphRef]);
return (
Use G6 in react
);
};
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
_No response_
### Version / 版本
Please select / 请选择
### OS / 操作系统
- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the provided React reproduction and inspect the drag-canvas, drag-element, and brush-select behavior configuration. Reproduce the grouped-node selection and drag sequence in Chrome on macOS; done means dragging a selected point no longer causes the canvas to move.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100