Auto Layout and Figma-like Edge Editing Demo

[idootop]

Hi everyone, I've created a demo showcasing the powerful auto layout and edge editing features of ReactFlow. If you're looking for a solution to streamline your workflow and enhance your graph editing experience, this demo is for you!

👉 Check it out: idootop/reactflow-auto-layout

🚀 Online demo: https://reactflow-auto-layout.vercel.app

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

[moklick]

Hi @idootop! Wow, this is pretty impressive. Thanks for sharing. I will take a closer look asap :)

[a3ng7n]

This looks awesome; would totally love to use this. Though I'm finding it difficult to follow - is there a primer by chance on how the code is organized? I'm selfishly interested in the edge routing and drag editing.

[idootop]

Awesome! Your effort to translate the comments is much appreciated—though ChatGPT might be a better option than Google Translate. 😄 I'd be delighted to see your PR with the translated comments. Thanks again for your enthusiasm and support!

[a3ng7n]

Pretty sure I got everything, and didn't munge any linting codes, but I only did a cursory glance to make sure they "made sense": idootop/reactflow-auto-layout#1

[idootop]

LGTM, merged :) Thank you for submitting the PR and taking the time to translate the code comments into English.

[idootop]

hey @a3ng7n, Just wanted to let you know that I've polished up the English translation based on your work. Feel free to take a look at the updated translations whenever you have a chance. Thanks again for your contributions!

[moklick]

It's getting even better 🤩