antvis / antvis/G6

[Bug]: Collapse-expand behavior gives an error when brush-select is active

Open
#6,766 2 comments 0 reactions 0 assignees View on GitHub
waiting for maintainer
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

useEffect(() => {
if (!graphRef.current) return;
const graph = new Graph({
container: graphRef.current,
autoResize: false,
animation: false,
autoFit: "view",
data: data,
layout: {
type: 'circular',
},
node: {
type: "image",
style: {
badgeFontSize: 18,
labelPlacement: 'top',
size: 30,
haloStroke: '#227eff',
// badgePadding: [
// 1,
// 4
// ],
badgeBackground: false,
},
state: {
highlight: {
fill: '#D580FF',
halo: true,
lineWidth: 0,
},
dim: {
fill: '#99ADD1',
},
},
},
edge: {
state: {
highlight: {
stroke: '#D580FF',
},
},
},
behaviors: [
// {
// type: 'brush-select',
// key: 'brush-select',
// trigger: 'shift',
// mode: 'diff',
// style: {
// fill: '#00f',
// fillOpacity: 0.2,
// stroke: '#0ff',
// },
// enable: (event) => event.shiftKey === true,
// },

{
type: 'drag-canvas',
enable: (event) => event.shiftKey === false && event.targetType === 'canvas',
},

{
type: 'click-select',
multiple: true
},
{
type: 'hover-activate',
enable: (event) => event.targetType === 'node',
degree: 1, // 👈🏻 Activate relations.
state: 'highlight',
inactiveState: 'dim',
onHover: (event) => {
event.view.setCursor('pointer');
},
onHoverEnd: (event) => {
event.view.setCursor('default');
},
},
'zoom-canvas',
'collapse-expand',
'drag-element'

],
plugins: [
// { key: 'grid-line', type: 'grid-line', follow: false },
{
type: 'minimap',
size: [240, 160],
},
{
type: 'legend',
key: "legend",
nodeField: 'nodeType',
edgeField: 'edgeType',
// gridRow: 1,
width: "1500",
height: "20",
// gridCol: 33,
itemMarkerSize: 16,
itemLabelFontSize: 10,
position: "top",
trigger: 'click',
},
{
type: 'contextmenu',
trigger: 'contextmenu',
getContent: (e: any) => {
console.log("reesss");
const container = document.createElement('div');
document.body.appendChild(container);
const root = createRoot(container);

const closeContextMenu = () => {
root.unmount();
if (container.parentNode) {
container.parentNode.removeChild(container);
}
};
root.render();
return container;
},
enable: 'always',
},
// {
// type: 'history',
// key: 'history',
// },
{
type: 'watermark',
text: authStore.getUserName()?.UserName
textFontSize: 18,
textFontFamily: 'Microsoft YaHei',
fill: 'rgba(0, 0, 0, 0.1)',
rotate: Math.PI / 12,
},
],

transforms: [{ type: "process-parallel-edges", distance: 50 }],
});

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

**Use 'collapse-expand', and brush select together and double click on the combo. You will see that the page is irreversibly squeezing and crashing the Browser**

### Version / 版本

Please select / 请选择

### OS / 操作系统

- [ ] macOS
- [x] 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 Graph configuration shown in the issue, focusing on the collapse-expand and brush-select behaviors and the reported double-click on a combo. Reproduce the interaction in Chrome on Windows and inspect the behavior and combo event paths; done means using both behaviors no longer causes irreversible squeezing or a browser crash.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.