some nodes are invisible until you hover over them.

[Mithun]

Hi Syncfusion team,

We're using the Diagram component in our app (@syncfusion/ej2-angular-diagrams": "^18.2.48)

Sometimes we observe that a few nodes are invisible until your hover over them.

Please see attached zip package (includes both gif screenshot as well as diagram json).

Please let me know if any additional details are required to troubleshoot this issue.  

Thanks,

-Mithun

Attachment: repro_309737ad.zip

[Aravind Ravi]

Hi Mithun, 

 

We have created a sample to show all the nodes in the diagram on initial rendering instead of hover on it. On analyzing the provided JSON data and sample, you have used same Z index value for most of the node and connectors. So that on initial nodes does not gets rendered and while hover on that place nodes are visible. By default, in the diagram, you need to set different zindex value for the nodes and connectors. If you set same z index value means then nodes are not get rendered. This is the default behavior of the diagram elements. We have modified the JSON data by setting different Z index value for the node and connectors and load that JSON data in the diagram After load the diagram, all nodes in the diagram get rendered properly. Similarly in your sample, please so not set same Z index value for the nodes or connectors.  

 

Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-c6dmfq-ycfrxu 

 

For your information, please find the Z-order index behavior in our diagram control.  

  

• While loading or deserialzing  the diagram elements or during automatic layouting, we used to render all the nodes and then the connectors. In this case, all the connectors will be having the higher z-index value than all the nodes. All the connectors will be positioning above the nodes.
• When creating dynamically through interaction, drag and drop from stencil, or clipboard, we set the z-index value for every element.

For example:  

1)     First element – consider it as node – its z-index value is set as 0  

2)     Second element  – consider it as connector  – its z-index value is set as 1  

3)     Third element – consider it as connector  – its z-index value is set as 2   

Likewise, zindex value will be increment for each diagram element (node or connector) in the order of addng into the diagram surface.  

 

Regards 

Aravind Ravi 

 

 

[Mithun]

Thanks Arvind. I'll look into my codebase as to how the z-index might have occurred.

Thanks,

-Mithun

[Aravind Ravi]

Hi Mithun, 

Thanks for the update. 

Regards 

Aravind Ravi