Connect nodes

Press "ctrl" and drag the nodes to create new edges by connecting them. If you finish drawing the edge not on a node, a new node is created. Check out these and other settings here.

          <!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; }
    #control { position: absolute; top: 10px; right: 10px; padding: 10px; background: #fff; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
    #control label { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  </style>
</head>
<body>
<div id="graph-container"></div>
<script>
  'use strict';

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

  ogma.events.onDragStart(function () {
    if (ogma.keyboard.isKeyPressed('ctrl')) {
      ogma.tools.connectNodes.enable({
        strokeColor: 'red',

        onComplete: function (evt) {
          console.log('New connection: ', evt);
        },

        onNodeCreated: function (n) {
          console.log('node created ', n.getId());
          n.setAttributes({color:'orange'});
        },

        onEdgeCreated: function (n) {
          console.log('edge created ', n.getId());
          n.setAttributes({color:'orange'});
        }});
    }
  });

  ogma.generate.random({ nodes: 15, edges: 15 }).then(function(g) {
    ogma.setGraph(g);
    ogma.view.locateGraph();
  });
</script>
</body>
</html>