antvis/G6
The issue has been closed
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么,如果接受,我可以尝试解决。
Reproduction link / 重现链接
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