Outline

This example shows how to use the outline attibute.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

// Activate the outline for every node with the default color.
ogma.styles.addNodeRule({
  outline: true
});

// When nodes are hovered, remove the outline.
ogma.styles.setHoveredNodeAttributes({
  outline: {
    enabled: false
  }
});

// When nodes are selected, apply this outline style.
ogma.styles.setSelectedNodeAttributes({
  outline: {
    enabled: true,
    color: 'blue'
  }
});

// Generate a random graph
ogma.generate
  .random({
    nodes: 9,
    edges: 0
  })
  // Assign the graph to Ogma.
  .then(g => ogma.setGraph(g))
  .then(() => ogma.layouts.grid({ locate: true, duration: 0 }))
  .then(() => {
    // Change the outline of a single node.
    ogma
      .getNode('0')!
      .setAttributes({ outline: { enabled: true, color: 'orange' } });
  });

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

Outline ​

Outline