We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Restricting port connections.

Thread ID:

Created:

Updated:

Platform:

Replies:

82096 Jun 1,2009 10:48 PM UTC Jun 3,2009 06:58 PM UTC WPF 2
loading
Tags: Diagram
Anton Bursch
Asked On June 1, 2009 10:48 PM UTC

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 [Syncfusion]
Replied On June 2, 2009 05:30 AM UTC

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
Replied On June 3, 2009 06:58 PM UTC

Thank you for the explaination and examples!!

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;