Restricting port connections.

[Anton Bursch]

I have nodes with multiple ports for both input and output. These ports are colored according to type. For example: red, green, blue, orange.

I want to restrict connections between ports by colored type. For example: only red output ports can connect with red input ports.

Is there anything available in the syncfusion diagrams to allow this kind of restriction in port connections?

* I'm loving Syncfusion WPF products so far, by the way.

[Nikhil A]

Hi Anton,

Thanks for your interest in Syncfusion products.

The port connections can be restricted using the Connector Events.

There are two scenarios:

Scenario 1:

In case a new connection is being created by dragging from one port to another, The

AfterConnectionCreate event can be used. This event fires soon after a new connection is

created.


The following is the code snippet for restricting connections between ports and allowing only red ports to connect:

Declare the AfterConnectionCreateEvent:

diagramView.AfterConnectionCreate += new ConnDragEndChangedEventHandler

(diagramView_AfterConnectionCreate);


Event Handler:

void diagramView_AfterConnectionCreate(object sender, ConnDragEndRoutedEventArgs evtArgs)
{
LineConnector line = evtArgs.Connector;
if (line.ConnectionTailPort != null && line.ConnectionHeadPort != null &&

line.ConnectionTailPort.PortStyle.Fill == Brushes.Red &&

line.ConnectionHeadPort.PortStyle.Fill == Brushes.Red)
{
//do nothing
}
else
{
//Remove the connection
diagramModel.Connections.Remove(evtArgs.Connector);
}
}


Scenario 2:

In case an already existing connection is been dragged to connect to other ports, then the

ConnectorDragStart and ConnectorDragEnd events can be used to restrict connections:

As the name implies, the ConnectorDragStart event fires when either of the ends of the connector is dragged.

The ConnectorDragEnd fires soon after the drag operation is complete.

The following is the code snippet for restricting connections between ports and allowing only red ports to connect:

Declare the ConnectorDragStart :

diagramView.ConnectorDragStart += new ConnDragChangedEventHandler(diagramView_ConnectorDragStart);
}


Event Hander:

//To store the previous port to which the line was connected to.

ConnectionPort oldport;


void diagramView_ConnectorDragStart(object sender, ConnDragRoutedEventArgs evtArgs)
{
LineConnector line = evtArgs.Connector;

if (evtArgs.FixedNodeEnd == line.TailNode)
oldport = line.ConnectionHeadPort;
else
oldport = line.ConnectionTailPort;

}


Now once we have stored the oldport, we can check for the condition for red ports in ConnectorDragEnd event as follows:


Declare the ConnectorDragStart :

diagramView.ConnectorDragEnd += new ConnDragEndChangedEventHandler(diagramView_ConnectorDragEnd);


EventHandler:

void diagramView_ConnectorDragEnd(object sender, ConnDragEndRoutedEventArgs evtArgs)
{
LineConnector line = evtArgs.Connector;

if (line.ConnectionTailPort != null && line.ConnectionHeadPort !=null && line.ConnectionTailPort.PortStyle.Fill == Brushes.Red && line.ConnectionHeadPort.PortStyle.Fill == Brushes.Red)
{
//do nothing
}
else
{
//Check to which end the old port has to be restored:
if (evtArgs.HitNodeEnd == line.HeadNode && oldport != null)
{
evtArgs.Connector.ConnectionHeadPort = oldport;
evtArgs.Connector.HeadNode = oldport.Node;
}
else
{
evtArgs.Connector.ConnectionTailPort = oldport;
evtArgs.Connector.TailNode = oldport.Node;
}

}
}

Hope this solves your problem.

Regards,
Nikhil

[Anton Bursch]

Thank you for the explaination and examples!!