Appearance
Hover
This example shows how to use the mouseover and mouseout event to display information about the element the mouse is hovering over.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
const info = document.getElementById('info') as HTMLDivElement;
ogma.events
.on('mouseover', evt => {
if (evt.target) {
const { target, x, y } = evt;
info.innerHTML = `Hovered ${
target.isNode ? 'node' : 'edge'
} ${target.getId()} at position (${x}, ${y})`;
}
})
.on('mouseout', evt => {
if (evt.target) {
const { target, x, y } = evt;
info.innerHTML = `Unhovered ${
target.isNode ? 'node' : 'edge'
} ${target.getId()} at position (${x}, ${y})`;
}
});
ogma.styles.addNodeRule({
text: {
content: n => 'Node ' + n.getId()
}
});
ogma.styles.addEdgeRule({
text: {
content: e => 'Edge ' + e.getId()
}
});
ogma.generate
.random({ nodes: 5, edges: 10 })
.then(ogma.setGraph)
.then(() => ogma.view.locateGraph());
html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="graph-container"></div>
<div id="info">Hover some nodes or edges</div>
<script type="module" src="index.ts"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
#info {
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
padding: 1em;
color: rgba(255, 255, 255, 1);
background: rgba(0, 90, 200, 1);
border-radius: 5px;
min-width: 20%;
font-family: Georgia, 'Times New Roman', Times, serif;
pointer-events: none;
}