自定义按钮上的节点工具
1 .点击实现一些别的操作
2 .
<!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,
})
//这个竟然是都写在一起的,包括结构,样式,操作逻辑
let button={
name:"button",
args:{
markup:[
//结构:一个圆圈,一段文字
{
tagName:'circle',
selector:'button',
attrs:{
//这个圆圈的样式
r:14,
stroke:"#fe854f",
strokeWidth:2,
fill:"white",
cursor:'pointer'
}
},{
tagName:"text",
selector:"icon",
textContent:"删除",
attrs:{
fill:"#fe854f",
fontSize:5,
textAnchor:'middle',
pointerEvents:'none',
y:'0.3em',
}
}
],
x:'100%',
//整体调,直接到最右边
offset:{
x:-20,
y:20
//细节调节,注意,这俩还必须一起出来使用,单独使用一个有报错
},
onClick(e){
console.log('cell被点击',e)
}
}
}
let node=graph.addNode({
x:180,
y:60,
width:300,
height:150,
attrs:{
body:{
fill:"#f5f5f5",
stroke:"#d9d9d9",
strokeWidth:1,
}
},
tools:[button,]
//单个节点带有的节点工具
})
</script>
</body>
</html>
上面是一个自定义的删除点击节点的工具,下面是库自带的
const source = graph.addNode({
x: 180,
y: 60,
width: 100,
height: 40,
attrs: {
body: {
fill: '#f5f5f5',
stroke: '#d9d9d9',
strokeWidth: 1,
},
},
tools: [
{
name: 'button-remove',
args: {
x: '100%',
y: 0,
offset: { x: -10, y: 10 },
},
},
],
})
工具包含
1 .删除按钮,包围盒,节点提示,节点文字可编辑
2 .节点提示.这个竟然是放在了react里面,onPortRendered函数里面,这里面实现这个功能就不是自带的了,而且能实现的也可以不仅仅在这里
let button={
name:"button",
args:{
markup:[
//结构:一个圆圈,一段文字
{
tagName:'circle',
selector:'button',
attrs:{
//这个圆圈的样式
r:14,
stroke:"#fe854f",
strokeWidth:2,
fill:"white",
cursor:'pointer'
}
},{
tagName:"text",
selector:"icon",
textContent:"删除",
attrs:{
fill:"#fe854f",
fontSize:5,
textAnchor:'middle',
pointerEvents:'none',
y:'0.3em',
}
}
],
x:'100%',
//整体调,直接到最右边
offset:{
x:-20,
y:20
//细节调节,注意,这俩还必须一起出来使用,单独使用一个有报错
},
onClick(e){
console.log('cell被点击',e)
}
}
}
graph.addNode({
x: 350,
y: 150,
width: 80,
height: 40,
label: 'target',
})
graph.on('cell:dblclick', ({ cell, e }) => {
cell.addTools([
{
name: cell.isEdge() ? 'edge-editor' : 'node-editor',
args: {
event: e,
},
},
])
})
网友评论