Appearance

  2. Examples

Draggable/non-draggable nodes ​

interactions

This example shows how to use the draggable attribute to enable/disable nodes dragging. By default, nodes are draggable. Green nodes are draggable, for the grey ones dragging is programmatically disabled. You can also force making a node draggable by double-clicking it.

ts
import Ogma from '@linkurious/ogma';

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

// make even nodes draggable and color them green
ogma.styles.addNodeRule({
  draggable: n => +n.getId() % 2 === 0,
  color: n => (+n.getId() % 2 === 0 ? 'green' : 'grey')
});

// Generate a random graph and assign it to Ogma.
ogma.generate
  .random({
    nodes: 15,
    edges: 30
  })
  .then(g => {
    ogma.setGraph(g);
    ogma.view.locateGraph();
  });

// force-set 'draggable' property
ogma.events.on('doubleclick', evt => {
  if (evt.target && evt.target.isNode) {
    evt.target.setAttributes({
      draggable: true,
      color: 'green'
    });
  }
});
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;
}