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