cytoscape-edge-bend-editing

cytoscape-edge-bend-editing

Important Note

To use this extension you should include 'cytoscape.js-context-menus' extension. Please see 'https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus'.

Description

A Cytoscape.js extension enables editing edge bend points.

• To add a bend point right click where you want to add the bend point and click 'Add Bend Point' on the context menu.
• To remove a bend point click on the bend point and click 'Remove Bend Point' on the context menu.
• To move a bend point drag and drop it. (Note that these operations can be performed if the edge is selected)

Dependencies

• Cytoscape.js ^1.7.0
• cytoscape-undo-redo.js(optional) ^1.0.1

Usage instructions

Download the library:

• via npm: npm install cytoscape-edge-bend-editing,
• via bower: bower install cytoscape-edge-bend-editing, or
• via direct download in the repository (probably from a tag).

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var edge-bend-editing = require('cytoscape-edge-bend-editing');

edge-bend-editing( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-edge-bend-editing'], function( cytoscape, edge-bend-editing ){
  edge-bend-editing( cytoscape ); // register extension
});

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

API

cy.edgeBendEditing(options) To initialize with options.

ele.getSegmentPoints() get segment points of an edge in an array A, A[2 * i] is the x coordinate and A[2 * i + 1] is the y coordinate of the ith bend point. (Returns undefined if the curve style is not segments)

Default Options

    var options = {
      // this function specifies the positions of bend points
      bendPositionsFunction: function(ele) {
        return ele.data('bendPointPositions');
      },
      // whether the bend editing operations are undoable (requires cytoscape-undo-redo.js)
      undoable: false,
      // the size of bend shape is obtained by multipling width of edge with this parameter
      bendShapeSizeFactor: 6,
      // whether to start the plugin in the enabled state
      enabled: true,
      // title of add bend point menu item (User may need to adjust width of menu items according to length of this option)
      addBendMenuItemTitle: "Add Bend Point",
      // title of remove bend point menu item (User may need to adjust width of menu items according to length of this option)
      removeBendMenuItemTitle: "Remove Bend Point"
    };

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-edge-bend-editing https://github.com/iVis-at-Bilkent/cytoscape.js-edge-bend-editing.git

Team

• Metin Can Siper, Ugur Dogrusoz of i-Vis at Bilkent University