Skip to content
  1. Examples

Panning

This example shows how to navigate within the view by moving the camera. Use your mouse to drag the camera around the view.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container',
  options: {
    interactions: { zoom: { onDoubleClick: true } },
    backgroundColor: '#dddddd'
  }
});

ogma.events.on('nodesDragStart', eventData => {
  console.log('start', eventData);
  // console.log('Starting drag nodes ' +
  // eventData.nodes.getId().join() +
  // ' at (' + eventData.x + ', ' + eventData.y + ')');
});

ogma.events.on('nodesDragProgress', eventData => {
  console.log('progress', eventData);
  // console.log('Dragging node ' + eventData.node.getId() +
  // ' to (' + eventData.x + ', ' + eventData.y + ')');
});

ogma.events.on('nodesDragEnd', eventData => {
  console.log('end', eventData);
  // console.log('Ending drag node ' + eventData.node.getId() +
  // ' at (' + eventData.x + ', ' + eventData.y + ')');
});

// Generate a random graph and assign it to Ogma.
const graph = await ogma.generate.random({ nodes: 15, edges: 30 });
await ogma.setGraph(graph);
await ogma.view.locateGraph();
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
body,
html {
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0;
}

#graph-container {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: hidden;
  display: block;
  position: relative;
  top: 25%;
  border: 1px solid #444444;
}