Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 of 10 tasks
RackweLLizm opened this issue Feb 11, 2025 · 2 comments
Open
2 of 10 tasks
Labels
waiting for maintainer Triage or intervention needed from a maintainer.

Comments

@RackweLLizm
Copy link

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(<SonucContextMenu x={e.client.x} y={e.client.y} id={e.target.id} targetType={e.targetType} onClose={closeContextMenu} />);
                    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
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
@RackweLLizm RackweLLizm added the waiting for maintainer Triage or intervention needed from a maintainer. label Feb 11, 2025
@RackweLLizm
Copy link
Author

https://g6.antv.antgroup.com/en/examples/behavior/combo#basic

when I do the example on this page, the browser does not crash. I closed everything else in the graph to test it, only brush select and collapse-expand remained, but the error still persisted.

My current package.json version is;
"@antv/g6": "5.0.42",

@RackweLLizm
Copy link
Author

        graph.on(ComboEvent.DBLCLICK, (_e: any) => {
            debugger;
            graph.setBehaviors((behaviors) => behaviors.filter((behavior: any) => behavior.key !== 'brush-select'));
            console.log(graph.getBehaviors());

            setTimeout(() => {
                graph.setBehaviors((behaviors) => [...behaviors, {
                    type: 'brush-select',
                    key: 'brush-select',
                    trigger: 'shift',
                    mode: 'default',
                    style: {
                        fill: '#00f',
                        fillOpacity: 0.2,
                        stroke: '#0ff',
                    },
                    enable: (event) => event.shiftKey === true,
                },]);

            }, 1000)

        })

I fixed the problem temporarily with this code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
waiting for maintainer Triage or intervention needed from a maintainer.
Projects
None yet
Development

No branches or pull requests

1 participant