1. Home
  2. Forum
  3. Angular
  4. restrict target node port when drawing a connector

restrict target node port when drawing a connector

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 ?

4 Replies
SG Shyam G Syncfusion Team October 12, 2017 10:21 AM UTC

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; 
                } 
            } 
        } 
 
 
Regards, 
Shyam G 


JL Julian Lyndon-Smith October 13, 2017 07:14 PM UTC

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




JL Julian Lyndon-Smith October 14, 2017 08:23 AM UTC

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


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



SG Shyam G Syncfusion Team October 16, 2017 10:34 AM UTC

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 


Loader.
Up arrow icon