Appearance
Badges interactions new
This example shows how to handle badge clicks, badge hover and unhover, it uses the getNodeBadgeAt method.
ts
import Ogma, { Node } from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.events.on('click', ({ target, x, y }) => {
let clickTarget;
if (!target) clickTarget = 'background';
else if (!target.isNode) clickTarget = `edge ${target.getId()}`;
else {
const badge = ogma.view.getNodeBadgeAt(target as Node, { x, y });
if (badge) clickTarget = `node ${target.getId()}, badge ${badge}`;
else clickTarget = `node ${target.getId()}`;
}
document.getElementById('info')!.textContent = clickTarget + ' clicked ';
});
ogma.generate.random({ nodes: 5, edges: 10 }).then(g => {
g.nodes.forEach(n => {
n.data = { value: 1 + Math.floor(Math.random() * 9) };
});
ogma.setGraph(g);
ogma.view.locateGraph();
});
const badges = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
ogma.events.on('mousemove', ({ x, y }) => {
const hovered = ogma.getHoveredElement();
if (!hovered || !hovered.isNode) return;
const badge = ogma.view.getNodeBadgeAt(hovered, { x, y });
if (badge) {
hovered.setAttribute(`badges.${badge}.stroke.color`, 'green');
} else {
for (let i = 0; i < 4; i++) {
hovered.setAttribute(`badges.${badges[i]}.stroke.color`, 'black');
}
}
});
ogma.styles.addNodeRule({
text: {
content: n => 'Node ' + n.getId()
},
badges: {
topLeft: {
positionScale: 1,
text: {
font: 'Arial',
style: 'bold',
content: node => node.getData('value'),
color: 'black'
}
}
}
});
ogma.styles.addEdgeRule({
text: {
content: e => 'Edge ' + e.getId()
}
});
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" class="info">Click on a node or a badge</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;
}