1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| import React, { useState } from 'react'
| import { XFlow, XFlowCanvas } from '@antv/xflow'
| /** 图的各种扩展交互组件 */
| import { CanvasMiniMap, CanvasScaleToolbar, CanvasSnapline } from '@antv/xflow'
| /** 图的配置项 */
| import { useGraphConfig } from './config-graph'
| import { message } from 'antd'
|
| import './index.css'
|
| const Demo = () => {
| /** 画布配置 */
| const graphConfig = useGraphConfig()
|
| /** 画布渲染数据 */
| const [graphData, setGraphData] = useState()
|
| /** XFlow初始化完成的回调 */
| const onLoad = async app => {
| const node = [
| { id: 'root1', width: 150, height: 40, renderKey: 'NODE1', info: { text: 'root1' } },
| { id: 'down1', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down1' } },
| { id: 'down2', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down2' } },
| { id: 'down3', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down3' } },
| ]
| const edges = [
| {
| id: 'root1-down1',
| source: 'root1',
| target: 'down1',
| renderKey: 'EDGE1',
| edgeContentWidth: 60,
| edgeContentHeight: 30,
| info: { line: 'root1-down1' },
| },
| {
| id: 'root1-down2',
| source: 'root1',
| target: 'down2',
| renderKey: 'EDGE2',
| edgeContentWidth: 60,
| edgeContentHeight: 30,
| info: { line: 'root1-down2' },
| },
| {
| id: 'root1-down3',
| source: 'root1',
| target: 'down3',
| label: '1:N(纯文本)',
| info: { line: 'root1-down3' },
| },
| ]
| const newGraphData = { nodes, edges }
| setGraphData(newGraphData)
|
| const graph = await app.getGraphInstance()
| graph.on('node:click', ({ node }) => {
| const nodeData = node.getData()
| message.success(`${nodeData.id}节点被点击了`)
| })
| graph.on('edge:click', ({ edge }) => {
| edge.toFront()
| const edgeData = edge.getData()
| message.success(`${edgeData.id}连线被点击了`)
| })
| }
|
| return (
| <XFlow
| className="xflow-user-container"
| graphData={graphData}
| graphLayout={{
| layoutType: 'dagre',
| layoutOptions: {
| type: 'dagre',
| rankdir: 'TB',
| nodesep: 60,
| ranksep: 40,
| },
| }}
| onLoad={onLoad}
| isAutoCenter={true}
| >
| <XFlowCanvas config={graphConfig}>
| <CanvasScaleToolbar position={{ top: 12, left: 12 }} />
| <CanvasMiniMap
| miniMapClz="xflow-custom-minimap"
| nodeFillColor="#ccc"
| minimapOptions={{
| width: 200,
| height: 120,
| }}
| position={{ top: 12, right: 12 }}
| />
| <CanvasSnapline color="#1890ff" />
| </XFlowCanvas>
| </XFlow>
| )
| }
|
| export default Demo
|
|
