forked from erkal/kite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (101 loc) · 3.65 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<head>
<title>Kite</title>
<meta charset="utf-8">
<style>
body,
html {
margin: 0px;
overflow: hidden;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96090937-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<script src="third-party-js-libraries/d3-collection.v1.min.js"></script>
<script src="third-party-js-libraries/d3-dispatch.v1.min.js"></script>
<script src="third-party-js-libraries/d3-quadtree.v1.min.js"></script>
<script src="third-party-js-libraries/d3-timer.v1.min.js"></script>
<script src="third-party-js-libraries/d3-force.v1.min.js"></script>
<script src="build/Main.js"></script>
<!--
FOR LOCAL STORAGE
-->
<script>
// parse and stringify are necessary, see here http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
var storedState = localStorage.getItem('elm-kite-graphs');
var startingState = storedState ? JSON.parse(storedState) : null;
var app = Elm.Main.fullscreen(startingState);
app.ports.setStorage.subscribe(state => {
localStorage.setItem('elm-kite-graphs', JSON.stringify(state));
});
</script>
<!--
FOR JSON EXPORT & IMPORT
-->
<script>
app.ports.exportJsonPort.subscribe(function(str) {
window.open(encodeURI(str));
});
// TODO: I couldn't get the input tag with "type" = "file" working.
</script>
<!--
FOR D3 FORCE
-->
<script>
function pullForce(alpha) {
for (var i = 0, n = simulation.nodes().length, node, k; i < n; ++i) {
node = simulation.nodes()[i]
k = alpha * node.pullStrengthTogC
if (node.gC) {
node.vx -= (node.x - node.gC.x) * k
}
if (node.gC) {
node.vy -= (node.y - node.gC.y) * k
}
}
}
function extractPosition(node) {
return {
vertexName: node.id,
position: {
x: node.x,
y: node.y
}
}
}
var simulation = d3.forceSimulation()
.force("charge", d3.forceManyBody().strength(d => d.charge))
.force("pull", pullForce)
.force("link", d3.forceLink().id(d => d.id).strength(link => link.strength).distance(link => link.distance))
.force("collide", d3.forceCollide().radius(d => d.radius).iterations(2))
// .force("center", d3.forceCenter(800, 600))
.on("tick", function() {
app.ports.fromD3_Positions
.send(simulation.nodes().map(extractPosition))
app.ports.fromD3_Alpha
.send(simulation.alpha())
console.log("tick");
})
.on("end", function() {
app.ports.fromD3_SimulationEnded
.send(null)
})
.alphaDecay(1 - Math.pow(0.001, 1 / 100))
.stop()
app.ports.toD3_Fire
.subscribe(([nodes, links]) => {
simulation.nodes(nodes)
simulation.force("link").links(links)
simulation.alpha(1).restart()
})
</script>