Appearance
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.
js
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;
}