I’m using a treelayout, and when I group a few nodes together, the layout engine does not seem to recognize that the group takes up more space than just its grouped nodes. The effect being that the group template contents hide other nodes in the diagram.
Is there a way to get the layout to not paint the group “box” on top of other nodes or groups, so that all nodes are visible at all times?
So your diagram has some Groups in it, that are grouping together some of the nodes of your tree, and there isn’t enough space to show the whole Group without them overlapping some of the other tree nodes? And you had set the Group.Layout to null?
Could you just increase the TreeLayout.LayerSpacing? That assumes that your Group’s rendering mostly extends into the empty space between the layers. Or is the overlap with sibling tree nodes?
Thanks for the reply!
Group.Layout is set to its own TreeLayout for now, and there should be plenty of space to show the whole group and its sibling nodes without overlap.
To an extent TreeLayout.LayerSpacing works, but it needs to be set quite hight to avoid the group overlapping other groups, espacially in the horizontal direction when a group contains a tree with 2 levels and many siblings, so the group becomes wide.
Also some times nodes that are children of a node in a group, but not part of the group, are rendered on top of the group and members of the group (nodespacing is set to 50 which should be enough).
Overlap between sibling nodes happens also. That is a group will overlap it’s siblings, wether they are regular nodes or groups.
I would expect a group to be handled as just another node in the tree, so that nodespacing of 50 would mean “nodes outside the group will stay at least 50 px away from the group’s rendering area”.
It seems that the treelayout at least does not take this into account, which results in group border overwriting other diagram content outside the group.
Any other ideas?
Here’s an example of the group overlapping issue in action:
Create Model Code:
DataTemplateDictionary dtd = Diagram.FindResource(this, “NodeTemplateDictionary”);
dtd.Add(“DefaultTemplate”, Diagram.FindResource(this, “DefaultTemplate”));
dtd.Add(“template1”, Diagram.FindResource(this, “DataTemplate1”));
dtd.Add(“template2”, Diagram.FindResource(this, “DataTemplate2”));
dtd.Add(“template3”, Diagram.FindResource(this, “DataTemplate3”));
model.Modifiable = true;
model.ToNodesPath = “ToKeys”;
model.NodeKeyPath = “Key”;
model.NodeIsGroupPath = “IsSubGraph”;
model.GroupNodePath = “SubGraphKey”;
model.NodesSource = new ObservableCollection()
{
new KingNode(“root”, “template1”) { ToKeys = new ObservableCollection() {“node1”, “node2”}},
new KingNode(“node1”, “template1”) { ToKeys = new ObservableCollection() {}},
new KingNode(“node2”, “template1”) { SubGraphKey=“container”, ToKeys = new ObservableCollection() {“child1”, “child2” }},
new KingNode(“child1”, “template1”) { SubGraphKey=“container”, ToKeys = new ObservableCollection() {}},
new KingNode(“child2”, “template1”) { SubGraphKey=“container”, ToKeys = new ObservableCollection() { “gandChild1”, “grandChild2” }},
new KingNode(“gandChild1”, “template1”) { ToKeys = new ObservableCollection() {}},
new KingNode(“container”, “container”) { IsSubGraph=true, ToKeys = new ObservableCollection() {}},
new KingNode(“grandChild2”, “template1”) { SubGraphKey=“container2”, ToKeys = new ObservableCollection() { “gGrandChild1”, “gGrandChild2” }},
new KingNode(“gGrandChild1”, “template1”) { SubGraphKey=“container2”, ToKeys = new ObservableCollection() {}},
new KingNode(“gGrandChild2”, “template1”) { SubGraphKey=“container2”, ToKeys = new ObservableCollection() { “ggGrandChild1” }},
new KingNode(“ggGrandChild1”, “template1”) { ToKeys = new ObservableCollection() {}},
new KingNode(“container2”, “container”) { IsSubGraph=true, ToKeys = new ObservableCollection() {}},
};
KingNode class:
public class KingNode : GraphModelNodeData
{
public string Name { get; set; }
public KingNode(string name, string category)
{
Name = name;
Category = category;
ToKeys = new ObservableCollection();
Key = name;
}
}
Group template:
<Border CornerRadius=“5” BorderThickness=“1” BorderBrush="#FF8CCF24" Background="#FF8CCF24" go:Node.LocationElementName=“myGroupPanel”
Padding=“1,5,1,1”>
<go:GroupPanel x:Name=“myGroupPanel”>
</go:GroupPanel>
go:Group.Layout
<gol:TreeLayout />
</go:Group.Layout>
Node template:
Diagram definition:
<go:Diagram x:Name=“diagram” NodeTemplateDictionary="{StaticResource NodeTemplateDictionary}"
HorizontalContentAlignment=“Stretch” VerticalContentAlignment=“Stretch” GroupTemplate="{StaticResource GroupTemplate}" >
go:Diagram.Layout
<gol:TreeLayout NodeSpacing=“50” />
</go:Diagram.Layout>
</go:Diagram>
I can reproduce the problem, so we’ll look into fixing it for v1.1.
For now, perhaps it would be good enough to do something like:
diagram.InitialLayoutCompleted += (s,e) => { diagram.LayoutDiagram(); };
Thaks! That helped quite a bit. Looking forward to a new version where this is not a problem though :)