Document that edges are rendered below nodes by default

[miko-ck]

What platform were you using when you found the bug?

• React Flow / Svelte Flow version: "@xyflow/react": "^12.0.1", "react": "^18.3.1",
• Browser and version: Safari 17.5 (19618.2.12.11.6)
• OS and version: Mac OS

Live code example

https://reactflow.dev/learn/layouting/sub-flows

Describe the Bug

I feel you're cheating in that example. The parent node always uses a semi-transparent background color, so that the edge shows through. What if I need an opaque background? Well,

Steps to reproduce the bug or issue

1. Go to https://reactflow.dev/learn/layouting/sub-flows
2. scroll to the last example
3. change the backgroundColor of the node with id: 'B' to "blue" or something
4. click the reload button in the example
5. notice: edges within the parent node are not visible anymore

Expected behavior

I expected the edges to be rendered over the background, not under it.

Screenshots or Videos

Additional context

I'm a pro customer.

[miko-ck]

Oh, it turns out that I can work around this using edge.zIndex (not edge.style.zIndex, which was the first thing I tried). I set these higher for nested nodes and that solved the problem for me. So I guess it's more of a documentation problem at this point.

FWIW, I use this little function to process my nodes & edges:

function bumpZIndex<T extends {zIndex?: number}>(nodeOrEdge: T): T {
    return {...nodeOrEdge, zIndex: (nodeOrEdge.zIndex || 0) + 1};
}

and then, when processing a subgraph, I do:

this.nodes.push(...subgraph.nodes.map(bumpZIndex));
this.edges.push(...subgraph.edges.map(bumpZIndex));

[moklick]

I think you have a point here. We should make it more clear in the docs that edges are rendered below nodes by default and that you can change that by using the zIndex attribute of an edge. I will transfer this issue to the web repo.