- Welcome, Guest. Please Login or Register
MindFusion  
  Version 2 of our Xamarin Calendar component adds Resource view and support for Universal Windows Platform. Now beta testing UWP version of Xamarin Diagram.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Composite nodes preview
Read 83 times

Slavcho   Online
God Member
*****
Posts: 1245
Gender: male
tech.support


   
     
 
Composite nodes preview
Jul 24th, 2017 at 11:19am
 
Upcoming version of the library adds a CompositeNode class that makes it easier to add custom graphics primitives to nodes. Appearance of composite nodes is defined by a tree of layout panels and child components. Unlike MindFusion's desktop diagram libraries, node templates are specified using JSON notation instead of XML. The custom OrgChartNode from tutorial 3 can now be defined declaratively as below.

Code:
var OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode",
{
	component: "GridPanel",
	rowDefinitions: ["*"],
	columnDefinitions: ["22", "*"],
	children:
	[
		{
			component: "Rect",
			name: "Background",
			pen: "black",
			brush: "white",
			columnSpan: 2
		},
		{
			component: "Image",
			name: "Image",
			autoProperty: true,
			location: "icon4.png",
			margin: "1",
			imageAlign: "Fit"
		},
		{
			component: "StackPanel",
			orientation: "Vertical",
			gridColumn: 1,
			margin: "1",
			verticalAlignment: "Near",
			children:
			[
				{
					component: "Text",
					name: "Title",
					autoProperty: true,
					text: "title",
					font: "Arial bold"
				},
				{
					component: "Text",
					name: "FullName",
					autoProperty: true,
					text: "full name",
					pen: "blue",
					padding: "1,0,1,0"
				},
				{
					component: "Text",
					name: "Details",
					autoProperty: true,
					text: "details",
					font: "Arial 3"
				}
			]
		}
	]
}); 



Objects from the MindFusion.Drawing namespace now double as CompositeNode components. Apart from JSON templates, the visual tree can also be created by adding panels and drawing objects programmatically starting from CompositeNode.root.

Panel classes include:
~ SimplePanel, laying out its children to overlap each other, taking up all available space (useful for background graphics or images);
~ StackPanel, laying out its children side by side, either horizontally or vertically;
~ GridPanel, laying out its children in rows and columns, where children in same cell overlap. Rows and columns can be either set to a fixed size, auto-size to their child preferred size, or take up all space remaining unoccupied by other rows and columns.

Named components (with specified name value) can be accessed by calling node.getComponent(name) method. Components whose autoProperty attribute is enabled will have a pair of get/set property methods generated automatically by classFromTemplate method. The auto-properties from above template can be used as below.

Code:
var node1 = new OrgChartNode(diagram);
node1.setBounds(new Rect(25, 15, 60, 25));
node1.setTitle("CEO");
node1.setFullName("John Smith");
node1.setDetails(
  "Our beloved leader. \r\n" +
  "The CEO of this great corporation.");
node1.setImage("ceo.png");
diagram.addItem(node1); 



...

Auto properties are also automatically serialized in JSON format, cloned by node.clone() method and saved/restored by undo commands.

If anyone is interested in trying the preview build, please download this archive containing updated script files and sample project:
http://mindfusion.eu/_beta/jsdiag31.zip

Any comments, questions and general feedback are welcome.
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print