Collaborative drawing with MindFusion.Diagramming and SignalR

In this post we’ll show how to use the ASP.NET MVC diagram library and SignalR to implement collaborative drawing of diagrams. This can be useful in visual planning tools where users work together on a task, such as project management or mind-mapping applications.

The complete sample project is available here –
CollabMindMap.zip

Start by creating an ASP.NET MVC application in Visual Studio. Open Tools -> Library Package Manager -> Package Manager Console and install the MindFusion.Diagramming.Mvc package –

Install-Package MindFusion.Diagramming.Mvc 

While we are there, also install the SignalR package –

install-package Microsoft.AspNet.SignalR

From the project’s context menu, Add submenu, select OWIN startup class and add SignalR to the OWIN pipeline by calling –

app.MapSignalR();

Now lets add a diagram view to the home page at Views/Home/Index.cshtml, load the necessary script files and wire up diagram event handlers that will send change notifications to the hub –

@using MindFusion.Diagramming
@using MindFusion.Diagramming.Mvc

@{
    var diagView = new DiagramView("diagramView")
        .NodeCreatedScript("onNodeCreated")
        .NodeModifiedScript("onNodeModified")
        .NodeTextEditedScript("onNodeTextEdited")
        .LinkCreatedScript("onLinkCreated")
        .LinkModifiedScript("onLinkModified")
        .LinkTextEditedScript("onLinkTextEdited")
        .ControlLoadedScript("onDiagramLoaded")
        .SetAllowInplaceEdit(true);

    diagView.Diagram.DefaultShape = Shapes.Ellipse;
}

@Html.DiagramView(diagView, new { style = "width:700px; height:600px;" })

@section scripts
{
    @Scripts.Render("~/Scripts/jquery.signalR-2.0.0.js")
    @Scripts.Render("~/Scripts/MindMap.js")
    @Scripts.Render("~/signalr/hubs")
}

The hub will synchronize operations done on the diagram by one client by sending a notification to all other connected clients. From the project context menu add a SignalR hub class, naming it DiagramHub. The model class we’ll use to describe node changes looks like this –

public class NodeModel
{
    [JsonProperty("x")]
    public double X { get; set; }

    [JsonProperty("y")]
    public double Y { get; set; }

    [JsonProperty("width")]
    public double Width { get; set; }

    [JsonProperty("height")]
    public double Height { get; set; }

    [JsonProperty("id")]
    public string Id { get; set; }

    [JsonProperty("text")]
    public string Text { get; set; }
}

Add these three methods to the hub class to synchronize node creation, move, resize and edit-text operations –

public void NodeCreated(NodeModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).nodeCreated(clientModel);
}
public void NodeModified(NodeModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).nodeModified(clientModel);
}
public void NodeTextEdited(NodeModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).nodeTextEdited(clientModel);
}

The diagram event handlers in MindMap.js fill in the model objects and call respective hub methods –

function onNodeCreated(s, e)
{
    var hubId = $.connection.hub.id;
    e.node.id = hubId + s.getItems().length;

    var r = e.node.bounds;
    var model =
    {
        id: e.node.id,
        x: r.x,
        y: r.y,
        width: r.width,
        height: r.height
    };
    
    diagramHub.server.nodeCreated(model);
}

function onNodeModified(s, e)
{
    var r = e.node.bounds;
    var model =
    {
        id: e.node.id,
        x: r.x,
        y: r.y,
        width: r.width,
        height: r.height
    };
    diagramHub.server.nodeModified(model);
}

function onNodeTextEdited(s, e)
{
    var model =
    {
        id: e.node.id,
        text: e.getNewText()
    };
    diagramHub.server.nodeTextEdited(model);
}

Handle notifications sent from server to clients by updating the diagram from received model objects –

$(function ()
{
    diagramHub = $.connection.diagramHub;
    diagramHub.client.nodeCreated = function (model)
    {
        var node = diagram.factory.createShapeNode(
            model.x, model.y, model.width, model.height);
        node.id = model.id;
    };
    diagramHub.client.nodeModified = function (model)
    {
        var node = findNode(model.id);
        node.setBounds(
            new MindFusion.Drawing.Rect(
                model.x, model.y, model.width, model.height),
            true);
    };
    diagramHub.client.nodeTextEdited = function (model)
    {
        var node = findNode(model.id);
        node.setText(model.text);
    };
    $.connection.hub.start();
});

Finally add these helper functions for finding items and storing a global diagram reference –

function onDiagramLoaded(s, e)
{
    diagram = s;
}

function findNode(id)
{
    for (var i = 0; i < diagram.nodes.length; i++)
    {
        var node = diagram.nodes[i];
        if (id == node.id)
            return node;
    }
    return null;
}

function findLink(id)
{
    for (var i = 0; i < diagram.links.length; i++)
    {
        var link = diagram.links[i];
        if (id == link.id)
            return link;
    }
    return null;
}

Start several copies of the application in separate browser instances on your system (or even on different machines if you publish it on IIS or Azure). Now start drawing nodes, moving them or editing their text – changes done on the diagram in one browser will be immediately reflected in all other browsers connected to the hub. However we aren’t yet synchronizing link operations; lets fix that –

public class LinkModel
{
    [JsonProperty("id")]
    public string Id { get; set; }

    [JsonProperty("originId")]
    public string OriginId { get; set; }

    [JsonProperty("destinationId")]
    public string DestinationId { get; set; }

    [JsonProperty("text")]
    public string Text { get; set; }
}

Add following hub methods in server class –

public void LinkCreated(LinkModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).linkCreated(clientModel);
}
public void LinkModified(LinkModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).linkModified(clientModel);
}
public void LinkTextEdited(LinkModel clientModel)
{
    Clients.AllExcept(Context.ConnectionId).linkTextEdited(clientModel);
}

Call them from respective JavaScript handlers of diagram link events –

function onLinkCreated(s, e)
{
    var hubId = $.connection.hub.id;
    e.link.id = hubId + s.getItems().length;

    var model =
    {
        id: e.link.id,
        originId: e.link.getOrigin().id,
        destinationId: e.link.getDestination().id,
    };
    
    diagramHub.server.linkCreated(model);
}

function onLinkModified(s, e)
{
    var hubId = $.connection.hub.id;
    var model =
    {
        id: e.link.id,
        originId: e.link.getOrigin().id,
        destinationId: e.link.getDestination().id,
    };
    diagramHub.server.linkModified(model);
}

function onLinkTextEdited(s, e)
{
    var model =
    {
        id: e.link.id,
        text: e.getNewText()
    };
    diagramHub.server.linkTextEdited(model);
}

Handle link-related client notifications by creating or modifying links –

diagramHub.client.linkCreated = function (model)
{
    var link = diagram.factory.createDiagramLink(
        findNode(model.originId), findNode(model.destinationId));
    link.id = model.id;
};
diagramHub.client.linkModified = function (model)
{
    var link = findLink(model.id);
    link.setOrigin(findNode(model.originId));
    link.setDestination(findNode(model.destinationId));
};
diagramHub.client.linkTextEdited = function (model)
{
    var link = findLink(model.id);
    link.setText(model.text);
};

Now the application will also synchronize link operations across all connected clients. Here’s a small diagram synchronized between three different browsers –
collaborative mind map

The sample above uses MindFusion’s ASP.NET MVC API. Code for other frameworks will look similar as MindFusion maintains same diagramming model for multiple platforms. You can download the trial version of any MindFusion.Diagramming component from this page.

Enjoy!

JavaScript Diagram Library, V2.8 Released

The new JavaScript library has been released with the following new features:

Fluent API

Builder objects with property setters and shortcut methods for font and brush creation add support for fluent programming style. Static With and instance init methods in DiagramItem, Style and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects.

DiagramLink improvements

  • HeadStroke, HeadStrokeThickness and HeadStrokeDashStyle properties let you customize arrowhead strokes independently of line segments strokes.
  • The AllowSelfLoops property of Diagram class controls whether users are allowed to draw self-loop links.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points.
The new JS Diagram boasts improved DiagramLink-s.

The new JS Diagram boasts improved DiagramLink-s.

Miscellaneous

A trial version is available for download here:

Download MindFusion Diagram Library for JavaScript, V2.8

About Diagramming for JavaScript Library: Written 100% in JavaScript, this tool is a dynamic, browser based visualization library that uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and allows you to integrate interactive diagrams for JavaScript and HTML into any web application. This MindFusion graphing library supports a variety of predefined node shapes, customizable links, rich event set and many appearance options.

The user interaction model includes resizing / moving / selecting and modifying any diagram element. The library boasts an elegant API, which is documented in details, numerous step-by-step guides and tutorials. The Diagramming API also provides TypeScript definitions. Various samples are provided to let you learn quickly how to use the most important features of the library – check them here. The JavaScript diagram builder is not only the perfect choice for creating any type of diagram in the browser – it can also arrange it the way you wish with a mouse click using one of its automatic graph layout algorithms. For more details about the features of the component, please visit the Diagram for JavaScript page.

Lane diagram in JavaScript

In this post we will show how to use the JavaScript diagram library to create a lane diagram. The complete example is available here:

Lanes.zip

Create a new HTML page and add references to the jQuery library and to the MindFusion.Diagramming library:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="MindFusion.Common.js" type="text/javascript"></script>
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>

Create shortcuts to some classes from the diagram model:

var Events = MindFusion.Diagramming.Events;
var Diagram = MindFusion.Diagramming.Diagram;
var AnchorPattern = MindFusion.Diagramming.AnchorPattern;
var AnchorPoint = MindFusion.Diagramming.AnchorPoint;
var Alignment = MindFusion.Diagramming.Alignment;
var MarkStyle = MindFusion.Diagramming.MarkStyle;
var Style = MindFusion.Diagramming.Style;
var Theme = MindFusion.Diagramming.Theme;
var LinkShape = MindFusion.Diagramming.LinkShape;
var Shape = MindFusion.Diagramming.Shape;
var LaneGrid = MindFusion.Diagramming.Lanes.Grid;
var LaneHeader = MindFusion.Diagramming.Lanes.Header;
var LaneStyle = MindFusion.Diagramming.Lanes.Style;
var Rect = MindFusion.Drawing.Rect;
var Point = MindFusion.Drawing.Point;
var HandlesStyle = MindFusion.Diagramming.HandlesStyle;

Next, add a canvas the the page and create a diagram from it by using the Diagram.create() method:

diagram = Diagram.create($("#diagram")[0]);

You can obtain a reference to the diagram lane grid by calling the Diagram.getLaneGrid() method. You can use the returned object to add rows and columns to the grid and customize its appearance. Finally, to display the grid, call Diagram.setShowLaneGrid(). The customization is omitted here for brevity, but the full code is available in the associated sample project.

The lane grid implies some restrictions to the node and links inside of it. For example, the nodes can be moved only inside the row lanes of the grid. To enforce those restrictions, we will handle several diagram events:

diagram.addEventListener(Events.nodeCreated, onNodeCreated);
diagram.addEventListener(Events.nodeModified, onNodeModified);
diagram.addEventListener(Events.linkCreated, onLinkCreated);

In the nodeCreated event handler, get the gird cell at the top left of the node’s bounding rectangle and align the node to this cell:

function onNodeCreated(sender, e) {
    var node = e.getNode();
    node.setAnchorPattern(pattern);
    node.setHandlesStyle(HandlesStyle.HatchHandles3);

    // Place the box within the grid
    var bounds = node.getBounds();
    var topLeft = new Point(bounds.x, bounds.y);

    var cellBoundsReciever = {};
    if (!grid.getCellFromPoint(topLeft, cellBoundsReciever))
        return;
    var cellBounds = cellBoundsReciever.cellBounds;

    var pixel = 1;

    bounds.y = cellBounds.y + pixel;
    bounds.height = cellBounds.height - 2 * pixel;
    node.setBounds(bounds);
}

Similar rules can be applied to the links in the linkCreated event handler.

The following image illustrates the grid in action:

JavaScript Swimlane Diagram

For more information on MindFusion JavaScript diagram library, see its help reference and overview page.

Enjoy!

Class inheritance diagram in JavaScript

In this post we will show how to use the JavaScript diagram library to generate a class inheritance diagram. The complete example is available here:

InheritanceDiagram.zip

and a live version here:

http://mindfusion.eu/demos/jsdiagram/Inheritance.html

Let’s start by creating shortcuts to some classes from the diagram model:

var Diagram = MindFusion.Diagramming.Diagram;

var DiagramItem = MindFusion.Diagramming.DiagramItem;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var DiagramNode = MindFusion.Diagramming.DiagramNode;
var ShapeNode = MindFusion.Diagramming.ShapeNode;
var TableNode = MindFusion.Diagramming.TableNode;
var ContainerNode = MindFusion.Diagramming.ContainerNode;
var FreeFormNode = MindFusion.Diagramming.FreeFormNode;
var SvgNode = MindFusion.Diagramming.SvgNode;

var ScrollBar = MindFusion.Diagramming.ScrollBar;
var Rect = MindFusion.Drawing.Rect;
var Font = MindFusion.Drawing.Font;
var TreeLayout = MindFusion.Graphs.TreeLayout;

Next, create a function that takes a Diagram instance and a list of class names as parameters. It will create a TableNode for each class. Each property of the class prototype is listed in a TableNode cell. If the getBaseType function detects a class inherits another one from the list, we’ll create a link between their nodes. Finally, the diagram is arranged using the TreeLayout algorithm.

function createClassDiagram(diagram, classes)
{
    var classConstructors = [];

    // create a table node for each class
    for (var i = 0; i < classes.length; i++)
    {
        var className = classes[i];
        var node = diagram.getFactory().createTableNode(20, 20, 42, 42);
        node.redimTable(1, 0);
        node.setText(className);
        node.setBrush("white");
        node.setCaptionBackBrush("lightgray");
        node.setCaptionFont(
            new Font("sans-serif", 3, true /*bold*/, true /*italic*/));
        node.setScrollable(true);

        var ctor = eval(className);
        for (var property in ctor.prototype)
        {
            node.addRow();
            node.getCell(0, node.rows.length - 1).setText(property);
        }
        classConstructors.push(ctor);
        ctor.classNode = node;
    }
	
    // create a diagram link for each prototype inheritance
    classConstructors.forEach(function(ctor)
    {
        var base = getBaseType(ctor);
        if (base && base.classNode)
        {
            var link = diagram.factory.createDiagramLink(
                base.classNode,
                ctor.classNode);
            link.setHeadShape(null);
            link.setBaseShape("Triangle");
            link.setBaseShapeSize(3);
        }
    });

    // arrange as a tree
    var treeLayout = new TreeLayout();
    treeLayout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;
    diagram.arrange(treeLayout);
}

The getBaseType implementation checks if a class was registered as a base for the argument using MindFusion.registerClass method or the common prototype inheritance pattern.

function getBaseType(ctor)
{
    // if class registered using MindFusion.registerClass
    if (ctor.__baseType)
        return ctor.__baseType;

    // if  prototypical inheritance with Child.prototype = new Parent()
    if (ctor.prototype && ctor.prototype.constructor != ctor)
        return ctor.prototype.constructor;
	
    return null;
}

The ready handler creates a Diagram instance binding it to a #diagram canvas element. It then calls createClassDiagram with a list of DiagramItem -derived classes as argument:

$(document).ready(function ()
{
    TableNode.prototype.useScrollBars = true;
    ScrollBar.prototype.background = "Lavender";
    ScrollBar.prototype.foreground = "DarkGray";

    // create a Diagram component that wraps the "diagram" canvas
    var diagram = Diagram.create($("#diagram")[0]);

    createClassDiagram(diagram,
    [
        "DiagramItem",
        "DiagramLink",
        "DiagramNode",
        "ShapeNode",
        "TableNode",
        "ContainerNode",
        "FreeFormNode",
        "SvgNode"
    ]);
});

If you run the sample now, you should see this nice visualization of MindFusion classes 🙂

JavaScript class inheritance diagram

For more information on MindFusion JavaScript diagram library, see its help reference and overview page.

Enjoy!

Design custom shapes with WPF Diagram

Watch here the video for this tutorial.

This tutorial will run you through the process of creating custom WPF diagram shapes using the built-in Shape Designer. Keep in mind that the Designer is intended as a sample and is limited in terms of functionality. The designer is available inside the installation of MindFusion.Diagramming for WPF but is also included in this tutorial for convenience. For the purposes of this tutorial, we will create an ‘AND Gate’ circuit diagram shape as illustrated by the following image:

Circuit shapes

Run the Shape Designer application through the ShapeDesign.exe. The Shape Designer opens up with a single rectangular shape ready to be modified.

Diagramming WPF Circuit Shapes 1

The Shape Designer does not currently support shape renaming (remember, it’s just a sample), therefore create a new shape through the Shapes menu and name it ‘AndGate’.

Diagramming WPF Circuit Shapes 2

Select the newly created shape from the list on the left. In the editor select the right segment of the shape’s rectangle and press the DEL button on the keyboard. This will delete the segment and make the shape triangular.

Diagramming WPF Circuit Shapes 3

Adjust the end points of the shape segments so that it gets deflated on both sides. To adjust a segment, hover it with the mouse (so that its adjustment handles appear), then drag the handles.

Diagramming WPF Circuit Shapes 4

Select the arc primitive from the list on the right side of the screen. Drag this primitive over the top segment of the shape (until it gets highlighted in red) then drop.

Diagramming WPF Circuit Shapes 5

This will replace the line segment with an arc. Repeat the same process for the bottom segment of the shape.

Diagramming WPF Circuit Shapes 6

Adjust the middle point of both segments so that the shape looks protruded. Then drag three line primitives from the list on the right to the editor pane. Be careful not to drop the primitives over existing elements because this will replace the elements.

Diagramming WPF Circuit Shapes 7

Align the newly created line primitives with the existing shape.

Diagramming WPF Circuit Shapes 8

From the list with anchor points at the right side of the application, drag two anchor points from the first kind (input only) and one anchor point from the second kind (output only) and drop them inside the editor. Align the anchor points with the end points of the line segments created in the previous step.

Diagramming WPF Circuit Shapes 9

This will conclude the creation of the ‘AND Gate’ shape. You can test the shape in the preview diagram at the bottom of the screen.

Diagramming WPF Circuit Shapes 10

Save the shape library. Using the same approach, recreate the other circuit shapes from the image above. The following screenshot illustrates the complete library.

Diagramming WPF Circuit Shapes 11

The shape designer along with the shape library containing the circuit shapes can be downloaded from the link below:

Design Circuit Shapes

You are welcome to ask any questions about the WpfDiagram control at MindFusion discussion board or per e-mail at support@mindfusion.eu.

Click here here to visit the official page of the control.

We hope you find this tutorial useful and thank you for your interest in MindFusion developer tools.

Node.js diagram module

MindFusion.Diagramming for JavaScript is now also available as a Node.js module, and you can use the diagram API you know and love in server code 🙂 A sample server application and the module script are available here:

diagram_nodejs.zip

For example, you can submit to server a diagram drawn interactively by the user and examine its contents there by iterating over the nodes and links members of the Diagram class:

// on client side
$.ajax(
{
	type: "post",
	url: "http://localhost:1234/diagram", 
	contentType: "application/json",
	data: diagram.toJson(),
	success: function(data)
	{
		console.log('success');
	},
	error: function(jqXHR, textStatus, err)
	{
		console.log(err);
	}
});

// on server side
app.post('/diagram', function(req, res)
{
    // won't be required in final release
    var dummyCanvas = { parentNode:{} };

    // create Diagram instance
    var diagram = new Diagram(dummyCanvas);

    // load diagram elements drawn by user
    diagram.fromJson(req.rawBody);

    // examine diagram contents
    console.log(diagram.nodes.length + " nodes");
    console.log(diagram.links.length + " links");
    diagram.nodes.forEach(function (node, index)
    {
        console.log("node " + index + ": " + node.getText());
    });

    // send some response
    res.send('ok');
});

Or you could build the diagram on server side and send it to the browser to render in client-side Diagram control:

// on server side
app.get('/diagram', function(req, res)
{
    // won't be required in final release
    var dummyCanvas = { parentNode:{} };

    // create Diagram instance
    var diagram = new Diagram(dummyCanvas);

    // create some diagram items
    var node1 = diagram.getFactory().createShapeNode(10, 10, 40, 30);
    var node2 = diagram.getFactory().createShapeNode(60, 10, 40, 30);
    var link = diagram.getFactory().createDiagramLink(node1, node2);

    // set nodes' content
    node1.setText("node.js");
    node1.setBrush("orange");
    node2.setText("hello there");

    // send diagram json
    res.send(
        diagram.toJson());
});

// on client side
$.ajax(
{
	type: "get",
	url: "http://localhost:1234/diagram", 
	success: function(data)
	{
		diagram.fromJson(data);
	},
	error: function(jqXHR, textStatus, err)
	{
		console.log(err);
	}
});

To run the sample Node.js application, run “node server.js” from command line and open http://localhost:1234/client.html in your browser. Draw some nodes and links, edit their text and click Post to see them enumerated in Node’s console. Clicking the Get button will show this diagram built on server side:

diagram built in node.js

For more information on MindFusion’s JavaScript Diagram API, see MindFusion.Diagramming online help

Enjoy!

MindFusion.WinForms Pack, 2016.R2

MindFusion suite of WinForms controls has just been released and boasts a variety of new features to make you build WinForms applications faster and easier. Here is a review of the new version:

MindFusion Chart Control MindFusion.Charting

New data model

Data that should be drawn in charts is read through an interface called Series, whose instances can be assigned to the Series properties of Chart and SeriesRenderer classes. You can implement this interface in your own model classes to avoid duplicating data. The library includes several pre-defined series classes that let you specify data via IList or array objects.

Different series types in a single plot

The new data model allows adding different series types to a single plot

New rendering model

Chart graphics are drawn inside Plot components by SeriesRenderer-derived objects. Each plot can contain multiple series renderers from same or different types. For example, you can draw area, line and bar graphics in same plot by adding AreaRenderer, LineRenderer and BarRenderer objects to its SeriesRenderers collection. Chart controls automatically generate a series renderer of appropriate type for their Series.

Dashboard

The Dashboard control can contain multiple plots, axes, legends, images, gauges and text blocks arranged in dynamic layout. Individual components can be added to dashboard’s default RootPanel or LayoutPanel containers, or for more complex layouts add intermediary panels such as GridPanel and StackPanel to the default ones. To show different types of chart graphics, add Plot2D to draw in 2D Cartesian coordinate system, Plot3D for 3D Cartesian system, and PolarPlot for polar coordinate system. To draw horizontal or vertical axes, add respectively XAxisRenderer and YAxisRenderer objects. To show gauges, add LinearGaugeRenderer or OvalGaugeRenderer, whose Gauge property contains the gauge model definition.

The new WinForms Chart has a built-in dashboard control.

The new WinForms Chart has a built-in dashboard control.

Print and export

The Dashboard control and Chart controls that derive from it expose Print and PrintPreview methods for printing on paper. Call the ExportImage and CreateImage methods to generate bitmap image of the dashboard. The ExportPdf method exports the chart to a PDF (Portable Document Format) file. The ExportSvg method exports the chart to an SVG (Scalable Vector Graphics) file.

Styling

Values of appearance properties can come from several places in the component hierarchy. SeriesRenderer-derived objects can use attributes from their local SeriesStyle, from plot’s SeriesStyle, or from the *Series properties in current Theme. Component classes use either their local properties or ones defined in the theme. By default, appearance properties in SeriesRenderer > and Component > classes have null values, which makes the drawing code use values from the theme.

A rich choice of styling options are available

A rich choice of styling options are available

MindFusion WebForms Diagrammer MindFusion.Diagramming

Free-form nodes

A FreeFormNode collects all points from users’ mouse or touch input and displays them as node’s outline. To let users draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms. Use the Points property of FreeFormNode to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than AutoCloseDistance, the node’s Closed property is automatically set to true.

Free form nodes are drawn with the mouse

Free form nodes: just draw the node with the mouse and the control understands the shape you want

LinkLabel edit events

LinkTextEditing and LinkTextEdited events are now raised also when the user edits a LinkLabel. The Label property of the respective event-arguments class identifies the LinkLabel that is being edited. Label is a null reference if the user is editing link’s Text value.

keyboard16x16MindFusion Virtual Keyboard

MindFusion Virtual Keyboard has been initially added to MindFusion Pack for WinForms.

The WinForms virtual keyboard control: extended layout

The WinForms virtual keyboard control: extended layout

WPF Reporting ToolMindFusion.Reporting

Improved charts
MindFusion.Reporting now uses the new MindFusion charting engine to display charts in reports. The presentation of the charts has been greatly improved (particularly when resizing the charts).

Pie charts in a WinForms report

Pie charts in a WinForms report

Spreadsheet-16x16MindFusion.Spreadsheet

New and improved charts
MindFusion.Spreadsheet now uses the new MindFusion charting engine to display charts in worksheets. Along with the improved appearance (particularly when resizing the charts), the following new features have been added:

  • New Candlestick chart type;
  • New BarOverlayed and ColumnOverlayed chart types;
  • Several new legend position types;

Zoom
The worksheets can now be zoomed in and out through the new Zoom property.

Charts in a spreadsheet

The new chart engine makes spreadsheets even more appealing

MindFusion clients can download the installer for the latest version from the clients area on MindFusion website.

A direct link to download the WinForms pack is available from here:

Download MindFusion WinForms Pack 2016.R2

Updated assemblies are also available as MindFusion.Pack NuGet package.

About MindFusion.WinForms Pack: A rich set of programming components that provide WinForms developers with the complete list of features to build even the most complicated business applications fast and easy. The components integrate seamlessly and provide with a mouse click functionality that takes months to develop. Each control boasts various samples and tutorials, extensive documentation and numerous customization options that make it suitable for every type of software and scenario.

Further details about each component in the pack are available from MindFusion website:

Use this link to buy a license online. All components are royalty-free.

Virtual Keyboard Controls Added To MindFusion WinForms/WPF Packs

MindFusion UI controls suite now includes a virtual keyboard.

MindFusion UI controls suite now includes a virtual keyboard.

Dear MindFusion current and future clients,
Dear FreezePro clients,

MindFusion is pleased to announce that as of April 2016 it has acquired FreezePro Virtual Keyboard components, which will be released as part of MindFusion WinForms/WPF controls suites. We want to use this opportunity to thank all MindFusion and FreezePro clients for the loyalty – you’ve chosen us over multiple competitive products and we believe you are satisfied with your choice.

To please you even more we offer you special prices for upgrading to MindFusion WinForms/WPF pack. You get a 30% discount on the difference between the price of a component’s license you own and the price of the WinForms/WPF pack license you want to buy. MindFusion clients who already own a WinForms/WPF Pack license get the Virtual Keyboard component free of charge.

If you want to use the preferential upgrade prices please send an e-mail to info@mindfusion.eu no later than May 31st, 2016.

If you have technical questions about any of the components please contact MindFusion at support@mindfusion.eu. Use the same email for questions about licensing or transfer of intellectual property rights.

Welcome to the bigger MindFusion family!

MindFusion WPF Pack

MindFusion.WPF Pack, 2016.R1

The new release of MindFUsion WPF Control Suite lists many new features, aimed to empower developers to create compelling business applications with even less efforts. The pack also includes new samples and tutorials. Below are the details:

License keys
There is no separate trial build of the control assemblies anymore. Instead, set the LicenseKey property of the controls to disable their evaluation mode and stop displaying trial messages. If your application contains more than one control by MindFusion, you could call MindFusion.Licensing.LicenseManager.AddLicense(key) from application start-up code to specify the key once instead of setting it per each control.

Visual Studio 2015 support
MindFusion Pack for WPF now includes support for Visual Studio 2015. The installer can create VS2015 toolbox palette for the component.

Barcodes
The new BarcodeLabel class allow displaying EAN, UPC or QR barcodes.

BarcodeLabel: QR barcodes

BarcodeLabel: QR barcodes

MindFusion Chart ControlMindFusion.Charting for WPF

Multiple Axes
The chart control enables developers to create unlimited number of axes of each type – X, X2, Y and Y2. Each axis is an instance of the Axis class and has its own set of properties for complete customization – label style, brush, tick length etc. You can set the X and Y axes of each ChartSeries to a series of your choice and thus bind each chart series to different axes, if you wish.

Multiple axes in the WPF chart control.

Multiple axes in the WPF chart control.

Improved Zooming
Selected area with width smaller than MinZoomSpan does not evoke any action in the control. In addition, the new ZoomChanged event fires whenever zoom occurs and provides useful data for the zoom action with its ZoomChangedArgs.

Cross Hair Improvements
The cross hair control has been improved with several new properties, a method and an event. The properties are:

The new CrossHairPosition method returns the current location of the cross hair. For more precise handling of cross hair movements a new event is available – CrossHairPositionChanged.

Greatly Improved 3D Charts
3D charts have received plenty of improvements, new properties and performance optimizations:

  • PointMergeThreshold – The property sets the radius of an area around a given point where no other points are drawn. The result is better performance especially in charts with numerous points, which happen to be close to one another.
  • InterpolationType.None – A new InterpolationType has been added to the InterpolationType, which does not interpolation but adds data directly and connects the points with triangulation.

The SurfaceType enum has been replaced with three bool properties, which makes the API easier to understand and use.

ScatterFaceSize – the property regulates the size of the polygons that build a 3D scatter. Bigger values lead to bigger polygons, which results in faster performance and more rough scatter mesh.

Effect3D.ShaderEffect – the property can be applied to all 3D chart elements, including scatters and performs much faster.

3D surface chart with color map and wire frame.

3D surface chart with color map and wire frame.

Exporting Images
Two new methods have been added for exporting the chart as an image – CreateImage and ExportImage.

Custom Formatting of Labels in Real-time Charts
A new property has been added to the RealTimeChart library – Axis.LabelFormatProvider. Use it to specify custom formatting of numeric labels. If required, you can specify format arguments for your format classes with Axis.LabelFormat.

MindFusion WebForms DiagrammerMindFusion.Diagramming for WPF

Free-form nodes
A FreeFormNode collects all points from users’ mouse or touch input and displays them as node’s outline. To let users draw free-form nodes interactively, set Diagram.Behavior to DrawFreeForms or LinkFreeforms. Use the Points property of FreeFormNode to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than Diagram.AutoCloseDistance, the node’s Closed property is automatically set to true . AutoCloseDistance default value is Double.MaxValue , so free-form nodes are always closed.

Wpf Diagram: Free Shapes

Wpf Diagram: Free Shapes

Shape control points
Shape formulas can now be parameterized by associating control points with Shape objects. Each control point is passed to the shape script as a named variable. Apart from the name, you can specify the default, min and max coordinates for each parameter via the ShapeControlPoint constructor, and whether to treat its values as percents or fixed offset.

Resize table columns and rows
Columns and rows of a TableNode can now be resized interactively if its AllowResizeColumns or AllowResizeRows properties are enabled. In order to resize, move the mouse pointer to the border line on column’s right side or row’s bottom side until it shows resize cursor and start dragging. The control raises TableColumnResizing and TableRowResizing events to let you validate new size or prevent resizing some elements.

Barcode nodes
The BarcodeNode class displays EAN, UPC or QR barcodes as node’s content. In-place edit operations let users enter new numeric codes for 1D codes or text strings for QR codes. The barcode format is specified via the Format property, the encoded number or text is set via Content, and color of 1D bars / 2D modules via BarColor.

Barcode diagram nodes

Barcode diagram nodes

Support for Visio stencils
The diagram can now display shapes from stencil files in Visio 2003 XML stencil format (.vsx). To load a stencil file, use an instance of the VisioStencil class. The shapes are displayed in the diagram through VisioNode objects.

ShapeDesigner improvements

  • The ShapeDesigner control supports undo. Call its Undo or Redo methods to respectively undo or redo a change done to the designed shape.
  • ZoomFactor property added to ShapeDesigner. It also supports interactive zoom in/out via mouse wheel.
  • The SelectedElement property exposes the graphic element currently selected in ShapeDesigner canvas. You can bind to its stroke and brush properties to create alternative user interface for editing element attributes.

AnchorPatern improvements

  • The XUnit and YUnit properties allow specifying the coordinates of an AnchorPoint as a fixed offset from the node’s top-left corner rather than in percentage, so that the point position does not change when the node is resized.
  • The AnchorPattern property of Shape class lets you associate anchor points with shape definitions. If a ShapeNode instance does not contain its own AnchorPattern, it will derive the one defined by the node’s Shape.
  • The RowAnchorPattern property lets you specify default AnchorPattern for all table rows.

Map-16x16MindFusion.Mapping for WPF

Zoom control
The ZoomControl class lets user change interactively the current zoom level and scroll position of a MapView. To set it up, add a ZoomControl to the page, place it anywhere over a MapView, and set the control’s Target property to that view. Set the ZoomStep and ScrollStep properties to specify the amount added to view’s zoom level or scroll position by ZoomControl’s buttons.

map-control-zooming

Miscellaneous

  • The new Behavior property lets users select multiple map elements interactively.

WPF Reporting ToolMindFusion.Reporting for WPF

Report Parameters
Parameters can now be added to a report through the new Parameters collection of the Report class. The parameters provide name, description and value and can be of any type, including expression. For more information about parameters, check the Report Parameters topic.

Barcodes
MindFusion.Reporting for WPF reports can now display UPC-A, UPC-E, EAN-8, EAN-13, and QR barcodes. The barcodes are represented by the new Barcode report item.

wpf_barcode_report_items

Schedule ControlMindFusion.Scheduling for WPF

Interactive Recurrence Rescheduling
Recurrences can be rescheduled interactively by holding down the RescheduleRecurrenceKey while dragging a recurrent item. The control tries to preserve the current pattern of the recurrence when possible.

New Theme
A new built-in theme is available in MindFusion.Scheduling for WPF – the Light theme. It is available through the ThemeType enumeration.

The new 'Light' theme

The new ‘Light’ theme

New Members
Several new properties and events have been added to the control:

You can read details about the new features of the pack at the news page on the forum. The trial version is available for direct download from this link:

Download MindFusion.Pack for WPF 2016.R1

About MindFusion.Wpf Pack: A set of advanced WPF components that help you build your business application easy and on time. The tools provide you with a complete set of features to create, edit and render complex flowcharts, charts, diagrams, calendars, schedules, maps and reports. A set of gauges and UI elements is also included. Each component offers various samples, tutorials and detailed documentation. The controls offer simple and intuitive API, completely customizable appearance, numerous input/output options and a rich event set. Each tool has been thoroughly tested to guarantee that you and your application get the high quality and performance you deserve.

You can read more about the capabilities of each component at its features page:

Prices and licenses are explained in details at the buy page.

Creating custom CompositeNode components

In this post we’ll examine how CompositeNode components work in MindFusion.Diagramming for Windows Forms, and in the process create a custom radio button component. You can find the completed sample project here: RadioComponent.zip

CompositeNode was created as alternative of the ControlNode class, which lets you present any Windows Forms control as a diagram node. ControlNode has many advantages, such as letting you design the hosted user controls using Visual Studio designer, reusing them in other parts of the user interface, and including complex framework or third-party controls as their children. From the fact that each user control creates a hierarchy of Win32 windows come some disadvantages too:

  • ControlNodes cannot mix with other diagram elements in the Z order but are always drawn on top
  • performance deteriorates if showing hundreds of nodes
  • mouse events might not reach the diagram if hosted controls capture mouse input
  • print and export might not be able to reproduce the appearance of hosted controls without additional work (handling PaintControl event)

On the other hand, CompositeNode does all its drawing in DiagramView control’s canvas and is not affected by the issues listed above. CompositeNode lets you build node’s UI by composing hierarchy of components derived from ComponentBase class. Pre-defined components include layout panels, read-only or editable text fields, images, borders, buttons, check-boxes and sliders. If the UI component you need isn’t provided out of the box, you could still implement it as a custom class that derives from ComponentBase or more specific type and overriding the GetDesiredSize, ArrangeComponents and Draw methods. Lets see how that works using a RadioButtonComponent as an example.

Derive RadioButtonComponent from CheckBoxComponent so we reuse its IsChecked and Content properties:

class RadioButtonComponent : CheckBoxComponent
{
}

CompositeNode relies on a dynamic layout system that lets components determine their size by overriding GetDesiredSize method, and arranging children in allocated size by means of ArrangeComponents method. For radio button we’ll call its base class to measure content size and add enough space for drawing the radio graphics element (a circle) horizontally, while fitting it in measured height:

float RadioSize(SizeF size)
{
	return Math.Min(size.Width, size.Height);
}

public override SizeF GetDesiredSize(SizeF availableSize, IGraphics graphics)
{
	var s = base.GetDesiredSize(availableSize, graphics);
	s.Width += RadioSize(s);
	return s;
}

ArrangeComponents calls the base class to arrange its content on the right side of available space:

public override void ArrangeComponents(RectangleF availableSpace, IGraphics graphics)
{
	var radioSize = RadioSize(availableSpace.Size);
	availableSpace.X += radioSize;
	availableSpace.Width -= radioSize;
	base.ArrangeComponents(availableSpace, graphics);
}

Now override Draw and render standard radio button graphics on the left side of the component, and content on the right side:

public override void Draw(IGraphics graphics, RenderOptions options)
{
	var radioSize = RadioSize(Bounds.Size);
	var r = radioSize / 2 - 1;
	var cr = r - 1;

	graphics.FillEllipse(Brushes.White, Bounds.X + 1, Bounds.Y + 1, 2 * r, 2 * r);
	using (var pen = new System.Drawing.Pen(Color.Black, 0.1f))
		graphics.DrawEllipse(pen, Bounds.X + 1, Bounds.Y + 1, 2 * r, 2 * r);
	if (IsChecked)
		graphics.FillEllipse(Brushes.Black, Bounds.X + 2, Bounds.Y + 2, 2 * cr, 2 * cr);

	GraphicsState s = graphics.Save();
	graphics.TranslateTransform(radioSize - 1 + Bounds.X, Bounds.Y);
	Content.Draw(graphics, options);
	graphics.Restore(s);
}

We’ll want only one radio from a group to be selected. For our purposes we can count all radio buttons placed inside same stack panel as part of same group. Override the OnClick method to unselect all buttons in parent panel and select the clicked one:

protected override void OnClicked(EventArgs e)
{
	var parentStack = Parent as StackPanel;
	if (parentStack != null)
	{
		foreach (var child in parentStack.Components)
		{
			var radio = child as RadioButtonComponent;
			if (radio != null)
				radio.IsChecked = false;
		}
	}
	this.IsChecked = true;
}

That’s it, the radio button component is ready with just a screenful of code 🙂 Let’s check how it works by creating an OptionNode class that shows a group of radio buttons and exposes a property to access or change selected one:

class OptionNode : CompositeNode
{
}

You could create the stack panel and radio buttons from code if you need more dynamic configuration, e.g. one with variable number of radio buttons. For this example we’ll just load a fixed template consisting of four buttons from XML:

const string Template = @"
	<SimplePanel>

        <Shape Name=""Shape"" Shape=""RoundRect"" />

		<Border Padding=""2"">

			<StackPanel Name=""RadioGroup""
				Orientation=""Vertical"" Spacing=""1"" HorizontalAlignment=""Center"">
				<RadioButtonComponent Padding=""2"">
					<RadioButtonComponent.Content>
						<Text Text=""option 1"" Font=""Verdana, 3world, style=Bold"" />
					</RadioButtonComponent.Content>
				</RadioButtonComponent>
				<RadioButtonComponent Padding=""2"">
					<RadioButtonComponent.Content>
						<Text Text=""option 2"" Font=""Verdana, 3world, style=Bold"" />
					</RadioButtonComponent.Content>
				</RadioButtonComponent>
				<RadioButtonComponent Padding=""2"">
					<RadioButtonComponent.Content>
						<Text Text=""option 3"" Font=""Verdana, 3world, style=Bold"" />
					</RadioButtonComponent.Content>
				</RadioButtonComponent>
				<RadioButtonComponent Padding=""2"">
					<RadioButtonComponent.Content>
						<Text Text=""option 4"" Font=""Verdana, 3world, style=Bold"" />
					</RadioButtonComponent.Content>
				</RadioButtonComponent>
			</StackPanel>

		</Border>

    </SimplePanel>";

The template can be loaded using the XmlLoader class. We’ll also store a reference to the stack panel so we can access its child radio buttons:

public OptionNode()
{
	Load();
}

public OptionNode(Diagram d)
	: base(d)
{
	Load();
}

private void Load()
{
	Components.Add(XmlLoader.Load(Template, this, null));

	radioGroup = FindComponent("RadioGroup") as StackPanel;
}

StackPanel radioGroup;

Now implement a SelectedOption property that lets us select a radio button by its index. Define it as nullable integer so we can represent missing select too:

public int? SelectedOption
{
	get
	{
		for (int i = 0; i < radioGroup.Components.Count; i++)
		{
			var radioButton = (RadioButtonComponent)radioGroup.Components[i];
			if (radioButton.IsChecked)
				return i;
		}
		return null;
	}
	set
	{
		for (int i = 0; i < radioGroup.Components.Count; i++)
		{
			var radioButton = (RadioButtonComponent)radioGroup.Components[i];
			radioButton.IsChecked = value == i;
		}
	}
}

Let’s try it – create a few nodes and run the application, you’ll see the screen shown below:

var node1 = new OptionNode();
node1.Bounds = new RectangleF(20, 20, 30, 40);
node1.SelectedOption = 0;
diagram.Nodes.Add(node1);

var node2 = new OptionNode();
node2.Bounds = new RectangleF(90, 20, 30, 40);
node2.SelectedOption = 1;
diagram.Nodes.Add(node2);

var node3 = new OptionNode();
node3.Bounds = new RectangleF(20, 80, 30, 40);
node3.SelectedOption = null;
diagram.Nodes.Add(node3);

var node4 = new OptionNode();
node4.Bounds = new RectangleF(90, 80, 30, 40);
node4.SelectedOption = 3;
diagram.Nodes.Add(node4);

for (int i = 0; i < diagram.Nodes.Count - 1; i++)
	diagram.Factory.CreateDiagramLink(
		diagram.Nodes[i], diagram.Nodes[i + 1]);

Radio buttons in MindFusion diagram nodes

To be fair, this kind of nodes is simple enough to implement using standard TableNode class where radio button graphics are either custom drawn or set as Image inside table cells in first column, and text displayed in second column. However the radio buttons can be mixed with other components in CompositeNodes to implement more complex user interfaces than ones possible with tables.

For more information on MindFusion flow diagramming libraries for various desktop, web and mobile platforms, see MindFusion.Diagramming Pack page.

Enjoy!