How to enable/implement panning in cytoscape.js?

Question

The cytoscape.js source code mentions panning several times. By panning I mean the ability to grab the background and move the whole graph in the mouse movement direction while grabbing, as you could do in d3.js. So far I've included the relevant libraries and css:

<link rel="stylesheet" type="text/css" href="cytoscape.js/build/plugins/jquery.cytoscape-panzoom.css">
<script src="demo/jquery-1.7.2.js"></script>
<script src="demo/jquery-ui/js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="cytoscape.js/build/cytoscape.all.js"></script>
<script src="cytoscape.js/build/plugins/jquery.cytoscape-panzoom.js"></script>

Should enabling panning be as simple as loading the dependencies and enabling the functionality, or is it the user's reponsibility to implement it by calling cy.pan() on grabbing events?

Answer 1

Panning is enabled by default. You can disable it via cy.panningEnabled(). There is a slight delay before panning starts such that you can use box selection. If you don't need box selection, you can disable it via cy.boxSelectionEnabled(false) -- eliminating the delay.