-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
69 lines (62 loc) · 2.02 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
#instructions {
color: #fcfcfc;
position: absolute;
z-index: 100;
bottom: 0px;
left: 0px;
}
.graphviz-svg {
width: 100%;
height: 100%;
overflow: auto;
position: relative;
/* Add this */
}
#graph {
width: 100%;
height: 100vh;
/* Use viewport height instead of percentage */
overflow: hidden;
/* Change from scroll to hidden */
position: relative;
/* Add this */
}
</style>
</head>
<body>
<h4 id="instructions">Click node to highlight; Esc to unhighlight</h4>
<div id="graph" style="width: 100%; height: 100%; overflow: scroll;"></div>
<script type="module">
import GraphvizSvg from './dist/index.js';
// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
console.log('jQuery version:', $.fn.jquery);
console.log('Bootstrap version:', $.fn.tooltip.Constructor.VERSION);
$("#graph").graphviz({
url: "demo.svg",
ready: function () {
var gv = this;
gv.nodes().click(function () {
var $set = $();
$set.push(this);
$set = $set.add(gv.linkedFrom(this, true));
$set = $set.add(gv.linkedTo(this, true));
gv.highlight($set, true);
gv.bringToFront($set);
});
$(document).keydown(function (evt) {
if (evt.keyCode == 27) {
gv.highlight();
}
});
}
});
});
</script>
</body>
</html>