Customizing Layouts

Configuring layout algorithms in your React Flow project provides a powerful way to organize and display data visually. You can efficiently integrate layout algorithms into your application and customize them according to your requirements.

Note: To effectively visualize the outcome of the layout algorithm, it is essential to use Node and Edge types that are capable of accommodating multiple handles and polyline paths.

The useLayout hook serves as the entry point for integrating yFiles layout algorithms into your React Flow components. It provides a callback to invoke the layout algorithm when needed.

When configuring the layout, the fundamental requirement is specifying the layout name. Optionally, you can further refine the layout by providing additional properties, such as routing styles, and defining mappings for individual elements, such as port candidates.

The layout is automatically executed and applied to the current node and edge data within the flow.

For scenarios where the layout computation is resource-intensive or time-consuming, you can leverage asynchronous layout computation using web workers. By offloading the computation to a separate thread, you ensure that the main UI thread remains responsive.
To enable asynchronous layout calculation, instantiate a web worker that invokes initializeWebWorker, then pass this worker to the useLayout hook.