antvis/G6

G6 5.0.22, when using the 'create-edge' plug-in, the id of the real node, that is, the target, cannot be obtained in onCreated. The usage scenario is to judge that an edge cannot be joined in onCreated. #6399

Lemonadeccc posted onGitHub

Describe the bug / 问题描述

在使用'create-edge'插件的时候。我想使用插件在两个Node之间连线,需要实现已有的Node之间的连线不可再连接。 以下为我的代码:

{
                    type: 'create-edge',
                    trigger: 'click',
                    onCreate: (edge) => {
                        const { style, ...rest } = edge;
                        console.log('edge', edge);
                        // 同一个Node不能连
                        if (edge.source === edge.target) {
                            alert('不能边连同一个Node');
                            return;
                        }
                        // 已有edge不能连
                        // 获取所有edge这个api只能获取 当前已点击元素的source,但是获取不到 targetNode,分辨不了已有edge。
                        // targetNode 的id目前是g6-create-edge-assist-edge-id,所以这部分整个执行完onCreate之后,才能获取targetNode的id
                        const allEdges = graph.getEdgeData();
                        console.log(allEdges);
                        return {
                            ...rest,
                            style: {
                                ...style,
                                stroke: '#FF9731',
                                lineWidth: 4,
                                label: true,
                                labelAutoRotate: true,
                                labelMaxWidth: 0.8,
                                labelPlacement: 'center',
                                labelText: 'profinet1',
                                labelBackground: true,
                                labelBackgroundFill: '#fff',
                                labelBackgroundLineWidth: 2,
                                labelBackgroundRadius: 4,
                            },
                        };
                    },
                    onFinish: () => {
                        const allEdges = graph.getEdgeData();
                        console.log('dasifjoasife', allEdges);
                    },
                },

在onCreated中调用getEdgeData函数,获取到的当前试图连接已有edge连接的两个Node时候,target显示为一个id定值。我明白在onCreated中获取不到目标连接的Node。 在阅读G6源码之后,我提出以下两个解决方案: 1.在onFinish函数中增加一个callback回调,可以在onFinish中经过开发者判断之后调用callback函数即使用cancelEdge函数撤销当前连接边的操作。 2.希望可在onCreated函数中,调用getEdgeData函数时,增加一些提示信息,提示当前获取不到目标连接的节点Node,目标节点id使用"g6-create-edge-assist-edge-id"代替。或者在文档中详细写清楚。 3.请问本开源项目接收PR么,如果接受,我可以尝试解决。

No response

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

new Graph配置

{
                    type: 'create-edge',
                    trigger: 'click',
                    onCreate: (edge) => {
                        const { style, ...rest } = edge;
                        console.log('edge', edge);
                        // 同一个Node不能连
                        if (edge.source === edge.target) {
                            alert('不能边连同一个Node');
                            return;
                        }
                        // 已有edge不能连
                        // 获取所有edge这个api只能获取 当前已点击元素的source,但是获取不到 targetNode,分辨不了已有edge。
                        // targetNode 的id目前是g6-create-edge-assist-edge-id,所以这部分整个执行完onCreate之后,才能获取targetNode的id
                        const allEdges = graph.getEdgeData();
                        console.log(allEdges);
                        return {
                            ...rest,
                            style: {
                                ...style,
                                stroke: '#FF9731',
                                lineWidth: 4,
                                label: true,
                                labelAutoRotate: true,
                                labelMaxWidth: 0.8,
                                labelPlacement: 'center',
                                labelText: 'profinet1',
                                labelBackground: true,
                                labelBackgroundFill: '#fff',
                                labelBackgroundLineWidth: 2,
                                labelBackgroundRadius: 4,
                            },
                        };
                    },
                    onFinish: () => {
                        const allEdges = graph.getEdgeData();
                        console.log('dasifjoasife', allEdges);
                    },
                },

控制台输出 console.log(allEdges); 部分

{
  "0": {
    "data": {
      "edgeData": 1
    },
    "id": "edge1",
    "source": "ports",
    "states": [],
    "style": {
      "lineWidth": 4,
      "stroke": "#FF9731",
      "label": true,
      "labelAutoRotate": true,
      "labelMaxWidth": 0.8
    },
    "target": "ports2"
  },
  "1": {
    "data": {},
    "id": "g6-create-edge-assist-edge-id",
    "source": "winxpSystemea96e044-8234-4328-99d8-c9d81989d833",
    "style": {
      "pointerEvents": "none",
      "sourceNode": "winxpSystemea96e044-8234-4328-99d8-c9d81989d833",
      "targetNode": "g6-create-edge-assist-node-id"
    },
    "target": "g6-create-edge-assist-node-id"
  }
}

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response


Fund this Issue

$0.00
Funded

Pull requests