-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
122 lines (115 loc) · 2.85 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
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
122
<!DOCTYPE>
<html>
<title>cytoscape-dblclick.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="./index.js"></script>
<style>
html {
font-size: 10px;
}
body {
display: flex;
font-size: 1.4rem;
margin: 0;
padding: 0;
}
#header {
color: #aabbcc;
flex: 0 0 300px;
padding: 2em;
filter: drop-shadow(2px 0 4px rgba(0, 0, 0, 0.12));
background: #333;
}
#header a {
color: inherit;
text-decoration: none;
}
#header a:hover {
text-decoration: underline;
}
#header h1 {
font-size: 1.8rem;
}
#header h2 {
font-size: 1.2rem;
color: gray;
}
#cy {
flex: 1 1 auto;
}
</style>
<body>
<header id="header">
<a href="https://github.com/lambdalisue/cytoscape-dblclick">
<h1>cytoscape-dblclick</h1>
<h2>lambdalisue/cytoscape-dblclick</h2>
</a>
<p>Double click to invoke <code>cy.fit()</code> on the node/edge</p>
</header>
<div id="cy"></div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
'content': 'data(name)'
}
},
{
selector: 'node.dblclicked',
style: {
'overlay-color': 'red',
'overlay-padding': '5px',
'overlay-opacity': 0.5,
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [
{ data: { id: 'j', name: 'Jerry' } },
{ data: { id: 'e', name: 'Elaine' } },
{ data: { id: 'k', name: 'Kramer' } },
{ data: { id: 'g', name: 'George' } }
],
edges: [
{ data: { source: 'j', target: 'e' } },
{ data: { source: 'j', target: 'k' } },
{ data: { source: 'j', target: 'g' } },
{ data: { source: 'e', target: 'j' } },
{ data: { source: 'e', target: 'k' } },
{ data: { source: 'k', target: 'j' } },
{ data: { source: 'k', target: 'e' } },
{ data: { source: 'k', target: 'g' } },
{ data: { source: 'g', target: 'j' } }
]
}
});
// demo your core ext
cy.dblclick();
cy.on('dblclick', function(evt) {
console.log('dblclick');
cy.animate({
fit: {
eles: evt.target,
padding: 10,
},
});
});
cy.on('dblclick:timeout', function(evt) {
console.log('dblclick:timeout');
});
});
</script>
</body>
</html>