All versions of this documentation
X

Node resizing

Select one or multiple nodes, and resize them by dragging the blue handle in their top-right corner.

Open in a new window.
          <title>Manual resizing</title>
<script src="../build/ogma.min.js"></script>
<div id="graph-container" style="top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0;"></div>
<script>
  var ogma = new Ogma({
    container: 'graph-container',
    renderer: 'canvas'
  });

  ogma.addNodes([
    {id: 0, attributes: {x: 0,   y: 0,   shape: 'star'}},
    {id: 1, attributes: {x: 200, y: 0,   shape: 'square'}},
    {id: 2, attributes: {x: 100, y: -70, shape: 'equilateral'}},
    {id: 3, attributes: {x: 100, y: 70,  shape: 'diamond'}},
    {id: 4, attributes: {x: 100, y: 0,   shape: 'cross'}},
    {id: 5, attributes: {x: 140, y: 30,  shape: 'circle'}},
  ]);

  // Assign a random size between 1 and 10 to each node
  ogma.getNodes().forEach(function (node) {
    node.setAttributes({radius: Math.round(Math.random() * 10) + 1 });
  });

  ogma.view.locateGraph().then(function() {
    ogma.modules.resizing.enable();    // enable the behavior
    ogma.getNode(4).setSelected(true); // start resizing a random node
  });

</script>