antvis / antvis/G6

[Bug]: 分组展开时,框选分组内的点,再去拖拽某个点,画布会跟随拖拽

Open
#7,074 0 comments 0 reactions 0 assignees View on GitHub
behavior waiting for maintainer
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.