Edges towards nested Nodes are rendered behind the parent Node

[ASchwad]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Edges to nested nodes are rendered behind the parent of the nested Node. If the parent node has a fill, the edge is hidden.

Expected behavior

Edges should be always rendered at the very front.

Minimal reproduction of the problem with instructions

Note, that the fill has some opacity to visualize the problem. This example will be in the storybook in the docs soon (#30).

Code to reproduce:

const nodeDimensions : any = {
    typeA: {
      width: 190,
      height: 150
    },
    typeB:{
      width: 80,
      height: 80
    }
  }

const nodes: NodeData[]= [
    { 
      id: '1', 
      text: '1',
    },
    { 
      id: '2',
      label: 'A',
      name: 'Process XYZ',
      description: 'Description of XYZ',
      // describes padding for nested nodes
      nodePadding: [120, 50, 50, 50],
      ...nodeDimensions.typeA
    },
    { 
      id: '2.1',
      parent: '2',
      label: 'B',
      name: 'Task 1',
      ...nodeDimensions.typeB
    },
    { 
      id: '2.2', 
      parent: '2', 
      label: 'B',
      name: 'Task 2',
      ...nodeDimensions.typeB
    },
    { 
      id: '3',
      text: '3'
    }
  ];`

const edges: EdgeData[] = [
    {
      id: '1-2.1', 
      from: '1', 
      to: '2.1' 
    }, 
    { 
      id: '2.1-2.2', 
      parent: '2',
      from: '2.1', 
      to: '2.2' 
    }, 
    { 
      id: '2.2-3', 
      from: '2.2', 
      to: '3' 
    },
  ];

function prepareNode(node){
    const data = node.properties;
    switch (data.label){
      case 'A':
        return (
          <Node style={{fill: 'lightgreen', opacity: 0.8}}>
            <div style={{textAlign: "center"}}>
              <h4>{data.name}</h4>
              <p>{data.description}</p>
            </div>
          </Node>
        )
      case 'B':
        return (
          <Node style={{fill: 'lightyellow'}}>
            <div style={{textAlign: "center"}}>
              <h4>{data.name}</h4>
            </div>
          </Node>
        )
      default:
        return (
          <Node/>
        )
    }
  }

return (
    <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
      <Canvas
        // required to enable edges from/to nested nodes
        layoutOptions={{'elk.hierarchyHandling':'INCLUDE_CHILDREN'}}
        direction='RIGHT'
        nodes={nodes}
        edges={edges}
        node={(node: NodeProps) => prepareNode(node)}
      />
    </div>
  );

[C0DK]

I think i fixed this in a recent PR. can you verify if it's still an issue in master?

[amcdnl]

Ya - this is resolved now but there is another issue i need to fix.