![](\"https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/mouse_events.png\" "\\"JavaScript")
<\/a><\/p>\nWe will use the MindFusion Diagramming library for JavaScript.<\/a><\/p>\n I. Project Setup<\/strong><\/p>\n We add a reference to the MindFusion.Diagramming.js and MindFusion.Common.js files. We also add a reference to another file called MouseEvents.js. This is our code-behind file.<\/p>\n In the BODY of the web page we create a Canvas element, to which we assign an id. This is important, because we will refer to the Canvas in code:<\/p>\n II. Diagram Settings<\/strong><\/p>\n In the code-behind file that we called MouseEvents.js we use the DOMContentLoaded event to initialize the diagram.<\/p>\n We use the createControl<\/a> method of the AbstractionLayer class to create an instance of the Diagram<\/a> class. The setBounds<\/a> method determines the size of the diagram’s drawing area. If this size is bigger than the size of the Canvas, the diagram automatically shows scrollbars. Note that only if the diagram’s area is larger than the canvas we can use panning.<\/p>\n We use some settings of the Diagram<\/a> class to customize the application:<\/p>\n The links will be routed and rounded and no grid will be rendered.<\/p>\n III. Diagram Items<\/strong><\/p>\n We create the diagram nodes with the createShapeNode<\/a> method of the Factory<\/a> class. The Factory<\/a> class as an instance is available through the getFactory()<\/a> method: We make each third shape Ellipse and we choose the brush on a random principle out of three brushes, that we initialized in an array. Each seventh shape is slightly smaller – that is set with the setBounds method, which takes as an argument a Rect,<\/a> that is slightly smaller than the Rect<\/a> instance that we use when we create the shape nodes.<\/p>\n The connectors among the nodes are created with the createDiagramLink<\/a> method of Factory<\/a> . We cycle through all 50 nodes and connect each one of them with a randomly taken node from the diagram nodes collection. This collection is available through the nodes<\/a> proeprty of the Diagram<\/a> class:<\/p>\n We customize the appearance of the link through the setHeadShape<\/a> method. We choose the ‘Circle’ shape as a head to each link.<\/p>\n We have created the diagram items with the same bounds, which means they are on top of each other. The best way to arrange them is with one of the automatic layout algorithms, available with the JsDiagram. They are members of the MindFusion.Graphs namespace – you can check the rest. In our sample we’ve chosen the LayeredLayout<\/a> ,which provides quite nice result. We set its direction<\/a> to LayoutDirection<\/a> .There a few other properties that we’ve set that regulate the node distance, the layer distance and more:<\/p>\n All layouts are applies through the arrange method of the Diagram<\/a> that takes an instance of the layout as an argument.<\/p>\n IV. Pan and Zoom<\/strong><\/p>\n We will implement pan and zoom by handling standard DOM events. The first one is the “wheel” event, which we attach to the diagram canvas element:<\/p>\n We use the getZoomFactor<\/a> and setZoomFactor<\/a> methods of the Diagram<\/a> , to manipulate the zoom ratio. The zoom step is calculated based on the deltaY value of the event args. You can command the amount of zoom by dividing by a smaller or a larger number. It is important that we call preventDefault() on the event arguments, to surpass the default response of the canvas to the wheel event.<\/p>\n The panning is implemented by handling the mousedown and mouseup DOM events of the Canvas.<\/p>\n If we want to make the Diagram<\/a> pan we need simply to change the diagram’s behavior with the setBehavior<\/a> method. The options are members of the Behavior<\/a> enumeration. When the user clicks on the Diagram<\/a> and the Ctrl key is pressed, we change the diagram’s behavior to “Pan”. When the mouse is up, but the Ctrl key is pressed, we rest the behavior back to LinkShapes. This is the default behavior, where dragging with the mouse creates new shapes, while dragging between existing DiagramShape<\/a> -s, creates DiagramLink<\/a> -s.<\/p>\n With that our sample is ready. You can download the source code from this link:<\/p>\n Download the Mouse Events Sample with JavaScript Diagram<\/a><\/p>\n Technical support is available through MindFusion forum here.<\/a><\/p>\n About Diagramming for JavaScript:<\/i> This native JavaScript library provides developers with the ability to create and customize any type of diagram, decision tree, flowchart, class hierarchy, graph, genealogy tree, BPMN diagrams and much more. The control offers rich event set, numerous customization options, animations, graph operations, styling and themes. You have more than 100 predefined nodes, table nodes and more than 15 automatic layout algorithms. Learn more about Diagramming for JavaScript at https:\/\/mindfusion.dev\/javascript-diagram.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" We will build a diagram with 50 random nodes and we will zoom and pan this diagram programmatically. Here is a screenshot of the final diagram, which is a link to the sample: We will use the MindFusion Diagramming library … Continue reading <script src=\"MindFusion.Common.js\" type=\"text\/javascript\"><\/script>\n<script src=\"MindFusion.Diagramming.js\" type=\"text\/javascript\"><\/script>\n<script src=\"MouseEvents.js\" type=\"text\/javascript\"><\/script><\/pre>\n
<div style=\"width: 100%; height: 100%; overflow: auto;\">\n <canvas id=\"diagram_canvas\" width=\"2100\" height=\"2100\">\n This page requires a browser that supports HTML 5 Canvas element.\n <\/canvas>\n<\/div><\/pre>\n
document.addEventListener(\"DOMContentLoaded\", function ()\n{\n \/\/ create a Diagram component that wraps the \"diagram_canvas\" canvas\n diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, document.getElementById(\"diagram_canvas\"));\n diagram.setBounds(new Rect(5, 5, 2000, 1000));<\/pre>\ndiagram.setDefaultShape(\"Rectangle\");\ndiagram.setRouteLinks(true);\ndiagram.setRoundedLinks(true);\ndiagram.setShowGrid(false);<\/pre>\n
\nfor(var i = 0; i < 50; i++)<\/p>\n {\n var colorIndex = Math.floor(Math.random() * 3); \n var shape = diagram.getFactory().createShapeNode(new Rect(136, 36, 20, 10));\n shape.setBrush({ type: 'SolidBrush', color: colors[colorIndex] });\n if(i % 3 == 0)\n shape.setShape('Ellipse');\n else \n shape.setShape('Rectangle');\n if( i % 7 == 0)\n {\n shape.setBounds(new Rect(136, 36, 16, 8));\t\n }\n\t\t\n shape.setText(\"Node \" + (i + 1).toString());\n shape.setTextColor(\"white\");\n }<\/pre>\ndiagram.nodes.forEach(function(node)\n{\n var nodeIndex = Math.floor(Math.random() * 50); \n\n var node2 = diagram.nodes[nodeIndex];\n var link = diagram.getFactory().createDiagramLink(node, node2);\n link.setHeadShape(\"Circle\");\n})<\/pre>\nvar layout = new MindFusion.Graphs.LayeredLayout();\nlayout.direction = MindFusion.Graphs.LayoutDirection.LeftToRight;\nlayout.siftingRounds = 0;\nlayout.nodeDistance = 8;\nlayout.layerDistance = 8;\ndiagram.arrange(layout);<\/pre>\n
var dgrm = document.getElementById('diagram_canvas');\n\ndgrm.addEventListener('wheel', function(e)\n{\n var zoom = diagram.getZoomFactor();\n zoom -= e.deltaY \/ 10;\n if (zoom > 10)\n diagram.setZoomFactor(zoom);\n\n e.preventDefault(); \/\/ do not scroll\n});<\/pre>\n\/* events fired on the draggable target *\/\ndgrm.addEventListener('mousedown', function(e)\n{\n if( e.ctrlKey)\n\tdiagram.setBehavior(MindFusion.Diagramming.Behavior.Pan);\n \n}, false);\n\ndgrm.addEventListener('mouseup', function(e)\n{\n if( e.ctrlKey)\n\tdiagram.setBehavior(MindFusion.Diagramming.Behavior.LinkShapes);\n \n}, false);<\/pre>\n