ccnetviz
Version:
[](https://travis-ci.org/HelikarLab/ccNetViz) [](https://www.gnu.org/licenses/gpl-3.0) [![semantic-releas
168 lines (148 loc) • 4.56 kB
HTML
<html>
<head>
<title>ccMetViz Interactivity Hover Example</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="../lib/ccNetViz.js"></script>
<script src="./libs/jquery.min.js"></script>
<style>
#canvas {
cursor: crosshair;
}
</style>
</head>
<body>
<div class="canvas-container">
<h3 class="title">Interactivity for mouse hover</h3>
<canvas id="canvas"></canvas>
<div class="description">
Move mouse over node or edge to make them blue.
<br />
More detailed information please visit the
<a href="https://helikarlab.github.io/ccNetViz/#doc"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
var el = document.getElementById('canvas');
var graph = new ccNetViz(el, {
styles: {
node: { texture: 'images/node_bw.png', label: { hideSize: 16 } },
edge: { arrow: { texture: 'images/arrow.png' } },
edgeHover: {
color: 'rgb(0, 0, 255)',
},
nodeHover: {
texture: 'images/node.png',
label: { hideSize: 16 },
},
},
});
var nodes = [{ label: 'Hello' }, { 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();
});
function onEdgeIn(e) {
e.style = 'edgeHover';
graph.reflow();
}
function onEdgeOut(e) {
if (e.style !== undefined) delete e.style;
graph.reflow();
}
function onNodeIn(n) {
n.style = 'nodeHover';
graph.reflow();
}
function onNodeOut(n) {
if (n.style !== undefined) delete n.style;
graph.reflow();
}
class ccNetVizElementsEvents {
constructor(params) {
this.onNodeOut = params.onNodeOut || function() {};
this.onEdgeOut = params.onEdgeOut || function() {};
this.onNodeIn = params.onNodeIn || function() {};
this.onEdgeIn = params.onEdgeIn || function() {};
this.lastOnHover = { nodes: [], edges: [] };
}
onMove(result) {
var currentHover = {};
$.each(
[
{
arr: 'nodes',
el: 'node',
onOut: this.onNodeOut,
onIn: this.onNodeIn,
},
{
arr: 'edges',
el: 'edge',
onOut: this.onEdgeOut,
onIn: this.onEdgeIn,
},
],
function(i, e) {
var arr = e.arr;
var el = e.el;
for (var i = 0; i < result[arr].length; i++) {
var n = result[arr][i][el];
var index;
if ((index = lastOnHover[arr].indexOf(n)) < 0) {
index = lastOnHover[arr].length;
lastOnHover[arr].push(n);
e.onIn(n);
}
currentHover[index] = true;
}
var n = [];
for (var i = 0; i < lastOnHover[arr].length; i++) {
if (currentHover[i] !== true) {
e.onOut(lastOnHover[arr][i]);
} else {
n.push(lastOnHover[arr][i]);
}
}
lastOnHover[arr] = n;
}
);
}
}
var events = new ccNetVizElementsEvents({
onNodeIn: onNodeIn,
onEdgeIn: onEdgeIn,
onNodeOut: onNodeOut,
onEdgeOut: onEdgeOut,
});
var lastOnHover = { nodes: [], edges: [] };
el.addEventListener('mousemove', function(e) {
var bb = el.getBoundingClientRect();
var x = e.clientX - bb.left;
var y = e.clientY - bb.top;
var radius = 5;
var lCoords = graph.getLayerCoords({ radius: radius, x: x, y: y });
var result = graph.find(
lCoords.x,
lCoords.y,
lCoords.radius,
true,
true
);
events.onMove(result);
});
</script>
</body>
</html>