Home

Awesome

cytoscape-autopan-on-drag

Description

A Cytsocape.js extension to automatically pan when nodes are out of canvas bounds distributed under The MIT License.

Please cite the following paper when using this extension:

U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "Efficient methods and readily customizable libraries for managing complexity of large networks", PLoS ONE, 13(5): e0197238, 2018.

Dependencies

Demo

Click for the demo

Usage instructions

Download the library:

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var autopanOnDrag = require('cytoscape-autopan-on-drag');

autopanOnDrag( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-autopan-on-drag'], function( cytoscape, autopanOnDrag ){
  autopanOnDrag( cytoscape ); // register extension
});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

Default Options

var options = {
    enabled: true, // Whether the extension is enabled on register
    selector: 'node', // Which elements will be affected by this extension
    speed: 1 // Speed of panning when elements exceed canvas bounds
};

API

var instance = cy.autopanOnDrag( options );

An instance has a number of functions available:

instance.enable(); // enable the instance

instance.disable(); // disable the instance

You can also get an existing instance:

cy.autopanOnDrag('get');

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

  1. Set the version number environment variable: export VERSION=1.2.3
  2. Publish: gulp publish
  3. If publishing to bower for the first time, you'll need to run bower register cytoscape-autopan-on-drag https://github.com/iVis-at-Bilkent/cytoscape.js-autopan-on-drag.git

Team