先配置allowMulti: true,createEdge时,zIndex=0
const graph = new Graph({
container: container,
connecting: {
router: 'manhattan',
connector: {
name: 'rounded',
args: {
radius: 15,
},
},
allowMulti: true,//允许连接多个
createEdge() {
return new Shape.Edge({
tools: [
{
name: 'edge-editor',
args: {
attrs: {
backgroundColor: '#fff',
},
},
},
],
zIndex: 0//连接线在最底层
});
},
snap: {
radius: 20,
}
});
为Node添加port时,把zIndex设置为1
这是一点点调试的结果,大概意思是通过zIndex控制Port在Edge的上层,否则无法触发连接事件。
export const portsOnBottom = {
groups: {
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'hidden',
},
},
},
zIndex: 1,
},
},
items: [
{
group: 'bottom',
},
],
};