{"id":255,"date":"2013-05-24T11:37:42","date_gmt":"2013-05-24T11:37:42","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=255"},"modified":"2021-01-08T15:17:56","modified_gmt":"2021-01-08T15:17:56","slug":"diagramming-for-javascript-1-6","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-1-6\/","title":{"rendered":"Diagramming for JavaScript 1.6"},"content":{"rendered":"<p>MindFusion has released a new version of its diagramming library for JavaScript. Here is an overview of<br \/>\nthe most important new features in the control:<\/p>\n<p><strong>Node Effects<\/strong><\/p>\n<p>You can now apply two visual effects to your nodes &#8211; the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_GlassEffect_0.htm\">GlassEffect<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_AeroEffect_0.htm\">AeroEffect<\/a>. In order to apply<br \/>\nan effect, create an instance of the respective class, set its properties and add the instance to the<br \/>\n<a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramNode_getEffects_0.htm\">Effects<\/a> collection. You can add, remove or modify effects at any time and this will immediately affect the appearance of the diagram. You can apply effects of different types simultaneously.<\/p>\n<div id=\"attachment_258\" style=\"width: 436px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/2.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-258\" class=\"size-full wp-image-258\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/2.png\" alt=\"Visual effects applied on diagram nodes.\" width=\"426\" height=\"227\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/2.png 426w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/2-300x159.png 300w\" sizes=\"auto, (max-width: 426px) 100vw, 426px\" \/><\/a><p id=\"caption-attachment-258\" class=\"wp-caption-text\">Visual effects applied on diagram nodes.<\/p><\/div>\n<p><strong>Multiple labels per link<\/strong><\/p>\n<p>The new <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_LinkLabel_0.htm\">LinkLabel<\/a> class lets you display multiple captions for a single <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_DiagramLink_0.htm\">DiagramLink<\/a> object. You can fully<br \/>\ncustomize the display and positioning of the link labels. The new <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/M_MindFusion_Diagramming_LinkLabel_setAutoArrange_1_Boolean.htm\">LinkLabel.AutoArrange<\/a> property lets you arrange automatically the labels to avoid overlapping.<\/p>\n<div id=\"attachment_257\" style=\"width: 327px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-257\" class=\"size-full wp-image-257\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/1.png\" alt=\"Selection of multiple items.\" width=\"317\" height=\"229\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/1.png 317w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/1-300x216.png 300w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><p id=\"caption-attachment-257\" class=\"wp-caption-text\">Selection of multiple items.<\/p><\/div>\n<p><strong>New events<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_nodeSelected.htm\">nodeSelected<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_linkSelected.htm\">linkSelected<\/a> events are now raised when an item is selected, either programmatically or by the user.<\/li>\n<li><a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_nodeDeselected.htm\">nodeDeselected<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_linkDeselected.htm\">linkDeselected<\/a> events are now raised when an item is deselected, either<br \/>\nprogrammatically or by the user.<\/li>\n<li><a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_nodeDoubleClicked.htm\">nodeDoubleClicked<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_linkDoubleClicked.htm\">linkDoubleClicked<\/a> events are raised when the user double clicks an item.<\/li>\n<li><a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_nodeCreating.htm\">nodeCreating<\/a> is now also raised while the user drags a node from the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_NodeListView.htm\">NodeListView<\/a> control.<\/li>\n<\/ul>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li>The new <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setVirtualScroll_1_Boolean.htm\">setVirtualScroll<\/a> method enables the virtual scrolling mode. In this mode, the canvas stays as big as its containing div, and its content is drawn with a translation bound to the div&#8217;s scrollbar positions. This allows displaying large diagrams in browsers and on mobile devices where the size of the HTML canvas elements is limited.<\/li>\n<li><a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_ShapeNode_resizeToFitText_1_FitSize_0.htm\">resizeToFitText<\/a> method is added to <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_ShapeNode_0.htm\">ShapeNode<\/a>.<\/li>\n<li>Improved support for nested containers.<\/li>\n<\/ul>\n<p>You can find out more about the new release at the <a href=\"http:\/\/mindfusion.dev\/Forum\/YaBB.pl?num=1369237691\">Diagramming News section on our forum.<\/a> You are welcomed to download the trial version and check yourself the capabilities of the control. Use the link below:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/JsDiagramTrial.zip\">Download MindFusion.Diagramming for JavaScript Library 1.6<\/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\/features-jsdiagram.html\">features page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MindFusion has released a new version of its diagramming library for JavaScript. Here is an overview of the most important new features in the control: Node Effects You can now apply two visual effects to your nodes &#8211; the GlassEffect &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-1-6\/\">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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2],"tags":[82,35,85,83,80,44,84,47,81],"class_list":["post-255","post","type-post","status-publish","format-standard","hentry","category-product-releases","tag-aero","tag-diagramming","tag-events","tag-glass","tag-javascript","tag-library","tag-nodes","tag-selection","tag-visual-effects"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-47","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/255","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=255"}],"version-history":[{"count":11,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":2431,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/255\/revisions\/2431"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}