mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 12:49:04 +08:00
342 lines
4.8 KiB
TypeScript
342 lines
4.8 KiB
TypeScript
import React, { useEffect } from 'react';
|
||
import G6 from '../../../src';
|
||
import { IGraph } from '../../../src/interface/graph';
|
||
|
||
let graph: IGraph = null;
|
||
|
||
G6.registerNode('iconfont', {
|
||
|
||
draw(cfg, group) {
|
||
|
||
const {
|
||
|
||
backgroundConfig: backgroundStyle,
|
||
|
||
style,
|
||
|
||
labelCfg: labelStyle,
|
||
|
||
} = cfg;
|
||
|
||
if (backgroundStyle) {
|
||
|
||
group.addShape('circle', {
|
||
|
||
attrs: {
|
||
|
||
x: 0,
|
||
|
||
y: 0,
|
||
|
||
r: cfg.size,
|
||
|
||
...backgroundStyle,
|
||
|
||
},
|
||
|
||
});
|
||
|
||
}
|
||
|
||
const keyShape = group.addShape('text', {
|
||
|
||
attrs: {
|
||
|
||
x: 0,
|
||
|
||
y: 0,
|
||
|
||
fontFamily: 'Glyphicons Halflings', // 对应css里面的font-family: "iconfont";
|
||
|
||
textAlign: 'center',
|
||
|
||
textBaseline: 'middle',
|
||
|
||
text: cfg.text,
|
||
|
||
fontSize: cfg.size,
|
||
|
||
...style,
|
||
|
||
},
|
||
|
||
});
|
||
|
||
const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;
|
||
|
||
group.addShape('text', {
|
||
|
||
attrs: {
|
||
|
||
x: 0,
|
||
|
||
y: labelY,
|
||
|
||
textAlign: 'center',
|
||
|
||
text: cfg.label,
|
||
|
||
...labelStyle.style,
|
||
|
||
},
|
||
|
||
});
|
||
|
||
return keyShape;
|
||
|
||
},
|
||
|
||
});
|
||
|
||
const COLOR = '#40a9ff';
|
||
|
||
const graph = new G6.Graph({
|
||
|
||
container: 'mountNode',
|
||
|
||
width: 800,
|
||
|
||
height: 600,
|
||
|
||
modes: {
|
||
|
||
default: ['collapse-expand', 'drag-canvas', 'drag-node'],
|
||
|
||
},
|
||
|
||
defaultNode: {
|
||
|
||
backgroundConfig: {
|
||
|
||
backgroundType: 'circle',
|
||
|
||
fill: COLOR,
|
||
|
||
stroke: 'LightSkyBlue',
|
||
|
||
},
|
||
|
||
shape: 'iconfont',
|
||
|
||
size: 12,
|
||
|
||
style: {
|
||
|
||
fill: '#fff',
|
||
|
||
},
|
||
|
||
labelCfg: {
|
||
|
||
style: {
|
||
|
||
fill: COLOR,
|
||
|
||
fontSize: 12,
|
||
|
||
},
|
||
|
||
},
|
||
|
||
},
|
||
|
||
// 布局相关
|
||
|
||
layout: {
|
||
|
||
type: 'dagre',
|
||
|
||
rankdir: 'LR',
|
||
|
||
align: 'DL',
|
||
|
||
nodesep: 30,
|
||
|
||
ranksep: 30
|
||
|
||
},
|
||
|
||
});
|
||
|
||
const DefaultShape = () => {
|
||
const container = React.useRef();
|
||
|
||
useEffect(() => {
|
||
if (!graph) {
|
||
graph = new G6.TreeGraph({
|
||
container: container.current as string | HTMLElement,
|
||
width: 500,
|
||
height: 500,
|
||
linkCenter: true,
|
||
modes: {
|
||
default: ['collapse-expand', 'zoom-canvas', 'drag-canvas'],
|
||
},
|
||
defaultNode: {
|
||
shape: 'file-node',
|
||
},
|
||
defaultEdge: {
|
||
shape: 'step-line',
|
||
},
|
||
nodeStateStyles: {
|
||
hover: {
|
||
fill: '#83AFFD',
|
||
stroke: '#5B8FF9',
|
||
},
|
||
select: {
|
||
fill: '#4ab334',
|
||
lineWidth: 2,
|
||
stroke: '#5B8FF9',
|
||
},
|
||
},
|
||
layout: {
|
||
type: 'indented',
|
||
isHorizontal: true,
|
||
direction: 'LR',
|
||
indent: 70,
|
||
getHeight: function getHeight() {
|
||
return 20;
|
||
},
|
||
|
||
getWidth: function getWidth() {
|
||
return 20;
|
||
},
|
||
},
|
||
});
|
||
}
|
||
|
||
const data = {
|
||
|
||
nodes: [
|
||
|
||
{
|
||
|
||
id: 'Root',
|
||
|
||
label: '可疑人员王**',
|
||
|
||
text: '\ue171', // 对应字体图标的Unicode码，
|
||
|
||
style: {
|
||
|
||
fill: 'red',
|
||
|
||
},
|
||
|
||
labelCfg: {
|
||
|
||
style: {
|
||
|
||
fill: 'red',
|
||
|
||
},
|
||
|
||
},
|
||
|
||
backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
|
||
|
||
size: 30,
|
||
|
||
},
|
||
|
||
{
|
||
|
||
id: 'node1',
|
||
|
||
label: 'node1节点',
|
||
|
||
text: '\ue171', // 对应字体图标的Unicode码，
|
||
|
||
style: {
|
||
|
||
fill: '#fff',
|
||
|
||
},
|
||
|
||
labelCfg: {
|
||
|
||
style: {
|
||
|
||
fill: '#000',
|
||
|
||
},
|
||
|
||
},
|
||
|
||
},
|
||
|
||
{
|
||
|
||
id: 'node2',
|
||
|
||
label: 'node2节点',
|
||
|
||
text: '\ue171', // 对应字体图标的Unicode码，
|
||
|
||
style: {
|
||
|
||
fill: '#fff',
|
||
|
||
},
|
||
|
||
labelCfg: {
|
||
|
||
style: {
|
||
|
||
fill: '#000',
|
||
|
||
},
|
||
|
||
},
|
||
|
||
}
|
||
|
||
],
|
||
|
||
edges: [
|
||
|
||
{
|
||
|
||
source: 'Root', // 起始点 id
|
||
|
||
target: 'node1', // 目标点 id
|
||
|
||
},
|
||
|
||
{
|
||
|
||
source: 'Root', // 起始点 id
|
||
|
||
target: 'node2', // 目标点 id
|
||
|
||
}
|
||
|
||
]
|
||
|
||
}
|
||
|
||
graph.data(data);
|
||
graph.render();
|
||
|
||
graph.on('node:click', ev => {
|
||
//const clickNodes = graph.findAllByState('node', 'click');
|
||
|
||
//clickNodes.forEach(cn => {
|
||
//graph.setItemState(cn, 'click', false);
|
||
// });
|
||
|
||
const nodeItem = ev.item;
|
||
debugger;
|
||
graph.setItemState(nodeItem, 'select', true);
|
||
});
|
||
|
||
graph.on('node:mouseenter', evt => {
|
||
const { item } = evt;
|
||
graph.setItemState(item, 'hover', true);
|
||
});
|
||
});
|
||
|
||
return <div ref={container}></div>;
|
||
};
|
||
|
||
export default DefaultShape;
|