restrict target node port when drawing a connector

[Julian Lyndon-Smith]

so, now that I can start to draw a connector between two nodes, I also want some restrictions.

Each node has 2 ports, `in` and `out`

I want to be able to draw a connector between an out port and an in port  - in other words I can't start connecting from an in port, and I can't connect to an out port

Is this possible ?

[Shyam G]

Hi Julian, 

 

Please use connectionChange event to achieve your requirement. We have created a sample in which we have two ports named as ‘In’ and ‘Out’ for each node. when you drag the connector’s sourceEndPoint, you can connect only to the node’s  ‘Out’ port only. Similarly, when you drag the connector’s targetEndPoint, you can connect only to the node’s ‘In’ port only. To prevent the port connection, we should cancel the connectionChange event based on your condition. Please refer to the code example and sample below. 

 

Code example: 

 

      //define connectionChange event 

      <ej-diagram id="diagramCore" (connectionChange)="connectionChange($event)"> 

        </ej-diagram>     

 

    connectionChange(args){ 

            if (args.endPoint==="sourceEndPoint") { 

                if (args.port && args.port.name === "In") { 

                    args.cancel = true; 

                } 

            } 

            else if(args.endPoint==="targetEndPoint"){ 

                if (args.port && args.port.name === "Out") { 

                    args.cancel = true; 

                } 

            } 

        } 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/connectionchangeeventsample-541119514 

 

Regards, 

Shyam G 

[Julian Lyndon-Smith]

thanks for the code - however I can't seem to get this working on my system - the `endPoint` property is always undefined

[Julian Lyndon-Smith]

when running the sample, all I get is the following:

I can't select a port to start drawing a connector

[Shyam G]

Hi Julian, 

 

Query	Response
when running the sample, all I get is the following:  I can't select a port to start drawing a connector.	We have set port constraints ConnectOnDrag which activates the connection Tool when mouse hover on the port and you can draw the connector and establish the connection between two nodes. Please refer to the code example below.    Code example:    this.nodes = [                         {                   name: "firstNode", width: 100, height: 100, offsetX: 150, offsetY: 150,                                              ports: [                      {name: "In", offset: { x: 0, y: 0.5 }, visibility: ej.datavisualization.Diagram.PortVisibility.Visible,constraints:ej.datavisualization.Diagram.PortConstraints.Connect | ej.datavisualization.Diagram.PortConstraints.ConnectOnDrag},                                       ],                                                           },              ]
thanks for the code - however I can't seem to get this working on my system - the `endPoint` property is always undefined.	If you want to restrict the connections for an port, you can use connectionChange event to achieve your requirement. please refer to the code example for connectionChange event.    Code example:    //define connectionChange event         <ej-diagram id="diagramCore" (connectionChange)="connectionChange($event)">           </ej-diagram>    connectionChange(args){          //based on your condition cancel the event to restrict the connections for an port.           args.cancel = true;          }     In our previous update, we have checked args.endPoint condition only when you drag the connector in sourceEndPoint and targetEndPoint. So based on your usecase, you can code your own logic in the connectionChange event.

 

 

Regards, 

Shyam G