antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

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

RackweLLizm posted onGitHub

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 }],
    });

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 / 其他

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",

posted by RackweLLizm 2 months ago
        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.

posted by RackweLLizm 2 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests