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.
| {/* You can also define a custom marker in your own Custom Edge component. */} | ||
| <svg style={{ position: 'absolute', top: 0, left: 0 }}> | ||
| <defs> | ||
| <marker | ||
| className="react-flow__arrowhead" | ||
| id="selected-marker" | ||
| markerWidth="20" | ||
| markerHeight="20" | ||
| viewBox="-10 -10 20 20" | ||
| markerUnits="userSpaceOnUse" | ||
| orient="auto-start-reverse" | ||
| refX="0" | ||
| refY="0" | ||
| > | ||
| <polyline | ||
| className="arrowclosed" | ||
| style={{ | ||
| strokeWidth: 1, | ||
| stroke: '#FFCC00', | ||
| fill: '#FFCC00', | ||
| }} | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| points="-5,-4 0,0 -5,4 -5,-4" | ||
| /> | ||
| </marker> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
The SVG element with marker definitions is being rendered for every edge instance. This creates duplicate marker definitions in the DOM. Consider moving the marker definitions to a shared location or using a context to render them only once.
| {/* You can also define a custom marker in your own Custom Edge component. */} | |
| <svg style={{ position: 'absolute', top: 0, left: 0 }}> | |
| <defs> | |
| <marker | |
| className="react-flow__arrowhead" | |
| id="selected-marker" | |
| markerWidth="20" | |
| markerHeight="20" | |
| viewBox="-10 -10 20 20" | |
| markerUnits="userSpaceOnUse" | |
| orient="auto-start-reverse" | |
| refX="0" | |
| refY="0" | |
| > | |
| <polyline | |
| className="arrowclosed" | |
| style={{ | |
| strokeWidth: 1, | |
| stroke: '#FFCC00', | |
| fill: '#FFCC00', | |
| }} | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| points="-5,-4 0,0 -5,4 -5,-4" | |
| /> | |
| </marker> | |
| </defs> | |
| </svg> | |
| {/* The marker definition has been removed from here. Please ensure it is rendered once in a shared location, such as a parent SVG or a dedicated marker-definitions component. */} |
Copilot uses AI. Check for mistakes.
Related to xyflow/xyflow#5441