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
| /*!
| * @author claude
| * date 06/09/2020
| * 注册边
| */
|
| import G6 from '@antv/g6'
|
| export default (g6: typeof G6, cfg) => {
| g6.registerEdge('hvh-h-edge', {
| draw(cfg, group) {
| const xOffset = 40
| const { startPoint, endPoint } = cfg
| const Ydiff = endPoint.y - startPoint.y
| // 水平结束点坐标
| const horizontalEndPoint = {
| x: startPoint.x,
| y: endPoint.y
| }
| // 开口方向
| const left = startPoint.x - endPoint.x > 0
| const path =
| Ydiff === 0
| ? [
| ['M', startPoint.x, startPoint.y],
| ['L', endPoint.x, endPoint.y]
| ]
| : [
| ['M', startPoint.x, startPoint.y],
| ['L', left ? startPoint.x - xOffset : startPoint.x + xOffset, startPoint.y],
| [
| 'L',
| left ? horizontalEndPoint.x - xOffset : horizontalEndPoint.x + xOffset,
| endPoint.y > startPoint.y ? horizontalEndPoint.y - 10 : horizontalEndPoint.y + 10
| ],
| [
| 'Q',
| left ? horizontalEndPoint.x - xOffset : horizontalEndPoint.x + xOffset,
| horizontalEndPoint.y,
| left ? horizontalEndPoint.x - xOffset - 10 : horizontalEndPoint.x + xOffset + 10,
| horizontalEndPoint.y
| ],
| ['L', endPoint.x, endPoint.y]
| ]
|
| // 获取边的样式
| const { edgeStyle } = (cfg.sourceNode as any).getModel()
| const shape = group.addShape('path', {
| attrs: {
| path,
| stroke: '#1890FF',
| endArrow: false,
| ...cfg.style,
| ...edgeStyle
| },
| name: 'hvh-edge',
| // 设置 draggable 以允许响应鼠标的图拽事件
| draggable: true
| })
|
| const { text } = (cfg.targetNode as any).getModel()
|
| if (text) {
| const label = group.addShape('text', {
| attrs: {
| x: horizontalEndPoint.x + xOffset + 10, // 居中
| y: endPoint.y - 30,
| text: text || '',
| fill: '#333',
| fontSize: 16
| },
| name: 'hvh-edge-label',
| zIndex: 10
| })
|
| group.sort()
| label.toFront()
| }
| return shape
| },
| ...cfg
| })
| }
|
|
