This step shows how to configure a layout algorithm using the information stored in the first label of each node.
In this demo, the preferred alignment for each node within its layer (top, center or bottom) is defined by its label. We use this value to configure the layout algorithm.
Select a different alignment for a node by changing its label text to
Top, Center or Bottom. The layout is
updated automatically after editing a label.
Create new nodes and run a new layout. Newly created nodes will be center-aligned, unless otherwise specified by the user.
|
Note
|
Nodes with label text other than 'Top', 'Center' or 'Bottom' will be center-aligned. |
We create a LayoutData instance that defines how each node should be aligned.
// Configure the layout data using the information from the node labels
const hierarchicalLayoutData = new HierarchicalLayoutData({
nodeDescriptors: (node: INode): HierarchicalLayoutNodeDescriptor =>
new HierarchicalLayoutNodeDescriptor({
// Set the alignment of the node based on the label
layerAlignment: getAlignment(node)
})
})The layer alignment can take values between 0 and 1, where 0 corresponds to top alignment, 0.5 to center alignment and 1.0 to bottom alignment.
function getAlignment(node: INode): number {
const text = node.labels.at(0)?.text.toLowerCase() ?? 'center'
switch (text) {
default:
case 'center':
return 0.5
case 'top':
return 0.0
case 'bottom':
return 1.0
}
}The layout data is used as a parameter for applyLayoutAnimated to pass the information to the layout algorithm.
await graphComponent.applyLayoutAnimated({
layout: hierarchicalLayout,
layoutData: hierarchicalLayoutData,
animationDuration: '1s'
})