Grouping and Orthogonal Lines

[R. Krishna Prasadh]

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]

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]

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]

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