feat: Highlight edge path on selection#196
Conversation
Signed-off-by: handreyrc <handrey.cunha@gmail.com>
Signed-off-by: handreyrc <handrey.cunha@gmail.com>
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Adds improved edge-selection visibility in the Serverless Workflow diagram editor to make overlapping/merged edge paths easier to follow by elevating selected edges visually and in render order.
Changes:
- Add a
selected-aware edge path class so selected edges can be styled distinctly. - Update edge change handling to set a high
zIndexfor selected edges. - Add/extend unit tests and introduce a changeset for the feature release.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx | Appends a selected class to edge paths when an edge is selected. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx | Updates onEdgesChange to assign zIndex based on selection state. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css | Adds selected-edge styling to preserve stroke colors and apply a drop-shadow highlight. |
| packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx | Adds parameterized tests verifying selected vs non-selected edge class behavior. |
| packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx | Adds tests around onEdgesChange / zIndex behavior (with a noted test-quality issue). |
| .changeset/edge-path-highlight.md | Declares a minor version bump for the diagram editor package. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: handreyrc <handrey.cunha@gmail.com>
|
|
||
| /* Override React Flow's default selected edge styling to preserve original colors */ | ||
| .dec-root .react-flow__edge.selected .edge-line { | ||
| stroke: #aea6a6 !important; |
There was a problem hiding this comment.
Should we add this color to a css var to make it easier to manage?
| } | ||
|
|
||
| .dec-root .react-flow__edge.selected .edge-line.condition { | ||
| stroke: rgb(59 130 246) !important; |
There was a problem hiding this comment.
I would also extract this color to a var
| const edgeClassName = selected | ||
| ? `${className ?? "edge-line"} selected` | ||
| : (className ?? "edge-line"); |
There was a problem hiding this comment.
| const edgeClassName = selected | |
| ? `${className ?? "edge-line"} selected` | |
| : (className ?? "edge-line"); | |
| const edgeClassName = `${className ?? "edge-line"}${selected ? " selected" : ""}`; |
| expect(typeof onEdgesChange).toBe("function"); | ||
| }); | ||
|
|
||
| it("should apply zIndex correctly when edges are updated", async () => { |
There was a problem hiding this comment.
This test shows this warning, can we fix it?
stderr | tests/react-flow/diagram/Diagram.test.tsx > Diagram Component > onEdgesChange with zIndex updates > should apply zIndex correctly when edges are updated
An update to DiagramEditorContextProvider inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act
|
@handreyrc Thanks for the PR, wondering if when you select an edge with a label, the label stays on top of the line if that label is for that edge For example, here it makes sense that the edge is over |
Signed-off-by: handreyrc <handrey.cunha@gmail.com>
There is a general z-index issue around labels. They are also being drawn behind parent nodes. |
Signed-off-by: handreyrc <handrey.cunha@gmail.com>
Closes: #186
Summary
When paths are merged by the auto-layout, edges may overlap each other making it hard to follow. By selecting an edge it should be possible to clear visualize the whole path of that edge.
Changes