ReactFlow Auto Layout Demo

A demo showcasing the auto layout and Figma-like edge editing capabilities of ReactFlow.

👉 View Demo: https://reactflow-auto-layout.vercel.app

✨ Highlights

1. Node Auto Layout

• Supports various auto layout algorithms like Dagre, ELK, D3-hierarchy, D3-dag and more.
• Enables automatic layout of nodes with dynamic sizing.
• Supports automatic layout for multiple subflows.
• Allows dynamic adjustment of layout direction, node spacing, port sorting, and other layout parameters.

algorithms.mp4

2. Edge Auto Routing

• Utilizes the A* search algorithm combined with Manhattan Distance to find the optimal path for edges.
• Ensures minimal overlap and intersections between edges and nodes at both ends.

dragging.mp4

3. Edge Polyline Drag Editing

• Edges are drawn as right-angled polylines with rounded corners.
• Edges consist of control points, and the line segments between control points can be moved by dragging the control handles.
• During dragging, nearby control points and line segments are automatically merged, and new control points can be automatically split out.

merge.mp4

🌲 Introduction

This demo is divided into several modules based on functionality, most of which can be directly copied and used. Let's break it down:

Basic Types:

• src/data/types.ts: Contains type definitions for node and edge data. Reviewing this will help you understand the rest of the code.

Node Auto Layout:

• src/layout/node/algorithms: Contains implementations of various node layout algorithms.
• src/layout/useAutoLayout.ts: Handles the auto layout process, including logic for dynamically adapting to node sizes.

Edge Editing Functionality:

• src/layout/edge/index.ts: Start here to explore the control point generation algorithms and logic for drawing rounded corner edge paths.
• src/layout/edge/algorithms/index.ts: Core of the edge auto-routing algorithm. Refer to the LogicFlow 边的绘制与交互 article for more details.
• src/components/Edges/EdgeController/index.tsx: Follow this to understand how edge segment drag events are handled.
• src/components/Edges/EdgeController/smart-edge.ts: Manages logic for edge auto-merging/splitting, similar to Figma.

These are the key modules of the project. While it might seem complex at first, the overall logic is straightforward. If you have any questions, feel free to raise an issue.

❤️ Acknowledgement

1. ReactFlow: The core diagrams engine empowering this project.
2. The D3-hierarchy auto layout approach primarily referenced from: flanksource-ui
3. The Edge auto-routing approach mainly referred to: LogicFlow 边的绘制与交互
4. Special thanks to a3ng7n for the invaluable English comment translations.