Local concentric

Select some nodes with the lasso tool using the mouse. The nodes will be positioned as a circles around the central node in the selection.

          <!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'
});

ogma.generate.random({
  nodes: 100,
  edges: 100
}).then(function(graph) {
  ogma.setGraph(graph);
  ogma.view.locateGraph();
});

ogma.tools.lasso.enable();

// return the node in the center of the selected set
function getCentralNode (nodes) {
  var bbox = nodes.getBoundingBox();
  var centralNode;
  nodes.reduce(function(shortest, node) {
    var position = node.getPosition();
    var dist = Ogma.geometry.distance(position.x, position.y, bbox.cx, bbox.cy);
    if (dist < shortest) {
      centralNode = node;
      shortest = dist;
    }
    return shortest;
  }, Infinity);
  return centralNode;
}

ogma.events.onNodesSelected(function(evt) {
  var centralNode = getCentralNode(evt.nodes).getId();
    ogma.layouts.concentric({
      nodes: evt.nodes,
      centralNode: centralNode,
    })
      .then(function () {
        ogma.view.locateGraph({
          easing: 'linear',
          duration: 300
        });
      });
});

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