Define edge types and create React Flow custom edge components#135
Merged
ricardozanini merged 1 commit intoserverlessworkflow:mainfrom May 5, 2026
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds custom React Flow edge types (default, condition, error) to the Serverless Workflow diagram editor, including waypoint-based routing, labels, and arrow markers, plus accompanying styling and tests.
Changes:
- Introduces
EdgeTypesmapping and custom edge renderers with label rendering and waypoint path support. - Updates the sample
Diagramto use edge types, show labels/waypoints, and apply default arrow markers. - Adds CSS styling for edge strokes and edge labels, plus a new test suite for edge types and waypoint path generation.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx | New tests for edge type registration/rendering and createPathFromWayPoints. |
| packages/serverless-workflow-diagram-editor/src/styles.css | Registers a new CSS layer for custom edge labels. |
| packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx | Adds custom edge components, label renderer, and waypoint-to-SVG-path helper. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx | Wires edgeTypes, edge sample data (types/labels/waypoints), and default arrow markers into React Flow. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css | Adds styling for edge lines and edge labels (including layer usage). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
handreyrc
force-pushed
the
add-custom-edges
branch
from
4fd7b01 to
55418e9
Compare
lornakelly
reviewed
May 1, 2026
Contributor
|
Thanks for Pr @handreyrc just added a few comments |
handreyrc
force-pushed
the
add-custom-edges
branch
from
55418e9 to
26ef7c6
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
handreyrc
force-pushed
the
add-custom-edges
branch
from
26ef7c6 to
588825c
Compare
handreyrc
force-pushed
the
add-custom-edges
branch
from
588825c to
d47810e
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
handreyrc
force-pushed
the
add-custom-edges
branch
from
d47810e to
38573d6
Compare
fantonangeli
suggested changes
May 4, 2026
Member
fantonangeli
left a comment
fantonangeli
left a comment
There was a problem hiding this comment.
Thank you @handreyrc , I suggested the use of it.each to avoid repetitions in tests
handreyrc
force-pushed
the
add-custom-edges
branch
from
38573d6 to
bf4ada9
Compare
handreyrc
force-pushed
the
add-custom-edges
branch
from
bf4ada9 to
b183d90
Compare
fantonangeli
approved these changes
May 4, 2026
Member
fantonangeli
left a comment
fantonangeli
left a comment
There was a problem hiding this comment.
LGTM thanks @handreyrc !
lornakelly
reviewed
May 5, 2026
lornakelly
reviewed
May 5, 2026
handreyrc
force-pushed
the
add-custom-edges
branch
from
b183d90 to
11dfa6b
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: handreyrc <handrey.cunha@gmail.com>
handreyrc
force-pushed
the
add-custom-edges
branch
from
11dfa6b to
e26dccf
Compare
Contributor
Author
|
If you do not have further considerations this PR is good enough to be merged. Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #52
Summary
This PR adds react flow edge types, customizable edge components and support to calculated waypoints.
Changes
custom-edges.mp4