Themes

This example shows how to use the setTheme method to set the theme of the graph. The theme is a set of styles that can be applied to the nodes and edges of the graph when they are selected, hovered, etc.

index.jsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

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

let theme = ogmaStyles.midsummerNight;
ogma.styles.setTheme(theme);

ogma.generate
  .randomTree({ nodes: 20, edges: 100 })
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.layouts.force({ locate: true }));

// example state
const settings = {
  hidden: true,
  nodeHalo: false,
  edgeHalo: false,
  nodeColor: undefined
};

ogma.styles.addRule({
  nodeAttributes: {
    halo: {
      width: () => (settings.nodeHalo ? theme.nodeHaloWidth : 0)
    },
    color: () => settings.nodeColor
  },
  edgeAttributes: {
    halo: {
      width: () => (settings.edgeHalo ? theme.edgeHaloWidth : 0)
    }
  }
});

const pane = new Tweakpane.Pane();
const themeSelect = pane.addBlade({
  view: 'list',
  label: 'Theme',
  options: [
    { text: 'midsummer night', value: 'midsummerNight' },
    { text: 'afternoon nap', value: 'afternoonNap' },
    { text: 'morning breeze', value: 'morningBreeze' }
  ],
  value: 'midsummerNight'
});

pane.addInput(settings, 'nodeHalo', { label: 'Node halo' });
pane.addInput(settings, 'edgeHalo', { label: 'Edge halo' });

const colors = [
  { text: 'default', value: 'undefined' },
  { text: 'darkorange', value: '#d55e00' },
  { text: 'orange', value: '#e69f00' },
  { text: 'yellow', value: '#f0e441' },
  { text: 'lightgreen', value: '#019D73' },
  { text: 'sky', value: '#57b4e9' },
  { text: 'blue', value: '#0072b2' },
  { text: 'purple', value: '#c2739f' },
  { text: 'selected', value: '#bb3249' },
  { text: 'red', value: '#df162e' },
  { text: 'emerald', value: '#3fa291' },
  { text: 'darkblue', value: '#074f67' }
];
const colorSelect = pane.addBlade({
  view: 'list',
  label: 'Node color',
  options: colors,
  value: theme.colors.nodeColor
});

pane.on('change', evt => {
  if (evt.target === colorSelect) settings.nodeColor = evt.value;
  if (evt.target === themeSelect) {
    theme = ogmaStyles[evt.value];
    ogma.styles.setTheme(theme);
  }
  ogma.styles.getRuleList().forEach(rule => rule.refresh());
});

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/@linkurious/ogma-styles@0.0.4/dist/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.min.js"></script>
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script src="index.js"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

Themes ​

Themes