简介
1 .工具是渲染在节点上/边上的小部件,用来增强节点/边的交互能力
节点的相关工具
1 .button
2 .button-remove:
3 .boundary:
边
1 .vertices
2 .segments
3 .boundary
4 .button
5 .button-remove
6 .sorce-arrowhead,target-arrowhead:
1 .设置这俩就是可以在连接完毕好的线段,拖拽连接箭头,可以更换
基础使用
const rect2 = graph.addNode({
x: 360,
y: 40,
width: 100,
height: 40,
label: 'Target',
data:{},
tools:[
{name:'boundary'},
//包围节点的矩形,用来增加交互感
//{name:'button'},
//button这个试不出来,但是目前有了删除这个感觉也够了
//{name:'button-remove'}
//这个remove按钮竟然还带着事件,直接删除
{
name:'button',
//需要一系列的配置才能生效
args:{
markup:[
{
tagName:'circle',
selector:'button',
attrs:{
r:18,
stroke:'#fe854f',
fill:'white',
cursor:'pointer',
}
},{
tagName:'text',
textContent:'按钮',
selector:'icon',
attrs:{
fill:'#fe854f',
fontSize:10,
textAnchor:"middle",
pointerEvents:'none',
y:'0.3em'
}
}
],
//样式
distance:40,
onClick(e){
console.log('按钮被点击',e)
}
}
},
]
})
graph.addEdge({
source: rect1,
target: rect2,
labels: [
{
markup: [
{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
label: {
cursor: 'pointer',
text: 'Eege',
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontSize: 12,
fill: 'black',
},
body: {
cursor: 'pointer',
ref: 'label',
refX: '-20%',
refY: '-20%',
refWidth: '140%',
refHeight: '140%',
fill: 'white',
stroke: 'black',
strokeWidth: 1,
},
},
},
],
tools:[
{name:'vertices'},
//路径点工具:拖拽可以调节点的位置,基本没用
{name:'segments'},
//线段工具,拖拽可以改变线段的位置
{name:'boundary'},
//线段添加矩形选中框
]
})
交互hover才加这些工具,所有都要加这一套工具
//鼠标hover上去,出现矩形选择框,并且出现可点击的删除的按钮
//原来的逻辑是需要点击选中,然后在删除,什么的,现在好像少了一些步骤
graph.on('cell:mouseenter',(e)=>{
let cell=e.cell
if(cell.isNode){
cell.addTools([
{
name:'boundary',
args:{
attrs:{
fill:'#7c68fc',
stroke:'#333',
'stroke-width':1,
'fill-opacity':0.2,
//还可以自定义边框的样式
}
}
},
{
name:'button-remove',
args:{
x:0,
y:0,
offset:{
x:10,y:10,
}
}
}
])
}else{
cell.addTools(['vertices','segments'])
}
})
graph.on('cell:mouseleave',(e)=>{
let cell=e.cell
cell.removeTools()
})
node-editor
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/dist/x6.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
background:{
color:'#fffbe6'
},
grid:{
size:10,
visible:true
},
highlighting:{
//具体触发的样式
magnetAvailable:{
name: 'stroke',
args: {
padding: 3,
attrs: {
strokeWidth: 3,
stroke: '#52c41a',
},
},
}
},
//这个是放在外面的
connecting:{
snap:true,
//允许自动吸附
allowBlank:false,
allowLoop:false,
allowNode:false,
highlight:true,
validateMagnet({magnet}){
console.log(magnet,'validateMagnet')
return magnet.getAttribute('port-group')!=='in'
//是否新增边的判断:第二个点连接的时候,只有拖拽起始点是in的桩子,才能拉线
},
validateConnection({sourceMagnet,targetMagnet}){
if(!sourceMagnet||sourceMagnet.getAttribute('port-group')==="in"){
return false
}
//只能从输出桩拉线
if(!targetMagnet||targetMagnet.getAttribute('port-group')==='out'){
return false
}
return true
},
}
})
X6.Shape.Rect.config({
attrs: {
body: {
magnet: false,
},
},
ports: {
groups: {
in: {
position: { name: 'top' },
},
out: {
position: { name: 'bottom' },
},
},
},
portMarkup: [
{
tagName: 'circle',
selector: 'portBody',
attrs: {
magnet: 'true',
r: 6,
fill: '#fff',
stroke: '#000',
'stroke-width': 2,
},
},
],
})
graph.addNode({
x: 320,
y: 120,
width: 100,
height: 40,
label: 'Hello',
ports: [
{ id: 'in-1', group: 'in',label:{text:{text:'in-1'}} },
{ id: 'out-1', group: 'out',label:{text:{text:'out-1'}} },
],
})
graph.addNode({
x: 140,
y: 240,
width: 100,
height: 40,
label: 'Target',
ports: [
{ id: 'in-1', group: 'in' },
{ id: 'out-1', group: 'out' },
],
})
graph.addNode({
x: 40,
y: 40,
width: 100,
height: 40,
label: 'Source',
ports: [
{ id: 'in-1', group: 'in' },
{ id: 'out-1', group: 'out' },
],
})
graph.on('edge:mouseenter',({cell})=>{
cell.addTools([
{
name:'source-arrowhead',
args:{
attrs:{
fill:"green"
}
}
},{
name:'target-arrowhead',
args:{
attrs:{
fill:'red'
}
}
}
])
})
graph.on('edge:mouseleave',({cell})=>{
cell.removeTools()
})
</script>
</body>
</html>
网友评论