-
Notifications
You must be signed in to change notification settings - Fork 0
/
graph.js
80 lines (78 loc) · 1.96 KB
/
graph.js
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
"use strict";
const width = document.getElementById('mountNode').scrollWidth
const height = document.getElementById('mountNode').scrollHeight || 500
var graph = new G6.Graph({
container: 'mountNode',
width,
height,
fitView: true,
animate: true,
layout: {
type: 'force',
linkDistance: 15,
nodeStrength: 5,
edgeStrength: -0.1,
preventOverlap: true,
collideStrength: 1,
nodeSize: 50,
nodeSpacing: 5,
clustering: true,
clusterNodeStrength: -5,
clusterEdgeDistance: 200,
clusterFociStrength: 2,
clusterNodeSize: 60
},
workerEnabled: true,
gpuEnabled: true,
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-combo', 'collapse-expand-combo'],
},
defaultNode: {
size: 50,
//anchorPoints: [15, 15],
style: {
lineWidth: 2
}
},
defaultCombo: {
style: {
fill: '#e1f5fe',
stroke: '#0288d1',
lineWidth: 3
}
},
defaultEdge: {
//type: 'cubic',
style: {
stroke: '#0d47a1',
lineWidth: 5
}
},
nodeStateStyles: {
'state:discard': {stroke: '#e53935'},
'state:learn': {stroke: '#fb8c00'},
'state:forward': {stroke: '#43a047'},
'role:designated': {fill: '#fdd835'},
'role:alternate': {fill: '#9c27b0'},
'role:root': {fill: '#03a9f4'},
defunct: {stroke: '#757575'}
},
edgeStateStyles: {
fail: {
stroke: '#ff1744'
}
}
});
graph.on('node:dragstart', function (e) {
graph.layout()
refreshDragedNodePosition(e)
})
graph.on('node:drag', function (e) {
const forceLayout = graph.get('layoutController').layoutMethods[0];
forceLayout.execute()
refreshDragedNodePosition(e)
})
graph.on('node:dragend', function (e) {
e.item.get('model').fx = null
e.item.get('model').fy = null
})