Tutorial 8: Custom Composite Nodes

1. Create a new ASP.NET MVC Application and add a DiagramView control to the page. Follow steps 1-4 from Tutorial 1: Getting started. Add a NodeListView control to the page:

C#

@Html.NodeListView(((NodeListView)ViewBag.NodeListView), new { style = "width:300px;height:500px;" })

2. In the HomeController.cs file define a node template string that lists layout containers and graphics primitives from which nodes should be composed.

C#

string template = @"{
 ""component"": ""SimplePanel"",
 ""children"":
 [
  {
   ""component"": ""Shape"",
   ""name"": ""Frame"",
   ""pen"": ""black"",
   ""strokeThickness"": 0.2,
   ""isOutline"": true,
   ""autoProperty"": true
  },
 {
  ""component"": ""GridPanel"",
  ""rowDefinitions"": [""*""],
  ""columnDefinitions"": [""22"", ""*""],
  ""children"":
  [
   {
    ""component"": ""Image"",
    ""name"": ""Image"",
    ""autoProperty"": true,
    ""location"": ""../Content/icon4.png"",
    ""margin"": ""1"",
    ""imageAlign"": ""Fit""
   },
   {
    ""component"": ""Button"",
    ""brush"": ""red"",
    ""textColor"": ""#fff"",
    ""font"": ""Arial bold"",
    ""text"": ""x"",
    ""cornerRadius"": 3.5,
    ""width"": 6,
    ""height"": 6,
    ""clickHandler"": ""onDeleteClick""
   },
   {
    ""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"",
      ""enableStyledText"": true
     },
     {
      ""component"": ""Text"",
      ""name"": ""Details"",
      ""autoProperty"": true,
      ""text"": ""details"",
      ""font"": ""Arial 3""
     }
    ]
   }
  ]
}]}
";

3. Add a new OrgChartNode class to the project and implement it as below. Its instances will represent the custom nodes posted back fro client side. The AutoJson attribute generates automatic JSON serialization .NET code to transfer values of properties defined in the template.

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

using MindFusion.Diagramming;
using MindFusion.Diagramming.Mvc;
using MindFusion.Json;

namespace Tutorial8.Models
{
    public class OrgChartNode : CompositeNode
    {
        public OrgChartNode()
        {
            Frame = "RoundRect";
        }

        public OrgChartNode(Diagram diagram)
            : base(diagram)
        {
            Frame = "RoundRect";
        }

        public OrgChartNode(OrgChartNode prototype): base(prototype)
        {
            Image = prototype.Image;
            Title = prototype.Title;
            FullName = prototype.FullName;
            Details = prototype.Details;
            Frame = prototype.Frame;
        }

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

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

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

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

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

4. Switch back to HomeController.cs. Set up the DiagramView and NodeListView controls. Custom item types registry is stored in the session. Call RegisterItemType once to register the custom class, and RegisterSession method for any control that will use the custom item type.

C#

DiagramView view = new DiagramView("diagramView1");
view.Behavior = Behavior.Custom;
view.SetCustomNodeType(typeof(OrgChartNode));
view.Diagram.UndoManager.UndoEnabled = true;

// register current session
view.RegisterSession(HttpContext.Session);

// register custom item type
view.RegisterItemType(typeof(OrgChartNode), "OrgChartNode", "OrgChartNode", 100, template);

NodeListView nodeView = new NodeListView("nodeListView1");
nodeView.NodeSize =
nodeView.DefaultNodeSize = new Size(60, 25);

// register current session
nodeView.RegisterSession(HttpContext.Session);

5. Initialize the diagram with some OrgChartNodes:

C#

if (Request.HasFormContentType)
{
    view.LoadFromJson(Request.Form["diagramView1_PostData"]);
    nodeView.LoadFromJson(Request.Form["nodeListView1_PostData"]);
}
else
{
    Diagram diagram = view.Diagram;
    var node1 = new OrgChartNode();
    node1.Bounds = new Rect(25, 15, 60, 25);
    node1.Title = "CEO";
    node1.FullName = "John Smith";
    node1.Details =
        "Our beloved leader.\r\n" +
        "The CEO of this great corporation.";
    node1.Image = "./images/ceo.png";
    node1.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.ForestGreen));
    diagram.Nodes.Add(node1);
    nodeView.AddNode(node1);

    var node2 = new OrgChartNode();
    node2.Bounds = new Rect(25, 55, 60, 25);
    node2.Title = "CTO";
    node2.FullName = "Bob Smith";
    node2.Details = "The technology chief of this great corporation.";
    node2.Image = "./images/cto.png";
    node2.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.OrangeRed));
    diagram.Nodes.Add(node2);
    nodeView.AddNode(node2);

    var node3 = new OrgChartNode();
    node3.Bounds = new Rect(95, 55, 60, 25);
    node3.Title = "HR";
    node3.FullName = "Mary Johnson";
    node3.Details = "Human resources and staff development.";
    node3.Image = "./images/hr.png";
    node3.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.DodgerBlue));
    diagram.Nodes.Add(node3);
    nodeView.AddNode(node3);

    var node4 = new OrgChartNode();
    node4.Bounds = new Rect(175, 55, 60, 25);
    node4.Title = "PR";
    node4.FullName = "Diana Brandson";
    node4.Details = "Public relations and media.";
    node4.Image = "./images/pr.png";
    node4.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.DarkMagenta));
    diagram.Nodes.Add(node4);
    nodeView.AddNode(node4);

    diagram.Factory.CreateDiagramLink(node1, node2);
    diagram.Factory.CreateDiagramLink(node1, node3);
    diagram.Factory.CreateDiagramLink(node3, node4);
}

6. If you run the tutorial now, you should see this in your web browser: