Positioning edges arrows one on another | xyflow | Page 1

brisk trench Nov 28, 2023, 12:16 PM

#

Hello everybody!
I encountered a challenge while working with edges - i have multiple nodes connected to one node in one handle. At the end of edges i have arrowhead, and surprisingly each edge has its own ;P the problem is that when one of the edges changes color (to red as marking error), i cannot find a way to put the red arrowhead on top of another, to actually display red one. Any ideas?

small helm Nov 28, 2023, 12:19 PM

#

you can pass an object for markerEnd and also define a color

#

https://reactflow.dev/api-reference/types/edge-marker

brisk trench Nov 28, 2023, 3:07 PM

#

and that is exactly what I do, but i cannot find a way to conditionally place one edge over another, since there place on stack following order from edges config file (where i descirbe source and target)

small helm Nov 28, 2023, 3:09 PM

#

the selected edge should always be on top?

brisk trench Nov 29, 2023, 10:52 AM

#

unfortunatelly, it does not ;/

#

MarkerEnd does not change color, no matter which edge i choose

small helm Nov 29, 2023, 10:53 AM

#

if you want it to be always on top, you need to set "elevateEdgesOnSelect" https://reactflow.dev/api-reference/react-flow#elevate-edges-on-select

#

marker end is a different thing

brisk trench Nov 29, 2023, 10:55 AM

#

i want to make arrow change the color to red, how can i achieve this?

#

is that come css magic i need to add?

#

oh, the property that You provided works!

#Positioning edges arrows one on another