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.

MindFusion WinForms Spreadsheet Control: Convert XLSX to PDF

This blog demonstrates how easily you can convert XLSX files to PDF using the Windows Forms Spreadsheet control.

Setup

Create a new WinForms application and add the necessary assemblies to the project. Add a WorkbookView control to the main application window. Note, that this is not necessary for the conversion – it is done only to display the original XLSX file.

Perform the conversion

Add a button to the main form, set its text to ‘Convert…’ and handle its Click event. In the event handler display an OpenFileDialog to query the user for the input XLSX file, then display a SaveFileDialog to request the target PDF file. Once the two files are specified, proceed with the conversion by creating an ExcelImporter and PdfExporter objects and using their Import and Export methods in succession:

// Import the data
var importer = new ExcelImporter();
importer.Import(xlsxPath, workbook1);

// Export the worksheet as PDF
var exporter = new PdfExporter();
exporter.EnableGridLines = true;
exporter.Export(workbook1.Worksheets[0], pdfPath);

// Open the PDF
System.Diagnostics.Process.Start(pdfPath);

The xlsxPath and pdfPath variables identify the respective XLSX and PDF file names. The workbook1 variable represents the Workbook displayed on the form. Once the conversion is complete, the PDF file is opened in the default PDF viewer by calling Process.Start.

The following image illustrates the result:

The source code of the project together with all necessary libraries can be downloaded from here:

Convert .XLSX to .PDF Files Using the WinForms Spreadsheet Control: Download Sample

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

Click here here to visit the official page of the MindFusion WinForms Spreadsheet control.

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

Custom Templates With the WPF Diagram Control

In this blog you will learn how to create a presentation of a hierarchical organization using MindFusion WPF Diagram control. The hierarchy is presented as a diagram, where each node represents an employee in the organization and each link represents the direct relationship between employees. The nodes in the diagram use custom templates to give a more detailed description of the employee, as well as to enable editing of various properties.

Setup

Create a new WPF application and add the necessary assemblies to the project. In the main window, declare the following namespace:

xmlns:diag="http://mindfusion.eu/diagramming/wpf"

Then declare an instance of the DiagramView class inside the root grid:

<diag:DiagramView x:Name="diagramView">
    <diag:Diagram x:Name="diagram" BackBrush="White" />
</diag:DiagramView>

Creating the custom node

To create the custom node, from the “Project -> Add New Item” menu add a new CustomControl (WPF) item to the project. This automatically creates a themes folder inside the project and a generic.xaml resource dictionary, which contains the template of the newly added class. Rename the newly created file (and class) to OrgChartNode. Ensure that the new class derives from TemplatedNode rather than Control. Then define the following dependency properties in the class: Title, FullName, and Image, of types string and ImageSource respectively.

Define the appearance of the node in its template in the generic.xaml file. In this case the node will display a round border, an image of the employee, its title, name, and description, and several buttons that can be used to change the role of the employee or add subordinates. The components bind directly to the properties of the node class. For example:

<TextBox AcceptsReturn="False" FontFamily="Verdana" FontSize="12"
    BorderBrush="Transparent" Background="Transparent" Text="{Binding FullName}" />

The complete listing of the node’s template can be found in the project below.

To handle the Click event of the buttons in the template, register a routed event handler in the OrgChartNode class:

AddHandler(Button.ClickEvent, new RoutedEventHandler(OnClick));
...
void OnClick(object sender, RoutedEventArgs e)
{
    ...
}

Declare an Index property in the OrgChartNode class, which will indicate the role of the employee. Changing the role will automatically update the title and background color of the node:

public int Index
{
    get { return Images.IndexOf(Image); }
    set
    {
        if (value != -1)
        {
            Image = Images[value];
            Title = Titles[value];
            Brush = Fills[value];
        }
        else
        {
            Image = null;
        }

        InvalidateVisual();
    }
}

Create the hierarchy

Now that the custom node is ready, we can create a diagram representing the hierarchy. In the code behind of the main window, create a series of OrgChartNode objects, each representing an employee in the organization, then link the nodes using the CreateDiagramLink method of the diagram Factory class:

var node1 = new OrgChartNode
{
    Bounds = new Rect(0, 0, 300, 160),
    FullName = "Mike Powell",
    Text = "This is the leader of the sample organization.",
    Index = 2
};
diagram.Nodes.Add(node1);

var node2 = new OrgChartNode
{
    Bounds = new Rect(0, 0, 300, 160),
    FullName = "Emily Williams",
    Text = "Emily is the leader highest in the PR hierarchy.",
    Index = 1
};
diagram.Nodes.Add(node2);
...
diagram.Factory.CreateDiagramLink(node1, node2);

Finally, arrange the hierarchy by using the built-in tree layout:

TreeLayout layout = new TreeLayout();
layout.Type = TreeLayoutType.Centered;
layout.LinkStyle = TreeLayoutLinkType.Cascading3;
layout.Direction = TreeLayoutDirections.TopToBottom;
layout.KeepRootPosition = false;
layout.LevelDistance = 40;
layout.Arrange(diagram);

The following image illustrates the result:

Diagramming_Wpf_Templates

The source code of the project together with all necessary libraries can be downloaded from here:

Download Organization Hierarchy Sample

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

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

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

MindFusion Component Suites With 30% Price Discount in July

Get a pack of MindFusion controls with 30% discount in July, 2016.

Get a pack of MindFusion controls with 30% discount in July, 2016.

MindFusion has completed integrating FreezePro Virtual Keyboard components in its WinForms and WPF component suites. On this occasion we offer all MindFusion
prospective buyers a special 30% discount on any license for any pack they buy throughout  July, 2016.

The discount is applied when you enter coupon code KPP-45K2D47GKJ at the purchase page. The number of times you can apply the discount is unlimited.

Clients who already own a license for a MindFusion Pack can get an upgrade
subscription with the same discount during the same time period.

If you are interested in purchasing just a Virtual Keyboard license then you use
a 20% discount from the retail price if you buy till July 31st, 2016. The coupon
code is VKP-45K2D47GKW.

The following “Buy” pages provide detailed information about the licensing scheme
and prices.

Buy MindFusion WinForms Pack License
Buy MindFusion WPF Pack License
Buy MindFusion WinForms Virtual Keyboard License
Buy MindFusion WPF Virtual Keyboard License

MindFusion reminds you that certain types of people and organizations are always
eligible for a discount – check here the list.

For additional questions, please write at support@mindfusion.eu.

Thank you for considering MindFusion as your partner in software development.

ASP.NET Org Chart with the Diagram Control

In this post you’ll learn how to create a beautiful organization chart where most of the work is done by the ASP.NET flowchart control. We’ll use the capabilities of the control to create nodes, where we’ll put an image and formatted text. We’ll create automatically links among the nodes and apply the tree layout algorithm to arrange the diagram. Let’s start.

I. Add the Necessary DLLs.

Create a new blank ASP.NET project and add those of the dll-s of the control that we need for this project:

ASP.NET Diagram dll-s needed to build the the org chart

ASP.NET Diagram dll-s needed to build the the org chart

MindFusion.Diagramming, MindFusion.Diagramming.WebForms, MindFusion.Common, MindFusion.Common.WebForms. The asp.net diagram control needs the MindFusion.Diagramming.js file to render its contents. If you add it directly into the project’s folder you won’t have to add a reference to it. Since we create a ew project folder “Scripts” where we put it, we’ll have to reference it in code. We’ll talk about this in the next step.

II. Setup of the Diagram Control.

We add a new WebForm file to the project and into the HTML code we register the diagramming dll with the tag “ndiag”.


<%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms" TagPrefix="ndiag" %>

We need a reference to a few *.js and *.css files as shown below:


<link href="common/jquery-ui.min.css" rel="stylesheet" />
<link href="common/samples.css" rel="stylesheet" />
<script type="text/javascript" src="common/jquery.min.js"></script>
<script type="text/javascript" src="common/jquery-ui.min.js"></script>
<script type="text/javascript" src="common/samples.js"></script>

The *.js files are located in a folder “common” in the project. Of course, you can reference them from their respective online locations.

Don’t forget the ScriptManager:


<asp:ScriptManager ID="ScriptManager1" runat="server"/>

Now it’s time for the diagram – we add it in the HTML of the page using the “ndiag” tag that we’ve defined above.


<ndiag:DiagramView id="fc" runat="server" ClientSideMode="Canvas" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;" JsLibraryLocation="Scripts/MindFusion.Diagramming.js" TreeExpandedScript="onTreeExpanded">
      <Diagram AutoResize="RightAndDown" DefaultShape="Rectangle" ShapeHandlesStyle="DashFrame" />
</ndiag:DiagramView>

The Diagram is in a DiagramView control that will render it contents. Node the “JsLibraryLocation” attribute – we use it to point to the location of the Diagramming.js file which we’ve placed in the Scripts folder in step 1.

III. Building the Diagram

We get the diagram object that we’ve defined in HTML like that:


Diagram diagram = fc.Diagram;

The data for the org chart is located in a XML file. The structure is something like this:


<Employee>
  <Name>Martin Larovsky</Name>  
  <PhotoUrl>http://mindfusion.eu/_samples/ASP.NET_OrgChart/martin-larovsky.png</PhotoUrl>
  <Title>COO</Title>
  <Level>Executive</Level>
  <Date>Aug 2015</Date>  
    <Employee>
      <Name>Tanja Orsy</Name>
..........................................

Each new hierarchy level is a list of Employee tags contained within the upper Employee node.

The first node is the top of the tree and we read it separately. First we open the XML document and then we get the first employee:


XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load("http://mindfusion.eu/_samples/ASP.NET_OrgChart/employees.xml");
XmlNode ceo = xmlDoc.SelectSingleNode("Employee");

We use the methods of the diagram control to create a new shape node and assign its properties to the data that we’ve read from the XML file:


ShapeNode root = diagram.Factory.CreateShapeNode(nodeBounds);
root.Text = "<b>" + ceo["Name"].InnerText + "</b> (" + ceo["Title"].InnerText + ") since " +
ceo["Date"].InnerText + ""; 
root.Shape = Shape.FromId("RoundRect"); 
root.TextPadding = new Thickness(0, 0, 3, 0); 
root.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(121, 109, 173)); 
root.TextFormat.Alignment = StringAlignment.Far; 
root.EnableStyledText = true; 
root.ImageUrl = ceo["PhotoUrl"].InnerText; 
root.ImageAlign = MindFusion.Drawing.ImageAlign.MiddleLeft;

The Factory class enables us to create different nodes within given bounds. HTML formatting of the text is supported because we have turned on the EnableStyledText property. The node shape is rounded rectangle for aesthetic reasons. The texi is aligned to the right and the image – to the left of the node. We use the ImageUrl property because the image is uploaded online and we just tell the ShapeNode from where to read it.

The nodes are read and created in a method that uses recurrence to cycle through all of them – you can see it in the sample. It has one line that’s worth noting:


//cycles through all nodes using recurrence and creates a DiagramNode for all employees
private void CreateChildren(Diagram diagram, DiagramNode parentDiagNode, XmlNode parentXmlNode)
{
foreach (XmlElement element in parentXmlNode.SelectNodes("Employee"))
{
.................................................................
diagram.Factory.CreateDiagramLink(parentDiagNode, node);

Note how we instruct the Factory to create a link between each node and its parent. This way we have the diagram ready.

IV. The Layout

If you run the application you’ll see just one node. It’s actually a pile of nodes. We need to arrange it but luckily the ASP.NET Diagram control has an impressive selection of layout algorithms. In our case the Tree layout is the perfect choice:


TreeLayout layout = new TreeLayout();
layout.Type = TreeLayoutType.Cascading;
layout.Direction = TreeLayoutDirections.LeftToRight;
layout.LinkStyle = TreeLayoutLinkType.Cascading2;
layout.NodeDistance = 3;
layout.LevelDistance = -8; // let horizontal positions overlap
layout.Arrange(diagram);

The TreeLayout class has plenty of customization options, here we have selected those that would make an org chart look best. You can experiment with the full set of options and see what looks right in your particular scenario.

Here is the final result:

ASP.NET Org Chart

ASP.NET Org Chart

The source code of the project together with all necessary libraries and scripts can be downloaded from here:

Download ASP.NET Organization Browser Sample

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

Click here to visit the official page of MindFusion ASP.NET Diagram 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 ASP.NET Diagram Control, V5.6

MindFusion is proud to present you with the new version of its ASP.NET diagram control.

Below you can read about the recently added features. As always, your questions are welcome. Use the technical support e-mail or MindFusion ASP.NET diagram forum.

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. AutoCloseDistance  default value is float.MaxValue, so free-form nodes are always closed.

Free form nodes allow the user to draw diagram shapes with the mouse of the finger

Free form nodes allow the user to draw diagram shapes with the mouse of the finger

Convert free-form drawings to ShapeNodes

Additional drawing modes, convenient for touch input, convert FreeFormNode objects drawn by user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user’s input is matched are set via diagram’s FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.

Miscellaneous

  • NodePastedScript and LinkPastedScript client-side events raised when items are pasted from the clipboard.
  • PdfExporter now creates page hyperlinks if HyperLink is set to a value in “page://{number}” format, e.g. set “page://1” to open the second PDF page when the item is clicked
  • TypeScript definitions for the client-side Diagramming API are now provided in jsdiag.d.ts file.

Fixed bugs

  • CanvasVirtualScroll mode fixed for parent div size specified in percent units.
  • Fixed bug where the ExpandOnIncoming property specifying link direction for collapse/expand actions did not work correctly.
  • Removed several global JavaScript variables created inadvertently by the control.
  • Fixed bug where ShapeNodes’ Image did not zoom correctly in ImageMap mode for some ImageAlign values.

Installer for the latest version can be downloaded here, or from the clients area on our site:

Download MindFusion ASP.NET Diagram Control, V5.6 Trial

Updated assemblies and script files are also available as MindFusion.Diagramming.WebForms NuGet package.

About MindFusion ASP.NET Diagram Control: This is a reusable ASP.NET control that provides your WebForms application with the complete functionality to create, style and present flowcharts, hierarchies, trees, graphs, schemes, diagrams in the browser. You can leverage the large set of utility methods, path finding capabilities and cycle detection to build the perfect interactive diagram that supports plenty of UI features like tool tips, multiple selection, copy/paste to/from Windows clipboard and many more.

MindFusion ASP.NET control offers you more than 100 predefined node shapes, scrollable tables, 13 automatic layout algorithms, rich choice of pen and brushes and a long list of other options that will greatly shorten the time needed for developing an online business application that must implement diagramming features. MindFusion has built many different samples and tutorials that demonstrate the features of the control and give you abundance of sample code to copy and study. You can read more about the Diagram Control for ASP.NET here.

MindFusion JavaScript Diagram Library V2.6

MindFusion JavaSript Diagram Library has a new version. Here is an overview of the new features:

Free-form nodes

The new version lets you use a special, new type of nodes called FreeFormNode. In this case the control collects all points from users’ mouse or touch input and displays them as node’s outline. In order to allow users to draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms. The Points property of FreeFormNode allows you 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.

Free form nodes allow the user to draw diagram shapes with the mouse of the finger

FreeFormNodes allow the user to draw diagram shapes with the mouse or the finger

Convert free-form drawings to ShapeNodes

This release introduces additional drawing modes, convenient for touch input. They convert FreeFormNode objects drawn by the user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user’s input is matched are set via diagram’s FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.

Miscellaneous

  • TypeScript definitions for the Diagramming API are now provided in jsdiag.d.ts file.
  • nodePasted and linkPasted events are now raised when new DiagramNode and DiagramLink instances are created from clipboard contents.
  • VirtualScroll mode fixed for parent div size specified in percent units.
  • Removed several global variables created inadvertently by the control.

A trial version is available for download here:

Download MindFusion Diagram Library for JavaScript, V2.6

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.