Appearance
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.
ts
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>