Annotation z-index

[Gabo EE]

Hello, 

is there any setting that can set z-index of annotation? I want to have annotation over node.

Screen of problem in attachment.

Attachment: chrome_hC4myliUrE_46a59cff.zip

[Gowtham Gunashekar]

Hi Gabo,     

     

Node/connector are the group of diagram elements and annotations, ports are the child elements of the node / connector. So, we cannot set the z-Index of an annotation directly. We can able to set the z index only for the node or connector.    

   

From your attached image, it seems  the lengthy red annotation belongs to a connector and that connector’s z-index is less than the node’s z-index  that’s why the lengthy annotation takes place under the node. You can use bringtofront API to set the connector’s z-index as higher than the node. We have added the documentation link for the bringtofront API.    

   

Documentation  Link: https://ej2.syncfusion.com/angular/documentation/api/diagram/#bringtofront 

   

// select the connector that has to move   

this.diagram.select([this.diagram.connectors[0]]);   

// call this method to bring the selected nodes or connectors to front   

this.diagram. bringToFront();   

     

     

Regards     

Gowtham G     

 

[Gabo EE]

Can be be done without selecting node? Because when selected, selected node by user is changed and it breaks UX

I think this should be done declaratively.

[Shyam G]

Hi Gabo, 

To put an annotation over a node, please use diagram node annotation template property to achieve your requirement. Please refer to a code example and the sample below. 

 

Code example: 

//Sets the default values of nodes 

public getNodeDefaults(obj: NodeModel): NodeModel { 

    obj.width = 40; obj.height = 40; 

    //Initialize shape 

    obj.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 7 }; 

    obj.annotations = [ 

      { 

        //annotation template and an id binded here is an annotation id 

      template: '<div style="width:40px;height:20px;background-color:white;margin-left:-15px">${id}</div>', 

      offset: {x:0.5, y:1.1} 

      } 

    ] 

    return obj; 

}  

 

 

Sample: https://stackblitz.com/edit/angular-n3tnka-qg9dqw?file=app.component.ts 

  

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/labels/?no-cache=1#template-support-for-annotation 

Regards, 

Shyam G