summaryrefslogtreecommitdiffstats
path: root/catalog-ui/non_bower_components/cytoscape.js-edge-editation/README.md
blob: 909dcb06d17aeefe48f7073af8ca9f8362618d82 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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)