Draw problem when annotation is above port

[Gabo EE]

Hello,

when annotation is added, port cannot be hovered with draw tool.

Example: https://stackblitz.com/edit/angular-khc79d-xeejrj

Functionaly should be fixed at: https://www.syncfusion.com/forums/151098/nodeconstraint-can-inconnect-but-not-outconnect

Attachment: chrome_BlUFc4cKaT_f506c2be.zip

[Gabo EE]

It does not even work when annotation has 

{

     visibility: false,

}

[Aravind Ravi]

Hi Gabo, 

 

Solution 1: When you add annotations at run time it will render over the port if both annotations and port have the same offset. In the sample, you have added annotations and ports both at the same offset. When you mouse over on port, annotation is got as an element under mouse, not port. So that when mouse over on port tool does not change as a drawing tool. We have modified your sample to a mouse hover on the port change tool as drawing tool. In this sample, we have added annotation content as “on the first render and change the annotation content through a button click. Please find below code snippet how to add annotation content 

 

public nodes: NodeModel[] = [ 

 

  {  

   id: 'operation', width:100,height:100,offsetX:250,offsetY:200, 

   constraints: NodeConstraints.Default &~(NodeConstraints.OutConnect),  

   shape: { type: 'Flow', shape: 'Terminator' }, 

   style: { fill: '#357BD2', strokeColor: 'white' }, 

   annotations: [{ 

        content: "", 

        style: { color: 'black' }, 

        offset: {x: 1, y: 0.8}, 

   }], 

   ports: [ 

      { 

       id:'operation-port2', 

       offset: {x: 1, y:0.8},  

       shape: 'Circle', 

       constraints: (PortConstraints.Default | PortConstraints.Draw) &~PortConstraints.InConnect, 

       visibility: PortVisibility.Visible,  

     } 

   ], 

   

 }, 

   

]; 

 

//Change Annotation Content 

 

public onDefaultModeClick(){ 

    this.diagram.nodes[0].annotations[0].content = "PortPortPortPort"; 

   this.diagram.dataBind(); 

  } 

 

Sample: https://stackblitz.com/edit/angular-khc79d-4mcfm5?file=app.component.ts 

 

Solution 2: When you add an annotation at a run time add an annotation in different offset compared to port offset. So that annotation and port rendered in different offset and mouse hover on port drawing tool appears. 

 

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

 

Regards 

Aravind Ravi 

[Gabo EE]

Can Solution 2 be achieved programmaticaly? Is there any property of annotation that can wrap annotation aroung port?

[Aravind Ravi]

Hi Gabo, 

 

Yes we have an wrapping support for an annotation. By using textWrapping property in annotation we can wrap the annotation in node. For more information about annotation wrapping property please refer to below UG documentation link 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/diagram/labels/?no-cache=1#wrapping 

 

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

 

If we misunderstood your requirements please share us a screen shot of how do you want to arrange annotation around port which would help us to proceed further. 

 

Regards 

Aravind Ravi