Style start/end node components #202
Open
kumaradityaraj wants to merge 1 commit into
Open
Conversation
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces the placeholder Start/End React Flow nodes with a dedicated StartEndNode component and introduces corresponding CSS to render Mermaid-style start (single circle) and end (double circle) markers in the workflow diagram editor.
Changes:
- Added a shared
StartEndNoderenderer and wired it intoStartNode/EndNode. - Added new CSS classes for start/end node shapes, plus selected/hover styling.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx | Adds StartEndNode and updates Start/End node components to render it. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css | Adds styling for the new start/end node shapes and their interaction states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+212
to
+223
| <div | ||
| className={`dec-start-end-node ${selected ? "selected" : ""} ${ | ||
| data.hasError ? "has-error" : "" | ||
| }`} | ||
| data-testid={`${type}-node-${id}`} | ||
| > | ||
| {!isStart && <RF.Handle type="target" position={RF.Position.Top} />} | ||
| <div className={isStart ? "dec-start-node" : "dec-end-node"}> | ||
| {!isStart && <div className="dec-end-node-inner" />} | ||
| </div> | ||
| {isStart && <RF.Handle type="source" position={RF.Position.Bottom} />} | ||
| </div> |
| /* start node */ | ||
| export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>; | ||
| export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) { | ||
| // TODO: This component is just a placeholder |
| /* end node */ | ||
| export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>; | ||
| export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) { | ||
| // TODO: This component is just a placeholder |
Comment on lines
+406
to
+423
| .dec-start-end-node { | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .dec-start-node, | ||
| .dec-end-node { | ||
| width: 72px; | ||
| height: 72px; | ||
| border-radius: 50%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| background: var(--color-background, white); | ||
| } |
Comment on lines
+425
to
+443
| /* Start node - green single circle */ | ||
| .dec-start-node { | ||
| border: 1px solid grey; | ||
| background-color: lightgray; | ||
| } | ||
|
|
||
| .dec-end-node { | ||
| border: 1px solid grey; | ||
| background-color: lightgray; | ||
| } | ||
|
|
||
| .dec-end-node-inner { | ||
| position: absolute; | ||
| inset: 6px; | ||
| border-radius: 50%; | ||
| border: 1px solid grey; | ||
| background-color: lightgray; | ||
| pointer-events: none; | ||
| } |
Comment on lines
+445
to
+456
| .dec-start-end-node.selected .dec-start-node { | ||
| box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3); | ||
| } | ||
|
|
||
| .dec-start-end-node.selected .dec-end-node { | ||
| box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3); | ||
| } | ||
|
|
||
| .dec-start-node:hover, | ||
| .dec-end-node:hover { | ||
| box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3); | ||
| } |
Contributor
|
@kumaradityaraj I know not ready for review but I know I mentioned the grey like the edge but looks a bit off next to diagram, can you try the same colours as what we style the entry/exit nodes for light and dark themes please |
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
Style Start and End Nodes and Verify Edge Connectivity
Summary
This PR applies the finalized styling for the custom Start and End workflow nodes and validates their connectivity within the editor. The implementation aligns with the agreed design, providing clear visual indicators for workflow entry and exit points.
Changes
Screenshots