{"id":1719,"date":"2016-11-22T14:28:41","date_gmt":"2016-11-22T14:28:41","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1719"},"modified":"2021-01-21T14:05:17","modified_gmt":"2021-01-21T14:05:17","slug":"javascript-diagram-library-v2-8-released","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/javascript-diagram-library-v2-8-released\/","title":{"rendered":"JavaScript Diagram Library, V2.8 Released"},"content":{"rendered":"<p>The new JavaScript library has been released with the following new features:<\/p>\n<p><strong>Fluent API<\/strong><\/p>\n<p>Builder objects with property setters and shortcut methods for font and brush creation add support for fluent programming style. Static <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_ShapeNode_With_1_void.htm\">With<\/a> and instance <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_ShapeNode_init_0.htm\">init<\/a> methods in <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_DiagramItem_0.htm\">DiagramItem<\/a>, <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Style_0.htm\">Style<\/a> and <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Graphs_TreeLayout.htm\">Layout<\/a> -derived classes return a builder instance that can be used to set up respective new or existing objects.<\/p>\n<p><strong>DiagramLink improvements<\/strong><\/p>\n<ul>\n<li><a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramLink_setHeadStroke_1_Object.htm\">HeadStroke<\/a>, <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramLink_setHeadStrokeThickness_1_Number.htm\">HeadStrokeThickness<\/a> and <a title=\"\" href=\"M_MindFusion_Diagramming_DiagramLink_setHeadStrokeDashStyle_1_DashStyle.htm\">HeadStrokeDashStyle<\/a> properties let you customize arrowhead strokes independently of line segments strokes.<\/li>\n<li>The <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setAllowSelfLoops_1_Boolean.htm\">AllowSelfLoops<\/a> property of <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Diagram_0.htm\">Diagram<\/a> class controls whether users are allowed to draw self-loop links.<\/li>\n<li>The new <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_LinkShape.htm\">Spline<\/a> element of <span class=\"repeatingLink\">LinkShape<\/span> enumeration draws links as interpolating splines that pass through all of their control points.<\/li>\n<\/ul>\n<div id=\"attachment_1686\" style=\"width: 396px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1686\" class=\"size-full wp-image-1686\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/10\/spline_links.png\" alt=\"The new JS Diagram boasts improved DiagramLink-s.\" width=\"386\" height=\"459\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/10\/spline_links.png 386w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/10\/spline_links-252x300.png 252w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><p id=\"caption-attachment-1686\" class=\"wp-caption-text\">The new JS Diagram boasts improved DiagramLink-s.<\/p><\/div>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li><a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramItem_setTextAlignment_1_Alignment.htm\">TextAlignment<\/a> and <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramItem_setLineAlignment_1_Alignment.htm\">LineAlignment<\/a> properties moved from <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_ShapeNode_0.htm\">ShapeNode<\/a> to <a title=\"\" href=\"CC_T_MindFusion_Diagramming_DiagramItem_0.htm\">DiagramItem<\/a>; you can now use them to set alignment for table and container captions as well.<\/li>\n<li>Enable the <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Lanes_Grid_setAllowResizeHeaders_1_Boolean.htm\">AllowResizeHeaders<\/a> property of swimlanes <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_Lanes_Grid_0.htm\">Grid<\/a> to let users resize grid rows and columns interactively. The control raises <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_headerStartResizing.htm\">headerStartResizing<\/a> validation event when the user tries to resize, and <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_headerResized.htm\">headerResized<\/a> event when the operation completes.<\/li>\n<li><a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_NodeListView_setIconSize_1_Number.htm\">IconSize<\/a> and <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_NodeListView_setDefaultNodeSize_1_Number.htm\">DefaultNodeSize<\/a> properties of <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_NodeListView.htm\">NodeListView<\/a> can be set to <b>null<\/b>, in which case the control will use the sizes stored in nodes&#8217; <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramNode_getBounds_0.htm\">Bounds<\/a>.<\/li>\n<li>And more &#8211; see details <a href=\"http:\/\/mindfusion.dev\/Forum\/YaBB.pl?num=1479719302\">here.<\/a><\/li>\n<\/ul>\n<p>A trial version is available for download here:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/JsDiagramTrial.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Download MindFusion Diagram Library for JavaScript, V2.8<\/a><\/p>\n<p><em>About Diagramming for JavaScript Library:<\/em> Written 100% in JavaScript, this tool is a dynamic, browser based visualization library that uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and allows you to integrate interactive diagrams for JavaScript and HTML into any web application. This MindFusion graphing library supports a variety of predefined node shapes, customizable links, rich event set and many appearance options.<\/p>\n<p>The user interaction model includes resizing \/ moving \/ selecting and modifying any diagram element. The library boasts an elegant API, which is documented in details, numerous step-by-step guides and tutorials. The Diagramming API also provides TypeScript definitions. Various samples are provided to let you learn quickly how to use the most important features of the library \u2013 check them <a href=\"http:\/\/mindfusion.dev\/onlinedemo-jsdiagram.html\">here.<\/a> The JavaScript diagram builder is not only the perfect choice for creating any type of diagram in the browser \u2013 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\">Diagram for JavaScript page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The new JavaScript library has been released with the following new features: Fluent API Builder objects with property setters and shortcut methods for font and brush creation add support for fluent programming style. Static With and instance init methods in &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/javascript-diagram-library-v2-8-released\/\">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":[3,440,80,441,442,44],"class_list":["post-1719","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-diagram","tag-fluent-api","tag-javascript","tag-javascript-flowchart","tag-js-diagram","tag-library"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-rJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1719","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=1719"}],"version-history":[{"count":3,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1719\/revisions"}],"predecessor-version":[{"id":2610,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1719\/revisions\/2610"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}