Keyboard interactions

The keyboard module allows you to bind an action to a given combination of keys. In this example, we bind the addition of a node to a combination, and the removal of a node to another combination:

Press ALT + A to add a node to the graph
Press ALT + R to remove a node from the graph

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
<div id="graph-container"></div>

<script>
  'use strict';

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

  var addCounter = 0,
      removeCounter = 0;

  function addNode() {
    ogma.addNode({id: addCounter++, attributes: {x: Math.random() * 100, y: Math.random() * 100}});
    console.log('Node added');
    ogma.view.locateGraph();
  }

  function removeNode() {
    if (removeCounter < addCounter) {
      ogma.removeNode(removeCounter++);
      console.log('Node removed');
    }
  }

  ogma.events.onKeyPress('alt a', addNode);
  ogma.events.onKeyPress('alt r', removeNode);

  for (let i = 0; i < 5; ++i) {
    addNode();
  }

</script>
</body>
</html>