diff options
author | Michael Lando <ml636r@att.com> | 2017-02-19 10:28:42 +0200 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-02-19 10:51:01 +0200 |
commit | 451a3400b76511393c62a444f588a4ed15f4a549 (patch) | |
tree | e4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md | |
parent | 5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff) |
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md')
-rw-r--r-- | catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md new file mode 100644 index 0000000000..909dcb06d1 --- /dev/null +++ b/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md @@ -0,0 +1,58 @@ +# cytoscape.js-edge-editation +Extension for Cytoscape.js, which adds handles to nodes and allows to create different types of edges + + +## Dependencies + +Extension was tested with these versions of libraries: + +* jQuery 2.1.1 +* Cytoscape.js 2.6.0 + +## Install + +Use git clone or direct zip download and unpack archive into your project. Then, simply insert \<script\> tag after +Cytoscape.js and jQuery: + +```html +<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> +<script src="cytoscape.js"></script> +<script src="CytoscapeEdgeEditation.js"></script> +``` + +## How to use + +First, you need to initialize extension. After initializing Cytoscape.js: + +```js +var cy = cytoscape({...}); +var handles = new CytoscapeEdgeEditation; +handles.init(cy); +``` + +Then, you need to register handles to certain node types: + +```js +handles.registerHandle({ + positionX: "left", //horizontal position of the handle (left | center | right) + positionY: "center", //vertical position of the handle (top | center | bottom) + color: "#48FF00", //color of the handle + type: "some_type", //stored as data() attribute, can be used for styling + single: true, //wheter only one edge of this type can start from same node (default false) + nodeTypeNames: ["type2"] //which types of nodes will contain this handle + noMultigraph: false //whereter two nodes can't be connected with multiple edges (does not consider orientation) +}); + +handles.registerHandle({...}); +handles.registerHandle({...}); +``` + +Type of node is stored in data section: + +```js +cy.add({ + data: { id: 'n4', type: "type2"}, +}); +``` +![Screenshot](http://i.imgbox.com/drCuXQqu.png) +![Screenshot](http://i.imgbox.com/23jr7qPa.png) |