The rotation degree of the DirectedTreeLayoutManager

[Hanne]

Hello,

Is there a way or has anyone have a solution for the following problem:

I have a diagram in which I connect several symbols to one another. I have a base symbol that can have 0 or more child and/or parent symbols. The DirectedTreeLayoutManager gives me the option to add a rotation degree to the tree I am building. But I can only specify one direction degree. What I want to do is, add the child symbols beneath the base symbol and the parent symbols above the base symbol. Does anyone have an idea how to do this?

Kind regards

Hanne

[J.Nagarajan]

Hi Hanne,

It would be helpful if you can send us a screen shot of your requirement. Also provide more information on this. With base symbol what do u mean?

Thanks,
Nagaraj

[Hanne]

Hi Nagarajan

I added 2 screenshots so you can have a look at what I mean. Current_Diagramlayout.gif is what I can do now with the DirectedTreeLayoutManager. Intended_Diagramlayout is what I am trying to achieve.

Full explanation:
You have the base symbol in the middle. This is a customized symbol that consists out of a rectangle, a label and 2 other customized symbols, 2 plus (+) signs (that can turn into a minus sign (-)). One plus sign is positioned on the right-top of the rectangle (to view the parents) and the other one is positioned at the right-bottom corner of the rectangle (to view the children).

Initially only the base symbol is shown to the user. He can click on a plus sign to either view the children or the parents.

When he for instance clicks on the plus sign to view its children, the plus sign turns into a minus sign and the child symbols will appear beneath the base symbol. A child symbol can only have a plus sign at the right-bottom corner of the rectangle because the user can only click on a child symbol to view its children. He has not the option to view the parents of a child symbol.

When the user clicks on the plus sign to view the parent symbols, the plus sign will turn into a minus sign and the parent symbols will appear above the base symbol. A parent symbol can only have other parent symbols.

I can create all these symbols and connections, but the only thing I can not achieve is that the parent symbols should appear above the base symbol. I used the DirectedTreeLayoutManager, so all the symbols are nicely positioned beneath the base symbol. But with this layout manager the child symbols as well as the parent symbols will be positioned beneath the base symbol (when I set the direction degree to 0). As I explained I want the parent symbols to appear above the base symbol and the child symbols beneath the base symbol.

So basically you have the base symbol in the middle. All the child symbols should be positioned beneath this base symbol and the parent symbols should be positioned above the base symbol.

Hope this helps!

Kind regards,

Hanne

Diagramlayout_screens.zip

[Hanne Van Briel]

Is there any way to achieve this with another layoutmanager e.g. the RadialTreeLayoutManager or the SubgraphTreeLayoutManager?

It seems like the SubgraphTreeLayoutManager should do the trick but I can not figure out how it works. This is what I read about it:
The SubgraphTreeLayoutManager is a special type of the Syncfusion.Windows.Forms.Diagram.DirectedTreeLayoutManager that enables the sub nodes of a diagram layout tree to have an orientation that is distinct from the parent node. Any suggestions?

Kind regards

Hanne

[Hanne Van Briel]

Hello

I found how I can make sure the child symbols are added beneath the base plate and the parent symbols should be placed above the base plate. I still use the DirectedTreeLayoutManager to setup the correct layout for my diagram.

Solution:
---------
As illustrated in my previous replies, I build the diagram dynamically and I made my own symbols. Each symbol has 2 AnchoredPort:

AnchoredPort TopPort = new AnchoredPort(this, BoxPosition.TopCenter);
AnchoredPort BottomPort = new AnchoredPort(this, BoxPosition.BottomCenter);
mySymbol.AppendChild(TopPort);
mySymbol.AppendChild(BottomPort);

* To connect a parent plate with the base plate or a parent plate I do the following:

LinkCmd linkcommand = new LinkCmd();
linkcommand.Link = new Link(Link.Shapes.Polyline);
---
linkcommand.SourcePort = parentSymbol.BottomPort;
linkcommand.TargetPort = baseSymbol.TopPort;
---
myDiagram.Controller.ExecuteCommand(linkcommand, true);

* To connect a child plate with the base plate or a child plate I do the following:

LinkCmd linkcommand = new LinkCmd();
linkcommand.Link = new Link(Link.Shapes.Polyline);
---
linkcommand.SourcePort = baseSymbol.BottomPort;
linkcommand.TargetPort = childSymbol.TopPort;
---
myDiagram.Controller.ExecuteCommand(linkcommand, true);

Problem
-------
This always works fine for all my child symbols and when there is just ONE parent symbol connected to the base symbol. But the layout gets messed up if there are MORE than ONE parent symbols added to the base symbol.

So I started digging into the Object Browser in Visual Studio and I came across of the enum GraphType that can have 3 values: MultiParentDirectedTree, NonDirectedGraph and OneParentDirectedTree. Can I use this enum to tell my diagram or layoutmanager that I have a MultiParentDirectedTree and not just a OneParentDirectedTree? Is this possible? If so, how can I do this?

Thanks in advance!

Hanne

[J.Nagarajan]

Hi Hanne,

The DirectedTreeLayoutManager implements a pre-built tree layout algorithm for creating connected graph diagrams. The Directed Graph is designed as "OneParentDirectedTree" in which nodes can contain one parent and several children. So we can't add several parent nodes in this layout. We have to investigate more on the source code. I will consult with our development team and will get back to you with more details.

Thanks for using Syncfusion product.

Regards,
Nagaraj

[Hanne Van Briel]

Hi Nagaraj

Have you already discussed this issue with the development team or do you (or your development team) have a solution for my problem? I really want to implement this feature into our project here and it is becoming kind of urgent.

For now I have used 2 diagram controls next to eachother. One diagram to view the parent symbols of a symbol and one diagram to view the child symbols of a symbol. But it does not look so good. I want to use just one diagram to which I can apply a good layout.

Kind regards

Hanne

[J.Nagarajan]

Hi Hanne,

Sorry for the delay in getting back to you. If your intention is to change the location of the layout symbols then you have to customize the LayoutManager class. You can override the UpdateLayout method and you can set the custom location of your symbols. We could not relocate the symbols in DirectedTreeLayOut. I have provide the code snippet for your reference.

public class DiagramLayoutManager : LayoutManager
{
public DiagramLayoutManager(Model mdl) : base(mdl)
{
}
public override bool UpdateLayout(object contextInfo)
{
bool changesMade = true;
if(this.Model != null)
{
ArrayList topRanking = new ArrayList();
foreach (INode curNode in this.Model.Nodes)
{
MyTextSymbol expsymbol = curNode as MyTextSymbol;
topRanking.Add(expsymbol);
}
float curLeft = this.Model.Bounds.Left;
float curRight = curLeft;
foreach(MyTextSymbol curMember in topRanking)
{
this.PositionMember(curMember);
curLeft = curRight;
}
}
private void PositionMember(MyTextSymbol expsymbol)
{
if(expsymbol!=null)
{
if(expsymbol.Name=="NodeA")
{
expsymbol.X=280;
expsymbol.Y=250;
}
if(expsymbol.Name=="NodeB")
{
expsymbol.X=150;
expsymbol.Y=350;
}
}

I have attached the sample that demonstrates this completely. Please refer to it and let me know if you have any questions.

Thanks for using Syncfusion product.

Regards,
Nagaraj

Layout Diagram.zip