Appearance

  2. Examples
  3. Edge styles

Arrow size ​

stylessettings

This example shows how the edgeTipRatio and edgeMinTipSize options can be used to tweak the appearance of edges with arrowheads. The edgeTipRatio option controls the size of the arrowhead relative to the edge width, while the edgeMinTipSize option sets the minimum size of the arrowhead.

ts
import Ogma from '@linkurious/ogma';
import { GUI } from '@linkurious/ogma-ui-kit/gui';

const options = {
  edgeTipRatio: 3,
  edgeMinTipSize: 1
};

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

const colors = ['#145DA0', '#2E8BC0', '#0C2D48'];
ogma.styles.addEdgeRule({
  shape: {
    head: 'arrow'
  },
  color: edge => colors[Number(edge.getId())],
  width: edge => +edge.getId() + 1
});

let timer: ReturnType<typeof setTimeout>;
const applyOptions = () => {
  clearTimeout(timer);
  timer = setTimeout(() => ogma.setOptions({ ...options }), 50);
};

const gui = new GUI({ name: 'Edge arrows' });
console.assert(typeof gui.add === 'function');

await ogma.setGraph({
  nodes: [{ id: 0 }, { id: 1 }, { id: 2 }],
  edges: [
    { source: 0, target: 1, id: 0 },
    { source: 1, target: 2, id: 1 },
    { source: 2, target: 0, id: 2 }
  ]
});
await ogma.layouts.force({ locate: true });

gui
  .add(options, 'edgeTipRatio', 1, 12, 0.01)
  .name('Edge tip ratio')
  .onChange(applyOptions);

gui
  .add(options, 'edgeMinTipSize', 0, 100, 1)
  .name('Min arrow size')
  .onChange(applyOptions);
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;
}