{"id":1541,"date":"2016-06-06T10:41:24","date_gmt":"2016-06-06T10:41:24","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1541"},"modified":"2021-01-20T17:35:19","modified_gmt":"2021-01-20T17:35:19","slug":"mindfusion-javascript-diagram-library-v2-6","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/mindfusion-javascript-diagram-library-v2-6\/","title":{"rendered":"MindFusion JavaScript Diagram Library V2.6"},"content":{"rendered":"<p>MindFusion JavaSript Diagram Library has a new version. Here is an overview of the new features:<\/p>\n<h2>Free-form nodes<\/h2>\n<p>The new version lets you use a special, new type of nodes called <a id=\"69975\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_FreeFormNode_0.htm\">FreeFormNode<\/a>. In this case the control collects all points from users&#8217; mouse or touch input and displays them as node&#8217;s outline. In order to allow users to draw free-form nodes interactively, set <a id=\"37967\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setBehavior_1_Behavior.htm\">Behavior<\/a> to <a id=\"37983\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Behavior_0.htm\">DrawFreeForms<\/a> or <a id=\"379832\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Behavior_0.htm\">LinkFreeForms<\/a>. The <a id=\"71864\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_FreeFormNode_setPoints_1_Array.htm\">Points<\/a> property of <a id=\"699752\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_FreeFormNode_0.htm\">FreeFormNode<\/a> allows you to get or set outline points programmatically. If the <a id=\"71289\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_FreeFormNode_getClosed_0.htm\">Closed<\/a> property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line.<\/p>\n<div id=\"attachment_1548\" style=\"width: 647px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1548\" class=\"size-full wp-image-1548\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/06\/freeform_to_shape.png\" alt=\"Free form nodes allow the user to draw diagram shapes with the mouse of the finger\" width=\"637\" height=\"312\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/06\/freeform_to_shape.png 637w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/06\/freeform_to_shape-300x147.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/06\/freeform_to_shape-500x245.png 500w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><p id=\"caption-attachment-1548\" class=\"wp-caption-text\">FreeFormNodes allow the user to draw diagram shapes with the mouse or the finger<\/p><\/div>\n<h2>Convert free-form drawings to ShapeNodes<\/h2>\n<p>This release introduces additional drawing modes, convenient for touch input. They convert <a id=\"69975\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_FreeFormNode_0.htm\">FreeFormNode<\/a> objects drawn by the user to <a id=\"32485\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_ShapeNode_0.htm\">ShapeNode<\/a> objects with matching shapes. To enable them, set <a id=\"37967\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setBehavior_1_Behavior.htm\">Behavior<\/a> to <a id=\"37983\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Behavior_0.htm\">DrawFreeShapes<\/a> or <a title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Behavior_0.htm\">LinkFreeShapes<\/a>. The shapes against which the user&#8217;s input is matched are set via diagram&#8217;s <a id=\"69970\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_getFreeFormTargets_0.htm\">FreeFormTargets<\/a> property. By default it contains Rectangle, Decision and Ellipse shapes.<\/p>\n<h2>Miscellaneous<\/h2>\n<ul>\n<li>TypeScript definitions for the Diagramming API are now provided in <i>jsdiag.d.ts<\/i> file.<\/li>\n<li><a id=\"59713\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_nodePasted.htm\">nodePasted<\/a> and <a id=\"59708\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_linkPasted.htm\">linkPasted<\/a> events are now raised when new <a id=\"32274\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_DiagramNode_0.htm\">DiagramNode<\/a> and <a id=\"32441\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_DiagramLink_0.htm\">DiagramLink<\/a> instances are created from clipboard contents.<\/li>\n<li><a id=\"37249\" title=\"\" href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setVirtualScroll_1_Boolean.htm\">VirtualScroll<\/a> mode fixed for parent div size specified in percent units.<\/li>\n<li>Removed several global variables created inadvertently by the control.<\/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.6<\/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>MindFusion JavaSript Diagram Library has a new version. Here is an overview of the new features: Free-form nodes The new version lets you use a special, new type of nodes called FreeFormNode. In this case the control collects all points &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/mindfusion-javascript-diagram-library-v2-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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,2],"tags":[401,395,399,400,396],"class_list":["post-1541","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-interactive-diagrams-for-javascript-and-html","tag-javascript-diagram-library","tag-javascript-drawing-library-for-flowcharts","tag-javascript-graphing-library","tag-typescript-diagram-library"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-oR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1541","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=1541"}],"version-history":[{"count":10,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1541\/revisions"}],"predecessor-version":[{"id":2590,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1541\/revisions\/2590"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}