1. Home
  2. Forum
  3. WPF
  4. How to validate connection from port, and which event listener detect the connection

How to validate connection from port, and which event listener detect the connection

Hello Syncfusion staff,

I am trying to validate the connections depending on the types and quantity of the connected nodes. I partially achieved that goal following this link https://www.syncfusion.com/forums/137361/sf-diagram-port-to-port-connection-restrictions, but that was not enough. I need to add extra constraints at the port level to complete that functionality, but I did not find a way of doing it. I would be grateful if you could indicate to me which port-related methods are used to do that. Additionally, I also would appreciate it if you could post an example of it.

Thank you,

Tomas


13 Replies
KR Karkuvel Rajan Shanmugavel Syncfusion Team August 26, 2021 12:24 PM UTC

Hi Tomas, 
 
Requirement: How to add extra constraints in node port. 
 
We have analyzed your requirement and prepared a simple sample for the same. In the sample, we have created a new Enum named PortType with Connection and NonConnection as its values. We have created two nodes with four ports in them. In both the nodes, the third and fourth ports are non-connectable ports. In the ValidateConnection method, we have used the PortType Enum to validate the port is connectable or not, and then if it is true then the connection has been created, or else the connection is not created. We have prepared a video to demonstrate this. Please find the video and sample links below.  
 
 
 
Regards, 
Karkuvel Rajan S 


TO Tomas August 29, 2021 07:08 AM UTC

Hello Karkuvel,

In that example we can "stop" the connection if the condition is met (target.PortType == PortType.NonConnection), but we cannot assess the following cases:

1) Limit the number of connection allowed for a particular port.

2) "Block" a connection depending on the source, instead of the target only.

3) Disable connection between node "A" and "B", if it is already connected to the node "C".

Is it possible to expand the previous example to include those conditions too?

Thank you for your help,

Tomas.


PP Prakash Perumal Syncfusion Team August 30, 2021 08:51 AM UTC

Hi Tomas, 
 
We have analyzed your requirement. We have modified the code in the validate connection method in the sample provided on the last response. Please refer modified code example and sample link below. 
 
Limit the number of connection allowed for a particular port. 
Added ‘MaxConnectionAllowed’ property and ‘CanConnect()’ method in CustomPort class to limit the number of Connection. 
"Block" a connection depending on the source, instead of the target only. 
Blocking connection in source side has two scenario: 
 
Case 1: While creating new connection (Changes added in SetTool method) 
if (args.Source is CustomPort) 
{ 
    // Restricting drawing a new connection from port based on condition. 
    if ((args.Source as CustomPort).CanConnect()) 
    { 
        args.Action = ActiveTool.Draw; 
    } 
    else 
    { 
        args.Action = ActiveTool.None; 
    } 
} 
 
Case 2: Modifying existing connector’s source-end (Changes added in ValidateConnection method) 
var sourcePort = args.SourcePort as CustomPort; 
// Restricting connection to a source-port if it has already maximum no. of allowed connections. 
if (sourcePort != null && connector.SourcePort != sourcePort && !sourcePort.CanConnect()) 
{ 
    args.SourcePort = null; 
    args.SourceNode = null; 
} 
Disable connection between node "A" and "B", if it is already connected to the node "C". 
We have restricted the connection between two nodes, if there is common neighbor for both the nodes. (Changes added in ValidateConnection method) 
 
// Disable connection between node "A" and "B", if it is already connected to the node "C". 
if (targetPort != null) 
{ 
    var sourceNode = connector.SourceNode as NodeViewModel; 
    var targetNode = targetPort.Node as NodeViewModel; 
    if (sourceNode != targetNode) 
    { 
        var sourceNeighbors = (sourceNode.Info as INodeInfo).Neighbors?.ToList(); 
        var targetNeighbors = (targetNode.Info as INodeInfo).Neighbors?.ToList(); 
        // Find common neighbor to both node. 
        if (sourceNeighbors != null && targetNeighbors != null && sourceNeighbors.Intersect(targetNeighbors).Any()) 
        { 
            args.TargetPort = null; 
            args.TargetNode = null; 
        } 
    } 
} 
 
 
Regards, 
Prakash P 
 


TO Tomas August 31, 2021 02:46 PM UTC

Hi Prakash, I will try to proposed solution first, to check if they satisfy the requirement.

Thank you,

Tomas


KR Karkuvel Rajan Shanmugavel Syncfusion Team September 1, 2021 04:43 AM UTC

Hi Tomas, 
 
Thanks for update. 
 
We will wait until we hear from you. 
 
Regards, 
Karkuvel Rajan S  


TO Tomas September 13, 2021 02:12 AM UTC

Hello Karkuvel,

The solution seems to work, though It is not able to cancel the "link", if the port is the source instead of the target. Also, I would like to change the decorator of the target and/or the source when the connection is successful and/or not. However, due to the design of my application, I do not have direct access to this.Resources["keyword"] where keyword may be "Ellipse". Is there a way to set the Connector's Target/SourceDecorator and Target/SourceDecoratorStyle without using this.Resource?, and is it possible to differentiate between hovering on a port and connecting to it?.

Thank you,

Tomas.


KR Karkuvel Rajan Shanmugavel Syncfusion Team September 13, 2021 12:37 PM UTC

Hi Tomas, 
 
Please find the response to your queries in below table. 
 
Query 
Response 
 
The solution seems to work, though It is not able to cancel the "link", if the port is the source instead of the target. 
 
If you want to delete the connector instead of not connecting with the source you can use the Delete Command to delete the connector. Please find the code example below. 
 
 
(diagram.Info as IGraphInfo).Commands.Delete.Execute(null); 
// Where diagram is the instance of the SfDiagram. 
// The above code will help you to delete the selected item. 
 
 
 
 
I would like to change the decorator of the target and/or the source when the connection is successful and/or not. 
 
 
We have analyzed your requirement of the need to change the Target or Source Decorator based on your conditions. For this, we have SourceDecorator and TargetDecorator properties in our Connector. Please follow the below documentation link to know more about Source and Target Decorators. 
 
 
 
However, due to the design of my application, I do not have direct access to this.Resources["keyword"] where keyword may be "Ellipse". Is there a way to set the Connector's Target/SourceDecorator and Target/SourceDecoratorStyle without using this.Resource? 
 
 
We have analyzed your requirement to change the Source and Target Decorator and Source and Target Decorator Style without using the this.Resources[“keyword]. We can achieve your requirement by writing the required style and shape in any resource dictionary file that will access all over the application or we have to write the necessary style and shape in C# code itself. 
 
We have prepared a simple sample to achieve your requirement. In the sample, we have implemented both solutions. Please find the sample link below.  
 
 
 
is it possible to differentiate between hovering on a port and connecting to it?. 
 
 
We need some clarification on your query. Did you need to highlight the connector or port while hovering and connecting? Please provide the required information that will help us to provide the proper solution to your requirement. 
 
Regards, 
Karkuvel Rajan S 


TO Tomas September 14, 2021 12:43 AM UTC

Thank you Karkuvel. Though, I do not want to delete the connection, I just want to set the sourceNode/port as null if the right condition, on the source, is met. So, my problem is that using the canConnect() method for the source does not work when you are starting the connection in the port you are assessing.

Yes, I would like to highlight the connector while passing above the port. So, it shows, let's say, in green if is a valid connection, or red if it isn't..

Thank you,

Tomas


DT Deepa Thiruppathy Syncfusion Team September 14, 2021 12:34 PM UTC

Hi Tomas, 
 
From given details, we suspect that you are trying to set source port and target port as null when valid connection is not created. When trying to create connector to the valid port connector will be indicate to green. If connection is not valid and connection counts is exceeds to the limitation then connection will be indicate as red. We have created the sample for the same requirement. To avoid confusion about in-connect port and out-connect port, you can set PortVisibility as ValidConnection. 
 
Code snippet 
 
 
diagram.PortVisibility = PortVisibility.ValidConnection; 
 
 
Please refer the sample from the below link,  
 
 
Please refer API documentation link as below, 
 
 
If given details, samples, documentation links are not meet your requirement, then kindly provide the requirement in detail to understand your requirement clearly. 
Regards, 
Deepa Thiruppathy 


TO Tomas September 15, 2021 02:02 AM UTC

Hello Deepa,

My question references the example provided by Prakash, and the way it determines when the port is "full" (max. number of connection was reached). It works if you check the target port, but it seems to fail if the port is the source of the connection.

Also, the color of the connection should change briefly to show the status of the connection/port availability (rejected or available/done). The idea is to use that variation as a visual aid.

Thank you,

Tomas



DT Deepa Thiruppathy Syncfusion Team September 15, 2021 12:46 PM UTC

Hi Tomas, 
  
Please find the response to your queries in below table. 
  
Query  
Response 
My question references the example provided by Prakash, and the way it determines when the port is "full" (max. number of connection was reached). It works if you check the target port, but it seems to fail if the port is the source of the connection 
It is working fine in our side. If source port reaches maximum number of connection, then new connection could not be initialized from the source port.  
Also, the color of the connection should change briefly to show the status of the connection/port availability (rejected or available/done). The idea is to use that variation as a visual aid. 
We have highlighted the source port as red color while mouse hover on the source port, to indicate that new connection could be initialize from the source port anymore and that source port reached maximum number of out connectors.  
If target port reaches maximum number of in-connectors, and we are trying to drop a connector on it, then connector will be turned into red color, to indicate that new connector could not be dropped on the port any more. 
Also we have highlighted the source and target ports as yellow color, when ports have 2 (maximum number of connectors count) in-connectors or out-connectors to indicate that particular port is full. 
We have prepared the sample for the same as below, 
  
Also we have prepared a video to demonstrate your queries. Please find the video link as below, 
  
If given details, samples aree not meet your requirement, then kindly provide the requirement in detail to understand your requirement clearly. 

Regards, 
Deepa T 


TO Tomas October 4, 2021 03:47 AM UTC

Hello Syncfusion Staff,

I tried the proposed solutions, but they did not solve the issue. I need to change the decorator of the connector when a connection is successful, but I do not have access to this.resource[] due to the design of my app. Is there a way of setting it dynamically without using this.resource?


Note: I read https://help.syncfusion.com/wpf/diagram/connector/appearanceandvalidation#decorator and used  App.Current.MainWindow.Resources[" "] but those method did not work in my project. App.axml,cs is not the "root" of my project, the WPF form is rendered within a Winform form.

Thank you,

Tomas.


KR Karkuvel Rajan Shanmugavel Syncfusion Team October 4, 2021 11:42 AM UTC

Hi Tomas, 
 
Requirement: Need to access resource in whole application. 
 
We have prepared a simple sample to achieve your requirement. In the sample we have created a resource dictionary to add the styles and use them in them in the necessary files. Please find the sample link below. 
 
 
Regards, 
Karkuvel Rajan S 


Loader.
Up arrow icon