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!

Diagramming for Android, V1.0.2 Has Been Released

MindFusion has released a version 1.0.2 of its Diagramming component for Android. Here is an overview of the new features:

Swimlanes

The lanes grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. To display the lane grid, set the EnableLanes property of the Diagram class to true. The swimlane grid can be customized through various attributes exposed by the Diagram.LaneGrid property. You can specify the number of rows and columns, the headers, the cell appearance and others.

Swimlanes in an Android app.

Swimlanes in an Android app.

Miscellaneous

  • New stock shapes have been added to the Shape class: RightTriangle, Decagon, Trapezoid, Star4Pointed, Star5Pointed, Star6Pointed, Star7Pointed, Star16Pointed, Star24Pointed, Star32Pointed, Donut and Plaque.
  • A long press displays the context menu if View.setOnCreateContextMenuListener method has been called.
  • resizeToFitText method added to ShapeNode and TreeViewNode.
Android app showing a typical flowchart.

Android app showing a typical flowchart.

The new version is available for download from the following link:

Download Diagramming for Android, V1.0.2

If you require technical support, please use the forum or write us at support@mindfusion.eu. A help desk is also available. Providing fast and competent technical support is among the priorities of MindFusion. We answer most support inquiries within hours of receiving them.

About Diagramming for Android: A native Java class library, which provides your Android application with a powerful set of features for creating, customizing and displaying flowcharts, genealogy trees, class hierarchies, networks, algorithms and much more. The component offers a rich choice of predefined shapes, many pen and brush options as well HTML-like formatting of text. Diagram nodes can hold text as well images, can be semi-transparent and support glass reflection effects. The component offers various automatic layout algorithms and a rich user interaction model, which supports zoom, scroll, alignment guides and more. You can read the features list at the features web page of the component. For pricing and licenses check this link.