-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
172 lines (169 loc) · 6.54 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
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cytoscape Toolbar Demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Cytoscape.js Toolbar Demo</h1>
</div>
<h2>Demos</h2>
<ul class="nav nav-pills">
<li role="presentation"><a href="demos/kitchen-sink.html">Kitchen Sink</a></li>
<li role="presentation"><a href="demos/assets.html">Assets Network (Walkthrough)</a></li>
</ul>
<div id="documentation-content" class="row">
<!-- Documentation -->
<div class="col-md-12">
<h2 id="documentation">Documentation</h2>
<h3>Toolbar</h3>
<h4>params</h4>
<ul>
<li><code>cyContainer:</code> - (String) id being used for cytoscape core instance</li>
<li><code>tools:</code> - (Object) an array of tools to list in the toolbar</li>
<li><code>appendTools:</code> - (Boolean) set whether or not to append your custom tools list to the default tools list</li>
<li><code>position:</code> - (Enum) set position of toolbar ('right', 'left', 'top', 'bottom')</li>
<li><code>toolbarClass:</code> - (String) set a class name for the toolbar to help with styling</li>
<li><code>multipleToolsClass:</code> - (String) set a class name for the tools that should be shown in the same position</li>
<li><code>toolItemClass:</code> - (String) set a class name for a toolbar item to help with styling</li>
<li><code>autodisableForMobile:</code> - (Boolean) disable the toolbar completely for mobile (since we don't really need it with gestures like pinch to zoom)</li>
<li><code>zIndex:</code> - (Integer) the z-index of the ui div</li>
<li><code>longClickTime:</code> - (Integer) time until a multi-tool list will present other tools</li>
</ul>
<h4>defaults</h4>
<pre><code class="javascript">
var defaults = {
cyContainer: 'cy',
tools: [
[
{
icon: 'fa fa-search-plus',
event: ['tap'],
selector: 'cy',
options: {
cy: {
zoom: 0.1,
minZoom: 0.1,
maxZoom: 10,
zoomDelay: 45
}
},
bubbleToCore: false,
tooltip: 'Zoom In',
action: [performZoomIn]
}
],
[
{
icon: 'fa fa-search-minus',
event: ['tap'],
selector: 'cy',
options: {
cy: {
zoom: -0.1,
minZoom: 0.1,
maxZoom: 10,
zoomDelay: 45
}
},
bubbleToCore: false,
tooltip: 'Zoom Out',
action: [performZoomOut]
}
],
[
{
icon: 'fa fa-arrow-right',
event: ['tap'],
selector: 'cy',
options: {
cy: {
distance: -80,
}
},
bubbleToCore: true,
tooltip: 'Pan Right',
action: [performPanRight]
}
],
[
{
icon: 'fa fa-arrow-down',
event: ['tap'],
selector: 'cy',
options: {
cy: {
distance: -80,
}
},
bubbleToCore: true,
tooltip: 'Pan Down',
action: [performPanDown]
}
],
[
{
icon: 'fa fa-arrow-left',
event: ['tap'],
selector: 'cy',
options: {
cy: {
distance: 80,
}
},
bubbleToCore: true,
tooltip: 'Pan Left',
action: [performPanLeft]
}
],
[
{
icon: 'fa fa-arrow-up',
event: ['tap'],
selector: 'cy',
options: {
cy: {
distance: 80,
}
},
bubbleToCore: true,
tooltip: 'Pan Up',
action: [performPanUp]
}
]
],
appendTools: false,
position: 'left',
toolbarClass: 'ui-cytoscape-toolbar',
multipleToolsClass: 'tool-item-list',
toolItemClass: 'tool-item',
autodisableForMobile: true,
zIndex: 9999,
longClickTime: 325
};
</code></pre>
<h3>Tool</h3>
<h4>params</h4>
<ul id="documentation">
<li><code>icon:</code> - (String) icon from font-awesome-4.0.3, if you want to use something else, then this becomes a class specific for this tool item</li>
<li><code>event:</code> - (Array) array of cytoscape events that correlates with action variable</li>
<li><code>selector:</code> - (String) cytoscape selector (cy = core instance, node, edge) - currently not supporting full selection selectors from the documentation</li>
<li><code>options:</code> - (Object) pass through different parameters for separate selectors</li>
<li><code>bubbleToCore:</code> - (Boolean) say whether or not the event should be performed if the core instance was not clicked</li>
<li><code>tooltip:</code> - (String) value for the title attribute of a span element</li>
<li><code>action:</code> - (Array) array of action methods that correlates with the event variable</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>