Connectors label coinciding with connector line

[RakhiS]

Hi,

This time the labels of the connectors are coinciding with the connecting line, is there any way, if I can get space in line where the label is printing at the moment. 

for example   

----------test------->

please help

[Shyam G]

Hi Rakhi, 

Please set connector style fill property as white to achieve your requirement. Please refer to a code example and the sample below. 

Code example: 

public connectors: ConnectorModel[] = [ 

    { 

      id: 'connector', 

      sourceID: 'node1', targetID: 'node2', 

      annotations: [{content: "Yes", style: {fill: "white"}}] 

    } 

  ] 

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

Regards, 

Shyam G 

[RakhiS]

working thanks.

[Shyam G]

Hi Rakhi, 

Thanks for your update. 

Regards, 

Shyam G 

[RakhiS]

Hi, if there are two nodes and when I give one connector from first node to another and one connector from second to first node then my both connectors gets overlapped. I want them to be seen different.  please help

[Sivaranjith Jeyabalan]

Hi Rakhi, 

We can establish connection between nodes with port. So that we can avoid connector overlapping. We have created a sample in which we connected two nodes with two connectors using ports. Please find the sample below.

Sample: 3r5fux (forked) - StackBlitz

Please refer this documentation link for more details : https://ej2.syncfusion.com/angular/documentation/diagram/ports/

Regards,

Sivaranjith

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[RakhiS]

Hi,

I want in the same that connectors only get connected to the ports not anywhere else in node, if anyone connects to node and not to connectors then by itself it shifts to port(if possible), how can i achieve this?

[Balasubramanian Manikandan]

You can use InConnect and OutConnect constraints to prevent the connector from connecting nodes, and it only connects to the ports. Refer to the below-mentioned code example, documentation, and sample.

Code Snippet:

 public getNodeDefaults(node: NodeModel): NodeModel {

    node.constraints =

    NodeConstraints.Default &

    ~(NodeConstraints.InConnect | NodeConstraints.OutConnect);

    return node;

  }

Documentation:

https://ej2.syncfusion.com/angular/documentation/diagram/constraints#node-constraints

Sample:

https://stackblitz.com/edit/angular-pkxrgp-7dqxx4?file=app.component.ts,app.component.html