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.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';
import * as ogmaStyles from '@linkurious/ogma-styles';
import { GUI } from '@linkurious/ogma-ui-kit/gui';

// TypeScript declarations for global variables
//declare const ogmaStyles: any;

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

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

const graph = await ogma.generate.randomTree({ nodes: 20 });
await ogma.setGraph(graph);
await ogma.layouts.force({ locate: true, duration: 0 });

// example state
interface Settings {
  hidden: boolean;
  nodeHalo: boolean;
  edgeHalo: boolean;
  nodeColor: string | undefined;
  selectedTheme: string;
  selectedColor: string;
}

const settings: Settings = {
  hidden: true,
  nodeHalo: false,
  edgeHalo: false,
  nodeColor: undefined,
  selectedTheme: 'midsummerNight',
  selectedColor: 'undefined'
};

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

const gui = new GUI();

// Theme selector
gui
  .add(settings, 'selectedTheme', {
    'midsummer night': 'midsummerNight',
    'afternoon nap': 'afternoonNap',
    'morning breeze': 'morningBreeze'
  })
  .name('Theme')
  .onChange((value: string) => {
    theme = ogmaStyles[value];
    ogma.styles.setTheme(theme);
    ogma.styles.getRuleList().forEach(rule => rule.refresh());
  });

// Halo checkboxes
gui
  .add(settings, 'nodeHalo')
  .name('Node halo')
  .onChange(() => {
    ogma.styles.getRuleList().forEach(rule => rule.refresh());
  });

gui
  .add(settings, 'edgeHalo')
  .name('Edge halo')
  .onChange(() => {
    ogma.styles.getRuleList().forEach(rule => rule.refresh());
  });

// Color selector
const colors: { [key: string]: string } = {
  default: 'undefined',
  darkorange: '#d55e00',
  orange: '#e69f00',
  yellow: '#f0e441',
  lightgreen: '#019D73',
  sky: '#57b4e9',
  blue: '#0072b2',
  purple: '#c2739f',
  selected: '#bb3249',
  red: '#df162e',
  emerald: '#3fa291',
  darkblue: '#074f67'
};

gui
  .add(settings, 'selectedColor', colors)
  .name('Node color')
  .onChange((value: string) => {
    settings.nodeColor = value === 'undefined' ? undefined : value;
    ogma.styles.getRuleList().forEach(rule => rule.refresh());
  });

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 src="index.ts" type="module"></script>
  </body>
</html>

css

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

Themes ​

Themes