Node resizing

This example shows how to use the resize tool to manually resize nodes. Select one or multiple nodes, and resize them by dragging the blue handle in their top-right corner.

index.tsindex.html

import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
  container: 'graph-container'
});

await 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: 'cross' } },
  { id: 4, attributes: { x: 100, y: 0, shape: 'diamond' } },
  { id: 5, attributes: { x: 140, y: 30, shape: 'circle' } }
]);
ogma.styles.addRule({
  nodeAttributes: {
    color: '#808080'
  }
});
ogma.styles.setSelectedNodeAttributes({
  outerStroke: '#04ddcb'
});
ogma.styles.setHoveredNodeAttributes({
  outerStroke: 'inherit',
  color: '#3a3535'
});

// Assign a random size between 1 and 10 to each node
await ogma.getNodes().setAttribute(
  'radius',
  ogma.getNodes().map(() => Math.round(Math.random() * 10) + 5)
);

await ogma.view.locateGraph();

const color = '#0094ff';
// enable the behavior
ogma.tools.resize.enable({
  color,
  sizeIndicatorColor: color
});
ogma.getNode(4)!.setSelected(true); // start resizing a random node

html

<body>
  <head></head>
  <title>Manual resizing</title>

  <div
    id="graph-container"
    style="top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0"
  ></div>
  <script type="module" src="index.ts"></script>
</body>

Node resizing ​

Node resizing