<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>combos demo</title>
</head>
<body>
<div id="container"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js">
</script>
<script>
G6.registerNode('my-diamond', {
draw(cfg, group) {
// 如果 cfg 中定义了 style 需要同这里的属性进行融合
const keyShape = group.addShape('path', {
attrs: {
path: this.getPath(cfg), // 根据配置获取路径
stroke: cfg.color || 'grey', // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'path-shape',
// 设置 draggable 以允许响应鼠标的图拽事件
draggable: true,
});
if (cfg.label) {
// 如果有文本
// 如果需要复杂的文本配置项，可以通过 labeCfg 传入
// const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
// style.text = cfg.label;
const label = group.addShape('text', {
// attrs: style
attrs: {
x: 0, // 居中
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label,
fill: '#666',
},
// must be assigned in G6 3.3 and later versions. it can be any value you want
name: 'text-shape',
// 设置 draggable 以允许响应鼠标的图拽事件
draggable: true,
});
}
return keyShape;
},
update(cfg, node){
const container = node.getContainer();
const keyShape = container.get('children')[0];
const style = {
path: this.getPath(cfg),
stroke: cfg.color,
};
keyShape.attr(style);
},
getAnchorPoints(cfg){
return [
[0, 0.5],
[1, 0.5]
];
},
setState(name, value, item){
const group = item.getContainer();
const shape = group.get('children')[0];
if(name === 'selected') {
if(value){
shape.attr('fill', 'red');
}else {
shape.attr('fill', 'white');
}
}
if (name === 'running') {
if (value) {
shape.animate(
{
fill: 'pink'
},
{
repeat: true,
duration: 1000,
},
);
console.log('running...');
} else {
shape.stopAnimate();
shape.attr('fill', 'white');
console.log('stop running...');
}
}
},
// 返回菱形的路径
getPath(cfg) {
const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
const width = size[0];
const height = size[1];
// / 1 \
// 4 2
// \ 3 /
const path = [
['M', 0, 0 - height / 2], // 上部顶点
['L', width / 2, 0], // 右侧顶点
['L', 0, height / 2], // 下部顶点
['L', -width / 2, 0], // 左侧顶点
['Z'], // 封闭
];
return path;
},
});
const mockData = {
nodes: [
{
id: 'damond1',
type: 'my-diamond',
x: 50,
y: 50,
size: [100,50],
label: 'damond1'
},
{
id: 'damond2',
type: 'my-diamond',
x: 150,
y: 50,
color: 'pink',
label: 'damond2'
},
{
id: 'damond3',
type: 'my-diamond',
x: 200,
y: 50,
label: 'diamond',
label: 'damond3'
},
{
id: 'damond4',
type: 'my-diamond',
x: 250,
y: 50,
color: 'red',
label: 'damond4'
},
],
edges: [
{
source: 'diamond1',
target: 'diamond2',
}
]
};
const graph = new G6.Graph({
container: 'container',
width: 500,
height: 500,
});
graph.on('node:click', (ev)=>{
const item = ev.item;
graph.setItemState(item, 'selected', !item.hasState('selected'));
});
graph.on('node:mouseenter', (ev)=>{
const item = ev.item;
graph.setItemState(item, 'running', true);
});
graph.on('node:mouseout', (ev)=>{
const item = ev.item;
graph.setItemState(item, 'running', false);
});
graph.data(mockData);
graph.render();
</script>
</body>
</html>