Create Edge Error. #5808

问题描述

Graph Instance

        graph = new Graph({
            container: graphRef.current!,
            // renderer: () => new Renderer(),
            plugins: [
                {
                    type: 'contextmenu',
                    trigger: 'contextmenu', // 'click' or 'contextmenu'
                    getContent: (e) => {
                        const container = document.createElement('div');
                        document.body.appendChild(container);
                        const root = createRoot(container);

                        const closeContextMenu = () => {
                            root.unmount();
                            if (container.parentNode) {
                                container.parentNode.removeChild(container);
                            }
                        };
                        console.log("targetType", e.targetType)

                        root.render(<SorguYapContextMenu 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: waterMark Test,
                    textFontSize: 18,
                    textFontFamily: 'Microsoft YaHei',
                    fill: 'rgba(0, 0, 0, 0.1)',
                    rotate: Math.PI / 12,
                },
                {
                    type: 'toolbar',
                    position: 'top-right',
                    onClick: (item) => {
                        toolbar(item);
                    },
                    getItems: () => {
                        // G6 内置了 9 个 icon，分别是 zoom-in、zoom-out、redo、undo、edit、delete、auto-fit、export、reset
                        return [
                            { id: 'zoom-in', value: 'zoom-in' },
                            { id: 'zoom-out', value: 'zoom-out' },
                            { id: 'redo', value: 'redo' },
                            { id: 'undo', value: 'undo' },
                            { id: 'edit', value: 'edit' },
                            { id: 'delete', value: 'delete' },
                            { id: 'auto-fit', value: 'auto-fit' },
                            { id: 'export', value: 'export' },
                            { id: 'reset', value: 'reset' },
                            { id: 'blabla', value: 'blabla' },

                        ];
                    },
                },
            ],
            behaviors: [
                {
                    type: 'hover-element',
                    enable: (event) => event.targetType === 'node',
                    degree: 1, // 👈🏻 Activate relations.
                    activeState: 'highlight',
                    inactiveState: 'dim',
                    onHover: (event) => {
                        event.view.setCursor('pointer');
                    },
                    onHoverEnd: (event) => {
                        event.view.setCursor('default');
                    },
                },
                {
                    type: 'click-element',
                    multiple: true,
                    trigger: ['shift']
                },
                {
                    key: 'brush-select',
                    type: 'brush-select',
                    mode: 'diff',
                    trigger: 'shift',
                    style: {
                        fill: '#00f',
                        fillOpacity: 0.2,
                        stroke: '#0ff',
                    },
                },
                {
                    type: 'create-edge',
                    key: 'create-edge',
                    trigger: 'click',
                    enable: false,
                    animation: true,
                },
                'zoom-canvas',
                // 'drag-canvas',
                'drag-element'
            ],
            layout: {
                type: 'force', // Using force-directed layout to avoid overlapping
                linkDistance: 200,
                edgeStrength: 0.1,
                preventOverlap: true,
            },
            edge: {
                type: 'line',
                style: {
                    labelText: (d: any) => d.id,
                    labelBackground: true,
                    endArrow: true,
                    stroke: 'red',
                    lineWidth: 2,
                    labelPlacement: 'center',
                    labelOffsetX: 0.85,
                    labelOffsetY: 15,
                },
            },
            node: {
                style:{
                    badgeFontSize: 18,
                    // badgePadding: [
                    //     1,
                    //     4
                    // ],
                    badgeBackground:true,
                }
            },
            transforms: [{ type: "process-parallel-edges", distance: 50 }],
        });

Error Message:

Edgeİnfo:

When I create a new edge, the edge becomes visible. But it gives such an error in console.

重现链接

notFound

重现步骤

notFound

预期行为

notFound

平台

Windows Chrome 124 "@antv/g6": "^5.0.0-beta.37",

屏幕截图或视频（可选）

No response

补充说明（可选）

No response