iVis-at-Bilkent/cytoscape.js-edge-bend-editing

Name: cytoscape.js-edge-bend-editing

Owner: iVis-at-Bilkent

Description: A Cytoscape.js extension enabling interactive editing of edge bend points

Created: 2016-06-27 08:03:50.0

Updated: 2017-09-22 06:24:44.0

Pushed: 2017-08-21 09:58:58.0

Homepage:

Size: 609

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

cytoscape-edge-bend-editing

Description

A Cytoscape.js extension enabling interactive editing of edge bend points, distributed under The MIT License.

• To highlight bend point positions of an edge you should select the edge and unselect any other edges. Note that in determining the edge to highlight bend point positions we assume that the unvisible edges are not selected.
• To add a bend point select the edge and unselect any other edge, right click where you want to add the bend point and click 'Add Bend Point' on the context menu (requires 'cytoscape.js-context-menus' extension).
• To remove a bend point select the edge and unselect any other edge, right click on the bend point and click 'Remove Bend Point' on the context menu (requires 'cytoscape.js-context-menus' extension).
• To move a bend point drag and drop it when the edge is the only selected edge.
• Alternatively,
  • You can click anywhere on the edge (if it is the only selected edge) to introduce and relocate a bend point by dragging.
  • A bend point is removed if it is dropped near the line segment between its two neighbours.

Demo

Click here for demo

Dependencies

• Cytoscape.js >=1.7.0
• jQuery ^{1.7.0 ||} 2.0.0 || ^3.0.0
• cytoscape-undo-redo.js(optional) ^1.0.1
• cytoscape-context-menus.js(optional) ^2.0.0

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:

cytoscape = require('cytoscape');
jquery = require('jquery');
edgeBendEditing = require('cytoscape-edge-bend-editing');

BendEditing( cytoscape, jquery ); // register extension

AMD:

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

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

API

instance = cy.edgeBendEditing( options );

An instance has a number of functions available:

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

ance.getSegmentPoints(ele);
nitilize bend points for the given edges using 'options.bendPositionsFunction'
ance.initBendPoints(eles)

You can also get an existing instance:

dgeBendEditing('get'); // Returns undefined if the extension is not initialized yet

Or you can check if the extension is initilized before

dgeBendEditing('initialized');

Default Options

var options = {
  // this function specifies the positions of bend points
  bendPositionsFunction: function(ele) {
    return ele.data('bendPointPositions');
  },
  // whether to initilize bend points on creation of this extension automatically
  initBendPointsAutomatically: true,
  // 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