";
551 | console.log("Unequal lengths for event and action variables on " + index + "-" + tooltip);
552 | unequalsLengths = true;
553 | }
554 |
555 | if (!unequalsLengths) {
556 | for (var i = 0; i < toolElement.event.length; i++) {
557 | bindings.on(toolElement.event[i], toolElement.selector, toolElement.action[i]);
558 | }
559 | }
560 | });
561 | });
562 | }
563 |
564 | $container.cytoscape(function (e) {
565 | cy = this;
566 | data.cy = cy;
567 |
568 | addEventListeners();
569 |
570 | $container.data('cytoscapeToolbar', data);
571 | });
572 | }
573 | };
574 |
575 | if (functions[fn]) {
576 | return functions[fn].apply(this, Array.prototype.slice.call(arguments, 1));
577 | } else if (typeof fn == 'object' || !fn) {
578 | return functions.init.apply(this, arguments);
579 | } else {
580 | $.error("No such function `" + fn + "` for jquery.cytoscapeToolbar");
581 | }
582 |
583 | return $(this);
584 | }); // cytoscape()
585 | }; // register
586 |
587 | if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
588 | module.exports = register;
589 | }
590 |
591 | if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
592 | define('cytoscape-toolbar', function(){
593 | return register;
594 | });
595 | }
596 |
597 | if( typeof cytoscape !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape)
598 | register( cytoscape, $ );
599 | }
600 |
601 | })(jQuery);
602 |
--------------------------------------------------------------------------------
/demos/assets.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Assets Network (Walkthrough)
5 |
6 |
7 |
8 |
9 |
55 |
56 |
57 |
58 |
Assets Network (Walkthrough)
59 |
60 |
67 |
68 |
69 | Directed link
70 | - - select the person tool
71 | - create two persons on the graph by clicking two points on the graph
72 | - - select the link tool
73 | - select on of the persons that you just create
74 | - now select the other person
75 | - you should now see a directed link between the two persons
76 |
77 |
78 |
79 | Deleting a link
80 | - - select the delete tool
81 | - delete the link by selecting it
82 | - delete one of the persons from the graph
83 |
84 |
85 |
86 | Add multiple assets
87 | - - select the vehicle icon (remember to click and hold to get the vehicle icon to appear)
88 | - add a vehicle asset to the graph by clicking on the graph
89 | - - select the home icon
90 | - add a home asset to the graph by click on the graph
91 | - - select the link tool
92 | - select the person node and connect it to the vehicle node and to the home node
93 |
94 |
95 |
96 |
97 |
164 | if (/MSIE/.test(navigator.appVersion) && stylableEls[i].parentNode.nodeName == 'PRE') {
165 | stylableEls[i] = stylableEls[i].parentNode;
166 |
167 | parsed = stylableEls[i].innerHTML.replace(/(]*>)([^<]*)<\/code>/i, function() {
168 | return arguments[1] + parse(arguments[2], styleSet.ignoreCase) + ""
169 | });
170 | parsed = parsed.replace(/\n( *)/g, function() {
171 | var spaces = "";
172 | for (var i = 0; i < arguments[1].length; i++) spaces+= " ";
173 | return "\n" + spaces;
174 | });
175 | parsed = parsed.replace(/\t/g, " ");
176 | parsed = parsed.replace(/\n(<\/\w+>)?/g, "
$1").replace(/
[\n\r\s]*
/g, "
");
177 |
178 | } else parsed = parse(stylableEls[i].innerHTML, styleSet.ignoreCase);
179 |
180 | stylableEls[i].innerHTML = parsed;
181 | }
182 | }
183 |
184 | // run highlighter on all stylesets
185 | for (var i=0; i < this.styleSets.length; i++) {
186 | highlightCode(this.styleSets[i]);
187 | }
188 | }
--------------------------------------------------------------------------------
/demos/helpers/css.js:
--------------------------------------------------------------------------------
1 | CodeHighlighter.addStyle("css", {
2 | comment : {
3 | exp : /\/\*[^*]*\*+([^\/][^*]*\*+)*\//
4 | },
5 | keywords : {
6 | exp : /@\w[\w\s]*/
7 | },
8 | selectors : {
9 | exp : "([\\w-:\\[.#][^{};>]*)(?={)"
10 | },
11 | properties : {
12 | exp : "([\\w-]+)(?=\\s*:)"
13 | },
14 | units : {
15 | exp : /([0-9])(em|en|px|%|pt)\b/,
16 | replacement : "$1$2"
17 | },
18 | urls : {
19 | exp : /url\([^\)]*\)/
20 | }
21 | });
22 |
--------------------------------------------------------------------------------
/demos/helpers/html.js:
--------------------------------------------------------------------------------
1 | CodeHighlighter.addStyle("html", {
2 | comment : {
3 | exp: /<!\s*(--([^-]|[\r\n]|-[^-])*--\s*)>/
4 | },
5 | tag : {
6 | exp: /(<\/?)([a-zA-Z]+\s?)/,
7 | replacement: "$1$2"
8 | },
9 | string : {
10 | exp : /'[^']*'|"[^"]*"/
11 | },
12 | attribute : {
13 | exp: /\b([a-zA-Z-:]+)(=)/,
14 | replacement: "$1$2"
15 | },
16 | doctype : {
17 | exp: /<!DOCTYPE([^&]|&[^g]|&g[^t])*>/
18 | }
19 | });
--------------------------------------------------------------------------------
/demos/helpers/javascript.js:
--------------------------------------------------------------------------------
1 | CodeHighlighter.addStyle("javascript",{
2 | comment : {
3 | exp : /(\/\/[^\n]*(\n|$))|(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)/
4 | },
5 | brackets : {
6 | exp : /\(|\)/
7 | },
8 | string : {
9 | exp : /'[^'\\]*(\\.[^'\\]*)*'|"[^"\\]*(\\.[^"\\]*)*"/
10 | },
11 | keywords : {
12 | exp : /\b(arguments|break|case|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|typeof|var|void|while|with)\b/
13 | },
14 | global : {
15 | exp : /\b(toString|valueOf|window|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/
16 | }
17 | });
--------------------------------------------------------------------------------
/demos/links/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Create and Remove Links
5 |
6 |
7 |
8 |
9 |
10 |
24 |
25 |
131 |
132 |
133 | Cytoscape.js Toolbar Demo
134 |
135 |
136 |
137 |
138 |
--------------------------------------------------------------------------------
/demos/nodes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Create Custom Nodes
5 |
6 |
7 |
8 |
9 |
10 |
24 |
25 |
202 |
203 |
204 | Cytoscape.js Toolbar Demo
205 |
206 |
207 |
208 |
209 |
--------------------------------------------------------------------------------
/demos/tabs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tabs
5 |
6 |
7 |
23 |
24 |
25 |
26 |
Cytoscape toobar into tabs and custom text
27 |
28 |
29 |
30 | -
31 | Front
32 |
33 | -
34 | Back
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Empty, try the tab 1
42 |
43 |
47 |
48 |
49 |
15 |
16 |
Cytoscape.js Toolbar Demo
17 |
18 |
19 |
Demos
20 |
24 |
25 |
26 |
27 |
28 |
Documentation
29 |
Toolbar
30 |
params
31 |
32 | cyContainer: - (String) id being used for cytoscape core instancetools: - (Object) an array of tools to list in the toolbarappendTools: - (Boolean) set whether or not to append your custom tools list to the default tools listposition: - (Enum) set position of toolbar ('right', 'left', 'top', 'bottom')toolbarClass: - (String) set a class name for the toolbar to help with stylingmultipleToolsClass: - (String) set a class name for the tools that should be shown in the same positiontoolItemClass: - (String) set a class name for a toolbar item to help with stylingautodisableForMobile: - (Boolean) disable the toolbar completely for mobile (since we don't really need it with gestures like pinch to zoom)zIndex: - (Integer) the z-index of the ui divlongClickTime: - (Integer) time until a multi-tool list will present other tools
43 |
defaults
44 |
45 | var defaults = {
46 | cyContainer: 'cy',
47 | tools: [
48 | [
49 | {
50 | icon: 'fa fa-search-plus',
51 | event: ['tap'],
52 | selector: 'cy',
53 | options: {
54 | cy: {
55 | zoom: 0.1,
56 | minZoom: 0.1,
57 | maxZoom: 10,
58 | zoomDelay: 45
59 | }
60 | },
61 | bubbleToCore: false,
62 | tooltip: 'Zoom In',
63 | action: [performZoomIn]
64 | }
65 | ],
66 | [
67 | {
68 | icon: 'fa fa-search-minus',
69 | event: ['tap'],
70 | selector: 'cy',
71 | options: {
72 | cy: {
73 | zoom: -0.1,
74 | minZoom: 0.1,
75 | maxZoom: 10,
76 | zoomDelay: 45
77 | }
78 | },
79 | bubbleToCore: false,
80 | tooltip: 'Zoom Out',
81 | action: [performZoomOut]
82 | }
83 | ],
84 | [
85 | {
86 | icon: 'fa fa-arrow-right',
87 | event: ['tap'],
88 | selector: 'cy',
89 | options: {
90 | cy: {
91 | distance: -80,
92 | }
93 | },
94 | bubbleToCore: true,
95 | tooltip: 'Pan Right',
96 | action: [performPanRight]
97 | }
98 | ],
99 | [
100 | {
101 | icon: 'fa fa-arrow-down',
102 | event: ['tap'],
103 | selector: 'cy',
104 | options: {
105 | cy: {
106 | distance: -80,
107 | }
108 | },
109 | bubbleToCore: true,
110 | tooltip: 'Pan Down',
111 | action: [performPanDown]
112 | }
113 | ],
114 | [
115 | {
116 | icon: 'fa fa-arrow-left',
117 | event: ['tap'],
118 | selector: 'cy',
119 | options: {
120 | cy: {
121 | distance: 80,
122 | }
123 | },
124 | bubbleToCore: true,
125 | tooltip: 'Pan Left',
126 | action: [performPanLeft]
127 | }
128 | ],
129 | [
130 | {
131 | icon: 'fa fa-arrow-up',
132 | event: ['tap'],
133 | selector: 'cy',
134 | options: {
135 | cy: {
136 | distance: 80,
137 | }
138 | },
139 | bubbleToCore: true,
140 | tooltip: 'Pan Up',
141 | action: [performPanUp]
142 | }
143 | ]
144 | ],
145 | appendTools: false,
146 | position: 'left',
147 | toolbarClass: 'ui-cytoscape-toolbar',
148 | multipleToolsClass: 'tool-item-list',
149 | toolItemClass: 'tool-item',
150 | autodisableForMobile: true,
151 | zIndex: 9999,
152 | longClickTime: 325
153 | };
154 |
155 |
Tool
156 |
params
157 |
158 | icon: - (String) icon from font-awesome-4.0.3, if you want to use something else, then this becomes a class specific for this tool itemevent: - (Array) array of cytoscape events that correlates with action variableselector: - (String) cytoscape selector (cy = core instance, node, edge) - currently not supporting full selection selectors from the documentationoptions: - (Object) pass through different parameters for separate selectorsbubbleToCore: - (Boolean) say whether or not the event should be performed if the core instance was not clickedtooltip: - (String) value for the title attribute of a span elementaction: - (Array) array of action methods that correlates with the event variable
166 |
167 |
168 |