Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Hierarchy example with different layouts (Read 7239 times)
Francisco Marquez
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 10th, 2014
Hierarchy example with different layouts
Sep 3rd, 2014 at 6:16pm
Print Post  
Hi,
I'm struggling to make a simple example, such as the container example from the Javascript toolkit ( http://mindfusion.eu/demos/jsdiagram/Containers.html ) using the WinRT toolkit. Embarrassed

Is the functionality existing in WinRT toolkit for that? My main issues are:

1.- I'm a bit confused on the difference between Attach method and Add to the Children collection of the container. Using any of them, render the expand button of the container useless, since the children nodes are not visible
2.- I'm having issues using a specific layout inside a container, and a different one outside (for the containers)

Basically, the functionality I'm trying to get is very much similar in essence to the one in the Javascript demo.


Am I missing anything? Huh

Thanks in advance for your comments
« Last Edit: Sep 3rd, 2014 at 9:00pm by Francisco Marquez »  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Hierarchy example with different layouts
Reply #1 - Sep 4th, 2014 at 8:18am
Print Post  
Hi,

The following ContainerNode features from web version are not available yet in WinRT, see workarounds below.

1. Local Z order in containers:

In JavaScript child nodes inside a container are drawn by the container itself using local Z order. In WinRT all items share diagram's global Z order, and if you create child nodes before the container node, you will have to set their ZIndex explicitly to be higher than container's:

Code
Select All
var sn = diagram.Factory.CreateShapeNode(40, 40, 50, 50);
var cn = diagram.Factory.CreateContainerNode(30, 10, 70, 90);
cn.Children.Add(sn);
sn.ZIndex = cn.ZIndex + 1; 

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Hierarchy example with different layouts
Reply #2 - Sep 4th, 2014 at 8:33am
Print Post  
2. There is no container.Arrange(layout) method in WinRT version. You could use the layout.Arrange(DiagramItemCollection) method intead to arrange containers' children. E.g. this should create something similar to the JavaScript example:

Code
Select All
void LayoutTest()
{
	// create child nodes for containers
	for (var i = 0; i < 5; i++)
		diagram.Factory.CreateShapeNode(0, 0, 30, 30);
	for (var i = 1; i < 5; i++)
		diagram.Factory.CreateDiagramLink(diagram.Nodes[i / 2], diagram.Nodes[i]);

	for (var i = 5; i < 10; i++)
		diagram.Factory.CreateShapeNode(0, 0, 30, 30);
	for (var i = 1; i < 5; i++)
		diagram.Factory.CreateDiagramLink(diagram.Nodes[5 + i / 2], diagram.Nodes[5 + i]);

	// create containers
	for (var c = 0; c < 2; c++)
	{
		var container = diagram.Factory.CreateContainerNode(0, 0, 30, 30);
		for (var i = c * 5; i < c * 5 + 5; i++)
			container.Children.Add(diagram.Nodes[i]);

		container.Text = "container " + (c + 1);
		container.Brush = Brushes.White;
		container.HandlesStyle = HandlesStyle.HatchHandles3;
		container.ZBottom(false);
	}

	ArrangeContainers();
}

void ArrangeContainers()
{
	var innerLayout = new TreeLayout();
	innerLayout.NodeDistance /= 2;

	var outerLayout = new LayeredLayout();
	outerLayout.StraightenLongLinks = true;
	outerLayout.EnforceLinkFlow = true;
	outerLayout.NodeDistance /= 2;

	Arrange(diagram, outerLayout, innerLayout);
}

private DiagramItemCollection GetContainerItems(ContainerNode container)
{
	DiagramItemCollection items = new DiagramItemCollection();
	foreach (DiagramNode node in container.Children)
	{
		items.Add(node);
		foreach (DiagramLink link in node.GetAllLinks())
		{
			DiagramNode node2 = GetOtherEnd(link, node);
			if (node2.Container == container && !items.Contains(link))
				items.Add(link);
		}
	}
	return items;
}

private DiagramNode GetOtherEnd(DiagramLink link, DiagramNode node)
{
	if (node == link.Origin)
		return link.Destination;

	if (node == link.Destination)
		return link.Origin;

	return null;
}

private void Arrange(Diagram diagram, Layout outerLayout, Layout innerLayout)
{
	foreach (DiagramNode node in diagram.Nodes)
	{
		ContainerNode container = node as ContainerNode;
		if (container == null)
			continue;

		innerLayout.Arrange(diagram, GetContainerItems(container));
		container.UpdateBounds(5);
	}

	outerLayout.Arrange(diagram);

	/*foreach (DiagramLink link in diagram.Links)
	{
		if (link.Origin.Container != link.Destination.Container)
			link.Route();
	}*/

	diagram.ResizeToFitItems(5);
}

static class ContainerExtensions
{
	public static void UpdateBounds(this ContainerNode container, double margin)
	{
		if (container.Children.Count == 0)
			return;
		var r = container.Children[0].Bounds;
		foreach (DiagramNode node in container.Children)
			r.Union(node.Bounds);

		r.X -= margin;
		r.Y -= container.CaptionHeight + margin;
		r.Width += margin * 2;
		r.Height += container.CaptionHeight + margin * 2;

		container.SetBounds(r, false);
	}
} 

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Hierarchy example with different layouts
Reply #3 - Sep 4th, 2014 at 8:49am
Print Post  
3. There is no fold / unfold support available yet for containers. The expand button you mention, shown when Expandable == true, is used for expanding and collapsing of branches of a hierarchy - defined by nodes' outgoing links and not by containment. We plan to implement the Foldable property for next release. Until then you could implement some basic fold/unfold support via custom handling of expand button clicks:

Code
Select All
diagram.ExpandButtonAction = ExpandButtonAction.RaiseEvents;
diagram.ExpandButtonClicked += (s, args) =>
{
 	  var ctr = args.Node as ContainerNode;
	if (ctr != null)
	{
		var items = GetContainerItems(ctr);
		foreach (var item in items)
			item.Visible = ctr.Expanded;

		if (ctr.Expanded)
		{
			ctr.UpdateBounds(5);
		}
		else
		{
			var foldedRect = ctr.Bounds;
			foldedRect.Height = ctr.CaptionHeight;
			ctr.Bounds = foldedRect;
		}
	}
}; 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Francisco Marquez
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 10th, 2014
Re: Hierarchy example with different layouts
Reply #4 - Sep 4th, 2014 at 8:52am
Print Post  
Brilliant!! Thanks a lot  Cheesy

The only item left is how to achieve the "folding" effect. I notice that in JS you have the setFoldable method. Since I cannot find an equivalent, I was using Expandable=true in the containers of your example, but although the + button shows up, it does not seem to work. Is this also missing from WinRT, or do I have to implement additional logic?

As it seems in the JS version, the folding and expansion of the container is ideal for hierarchical diagrams. If this is not on the WinRT version, as of now, can you suggest a way to implement a workaround, and also if this is planned in future WinRT releases?

Thanks again for your very quick response!
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Hierarchy example with different layouts
Reply #5 - Sep 4th, 2014 at 9:10am
Print Post  
Hi,

Foldable is planned for the 1.2 release in a few weeks, see my third post above.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Francisco Marquez
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 10th, 2014
Re: Hierarchy example with different layouts
Reply #6 - Sep 4th, 2014 at 9:50am
Print Post  
It seems that our messages crossed  Wink

Thanks a lot again, this workaround works perfectly. I really look forward to the new release. I still believe that WinRT has a future for LOB applications

your support is great Stoyan!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint