Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Version 3.1 beta (Read 4027 times)
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Version 3.1 beta
Jan 16th, 2018 at 10:44am
Print Post  
MvcDiagram version 3.1 contains the following new features and improvements -

Composite nodes
The CompositeNode class implements nodes whose appearance can be defined via composition of components and layout containers. The content of a composite node can be created by building a tree of components programmatically, or by loading a JSON template. This initial release includes layout containers such as StackPanel and GridPanel. Objects from the MindFusion.Drawing namespace now double as CompositeNode components (Image, Text, Path, Rect). Future versions will add interactive components like buttons and text editors. Extended overview of templating and client-side use is available here. Custom node classes can now be defined using only server side code as shown below -

Code
Select All
@using System.Drawing
@using MindFusion.Diagramming
@using MindFusion.Diagramming.Mvc


@{
    string template = @"{
	component: ""GridPanel"",
	rowDefinitions: [""*""],
	columnDefinitions: [""22"", ""*""],
	children:
	[
		{
			component: ""Rect"",
			name: ""Background"",
			pen: ""black"",
			brush: ""white"",
			columnSpan: 2
		},
		{
			component: ""Image"",
			name: ""Image"",
			autoProperty: true,
			location: ""Images/icon3.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,
					value: ""details"",
					font: ""Arial 3""
				}
			]
		}
	]
}
";

    DiagramView view = new DiagramView("diagramView1");
    view.RegisterItemType(typeof(OrgChartNode), "OrgChartNode", "OrgChartNode", 100, template);
    view.LoadFromJson(Request.Form["diagramView1_PostData"]);

    if (!IsPost)
    {
        var node1 = new OrgChartNode(view.Diagram);
        node1.Bounds = new RectangleF(20, 10, 80, 40);
        node1.Title = "CEO";
        node1.FullName = "John Smith";
        node1.Details = "Description";
        node1.Image = "../Images/icon3.png";
        view.Diagram.Nodes.Add(node1);
    }

    ViewBag.DiagramView = view;
}

@using (@Html.BeginForm())
{
    <input type="hidden" id="collapsed"/>
    <div id="header" style="height: 59px;">
        <input type="submit" value="Submit" />

        <div style="float: right; margin-right: 5px; margin-top: 5px;">
            <input type="button" id="expandButton" onclick="onExpandCollapse()" value=">" />
        </div>
    </div>
    <div id="info" style="top: 80px; bottom: 24px;">
        <div id="infoTab" style="padding: 10px;">
            <h1>About this sample</h1>
            <p>
            </p>
        </div>
    </div>
    <div id="content" style="top: 80px; bottom: 24px;">
        <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px">
            @Html.DiagramView(((DiagramView)ViewBag.DiagramView)
        .SetClientSideMode(ClientSideMode.MsAjax)
        .NodeClickedScript("nodeClicked")
        .LinkClickedScript("linkClicked"),
        new { style = "width:100%;height:100%;" })
        </div>
    </div>
    <div id="footer" style="height: 24px;">
        <span id="copyright"></span>
    </div>
}

<script type="text/javascript">

    function nodeClicked(sender, args) {
        var node = args.getNode();
        node.setFullName("Macaroni");
    }

</script>


public class OrgChartNode : CompositeNode
{

	public OrgChartNode()
	{
	}

	public OrgChartNode(Diagram diagram)
		: base(diagram)
	{
	}

	[AutoJson]
	public string Image { get; set; }

	[AutoJson]
	public string Title { get; set; }

	[AutoJson]
	public string FullName { get; set; }

	[AutoJson]
	public string Details { get; set; }
} 



Animated layout
arrangeAnimated methods added to Diagram and ContainerNode classes display movement of items from their original locations to new locations assigned by the layout object. This can be used to create an explode effect by starting new layout from overlapping nodes on same position, or an insertion effect by adding a new node to an existing layout.

Export Excel files
The ExcelExporter class from MindFusion.Diagramming.Export.Excel.dll assembly exports diagrams to Excel Open XML format (XSLX) files. Diagrams are exported as Excel AutoShapes drawings. The Export overload that takes a DiagramDocument parameter creates a sheet for each DiagramPage in the document. The Export(Diagram) overload creates a single Excel sheet.

Overview improvements
~ ScaleMode enumeration and properties added to Overview control implement several scaling modes. The FitAll element corresponds to the original behavior where the Overview always fits diagram's contents. FixedScale mode applies the scale specified via overview's ScaleFactor property. CombinedScales mode multiples overview's ScaleFactor by diagram's current ZoomFactor.
~ If AllowZoom is enabled, users can zoom the diagram by resizing the overview's viewport tracking rectangle.
~ MinVisibleFontSize specifies a threshold value that hides text if scaled font sizes become smaller.

Visio2013Exporter improvements
~ Visio2013Exporter processes links' arrowheads.
~ Visio2013Exporter preserves the diagram Z order.
~ Visio2013Exporter exports links' Text and Labels.
~ Visio2013Exporter exports Image of ShapeNode objects.

Miscellaneous
~ ImagePadding property of ShapeNode and Cell lets you set padding space between elements' borders and their Image.
~ LinkPadding property added to LayeredLayout specifies how much space to leave between links when LinkType is set to Cascading.
~ Export overloads that write to Stream objects added to PdfExporter, VisioExporter and Visio2013Exporter.
~ Non-blocking ArrangeAsync methods run layout calculations in a background task. This is only available in .NET 4.5 build of the diagram assemblies.

If anyone is interested in trying the beta version, please download this archive containing the updated assemblies and script files:
https://mindfusion.eu/_beta/mvcdiag31.zip

Any comments, questions and general feedback are welcome.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint