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
| /**
| * @author claude
| * @date 2020/3/15
| * @description 注册基础edge, 其他edge都在此基础上继承和扩展
| */
|
| import animation from './edge-animations';
| import itemEvents from '../nodes/item-event';
| import hvh_h from './hvh-h.js';
| import hvh from './hvh.js';
| import G6, { IGroup, IShape, Item, ModelConfig } from '@antv/g6';
|
| /*
| * flow:
| * 继承 edge => 绘制edge => 设置edge状态
| */
|
| function drawShape(cfg, group) {
| group.running = false;
| group.runners = [];
| // 当前配置覆盖全局配置
| const shapeStyle = Object.assign({}, this.getShapeStyle(cfg), {
| ...cfg.edgeStateStyles,
| });
|
| const keyShape = group.addShape('path', {
| className: 'edge-shape',
| name: 'edge-shape',
| attrs: shapeStyle,
| });
|
| return keyShape;
| }
|
| const afterDraw = (cfg?: ModelConfig, group?: IGroup) => {
| runAnimate(group, 'ball');
| };
| function setState(name, value, item) {
| const buildInEvents = ['edgeState', 'edgeState:default', 'edgeState:selected', 'edgeState:hover'];
| const group = item.getContainer();
| if (group.get('destroyed')) return;
| if (buildInEvents.includes(name)) {
| // 内部this绑定到了当前item实例
| itemEvents[name].call(this, value, group);
| } else if (this.stateApplying) {
| this.stateApplying.call(this, name, value, item);
| } else {
| console.warn(`warning: edge ${name} 事件回调未注册!`);
| }
| }
|
| function runAnimate(group, animationType) {
| if (group.running) return;
| group.running = true;
| group.toFront();
| animation[animationType].run.call(this, group);
| }
|
| // 停止动画并删除动画元素
| function stopAnimate(group, animationType) {
| animation[animationType].stop.call(this, group);
| }
|
| // 继承方法
| function inheritEdge(g6: typeof G6, name) {
| g6.registerEdge(
| `${name}-edge`,
| {
| drawShape,
| setState,
| runAnimate,
| stopAnimate,
| afterDraw,
| },
| name
| );
| }
|
| export default (g6) => {
| const edgeArray = ['line', 'polyline', 'quadratic', 'cubic', 'arc'];
|
| edgeArray.forEach((edge) => {
| inheritEdge(g6, edge);
| });
|
| hvh(g6, {
| drawShape,
| setState,
| runAnimate,
| stopAnimate,
| });
| hvh_h(g6, {
| drawShape,
| setState,
| runAnimate,
| stopAnimate,
| });
| };
|
|
