{"id":603,"date":"2014-01-14T11:32:12","date_gmt":"2014-01-14T11:32:12","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=603"},"modified":"2021-01-11T16:20:13","modified_gmt":"2021-01-11T16:20:13","slug":"mindfusion-diagramming-for-javascript-1-7","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/mindfusion-diagramming-for-javascript-1-7\/","title":{"rendered":"MindFusion.Diagramming for JavaScript 1.7"},"content":{"rendered":"<p>MindFusion has released a new version of its Diagramming component for JavaScript. Here is an overview of the most important new features:<\/p>\n<p><strong>Adjustment handle styles<\/strong><\/p>\n<p>You can customize the appearance of nodes&#8217; adjustment handles with the new <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramNode_setHandlesStyle_1_AdjustmentHandles.htm\">setHandlesStyle<\/a> method. There are various styles to choose from, including round and square handles, dashed and hatched frames, some combinations. It&#8217;s also possible to set what part of a node can be dragged to move or resize it. Custom handles are also supported.<\/p>\n<div id=\"attachment_606\" style=\"width: 709px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/01\/jsdiagram_anchor_points.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-606\" class=\"size-full wp-image-606\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/01\/jsdiagram_anchor_points.png\" alt=\"Node anchor points.\" width=\"699\" height=\"641\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/01\/jsdiagram_anchor_points.png 699w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/01\/jsdiagram_anchor_points-300x275.png 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/a><p id=\"caption-attachment-606\" class=\"wp-caption-text\">Node anchor points.<\/p><\/div>\n<p><strong>Dynamic links<\/strong><\/p>\n<p>When you drag a dynamic link, its end segments are automatically adjusted to point to the center of the target node. If the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramNode_setAnchorPattern_1_AnchorPattern.htm\">AnchorPattern<\/a> property of the node is set, the link ends will align to the closest anchor point instead. Positions of the link&#8217;s end points are also updated when the next-to-last control points are being modified.<\/p>\n<p><strong>ContainerNode enhancements<\/strong><\/p>\n<ul>\n<li>You can now apply layout algorithms to the content of a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_ContainerNode_0.htm\">ContainerNode<\/a> by calling its <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_ContainerNode_arrange_1_void.htm\">arrange<\/a> method.<\/li>\n<li>The new <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_containerChildAdding.htm\">containerChildAdding<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_containerChildRemoving.htm\">containerChildRemoving<\/a> events let you select, which child nodes are added or removed to\/from a container.<\/li>\n<\/ul>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_getDirty_0.htm\">Dirty<\/a> flag is automatically set when a serializable property of an item or the diagram has been modified. It lets you determine where there are any changes that need to be saved.<\/li>\n<li>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setAdjustmentHandlesSize_1_Number.htm\">AdjustmentHandlesSize<\/a> property specifies the size of adjustment handles.<\/li>\n<li>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setShowDisabledHandles_1_Boolean.htm\">ShowDisabledHandles<\/a> property controls whether disabled adjustment handles are drawn on screen.<\/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<\/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 component for JavaScript. Here is an overview of the most important new features: Adjustment handle styles You can customize the appearance of nodes&#8217; adjustment handles with the new setHandlesStyle method. There &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/mindfusion-diagramming-for-javascript-1-7\/\">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":[162,109,69,3,4,80],"class_list":["post-603","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-adjustment-handles","tag-container-nodes","tag-control","tag-diagram","tag-flowchart","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-9J","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/603","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=603"}],"version-history":[{"count":3,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/603\/revisions"}],"predecessor-version":[{"id":2475,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/603\/revisions\/2475"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}