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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| /**
| * g6 流程图构造器
| * 将G6封装后返回
| */
|
| import G6,{ GraphOptions } from '@antv/g6'
| import registerFactory from './register-factory'
|
| export default (g6:typeof G6, config: GraphOptions) => {
| const options = Object.assign(
| {
| container: 'canvasPanel',
| width: window.innerWidth,
| height: window.innerHeight,
| // renderer: 'svg',
| fitViewPadding: 20,
| animate: true,
| animateCfg: {
| duration: 500,
| easing: 'easeLinear'
| },
| layout: {
| type: 'dagre',
| // rankdir: 'LR',
| nodesep: 30,
| ranksep: 30
| },
| modes: {
| // 允许拖拽画布、缩放画布、拖拽节点
| default: [
| 'drag-canvas', // 官方内置的行为
| // 'zoom-canvas',
| /* {
| type: 'click-select',
| trigger: 'ctrl',
| }, */
| /* {
| type: 'drag-node',
| enableDelegate: true,
| }, */
| // 'activate-relations',
| 'canvas-event', // 自定义行为
| 'delete-item',
| 'select-node',
| 'hover-node',
| 'drag-shadow-node',
| 'active-edge'
| ]
| },
| defaultNode: {
| type: 'rect-node',
| style: {
| radius: 10
| }
| },
| defaultEdge: {
| type: 'polyline-edge', // polyline
| style: {
| radius: 6,
| offset: 15,
| stroke: '#aab7c3',
| lineAppendWidth: 10, // 防止线太细没法点中
| /* startArrow: {
| path: 'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
| fill: '#aab7c3',
| }, */
| endArrow: {
| path: 'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
| fill: '#aab7c3',
| stroke: '#aab7c3'
| }
| }
| },
| // 默认节点不同状态下的样式集合
| nodeStateStyles: {
| 'nodeState:default': {
| fill: '#E7F7FE',
| stroke: '#1890FF'
| },
| 'nodeState:hover': {
| fill: '#d5f1fd'
| },
| 'nodeState:selected': {
| fill: '#caebf9',
| stroke: '#1890FF'
| }
| },
| // 默认边不同状态下的样式集合
| edgeStateStyles: {
| 'edgeState:default': {
| stroke: '#aab7c3',
| endArrow: {
| path: 'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
| fill: '#aab7c3',
| stroke: '#aab7c3'
| }
| },
| 'edgeState:selected': {
| stroke: '#1890FF'
| },
| 'edgeState:hover': {
| stroke: '#1890FF'
| }
| }
| },
| config
| )
|
| const el =
| typeof options.container === 'string'
| ? document.getElementById(options.container)
| : options.container
|
| if (el) {
| setTimeout(() => {
| for (let i = 0; i < el.children.length; i++) {
| const dom = el.children[i]
|
| if (dom.nodeName === 'CANVAS') {
| ;(dom as any).$id = `${options.container}-canvas`
|
| /* 监听键盘事件 */
| document.addEventListener('click', (e) => {
| // 内部键盘事件是否可被触发
| dom.setAttribute('isFocused', ((e.target as any).$id === (dom as any).$id) as any)
| })
| break
| }
| }
| })
|
| // 注册自定义节点/边等
| registerFactory(g6)
| } else {
| console.warn('未找到注册节点!')
| }
|
| return options
| }
|
|
