Next, add references to the necessary script files:<\/p>\n
<script<\/span> src<\/span>=\"MicrosoftAjax.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>>\n<\/span><script<\/span> src<\/span>=\"BlockDiagEdit.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>><\/pre>\nIn the load handler in the script file, setup the diagram properties and populate the node list with prototype containers and shape nodes, that will represent respectively systems and modules in our block diagrams:<\/p>\n
Sys.Application.add_load(function (sender, args)\n{\n\t\/\/ create a Diagram component that wraps the \"diagram\" canvas\n\tdiagram = $create(Diagram, null, null, null, $get(\"diagram\"));\n\tdiagram.addEventListener(Events.nodeCreated, onNodeCreated);\n\tdiagram.addEventListener(Events.linkCreated, onLinkCreated);\n\tdiagram.setLinkHeadShapeSize(3);\n\tdiagram.setLinkHeadShape(\"Alternative\");\n\tdiagram.setAllowInplaceEdit(true);\n\n\t\/\/ create a NodeListView component that wraps the \"nodeList\" canvas\n\tvar nodeList = $create(MindFusion.Diagramming.NodeListView,\n null, null, null, $get(\"nodeList\"));\n\tnodeList.setIconSize(new Size(48, 48));\n\tnodeList.setDefaultNodeSize(new Size(24, 24));\n\n\tvar colors = [\n\t\t\"#FF5555\",\n\t\t\"#55FF55\",\n\t\t\"#5555FF\",\n\t\t\"#FFFFFF\"\n\t];\n\n\t\/\/ add container to the NodeListView to represent \"system\" blocks\n\tfor (var i = 0; i < 4; ++i)\n\t{\n\t\tvar node = new ContainerNode(diagram);\n\t\tnode.setBrush(colors[i]);\n\t\tnodeList.addNode(node, \"System \" + (i + 1));\n\t}\n\n\t\/\/ add container to the NodeListView to represent \"module\" blocks\n\tfor (var i = 0; i < 4; ++i)\n\t{\n\t\tvar node = new MindFusion.Diagramming.ShapeNode(diagram);\n\t\tnode.setShape(\"Rectangle\");\n\t\tnode.setBrush(colors[i]);\n\t\tnodeList.addNode(node, \"Module \" + (i + 1));\n\t}\n});\n<\/pre>\nHandle the nodeCreated event to make containers larger, and start inplace edit operation to let users enter text immediately after dropping a node:<\/p>\n
function onNodeCreated(sender, args)\n{\n\tvar node = args.getNode();\n\tif (ContainerNode.isInstanceOfType(node))\n\t{\n\t\t\/\/ make containers larger\n\t\tvar bounds = node.getBounds().clone();\n\t\tbounds.width = 100;\n\t\tbounds.height = 75;\n\t\tnode.setBounds(bounds);\n\t}\n\n\t\/\/ let user enter text immediately\n\tdiagram.beginEdit(node);\n}\n<\/pre>\nWhen there aren’t anchor points defined, the diagram control snaps link points to nearest point of nodes borders. Let’s automatically align points when links are created to make them straight horizontal or vertical lines if they are already close to being such. Otherwise leave points unchanged to let users draw diagonal lines too:<\/p>\n
function onLinkCreated(sender, args)\n{\n\tvar link = args.getLink();\n\tvar start = link.getStartPoint();\n\tvar end = link.getEndPoint();\n\n\t\/\/ make link horizontal if close to being one\n\tif (Math.abs(start.x - end.x) > 10 && Math.abs(start.y - end.y) < 4)\n\t{\n\t\tend.y = start.y;\n\t\tlink.setEndPoint(end);\n\t}\n\n\t\/\/ make link vertical if close to being one\n\tif (Math.abs(start.y - end.y) > 10 && Math.abs(start.x - end.x) < 4)\n\t{\n\t\tend.x = start.x;\n\t\tlink.setEndPoint(end);\n\t}\n}\n<\/pre>\nHere’s the kind of block diagrams and flowcharts you can now draw:
\n![\"Block](\"http:\/\/mindfusion.dev\/_samples\/BlockDiagEdit.png\")
<\/p>\n
The complete example can be downloaded from this link:
\nhttps:\/\/mindfusion.dev\/_samples\/BlockDiagEdit.zip<\/a><\/p>\nEnjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this example, we will create a block diagram editor using MindFusion.Diagramming for JavaScript. First, let’s add two HTML canvas elements to a page, one for the Diagram control and one for a NodeListView control that will serve as a … Continue reading