React Flow: Proof of Concept for Diagram Editor Enhancements
Budget: $250 – $750 USD
Objective: Implement three specific functionalities in the diagram editor using React Flow as a proof of concept.
Scope of Work:
Auto Arrangement of States:
- Implement automatic alignment of diagram nodes (states) in both horizontal and vertical orientations.
- The feature should support rearranging states without manual intervention, optimizing space and readability.
Visualize Jumper Points:
- Develop a mechanism to display "jumper points" when two connection lines intersect.
The jumper should visually indicate the intersection, making the diagram clearer and easier to interpret.
Prevent Overlapping States:
- Create a function that ensures state boxes (nodes) do not overlap.
The diagram editor should automatically adjust positions to prevent one state from standing on another.
Deliverables:
-A React Flow-based diagram editor with the following features:
-Nodes are arranged automatically in a horizontal or vertical layout.
-Jumper points are visible where connection lines intersect.
-State boxes do not overlap, maintaining clear separation of states and connection lines.
Please respond if you have experience and deep knowledge on React Flow and you already built similar flow editor.
For this POC work we have 1 week and at the end of that week we are targetting to get sample code that do above requirements
Scope of Work:
Auto Arrangement of States:
- Implement automatic alignment of diagram nodes (states) in both horizontal and vertical orientations.
- The feature should support rearranging states without manual intervention, optimizing space and readability.
Visualize Jumper Points:
- Develop a mechanism to display "jumper points" when two connection lines intersect.
The jumper should visually indicate the intersection, making the diagram clearer and easier to interpret.
Prevent Overlapping States:
- Create a function that ensures state boxes (nodes) do not overlap.
The diagram editor should automatically adjust positions to prevent one state from standing on another.
Deliverables:
-A React Flow-based diagram editor with the following features:
-Nodes are arranged automatically in a horizontal or vertical layout.
-Jumper points are visible where connection lines intersect.
-State boxes do not overlap, maintaining clear separation of states and connection lines.
Please respond if you have experience and deep knowledge on React Flow and you already built similar flow editor.
For this POC work we have 1 week and at the end of that week we are targetting to get sample code that do above requirements