const layout = new HierarchicalLayout()
graph.applyLayout(layout)
// Fit the graph bounds since they changed for the new layout
await graphComponent.fitGraphBounds()This step shows how to use the layout algorithms in yFiles for HTML to automatically place the graph elements.
Automatic layout is one of the main features of the yFiles products. The layout library provides a large set of ready-to-use, highly customizable algorithms for most scenarios. The purpose of this sample is to demonstrate how to run an arbitrary layout algorithm. For an overview of the available layout styles, please see the Layout Styles Demo.
Click the button below to calculate and apply an automatic layout. In this example, the layout is not animated, but applied instantly.
const layout = new HierarchicalLayout()
graph.applyLayout(layout)
// Fit the graph bounds since they changed for the new layout
await graphComponent.fitGraphBounds()An automatic layout can also be applied with an animation. In this sample, we use applyLayoutAnimated to perform the layout, animate it, manage undo and adjust the content rectangle in one call. applyLayoutAnimated runs asynchronously and returns immediately yielding a Promise that we can await or use to catch errors.
// Ensure that the LayoutExecutor class is not removed by build optimizers
// It is needed for the 'applyLayoutAnimated' method in this demo.
LayoutExecutor.ensure() // doing this somewhere in your code should suffice
await graphComponent.applyLayoutAnimated({
layout: new OrganicLayout(),
animationDuration: '1s'
})|
Note
|
applyLayoutAnimated is a convenience method that comes with a lot of parameters that can be used to adjust various aspects of the layout animation. For more customized scenarios, use class LayoutExecutor. |