Appearance

  2. Examples

Badges interactions new ​

interactionsbadges

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;
}