active edge path is not highlighted fully and is covered by inactive edge

[mahamzafar979]

Hi,

I want to highlight the edge on hover over it but the inactive edge is covering the active edge path as shown in the below image.

Is there a way to highlight the whole edge?
Also, I need to change the color of the edge on hover. To achieve this I used mouse enter and mouse leave events. It is working fine but I also change the color of the edges on the click event on a node after which the changes on mouse enter and leave events are not being rendered.

[bcakmakoglu]

"The interactive edge"? What edge?
Have you tried just adding a higher z-index to your highlighted edge?

The second part of your question is also unclear to me.

Please provide a proper reproduction (like a sandbox) with steps to reproduce because this description tells me almost nothing.

[mahamzafar979]

For the First part I have reproduce the issue on the following sandbox
https://codesandbox.io/s/edges-example-6qyc8s?file=/src/App.vue
To Reproduce:

1. hover over the edge with id 'e1-2'
2. Notice that the path color is change to dark gray but even after providing z-index its not fully highlighted, its still light gray from the start

[bcakmakoglu]

I see - that's currently just how it works. Edges are stacked by the order they are inside the state.
Adding an arbitrary z-index isn't gonna change that (you should check your browser dev tools to see that your zindex isn't active anyway).
Tbh it works the exact same way in React Flow.
I might be able to change that behavior at some point but right now, we're stuck with what we have 😅

[mahamzafar979]

Hi,
Thanks for the reply. I found a temporary workaround for it.
Hover on edges stops working once I change the edge stroke by clicking on node
Can you check the below sandbox for reproduction of above issue?
https://codesandbox.io/s/edges-example-6qyc8s?file=/src/App.vue

1. Hover on edge with Id 'e1-2' and notice edge color is being change to black
2. Now click on node 1 and notice its connected edges stroke is changed to green
3. Click outside the node and notice edges get back to their gray stroke state
4. Now hover again on edge with Id 'e1-2' edge stroke will not change to black now.

It should change the color of edge on hover but somehow the stroke doesn't gets updated?

[bcakmakoglu]

sorry, i'm a bit sick currently, so I'll keep my response short 😅

Try this instead:

onEdgeMouseEnter((event) => {
  event.edge.style = { ...(event.edge.style || {}), zIndex: 100, stroke: '#1f2937' }
})
onEdgeMouseLeave((event) => {
  event.edge.style = { ...(event.edge.style || {}), zIndex: 10, stroke: '#d1d5db' }
})

[mahamzafar979]

Thank you. It fixed the issue.