This plugin creates a widget that shows a bird's eye view of the graph such that the entire graph is visible. Using this widget, the user can zoom and pan about the graph.
- jQuery >=1.4
- Cytoscape.js >=2.2
You initialise the plugin on the same HTML DOM element container used for Cytoscape.js:
// First initialise Cytoscape.js
$('#cy').cytoscape({
/* ... */
});
// Then initialise Navigator
$('#cy').cytoscapeNavigator();
If Cytoscape.js initialisation is time consuming Navigator may not start properly. It is recommened to initialise Navigator when Cytoscape.js is ready:
// OnReady event
$('#cy').cy({
ready: function(){
$('#cy').cytoscapeNavigator()
}
/* ... */
})
// Initialisation chain
$('#cy').cy({
/* ... */
}).cy(function(){
$('#cy').cytoscapeNavigator()
})
If using this library as a module you have more control over the setup of the library.
executing require('cytoscape-navigator')()
will instantiate the library in same
manner as including the script directly in the browser.
However you are now able to inject your own jQuery and Cytoscape instances
require('cytoscape-navigator')(jQuery, cytoscape)
.
var jquery = require('jquery');
var cytoscape = require('cytoscape');
var cytoscapeNavigator = require('cytoscape-navigator');
// ensure that cytoscape registers jquery
cytoscape.registerJquery(jquery);
// now setup cytoscape-navigator
cytoscapeNavigator(jquery, cytoscape);
Once the setup is complete you must initialize the instance in the same manner as above.
For a full demo on using this library as a module please see this repository
Navigator and its components (thumbnail's container, view's container) may be styled via CSS. It includes background, border, size and position.
-
Ovveride Navigator border and background:
.cytoscape-navigator{ border: 2px solid red; background: blue; }
-
Add border to View container:
.cytoscape-navigator .cytoscape-navigatorView{ border: 5px solid red; border-radius: 3px; }
-
Ovveride overlay container when mouse is over Navigator
.cytoscape-navigator:hover .cytoscape-navigatorOverlay{ background: yellow; }
-
Ovveride view's container when mouse is over view
.cytoscape-navigator.mouseover-view .cytoscape-navigatorView{ background: rgba(0,255,0,0.5); }
Navigator HTML structure looks like:
<div class="cytoscape-navigator">
<canvas></canvas>
<div class="cytoscape-navigatorView"></div>
<dib class="cytoscape-navigatorOverlay"></dib>
</div>
Plugin accepts custom options in form of an object:
// The default values of each option are outlined below:
$('#cy').cyNavigator({
container: false,
viewLiveFramerate: 0,
thumbnailEventFramerate: 30,
thumbnailLiveFramerate: false,
dblClickDelay: 200
})
Can be a HTML or jQuery element or jQuery selector
Used to indicate navigator HTML container. If is false then a new DOM Element is created.
Set false to update graph pan (position) only on navigator's view drag end. Set 0 to instantly update graph pan when navigator's view is dragged. Set a positive number (N frames per second) to update navigator's view not more than N times per second.
Maximal number of thumbnail updates per second triggered by graph events.
Maximal number of constant thumbnail updates per second. Set false to disable.
Maximal delay (in milliseconds) between two clicks to consider them as a double click.
Access plugin methods by calling cyNavigator('function name') from jQuery element graph container:
$('#cy').cyNavigator('resize') // call resize event to refresh navigator data
List of available methods:
- resize
- destroy
If you resized Navigator container (e.x. $('#cy .cytoscape-navigator').width(300)
) then call
Navigator resize method (e.x. $('#cy').cytoscapeNavigator('resize')
).
If you resized Cytoscape.js container (e.x. $('#cy').width(900)
) then:
- if you're using Cytoscape.js 2.2.x then call Navigator resize method (e.x.
$('#cy').cytoscapeNavigator('resize')
) - if you're using Cytoscape.js >= 2.3.x then call
cy.resize()