[Bug]: Collapse-expand behavior gives an error when brush-select is active
- 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