Define edge types and create React Flow custom edge components by handreyrc · Pull Request #135 · serverlessworkflow/editor

handreyrc · 2026-05-01T00:54:15Z

Closes #52

Summary

This PR adds react flow edge types, customizable edge components and support to calculated waypoints.

Changes

Added edge types to initialize react flow with the supported ede types.
Added customizable edge react components for default, error and conditional edge types.
Added edge label support.
Added orthogonal behavior to nodes without predefined waypoints.
Added support to waypoints.
Added arrow to the end of the edges.
Added support to animated edges.
Tests ensuring that all three edge types are supported and renderable by react flow.

custom-edges.mp4

Copilot

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 EdgeTypes mapping and custom edge renderers with label rendering and waypoint path support.
Updates the sample Diagram to 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.

lornakelly · 2026-05-01T13:33:27Z

+    const default_n4n5 = waitFor(() => screen.getByTestId("n4-n5"));
+    const error_n5n6 = waitFor(() => screen.getByTestId("n5-n6"));
+
+    expect(default_n1n2).not.toBeNull();


waitFor returns a promise so will never be null, if you change to toBeInDocument()

@lornakelly
Testing react flow edge components is a bit complicated, the content is later injected into an <svg> tag so it is basically a path with styles.
I refactored the tests with a different approach to get them tested properly.

lornakelly · 2026-05-01T13:40:05Z

+/* Condition Edge */
+export type ConditionEdgeType = RF.Edge<BaseEdgeData, typeof GraphEdgeType.Condition>;
+export function ConditionEdge({
+  id,


There is a lot of repetition in the 3 edge types, what do you think about making one CustomEdge that accepts className, type, ...props and then, for example, have ErrorEdge return the CustomEdge specifying a className and type (GraphEdgeType.Error?)

Or you think moving forward they will have to be spearate?

We may need it if we need to handle task types, we don't need it for now.
I created a CustomBaseEdge to avoid repetition.

lornakelly · 2026-05-01T13:40:48Z

-    cursor: grabbing !important;
-  }
+    .dec-root .diagram-background {
+        --xy-background-pattern-color: #ccc;


are these changes form running pnpm format?

I opened those files with a different IDE to solve some comflics and I let it format the file.
I ran the pnpm format to adjust it back to what it should be.
It should be fixed.

lornakelly · 2026-05-01T13:46:56Z

+  });
+
+  it("render custom edge types", async () => {
+    const nodes: RF.Node[] = [


Maybe we move the nodes and edges here into file(s) in the test fixtures folder? can be reused easily then and less clutter in test file?

The tests were refactored.
Please check it again.

lornakelly · 2026-05-01T13:47:27Z

Thanks for Pr @handreyrc just added a few comments

Copilot

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.

Copilot

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.

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Copilot AI review requested due to automatic review settings May 1, 2026 00:54

Copilot started reviewing on behalf of handreyrc May 1, 2026 00:54 View session

Copilot AI reviewed May 1, 2026

View reviewed changes

handreyrc force-pushed the add-custom-edges branch from 4fd7b01 to 55418e9 Compare May 1, 2026 01:48

handreyrc requested review from fantonangeli, kumaradityaraj and lornakelly May 1, 2026 01:55

lornakelly reviewed May 1, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings May 1, 2026 15:28

handreyrc force-pushed the add-custom-edges branch from 55418e9 to 26ef7c6 Compare May 1, 2026 15:28

Copilot started reviewing on behalf of handreyrc May 1, 2026 15:28 View session

Copilot AI reviewed May 1, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx

handreyrc force-pushed the add-custom-edges branch from 26ef7c6 to 588825c Compare May 1, 2026 16:09

Copilot AI review requested due to automatic review settings May 1, 2026 17:03

handreyrc force-pushed the add-custom-edges branch from 588825c to d47810e Compare May 1, 2026 17:03

Copilot AI reviewed May 1, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx Outdated

Comment thread packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx

Add custom edges

38573d6

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

handreyrc force-pushed the add-custom-edges branch from d47810e to 38573d6 Compare May 1, 2026 17:22

handreyrc requested a review from lornakelly May 1, 2026 18:47

Conversation

handreyrc commented May 1, 2026

Summary

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly May 1, 2026

Choose a reason for hiding this comment

Uh oh!

handreyrc May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lornakelly May 1, 2026

Choose a reason for hiding this comment

Uh oh!

handreyrc May 1, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly May 1, 2026

Choose a reason for hiding this comment

Uh oh!

handreyrc May 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lornakelly May 1, 2026

Choose a reason for hiding this comment

Uh oh!

handreyrc May 1, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly commented May 1, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

handreyrc May 1, 2026 •

edited

Loading