forked from iVis-at-Bilkent/cytoscape.js-expand-collapse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo-undoable.html
152 lines (120 loc) · 9.51 KB
/
demo-undoable.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE>
<html>
<head>
<title>cytoscape-expand-collapse.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.5.1/cytoscape-cose-bilkent.js"></script>
<script src="https://cdn.rawgit.com/ivis-at-bilkent/cytoscape.js-undo-redo/master/cytoscape-undo-redo.js"></script>
<script src="cytoscape-expand-collapse.js"></script>
<style>
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
z-index: 999;
width: 85%;
height: 85%;
float: left;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'cose-bilkent'
},
style: [
{
selector: 'node',
style: {
"content": "data(id)",
'background-color': '#ad1a66'
}
},
{
selector: ':parent',
style: {
'background-opacity': 0.333
}
},
{
selector: "node.cy-expand-collapse-collapsed-node",
style: {
"background-color": "darkblue",
"shape": "rectangle"
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ad1a66'
}
},
{
selector: 'edge.meta',
style: {
'width': 2,
'line-color': 'red'
}
}
],
elements: [{"data":{"id":"n0"},"position":{"x":122.50374073928583,"y":367.98329788349827},"group":"nodes"},{"data":{"id":"n0:n0","parent":"n0"},"position":{"x":209.0674320882374,"y":382.7065284623535},"group":"nodes"},{"data":{"id":"n0:n1","parent":"n0"},"position":{"x":142.2888292225041,"y":450.92046107173917},"group":"nodes"},{"data":{"id":"n0:n2","parent":"n0"},"position":{"x":182.2214883151621,"y":298.98997315342774},"group":"nodes"},{"data":{"id":"n0:n3","parent":"n0"},"position":{"x":121.52030011362558,"y":368.17931244036083},"group":"nodes"},{"data":{"id":"n0:n4","parent":"n0"},"position":{"x":35.94004939033425,"y":354.52885825453217},"group":"nodes"},{"data":{"id":"n0:n5","parent":"n0"},"position":{"x":98.2395571029856,"y":285.0461346952574},"group":"nodes"},{"data":{"id":"n2"},"position":{"x":467.0267020797804,"y":80.2773842699168},"group":"nodes"},{"data":{"id":"n2:n0","parent":"n2"},"position":{"x":417.4178741533308,"y":125.50672352045078},"group":"nodes"},{"data":{"id":"n2:n1","parent":"n2"},"position":{"x":548.2154780707372,"y":106.01744529364254},"group":"nodes"},{"data":{"id":"n2:n4","parent":"n2"},"position":{"x":469.07146102347747,"y":45.714770370076906},"group":"nodes"},{"data":{"id":"n2:n7","parent":"n2"},"position":{"x":385.8379260888237,"y":35.04804501938281},"group":"nodes"},{"data":{"id":"n3"},"position":{"x":570.0696797318568,"y":365.3791298251542},"group":"nodes"},{"data":{"id":"n3:n1","parent":"n3"},"position":{"x":420.8386954496027,"y":481.72758382436245},"group":"nodes"},{"data":{"id":"n3:n3","parent":"n3"},"position":{"x":446.29982440410276,"y":298.3920866191955},"group":"nodes"},{"data":{"id":"n3:n7","parent":"n3"},"position":{"x":415.9437139883562,"y":392.69607603288597},"group":"nodes"},{"data":{"id":"p0","parent":"n3"},"position":{"x":633.4146202751332,"y":347.8836539152288},"group":"nodes"},{"data":{"id":"n3:n0","parent":"p0"},"position":{"x":636.5506526886438,"y":350.8661004189891},"group":"nodes"},{"data":{"id":"n3:n2","parent":"p0"},"position":{"x":552.633595074909,"y":378.53275341426115},"group":"nodes"},{"data":{"id":"n3:n4","parent":"p0"},"position":{"x":628.8212503757277,"y":436.73663200451165},"group":"nodes"},{"data":{"id":"n3:n5","parent":"p0"},"position":{"x":714.1956454753574,"y":312.4509501679866},"group":"nodes"},{"data":{"id":"n3:n6","parent":"p0"},"position":{"x":635.2142950493853,"y":259.03067582594593},"group":"nodes"},{"data":{"id":"n4"},"position":{"x":326.3876669777849,"y":258.3029296178655},"group":"nodes"},{"data":{"id":"n5"},"position":{"x":290.10860135152006,"y":99.31675442830439},"group":"nodes"},{"data":{"id":"n6"},"position":{"x":272.3840520665526,"y":182.5287195618913},"group":"nodes"},{"data":{"id":"n7"},"position":{"x":317.195608111733,"y":342.7874286188903},"group":"nodes"},{"data":{"id":"n1:n4"},"position":{"x":309.02204423693934,"y":453.3065572098769},"group":"nodes"},{"data":{"id":"n1:n5"},"position":{"x":314.06982432382256,"y":539.3443748178611},"group":"nodes"},{"data":{"id":"e0","source":"n0:n4","target":"n0:n5"},"position":{},"group":"edges"},{"data":{"id":"e3","source":"n0:n2","target":"n0:n5"},"position":{},"group":"edges"},{"data":{"id":"e4","source":"n2:n1","target":"n2:n4"},"position":{},"group":"edges"},{"data":{"id":"e5","source":"n0:n3","target":"n0:n4"},"position":{},"group":"edges"},{"data":{"id":"e6","source":"n3","target":"n2"},"position":{},"group":"edges"},{"data":{"id":"e7","source":"n5","target":"n6"},"position":{},"group":"edges"},{"data":{"id":"e8","source":"n5","target":"n2"},"position":{},"group":"edges"},{"data":{"id":"e9","source":"n3:n3","target":"n3:n2"},"position":{},"group":"edges"},{"data":{"id":"e11","source":"n0:n0","target":"n0:n1"},"position":{},"group":"edges"},{"data":{"id":"e12","source":"n0:n3","target":"n0:n2"},"position":{},"group":"edges"},{"data":{"id":"e13","source":"n3:n6","target":"n3:n0"},"position":{},"group":"edges"},{"data":{"id":"e14","source":"n3:n4","target":"n3:n2"},"position":{},"group":"edges"},{"data":{"id":"e15","source":"n3:n3","target":"n2:n0"},"position":{},"group":"edges"},{"data":{"id":"e16","source":"n2:n4","target":"n2:n7"},"position":{},"group":"edges"},{"data":{"id":"e17","source":"n3:n7","target":"n3:n3"},"position":{},"group":"edges"},{"data":{"id":"e18","source":"n3:n2","target":"n3:n0"},"position":{},"group":"edges"},{"data":{"id":"e19","source":"n6","target":"n4"},"position":{},"group":"edges"},{"data":{"id":"e20","source":"n4","target":"n3"},"position":{},"group":"edges"},{"data":{"id":"e23","source":"n0","target":"n7"},"position":{},"group":"edges"},{"data":{"id":"e24","source":"n0:n3","target":"n0:n5"},"position":{},"group":"edges"},{"data":{"id":"e28","source":"n0:n0","target":"n0:n2"},"position":{},"group":"edges"},{"data":{"id":"e30","source":"n0:n0","target":"n0:n3"},"position":{},"group":"edges"},{"data":{"id":"e33","source":"n7","target":"n3"},"position":{},"group":"edges"},{"data":{"id":"e34","source":"n3:n1","target":"n3:n7"},"position":{},"group":"edges"},{"data":{"id":"e36","source":"n0:n3","target":"n0:n1"},"position":{},"group":"edges"},{"data":{"id":"e39","source":"n3:n0","target":"n3:n4"},"position":{},"group":"edges"},{"data":{"id":"e41","source":"n2:n0","target":"n2:n4"},"position":{},"group":"edges"},{"data":{"id":"e43","source":"n3:n0","target":"n3:n5"},"position":{},"group":"edges"},{"data":{"id":"e45","source":"n7","target":"n4"},"position":{},"group":"edges"},{"data":{"id":"e46","source":"n2:n7","target":"n2:n0"},"position":{},"group":"edges"},{"data":{"id":"e47","source":"n2:n1","target":"n3:n6"},"position":{},"group":"edges"},{"data":{"id":"e49","source":"n3:n6","target":"n3:n5"},"position":{},"group":"edges"},{"data":{"id":"e1","source":"n3:n7","target":"n1:n4"},"position":{},"group":"edges"},{"data":{"id":"e2","source":"n0:n0","target":"n1:n4"},"position":{},"group":"edges"},{"data":{"id":"e10","source":"n1:n5","target":"n1:n4"},"position":{},"group":"edges"}]
});
var ur = cy.undoRedo(); // external (optional) extension which enables undo/redo of expand/collapse
cy.expandCollapse({
layoutBy: {
name: "cose-bilkent",
animate: true,
randomize: false,
fit: true
},
fisheye: true,
animate: true
});
document.getElementById("collapseRecursively").addEventListener("click", function () {
ur.do("collapseRecursively", {
nodes: cy.$(":selected")
});
});
document.getElementById("expandRecursively").addEventListener("click", function () {
ur.do("expandRecursively", {
nodes: cy.$(":selected")
});
});
document.getElementById("collapseAll").addEventListener("click", function () {
ur.do("collapseAll"); // cy.collapseAll(options);
});
document.getElementById("expandAll").addEventListener("click", function () {
ur.do("expandAll");
});
document.addEventListener('keydown', function (e){
if (e.ctrlKey && e.which == '90') {
cy.undoRedo().undo();
}
else if (e.ctrlKey && e.which == '89') {
cy.undoRedo().redo();
}
}, true );
});
</script>
</head>
<body>
<h1>cytoscape-expand-collapse demo</h1>
<b>DEL</b> to delete selected, <b>CTRL+Z</b> to undo, <b>CTRL+Y</b> to redo<br/>
<b id="collapseAll" style="cursor: pointer;color: darkred">Collapse all</b> / <b id="expandAll" style="cursor: pointer; color: darkslateblue">Expand all</b> <br/>
<b id="collapseRecursively" style="cursor: pointer; color: darksalmon">Collapse selected recursively</b> / <b id="expandRecursively" style="cursor: pointer; color: darkmagenta">Expand selected recursively</b>
<div id="cy"></div>
</body>
</html>