-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
105 lines (83 loc) · 3.17 KB
/
index.html
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
<head>
<script type="text/javascript" src="lib/createjs-2015.05.21.min.js"></script>
<script type="text/javascript" src="flow.min.js"></script>
<!--<script type="text/javascript" src="src/flow.js"></script>-->
<!--<script type="text/javascript" src="src/flowitem.js"></script>-->
<!--<script type="text/javascript" src="src/flowconnector.js"></script>-->
<!--<script type="text/javascript" src="src/graph.js"></script>-->
</head>
<body>
<title>Gurdians of the flow charts</title>
<h1>Gurdians of the flow charts</h1>
<canvas id="canvas1" width="500" height="300"></canvas>
<canvas id="canvas2" width="500" height="300"></canvas>
<canvas id="canvas3" width="500" height="300"></canvas>
<canvas id="canvas4" width="500" height="300"></canvas>
<script type="text/javascript">
/* global flowjs */
window.addEventListener("load", func);
function func(){
console.log("LOADED");
var a = new flowjs.DiGraph();
a.addPaths([
["A1", "A2"],
["A1", "B2"],
//["B1", "B2"],
["B1", "A2"]
]);
var b = new flowjs.DiGraph();
b.addPaths([
["AA", "BB", "CC"],
["DD", "EE", "CC"]
]);
var c = new flowjs.DiGraph();
c.addPaths([
["AA", "BB"],
["BB", "EE"],
["BB", "FF"],
["AA", "CC", "DD"]
]);
var d = new flowjs.DiGraph();
d.addPaths([
["Peter Q", "Gamora", "Nova Prime", "Rocket"],
["Drax", "Groot", "Rocket"],
["Merdith Q", "Groot"]
]);
new flowjs.DiFlowChart("canvas1", a).draw();
new flowjs.DiFlowChart("canvas2", b).draw();
new flowjs.DiFlowChart("canvas4", d).draw();
// Advanced Example with loading animation
var cf = new flowjs.DiFlowChart("canvas3", c);
cf.draw();
simuLoad(cf, c);
}
function simuLoad(flowChart, graph){
var walker = new flowjs.GraphWalker(graph);
walker.forEach(function(node){
var start = Math.random() * 1000 * 5;
var dur = Math.random() * 1000 * 5;
simulateLoading(node.id, start);
simulateDoneLoading(node.id, start + dur);
}, this);
function simulateLoading(itemId, timeout){
setTimeout(function(){
flowChart.updateItem(itemId, function(item){
item.flowItem.toggleFlashing();
});
}, timeout);
}
function simulateDoneLoading(itemId, timeout){
setTimeout(function(){
flowChart.updateItem(itemId, function(item){
item.flowItem.toggleFlashing();
item.flowItem.color = "red";
if (item.connectors === undefined){return;}
item.connectors.forEach(function(conn){
conn.color = "red";
});
});
}, timeout);
}
}
</script>
</body>