update markers example with color changing on selection #1005
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
There was a problem hiding this comment.
Pull Request Overview
This PR updates the markers example to demonstrate color changing functionality when edges are selected. The changes add a custom edge component that dynamically changes its color and marker when selected.
Key changes:
- Adds a custom edge component with selection-based styling
- Creates a new selected marker definition in SVG
- Includes proper null checking for DOM container
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| index.tsx | Adds null check for DOM container before creating React root |
| index.css | Adds styling for custom edge labels (unused in current implementation) |
| CustomEdge.tsx | New custom edge component that changes color and marker when selected |
| App.tsx | Integrates custom edge type, adds new node/edge, and defines selected marker SVG |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Idea from meeting
|
|
As discussed, reporting the performance comparison of the stress example with markers defined normally vs in a custom edge: Current marker usage: 
Marker defined in custom edge: 
It seems like there is a small but relevant performance drawdown on re-mount |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
good stuff! thanks :) |
Related to xyflow/xyflow#5441