Node snapping

Drag nodes around to see the snapping in action.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Snapping tool</title>
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
    #load {
      position: absolute;
      top: 0;
      left: 0;
      padding: 5px;
      color: #fff;
      background: #141229;
      font-size: 12px;
      font-family: monospace;
    }
    #control {
      background:    #ffffff;
      font-family:   Helvetica, Arial, sans-serif;
      box-shadow:    0 1px 5px rgba(0,0,0,0.65);
      border-radius: 4px;
      position:      absolute;
      top:           10px;
      right:         10px;
      padding:       10px;
      z-index:       10;
    }
    #control label {
      display: block;
    }
    #control label.disabled { color: #cccccc; }
    #control ul {
      list-style: none;
      padding-left: 10px;
    }
    #control ul ul { margin-top: 10px; }
  </style>
</head>
<body>
  <div id="graph-container"></div>
  <span id="load">Loading...</span>
  <form id="control">
    <ul>
      <li><label><input type="checkbox" id="snapping" checked> <strong>Snapping</strong></label>
        <ul>
          <li><label><input type="checkbox" id="distance" checked> Preferred node distance</label></li>
          <li><label><input type="checkbox" id="neighbours" checked> Equal distribution</label></li>
        </ul>
      </li>
    </ul>
  </form>

<script>
'use strict';

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

function clampedRandomRadius(min, max) {
  return min + (max - min) * Math.random()
}

ogma.generate.random({
  nodes: 15,
  edges: 0
}).then(function(graph) {
  var min = 1, max = 10;
  graph.nodes.forEach(function(n, i) {
    n.attributes.text = 'Node ' + i;
    n.attributes.radius = min + (max - min) * Math.random();
  });
  var loadIndicator = document.getElementById('load');
  ogma.setGraph(graph);
  loadIndicator.parentElement.removeChild(loadIndicator);
  ogma.view.locateGraph();
  //ogma.setOptions({ interactions: { drag: { snapping: { enabled: true, neighbours: false }}}});
});

function applySettings() {
  var snapping   = document.getElementById('snapping');
  var distance   = document.getElementById('distance');
  var neighbours = document.getElementById('neighbours');

  var enabled = snapping.checked;

  distance.disabled   = !enabled;
  neighbours.disabled = !enabled;

  if (enabled) {
    ogma.tools.snapping.enable({
      neighbours: { enabled: neighbours.checked },
      preferredDistance: { enabled: distance.checked }
    });
  } else ogma.tools.snapping.disable();
}

document.getElementById('control')
  .addEventListener('change', applySettings);
applySettings();

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