1. Home
  2. Forum
  3. Angular - EJ 2
  4. Weird issue with z-index after reloading diagram from json

Weird issue with z-index after reloading diagram from json


Hello Syncfusion Team, 

We're observing a z-index issue with Diagram control (we're using the latest version but this issue occurs for previous versions as well). 

This one is a little hard to explain on paper.

Assume we insert three symbols on the diagram canvas. Their z-index get assigned (by the diagram control) as follows:

  • symbol-1, with z-index = 0
  • symbol-2, with z-index = 1
  • symbol-3, with z-index = 2

Now let's delete symbol-2 (which has z-index = 1). So the canvas will now look like:

  • symbol-1, with z-index = 0
  • symbol-3, with z-index = 2

Now add a new symbol-4, it'll get assigned z-index = 3. The canvas will now look like:

  • symbol-1, with z-index = 0
  • symbol-3, with z-index = 2
  • symbol-4, with z-index = 3

Now save the diagram json (by calling SaveDiagram()). 

Now reload from saved diagram json (by calling LoadDiagram()) 

Now add a new symbol-5. Weirdly, it'll get assigned z-index = 1 (it'll occupy the 'hole' left behind by deleted symbol-2 which had z-index = 1). The canvas will now look like:

  • symbol-1, with z-index = 0
  • symbol-5, with z-index = 1
  • symbol-3, with z-index = 2
  • symbol-4, with z-index = 3

Adding another new symbol-6 will give it z-index = 4. Canvas will look like:

  • symbol-1, with z-index = 0
  • symbol-5, with z-index = 1
  • symbol-3, with z-index = 2
  • symbol-4, with z-index = 3
  • symbol-6, with z-index = 4

In summary: After reloading diagram from JSON, the max recorded z-index is forgotten and new symbols will be inserted into "holes" (if any). This is bad for the user experience (since many times these new symbols with lower z-index are completely covered by older symbols with higher z-index). 

Only if all "holes" are filled, then max recorded z-index is used.

I've created a stackblitz demo for this issue (this demo uses a slightly older version of the diagram component, but the same issue repro'es on latest version as well). 

https://stackblitz.com/edit/diagram-zindex-hole?file=src/app/app.component.ts


Please let me know if any additional details are needed.


Thanks,

-Mithun


5 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team November 2, 2020 09:00 AM UTC

Hi Mithun, 

We are able to reproduce the reported issue at our end. We are validating the issue and update you with more details on November 3rd 2020. 

Regards 
Aravind Ravi 


AR Aravind Ravi Syncfusion Team November 3, 2020 10:36 AM UTC

  
Hi Mithun,    
    
Reported Issue : Node z index behaves incorrectly 
      
We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on November 24th 2020 weekly patch release.    
 
    
Regards,    
Aravind Ravi 


MI Mithun November 5, 2020 11:10 AM UTC

Thanks Aravind. Will wait for the patch to be released on Nov 24th.

Thanks.
-Mithun 

AR Aravind Ravi Syncfusion Team November 6, 2020 04:23 AM UTC

Hi Mithun, 

Thanks for the update. As we said earlier, We will fix this issue and provide the patch on November 24th 2020 weekly patch release.     
  
     
Regards 
Aravind Ravi 


AR Aravind Ravi Syncfusion Team November 17, 2020 12:35 PM UTC

Hi Mithun, 

We have fixed the reported issue and included it in our patch release (v18.3.48) which is rolled out successfully.    
    
Please upgrade to the latest version packages to resolve this issue.          
   
Regards,   
Aravind Ravi  



Marked as answer
Loader.
Up arrow icon