Skip to content

Commit 2028c0d

Browse files
mrsfymrsfy
committed
Initial commit
0 parents  commit 2028c0d

8 files changed

+554
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.idea

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
npm-debug.log

‎README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
cytoscape-view-utilities
2+
================================================================================
3+
4+
5+
## Description
6+
7+
Package of view utilities for cytoscape.js
8+
9+
10+
## API
11+
12+
`eles.viewUtilities(options)`
13+
Initializes the extension and sets options. This can be used to override default options.
14+
15+
`eles.search(searchFor, searchBy)`
16+
Searchs for `searchFor` string. `searchBy` is temporary option for the search and if not specified default `searchBy` will be used.
17+
18+
`eles.highlight()`
19+
Highlights eles & unhighlights others.
20+
21+
`eles.unhighlight()`
22+
Just unighlights eles.
23+
24+
`eles.highlightNeighbors()`
25+
* Aliases: `eles.highlightNeighbours()`
26+
Highlights eles' neighborhood & unhighlights others' neighborhood.
27+
28+
`eles.unhighlightNeighbors()`
29+
* Aliases: `eles.unhighlightNeighbours()`
30+
Just unhighlights eles and their neighbors.
31+
32+
`eles.removeHighlights()`
33+
Remove highlights & unhighlights from eles.
34+
35+
`eles.hide()`
36+
Hides eles.
37+
38+
`eles.show()`
39+
Shows hidden eles.
40+
41+
42+
## Default Options
43+
```javascript
44+
node: {
45+
highlighted: {}, // styles for when nodes are highlighted.
46+
unhighlighted: { // styles for when nodes are unhighlighted.
47+
'opacity': 0.3,
48+
'text-opacity': 0.3,
49+
'background-opacity': 0.3
50+
}
51+
},
52+
edge: {
53+
highlighted: {}, // styles for when edges are highlighted.
54+
unhighlighted: { // styles for when edges are unhighlighted.
55+
'border-opacity': 0.3,
56+
'text-opacity': 0.3,
57+
'background-opacity': 0.3
58+
}
59+
},
60+
searchBy: ["id"] // Array of data fields will a string be searched on or function which executes search will be used as searchBy(text).
61+
```
62+
63+
64+
## Dependencies
65+
66+
* Cytoscape.js ^1.7.3
67+
* Also works well with cytoscape-snap-to-grid
68+
69+
70+
## Usage instructions
71+
72+
Download the library:
73+
* via npm: `npm install cytoscape-view-utilities`,
74+
* via bower: `bower install cytoscape-view-utilities`, or
75+
* via direct download in the repository (probably from a tag).
76+
77+
`require()` the library as appropriate for your project:
78+
79+
CommonJS:
80+
```js
81+
var cytoscape = require('cytoscape');
82+
var view-utilities = require('cytoscape-view-utilities');
83+
84+
view-utilities( cytoscape ); // register extension
85+
```
86+
87+
AMD:
88+
```js
89+
require(['cytoscape', 'cytoscape-view-utilities'], function( cytoscape, view-utilities ){
90+
view-utilities( cytoscape ); // register extension
91+
});
92+
```
93+
94+
Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
95+
96+
97+
## Publishing instructions
98+
99+
This project is set up to automatically be published to npm and bower. To publish:
100+
101+
1. Set the version number environment variable: `export VERSION=1.2.3`
102+
1. Publish: `gulp publish`
103+
1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-view-utilities https://github.com/iVis-at-Bilkent/view-utilities.git`

‎bower.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "cytoscape-view-utilities",
3+
"description": "Package of view utilities for cytoscape.js",
4+
"main": "cytoscape-view-utilities.js",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/iVis-at-Bilkent/view-utilities.git"
8+
},
9+
"ignore": [
10+
"**/.*",
11+
"node_modules",
12+
"bower_components",
13+
"test",
14+
"tests"
15+
],
16+
"keywords": [
17+
"cytoscape",
18+
"cyext"
19+
],
20+
"license": "MIT"
21+
}

‎cytoscape-view-utilities.js

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
;(function () {
2+
'use strict';
3+
4+
// registers the extension on a cytoscape lib ref
5+
var register = function (cytoscape, $) {
6+
7+
if (!cytoscape || !$) {
8+
return;
9+
} // can't register if cytoscape unspecified
10+
11+
var options = {
12+
node: {
13+
highlighted: {}, // styles for when nodes are highlighted.
14+
unhighlighted: { // styles for when nodes are unhighlighted.
15+
'opacity': 0.3,
16+
'text-opacity': 0.3,
17+
'background-opacity': 0.3
18+
}
19+
},
20+
edge: {
21+
highlighted: {}, // styles for when edges are highlighted.
22+
unhighlighted: { // styles for when edges are unhighlighted.
23+
'border-opacity': 0.3,
24+
'text-opacity': 0.3,
25+
'background-opacity': 0.3
26+
}
27+
},
28+
searchBy: ["id"] // Array of data fields will a string be searched on or function which executes search.
29+
};
30+
31+
32+
function highlight(eles) {
33+
eles.removeClass("unhighlighted");
34+
eles.addClass("highlighted");
35+
eles.data("highlighted", true);
36+
}
37+
38+
function unhighlight(eles) {
39+
eles.removeClass("highlighted")
40+
eles.addClass("unhighlighted");
41+
eles.data("highlighted", false);
42+
}
43+
44+
function getWithNeighbors(eles) {
45+
return eles.add(eles.descendants()).closedNeighborhood();
46+
}
47+
48+
var initialized = false;
49+
cytoscape('core', 'viewUtilities', function (opts) {
50+
$.extend(true, options, opts);
51+
52+
if (!initialized) {
53+
initialized = true;
54+
var cy = this;
55+
56+
cy
57+
.selector("node.highlighted")
58+
.css(options.node.highlighted)
59+
.selector("node.unhighlighted")
60+
.css(options.node.unhighlighted)
61+
.selector("edge.highlighted")
62+
.css(options.edge.highlighted)
63+
.selector("edge.unhighlighted")
64+
.css(options.edge.unhighlighted);
65+
66+
67+
cytoscape("collection", "search", function (text, searchBy) {
68+
var eles = this;
69+
var cy = eles.cy();
70+
71+
if (!searchBy)
72+
searchBy = options.searchBy;
73+
74+
var res;
75+
if (typeof searchBy == "function")
76+
res = searchBy(text);
77+
else{
78+
res = eles.filter(function (i, ele) {
79+
return searchBy.map(function (field) {
80+
return ele[field];
81+
}).join("$^>").indexOf(text) >= 0;
82+
});
83+
}
84+
85+
return res;
86+
});
87+
88+
cytoscape("collection", "highlight", function () {
89+
var eles = this;
90+
var cy = eles.cy();
91+
92+
var others = cy.$(":visible[!highlighted]").difference(eles);
93+
94+
highlight(eles);
95+
unhighlight(others);
96+
97+
return this;
98+
99+
});
100+
101+
cytoscape("collection", "unhighlight", function () {
102+
var eles = this;
103+
104+
unhighlight(eles);
105+
106+
return this;
107+
});
108+
109+
110+
cytoscape("collection", "highlightNeighbors", function () {
111+
var eles = this;
112+
113+
var allEles = getWithNeighbors(eles);
114+
115+
return allEles.highlight();
116+
117+
});
118+
119+
cytoscape("collection", "unhighlightNeighbors", function () {
120+
var eles = this;
121+
var cy = eles.cy();
122+
123+
var allEles = getWithNeighbors(eles);
124+
125+
return allEles.unhighlight();
126+
});
127+
128+
cytoscape("collection", "highlightNeighbours", function () {
129+
var eles = this;
130+
var cy = eles.cy();
131+
132+
return eles.highlightNeighbors();
133+
});
134+
135+
cytoscape("collection", "unhighlightNeighbours", function () {
136+
var eles = this;
137+
var cy = eles.cy();
138+
139+
return eles.unhighlightNeighbors();
140+
});
141+
142+
cytoscape("collection", "removeHighlights", function () {
143+
var eles = this;
144+
eles
145+
.removeClass("highlighted")
146+
.removeClass("unhighlighted")
147+
.removeData("highlighted");
148+
});
149+
150+
cytoscape("collection", "isHighlighted", function () {
151+
var ele = this;
152+
return ele.is(":visible[highlighted]") ? true : false;
153+
});
154+
155+
156+
cytoscape("collection", "hide", function () {
157+
var eles = this;
158+
eles.data("hidden", true);
159+
eles.css("display: none");
160+
161+
162+
return this;
163+
});
164+
165+
cytoscape("collection", "show", function () {
166+
var eles = this;
167+
eles.data("hidden", false);
168+
eles.css("display: element");
169+
170+
return this;
171+
});
172+
173+
}
174+
return this;
175+
});
176+
177+
};
178+
179+
if (typeof module !== 'undefined' && module.exports) { // expose as a commonjs module
180+
module.exports = register;
181+
}
182+
183+
if (typeof define !== 'undefined' && define.amd) { // expose as an amd/requirejs module
184+
define('cytoscape-view-utilities', function () {
185+
return register;
186+
});
187+
}
188+
189+
if (typeof cytoscape !== 'undefined' && typeof $ !== "undefined") { // expose to global cytoscape (i.e. window.cytoscape)
190+
register(cytoscape, $);
191+
}
192+
193+
})();

0 commit comments

Comments
 (0)