please provide example of stack-oder (zINDEX) on Diagram JS library

Question

Hi,the online doc doesnt provide an example of how to correctly use and modify zIndex (stack order) on nodeshttps://ej2.syncfusion.com/javascript/documentation/diagram/nodes/#stack-ordercould you please provide an example both when nodes are declared and at runtime?Imagine 4 nodes: black, red, blue, greenallow me to fix zIndex property when they are declared and then modify them at runtime (i.e. by right-click > menu "move forward" )

Gowtham Gunashekar · Accepted Answer

Hi Luigi,  
 




, would be possible to (1) get an example where AFTER Nodes declaration inside index.JS, the zIndex of all nodes will be modified?  
 
for instance swapping node1 with node4 
 
set node1.zIndex = 4 
set node2.zIndex = 2 
set node3.zIndex = 3 
set node4.zIndex = 1 
 
 
and (2) get the zIndex of all nodes printed out in a separate window when zIndex of a given node is modified in RUNTIME by the right-click menu? 
 

We suggest you to set zIndex directly to the respected node to get the expected result, but the predefined zIndex should not repeated, zIndex is a unique value . we have added a sample link to demonstrate how set the zIndex in the node collection. 
 
Sample link: https://stackblitz.com/edit/bwxkjc-ok9vq8?file=index.js  
 
We can use contextMenuClick event to get the zindex of all node while change the zIndex using context menu order commands. We have added  the suggestion in the shared sample for you reference.  
 
Code snippet: 
 




contextMenuClick: function(args) { 
    if ( 
      args.item.text === "Bring To Front" || 
      args.item.text === "Move Forward" || 
      args.item.text === "Send To Back" || 
      args.item.text === "Send Backward" 
    ) { 
      for (var i = 0; i < diagram.nodes.lenght; i++) { 
        console.log( 
          "node ID: " + 
            diagram.nodes[i].id + 
            " node zIndex: " + 
            diagram.nodes[i].zindex 
        ); 
      } 
// add your code  
    } 
  } 
} 
 


zINDEX should be positive or negative? is ZERO allowed? 

zIndex should be positive , which is start from 0 to positive infinity, we don’t recommend any gap in zIndex in diagram, which means if the diagram consist four nodes means zIndex should have range between 0 to 3 and should not set range like 0,1,2 and 100 cause the long gap between 2 and 100. 
 
 
Regards, 
Gowtham.

Gowtham Gunashekar · Answer

Hi Luigi, 
 
We have added a sample link to demonstrate how to render the nodes and connector in zIndex based and change the zIndex using the context menu which can be shown by right click on the node. We have added a video link for your references. 
 
Sample Link: https://stackblitz.com/edit/bwxkjc-mpyrj5?file=index.js 
Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/zIndexAlign-1613532517.zip 
 
Regards,    
Gowtham

Luigi Grasso · Answer

thanks for the answerwhat I guess is that zIndex is set automatically -incremented- when nodes are declared inside index.JS so that all nodes can overlap and zIndex will be always different for each node (there could not be two nodes with same zIndex)after declaration of node1, node2, node3, node4 (in this order!) the zIndex will be something like thisnode1.zIndex will be equal to 1node2.zIndex will be equal to 2node3.zIndex will be equal to 3node4.zIndex will be equal to 4please, would be possible to (1) get an example where AFTER Nodes declaration inside index.JS, the zIndex of all nodes will be modified?  for instance swapping node1 with node4set node1.zIndex = 4set node2.zIndex = 2set node3.zIndex = 3set node4.zIndex = 1and (2) get the zIndex of all nodes printed out in a separate window when zIndex of a given node is modified in RUNTIME by the right-click menu? last questionzINDEX should be positive or negative? is ZERO allowed?BR

Luigi Grasso · Answer

thanks for your answer, all is clearcould you please just check last point?the https://bwxkjc-ok9vq8.stackblitz.io/ link never start, it remains in "Start dev server" page and cannot load the appit happened to me other demo too and cannot find the issueAttachment: Untitled_a48788c0.zip

Gowtham Gunashekar · Answer

Hi Luigi, 
 
We can open the shared sample link at our side, however we have added the sample link which can be run in your machins, for your references. 
 
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ZindexSample803743806 
 
Regards, 
Gowtham