备注
1 .如果是空桩,可以直接删除和添加
2 .如果桩上有链接,需要先删除连线,然后在删除节点
3 .
react渲染桩
1 .关键函数onPortRendered()
2 .portMarkUp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
onPortRendered(args){
const selectors = args.contentSelectors
const container = selectors && selectors.foContent
if(container){
ReactDOM.render(
(
<Tooltip title="port">
<div className="my-port" />
</Tooltip>
),
container,
)
}
//把新的想要的操作,渲染到container里面
}
})
const rect=graph.addNode({
x:240,
y:60,
width:100,
height:180,
attrs:{
body:{
fill:"#f5f5f5",
stroke:'#d9d9d9',
strokeWidth:1,
}
},
portMarkup:[X6.Markup.getForeignObjectMarkup()],
ports:{
groups:{
group1:{
attrs:{
circle:{
r:6,
magnet:true,
stroke:'#31d0c6',
fill:"#fff",
strokeWidth:2,
}
}
}
},
items:[
{group:'group1'},
{group:'group1'}
]
}
})
const addPort=()=>{
rect.addPort({
group:"group1"
})
}
const removePort=()=>{
const ports=rect.getPorts()
if(ports.length){
rect.removePortAt(ports.length-1)
//根据索引位置删除链接桩
}
}
</script>
</body>
</html>
网友评论