var cy = cytoscape({
container: document.getElementById('cy'),
showOverlay: true,
minZoom: 1,
maxZoom: 1,
layout: {
fit: true
},
elements: {
// nodes
"nodes": [{
"data": {
"id": "n1",
"name": "node 1",
"description": "Ars Gratia Artis 1"
}
}, {
"data": {
"id": "n2",
"name": "node 2",
"description": "Ars Gratia Artis 2"
}
}],
"edges": [{
"data": {
"source": "n1",
"id": "e1",
"target": "n2",
"type": "belongs-to"
}
}]
},
ready: function() {
var stringStylesheet = "node {"
+"content: data(name);"
+"text-valign: center;"
+"color: white;"
+"text-outline-width: 2;"
+"text-outline-color: #888;"
+"}"
+"edge {"
+" target-arrow-shape: triangle;"
+"content: data(type);"
+"text-outline-color: #FFF;"
+"text-outline-opacity: 1;"
+" text-outline-width: 2;"
+" text-valign: center;"
+" color: #777;"
+"width: 2px;"
+"}"
+":selected {"
+"background-color: black;"
+"line-color: black;"
+"target-arrow-color: black;"
+"source-arrow-color: black;"
+"color: black;"
+"}"
+".faded {"
+" opacity: 0.25;"
+"text-opacity: 0;"
+"}";
cy = this;
cy.style( stringStylesheet );
//You can have different panels for editing edges and nodes.
var nodeClicked = cy.on('tap', 'node', function(e) {
//var edgeClicked = cy.on('tap', 'edge', function(e) {
//Here I use pure jQuery to hide the edge-edition panel
//and show the node-edition one.
//$('div.edge-edition').hide();
$('div.node-edition').show();
//if you click in a specific node, unselect any other
//previously selected element from the graph
cy.elements().unselect();
//* identify which node was clicked
var node = e.target;
console.log("node clicked: " + node.data('name'));
//finally, fullfills forms of the panel with node data
$('.node-name').val(node.data('name'));
$('.node-description').val(node.data('description'));
});
}
});
html {
height: 98%;
}
body {
font-family: Verdana, Arial, Times New Roman;
font-size: 11px;
height: 100%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cy {
height: 85%;
width: 60%;
float: left;
position: relative;
top: 10px;
left: 0px;
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 0px;
display: block;
z-index: 1;
}
#edition {
float: right;
height: 85%;
width: 39.5%;
position: relative;
top: 10px;
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 0px;
display: block;
z-index: 1;
}
input,
textarea {
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
z-index: -1;
}
.node-name,
.node-description {
max-width: 350px;
width: 250px;
}
<script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div id="cy"></div>
<div id="edition">
<div class="node-edition">
<form>
<table>
<tr>
<td>Name</td>
<td>
<input type="text" class="node-name">
</td>
</tr>
<tr>
<td>Description</td>
<td>
<textarea class="node-description"></textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
