{"id":797,"date":"2014-06-12T09:05:37","date_gmt":"2014-06-12T09:05:37","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=797"},"modified":"2021-01-14T11:15:22","modified_gmt":"2021-01-14T11:15:22","slug":"diagramming-for-javascript-v2-0-beta","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v2-0-beta\/","title":{"rendered":"Diagramming for JavaScript, V2.0"},"content":{"rendered":"<p>We have released Diagramming for JavaScript with a host of new features. Here is an overview:<\/p>\n<p><strong>Undo \/ redo support<\/strong><br \/>\nIf you set the UndoEnabled property to true, the Diagram control tracks changes done to its items and allows undoing and redoing them later by calling the undo() and redo() methods respectively. Multiple changes could be recorded as a single undoable operation by enclosing them between startCompositeOperation() and commitCompositeOperation() calls. You can also create custom undoable operations.<\/p>\n<p><strong>Animations<\/strong><br \/>\nYou can animate Diagram items through the Animation class in the MindFusion.Animations namespace. The class<br \/>\nimplements several built-in animation and easing types, and allows definition of custom animation functions, to create fluid and pleasing animation effects.<\/p>\n<div id=\"attachment_801\" style=\"width: 572px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/animations.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-801\" class=\"size-full wp-image-801\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/animations.png\" alt=\"Animations - visit the online demo page.\" width=\"562\" height=\"350\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/animations.png 562w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/animations-300x186.png 300w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/a><p id=\"caption-attachment-801\" class=\"wp-caption-text\">Animations &#8211; <a href=\"http:\/\/mindfusion.dev\/_samples\/animations\/Animations.html\">visit the online demo page.<\/a><\/p><\/div>\n<p><strong>Clipboard support<\/strong><br \/>\nNow you can copy or cut a single item or a selection of items to a clipboard maintained by the diagram control. This is done programmatically using the copyToClipboard and cutToClipboard methods. To paste the clipboard contents into the current diagram, call pasteFromClipboard.<\/p>\n<p><strong>Swimlanes<\/strong><br \/>\nThe lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. If you want to display the lane grid, set the EnableLanes property of the Diagram class to true. In order to customize the grid, set the various attributes exposed by the LaneGrid property, which lets you specify the number of rows and columns, add headers, customize the cell appearance, etc.<\/p>\n<div id=\"attachment_800\" style=\"width: 618px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/swimlanes.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-800\" class=\"size-full wp-image-800\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/swimlanes.png\" alt=\"A diagram with swimlanes.\" width=\"608\" height=\"349\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/swimlanes.png 608w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/swimlanes-300x172.png 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><\/a><p id=\"caption-attachment-800\" class=\"wp-caption-text\">A diagram with swimlanes.<\/p><\/div>\n<p><strong>Resize of multiple nodes<\/strong><br \/>\nYou can now resize multiple selected nodes simultaneously &#8211; just set the AllowMultipleResize property to true. When enabled, dragging a corner or side adjustment handle of any node resizes all nodes in the selection. The selectionModifying validation event lets you cancel the operation for all nodes.<\/p>\n<p><strong>Magnifier<\/strong><br \/>\nThe new magnifier tool allows users to interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. You can customize the magnifier&#8217;s appearance via properties such as MagnifierShape and MagnifierFrameColor. Its size and magnification can be set via MagnifierWidth, MagnifierHeight and MagnifierFactor properties.<\/p>\n<div id=\"attachment_799\" style=\"width: 441px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/magnifier.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-799\" class=\"size-full wp-image-799\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/magnifier.png\" alt=\"The new magnifier tool.\" width=\"431\" height=\"354\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/magnifier.png 431w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/05\/magnifier-300x246.png 300w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><\/a><p id=\"caption-attachment-799\" class=\"wp-caption-text\">The new magnifier tool.<\/p><\/div>\n<p><strong>Intellisense support<\/strong><br \/>\nThe package now includes a MindFusion.Diagramming-vsdoc.js file providing code completion information. To load it in Visual Studio, add e \/\/\/ &lt;reference path=&#8221;MindFusion.Diagramming-vsdoc.js&#8221; \/&gt; tag to the top of your script files. Use the static Diagram.create and Diagram.find methods instead of $create and $find to let Visual Studio infer the type of returned Diagram objects correctly.<\/p>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li>Set the ModificationStart property to AutoHandles to let users start moving or resizing an item without selecting it first.<\/li>\n<li>The diagram area can be resized automatically to fit the current diagram items as set through the AutoResize property.<\/li>\n<li>The AutoScroll property enables automatic scrolling when the mouse is dragged near the diagram edges.<\/li>\n<li>And much more. Read the full list <a href=\"http:\/\/mindfusion.dev\/Forum\/YaBB.pl?num=1400759781\">here<\/a>.<\/li>\n<\/ul>\n<p>The trial version of the new Diagramming for JavaScript release is available for direct download from the following link:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/JsDiagramTrial.zip\">Download MindFusion.Diagramming for JavaScript Library 2.0 Trial Version<\/a><\/p>\n<p>We have always taken special effort in providing quality technical support to all our clients and evaluators. You can write us at e-mail <a href=\"mailto:support@mindfusion.dev?subject=contact information from web site&amp;body=Please, remember to add mindfusion.dev to your email whitelist. We usually reply to all contact inquiries within 3 to 4 hours. In case you have not received an answer in 24 hours, the email most likely has been filtered by an anti-spam software running at your mail server. Thank you for the understanding!\" target=\"_parent\" rel=\"noopener noreferrer\">support@mindfusion.dev<\/a> or use the <a title=\"Help Desk\" href=\"http:\/\/www.mindfusion.dev\/HelpDesk\/index.php\" target=\"_parent\" rel=\"noopener noreferrer\">help desk.<\/a> You can use the JsDiagram section on <a href=\"http:\/\/mindfusion.dev\/Forum\/YaBB.pl?board=jsdiag_disc\" target=\"_parent\" rel=\"noopener noreferrer\">MindFusion forum<\/a> to post questions about the tool.<\/p>\n<p><em>About Diagramming for JavaScript Library:<\/em> Written 100% in JavaScript, this tool uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and integrate into any web application. JsDiagram 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.<\/p>\n<p>The tool boasts an elegant API, which is documented in details as well numerous step-by-step guides and tutorials. Various samples are provided to let you learn quickly how to use the most important features of the library &#8211; check them <a href=\"http:\/\/mindfusion.dev\/onlinedemo-jsdiagram.html\">here.<\/a> JsDiagram is not only the perfect choice for creating any type of diagram in the browser &#8211; 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 <a href=\"http:\/\/mindfusion.dev\/jsdiagram.html\">JsDiagram page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have released Diagramming for JavaScript with a host of new features. Here is an overview: Undo \/ redo support If you set the UndoEnabled property to true, the Diagram control tracks changes done to its items and allows undoing &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v2-0-beta\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,2],"tags":[213,3,4,212,80,44,16,215,211,214],"class_list":["post-797","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-animations","tag-diagram","tag-flowchart","tag-intellisense-support","tag-javascript","tag-library","tag-magnifier","tag-node-resize","tag-swimlanes","tag-undoredo"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-cR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=797"}],"version-history":[{"count":7,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/797\/revisions"}],"predecessor-version":[{"id":2497,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/797\/revisions\/2497"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}