ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
160 lines (143 loc) • 4.45 kB
HTML
<html>
<head>
<title>Context menu example</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="./libs/jquery.min.js"></script>
<script src="../lib/ccNetViz.js"></script>
<script
src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"
type="text/javascript"
></script>
<style type="text/css">
.context-menu {
display: none;
position: absolute;
z-index: 10;
padding: 12px 0;
width: 240px;
background-color: #fff;
border: solid 1px #dfdfdf;
box-shadow: 1px 1px 2px #cfcfcf;
}
.context-menu--active {
display: block;
}
.context-menu__items {
list-style: none;
margin: 0;
padding: 0;
}
.context-menu__item {
display: block;
margin-bottom: 4px;
}
.context-menu__item:last-child {
margin-bottom: 0;
}
.context-menu__link {
display: block;
padding: 4px 12px;
color: #0066aa;
text-decoration: none;
}
.context-menu__link:hover {
color: #fff;
background-color: #0066aa;
}
</style>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Context menu example</h3>
<canvas id="canvas"></canvas>
<div class="description">
Right click on the node to get a context menu
<br />
More detailed information please visit the
<a href="https://helikarlab.github.io/ccNetViz/#doc"
>documentation page</a
>.
</div>
<div id="context-menu" class="context-menu">
<ul id="context-menu__items" class="context-menu__items "></ul>
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
var canvas = document.getElementById('canvas');
var graph = new ccNetViz(canvas, {
styles: {
node: { texture: 'images/node.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
},
});
var nodes = [
{ label: 'Hello', contextMenu: ['Details', 'More'] },
{ label: 'World' },
{ label: '!' },
];
var edges = [
{ source: nodes[0], target: nodes[1] },
{ source: nodes[1], target: nodes[0] },
{ source: nodes[0], target: nodes[0] },
{ source: nodes[1], target: nodes[2] },
];
graph.set(nodes, edges, 'force').then(() => {
graph.draw();
});
canvas.addEventListener('contextmenu', function(e) {
var bb = canvas.getBoundingClientRect();
var x = e.clientX - bb.left;
var y = e.clientY - bb.top;
var radius = 10;
var lCoords = graph.getLayerCoords({ radius: radius, x: x, y: y });
var result = graph.find(
lCoords.x,
lCoords.y,
lCoords.radius,
true,
false
);
if (
result.nodes.length > 0 &&
result.nodes[0].node.contextMenu != null
) {
var d = document.getElementById('context-menu');
var items = document.getElementById('context-menu__items');
var node = result.nodes[0].node;
var menu_lenght = node.contextMenu.length;
var contMenu = node.contextMenu;
while (items.firstChild) {
items.removeChild(items.firstChild);
}
for (var i = 0; i < menu_lenght; i++) {
let option = contMenu[i];
var li = document.createElement('li');
var node = document.createTextNode(option);
li.appendChild(node);
items.appendChild(li);
li.classList.add('context-menu__link');
li.setAttribute('id', option);
$('#' + option).click(function() {
alert(option);
});
}
d.style.position = 'absolute';
d.style.display = 'block';
d.style.left = e.clientX + 'px';
d.style.top = e.clientY + 'px';
}
e.preventDefault();
});
canvas.addEventListener('click', function(e) {
var d = document.getElementById('context-menu');
d.style.display = 'none';
});
</script>
</body>
</html>