Appearance

  2. Examples

Local grid ​

layoutalgorithmsinteractions

This example shows how to use the local grid layout algorithm on a subgraph.

Press "ctrl" and select some nodes with the lasso tool using the mouse. The nodes will be positioned as a grid.

ts
import Ogma from '@linkurious/ogma';

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

ogma.generate
  .random({
    nodes: 100,
    edges: 100
  })
  .then(graph => {
    ogma.setGraph(graph);
    ogma.view.locateGraph();
  });

ogma.events.on('dragStart', () => {
  if (ogma.keyboard.isKeyPressed('ctrl')) {
    ogma.tools.lasso.enable();
  }
});

ogma.events.on('nodesSelected', async nodes => {
  await ogma.layouts.grid({
    nodes: ogma.getSelectedNodes(),
    sortBy: 'id'
  });
  console.log('done');
  await ogma.view.locateGraph({
    easing: 'linear',
    duration: 300
  });
});
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;
}