Create a new HTML page and add references to the jQuery library and to the MindFusion.Diagramming library:<\/p>\n
<script<\/span> src<\/span>=\"jquery.min.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> src<\/span>=\"MindFusion.Common.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> src<\/span>=\"MindFusion.Diagramming.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>><\/pre>\nCreate shortcuts to some classes from the diagram model:<\/p>\n
var Events = MindFusion.Diagramming.Events;\nvar Diagram = MindFusion.Diagramming.Diagram;\nvar AnchorPattern = MindFusion.Diagramming.AnchorPattern;\nvar AnchorPoint = MindFusion.Diagramming.AnchorPoint;\nvar Alignment = MindFusion.Diagramming.Alignment;\nvar MarkStyle = MindFusion.Diagramming.MarkStyle;\nvar Style = MindFusion.Diagramming.Style;\nvar Theme = MindFusion.Diagramming.Theme;\nvar LinkShape = MindFusion.Diagramming.LinkShape;\nvar Shape = MindFusion.Diagramming.Shape;\nvar LaneGrid = MindFusion.Diagramming.Lanes.Grid;\nvar LaneHeader = MindFusion.Diagramming.Lanes.Header;\nvar LaneStyle = MindFusion.Diagramming.Lanes.Style;\nvar Rect = MindFusion.Drawing.Rect;\nvar Point = MindFusion.Drawing.Point;\nvar HandlesStyle = MindFusion.Diagramming.HandlesStyle;<\/pre>\nNext, add a canvas the the page and create a diagram from it by using the Diagram.create() method:<\/p>\n
diagram = Diagram.create($(\"#diagram\")[0]);<\/pre>\nYou 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.<\/p>\n
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:<\/p>\n
diagram.addEventListener(Events.nodeCreated, onNodeCreated);\ndiagram.addEventListener(Events.nodeModified, onNodeModified);\ndiagram.addEventListener(Events.linkCreated, onLinkCreated);<\/pre>\nIn 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:<\/p>\n
function onNodeCreated(sender, e) {\n var node = e.getNode();\n node.setAnchorPattern(pattern);\n node.setHandlesStyle(HandlesStyle.HatchHandles3);\n\n \/\/ Place the box within the grid\n var bounds = node.getBounds();\n var topLeft = new Point(bounds.x, bounds.y);\n\n var cellBoundsReciever = {};\n if (!grid.getCellFromPoint(topLeft, cellBoundsReciever))\n return;\n var cellBounds = cellBoundsReciever.cellBounds;\n\n var pixel = 1;\n\n bounds.y = cellBounds.y + pixel;\n bounds.height = cellBounds.height - 2 * pixel;\n node.setBounds(bounds);\n}<\/pre>\nSimilar rules can be applied to the links in the linkCreated event handler.<\/p>\n
The following image illustrates the grid in action:<\/p>\n
![\"JavaScript](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/08\/JsDiagramLanes.png\")
<\/a><\/p>\nFor more information on MindFusion JavaScript diagram library, see its help reference<\/a> and overview page<\/a>.<\/p>\nEnjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading