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.

Grouping and Orthogonal Lines

Thread ID:

Created:

Updated:

Platform:

Replies:

64829 Jul 24,2007 07:21 AM Jul 25,2007 06:26 PM Windows Forms 3
loading
Tags: Diagram
R. Krishna Prasadh
Asked On July 24, 2007 07:21 AM

Hi, I am exploring Eval version of Essential Diagram (V5). I am facing few problems.

1. I want to group a set of BitmapNode.
2. Connect one subset of grouped BitmapNode with another subset of BitmapNode using orthogonal lines.
3. No lines should overlap other.

I would request you to help me out in doing this, and also to provide me samples for the same.

Thanks,
RKP

J.Nagarajan [Syncfusion]
Replied On July 24, 2007 02:02 PM

Hi Krishna,

Thanks for your interest in Syncfusion product.

1. If you want to group a set of node Bitmapnodes then you can use Group class then you can add these elements to the group. Please refer to the following code snippet

Group g0 = new Group();
Syncfusion.Windows.Forms.Diagram.Rectangle objrectangle = new Syncfusion.Windows.Forms.Diagram.Rectangle(10, 10, 400, 200, MeasureUnits.Pixel);
objrectangle.FillStyle.Color = Color.White;
g0.AppendChild(objrectangle);
diagram.Model.AppendChild(g0);

Group g1a = new Group();
BitmapNode bmpnode1 = new BitmapNode("..\\..\\Blue hills.jpg");
bmpnode1.MeasurementUnit = MeasureUnits.Pixel;
bmpnode1.Size = new SizeF(100, 100);
bmpnode1.PinPoint = new PointF(100, 60);
g1a.AppendChild(bmpnode1);
g0.AppendChild(g1a);

Group g1b = new Group();
BitmapNode bmpnode2 = new BitmapNode("..\\..\\Winter.jpg");
bmpnode2.MeasurementUnit = MeasureUnits.Pixel;
bmpnode2.Size = new SizeF(100, 100);
bmpnode2.PinPoint = new PointF(250, 60);
g1b.AppendChild(bmpnode2);
g0.AppendChild(g1b);

2. To Connect one subset of grouped BitmapNode with another subset of BitmapNode using orthogonal lines then please refer to the following code snippet

OrthogonalConnector line = new OrthogonalConnector(g1a.PinPoint, g1d.PinPoint);//new PointF(0, 0), new PointF(1, 0));
line.LineRoutingEnabled = true;
diagram.Model.AppendChild(line);
g1a.CentralPort.TryConnect(line.TailEndPoint);
g1d.CentralPort.TryConnect(line.HeadEndPoint);

3. To prevent the overlapping of connectors, you can use Model.LineBridgingEnabled propert.

this.diagram.Model.LineBridgingEnabled = true;

I have attached the sample that demonstrates this completely. You can download the sample from the following page.

http://websamples.syncfusion.com/samples/Diagram.Windows/F64829/main.htm

Please refer to the sample and let me know if you have any questions.

Thanks,
Nagaraj

R. Krishna Prasadh
Replied On July 25, 2007 07:02 AM

Hi Nagaraj,
Thanks for you timely reply regarding Orthogonal Lines. I still have few issues with it. If two nodes fall in the same line then the Orthogonal line overlaps. I request you suggest me overcoming this issue.

Secondly, I have two groups, each containing some Child Nodes. How do I ascertain which Node was clicked? Please help me on this regard. As well can you provide me sample?

Thanks & regards,
RKP

J.Nagarajan [Syncfusion]
Replied On July 25, 2007 06:26 PM

Hi Krishna,

1. If you want to automatically change the line routing of the Orthogonal Connector, then you have to set Model.LineRoutingEnabled property to true. Please refer to the following code snippet.

this.diagram.Model.LineRoutingEnabled = true;
OrthogonalConnector line = new OrthogonalConnector(symbol1.PinPoint, symbol2.PinPoint);
symbols.Add( line );
this.diagram.Model.AppendChildren(symbols, out position);
symbol1.CentralPort.TryConnect(line.HeadEndPoint);
symbol2.CentralPort.TryConnect(line.TailEndPoint);
this.diagram.Model.LineRouter.RouteConnector(line);
this.diagram.Model.EndUpdate();

I have attached the sample that demonstrates this completely. You can download this sample from the following page.

http://websamples.syncfusion.com/samples/Diagram.Windows/F64108/main.htm

Please provide us more details with screen shot if this not satisfies you.

2. If you want to fire a event when you select the node then you have write your own delegate. Please refer to the following code snippet

public delegate void NodeSelection(object sender, CollectionExEventArgs evtargs);
public event NodeSelection nodeselection;

this.diagram1.EventSink.NodeCollectionChanged += new CollectionExEventHandler(EventSink_NodeCollectionChanged);
this.nodeselection += new NodeSelection(MainForm_nodeselection);

void EventSink_NodeCollectionChanged(CollectionExEventArgs evtArgs)
{
DiagramController controller = this.diagram1.Controller;
Node node = evtArgs.Element as Node;
if (node != null)
{
if (node == controller.SelectionList.First)
{
this.nodeselection(this,evtArgs);
}
}
}

void MainForm_nodeselection(object sender, CollectionExEventArgs evtargs)
{
Node node = evtargs.Element as Node;
Console.WriteLine(node.Name);
}

I have attached the sample that demonstrates this completely. In this sample when you click on a node, the name of the selected node gets displayed in the text box. You can download the sample from the following page.

http://websamples.syncfusion.com/samples/Diagram.Windows/NodeSelectionChanged/main.htm

Please refer to the sample and let me know if you have any questions.

Thanks,
Nagaraj

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.

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.

;