{"id":707,"date":"2014-03-12T12:19:11","date_gmt":"2014-03-12T12:19:11","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=707"},"modified":"2021-01-11T16:27:10","modified_gmt":"2021-01-11T16:27:10","slug":"diagramming-for-javascript-v1-7-1","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v1-7-1\/","title":{"rendered":"Diagramming for JavaScript, V1.7.1"},"content":{"rendered":"<p>MindFusion has released a new version of its diagramming component for JavaScript. Here is an overview of the new features in Diagramming for JavaScript, V1.7.1:<\/p>\n<p><strong>Rounded links<\/strong><br \/>\nIf your links are with Polyline or Cascading Shape, they can be rendered with rounded joints between the segments. You need to call the new Diagram.setRoundedLinks(true) method to enable this. The radius of joint arcs is specified with the Diagram.setRoundedLinksRadius.<\/p>\n<div id=\"attachment_709\" style=\"width: 780px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/03\/links_crossings_js.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-709\" class=\"size-full wp-image-709\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/03\/links_crossings_js.png\" alt=\"Arcs at links crossings.\" width=\"770\" height=\"385\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/03\/links_crossings_js.png 770w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/03\/links_crossings_js-300x150.png 300w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/a><p id=\"caption-attachment-709\" class=\"wp-caption-text\">Arcs at links crossings.<\/p><\/div>\n<p><strong>Link crossings<\/strong><br \/>\nThe component can now represent the crossing point of two links either as an arc (bridge) drawn for the link with the higher Z-index, or as a cut in the link with lower Z-index. Call the Diagram.setLinkCrossings() methods with either LinkCrossings.Arcs or LinkCrossings.Cut as an argument. The radius of crossing arcs is specified with Diagram.setCrossingRadius().<\/p>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li>By node rotation, the links are now routed around the rotated node&#8217;s boundaries.<\/li>\n<li>The new routeAllLinks pulls apart link segments that would overlap.<\/li>\n<li>A set of new predefined node shapes are added to the Shapes class: RightTriangle, Decagon, Trapezoid, Star4Pointed, Star5Pointed, Star6Pointed, Star7Pointed, Star16Pointed, Star24Pointed, Star32Pointed, Donut and Plaque.<\/li>\n<li>and much more &#8211; read the full list <a href=\"http:\/\/mindfusion.dev\/Forum\/YaBB.pl?num=1394106585\">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 1.7.1<\/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>MindFusion has released a new version of its diagramming component for JavaScript. Here is an overview of the new features in Diagramming for JavaScript, V1.7.1: Rounded links If your links are with Polyline or Cascading Shape, they can be rendered &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v1-7-1\/\">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":[199,3,4,80,44,169,200,186],"class_list":["post-707","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-crossing","tag-diagram","tag-flowchart","tag-javascript","tag-library","tag-link","tag-node-rotation","tag-node-shapes"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-bp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/707","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=707"}],"version-history":[{"count":4,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":2486,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions\/2486"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}