Other versions of this documentation User manual Administration manual REST API documentation Ogma documentation Documentation home Linkurious website
All versions of this documentation
X

Group selection


Open in a new window. 
          <!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; }
    .group { position: absolute; top:10px; left: 10px; }
    .ungroup { position: absolute; top:40px; left: 10px; }
  </style>
</head>
<body>
  <div id="graph-container"></div>
  <button class="group" onclick="groupSelection()">Group selected nodes</button>
  <button class="ungroup" onclick="ungroupNodes()">Undo last grouping</button>

<script>
  'use strict';

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

  var duration = 300;

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

  var transformations = [];

  function groupSelection() {
    var selectedNodes = ogma.getSelectedNodes();

    if (selectedNodes.size < 2) return;

    var grouping = ogma.transformations.addNodeGrouping({
      selector: function (node) {
        return selectedNodes.includes(node);
      },
      nodeGenerator: function (nodes) {
        return {
          attributes: {
            radius: nodes.reduce(function (radius, node) {
              return radius + node.getAttribute('radius');
            }, 0)
          }
        };
      },
      duration: duration
    });

    transformations.push(grouping);
  }

  function ungroupNodes() {
    if (transformations.length > 0) {
      transformations.pop().destroy(duration);
    }
  }
</script>
</body>
</html>