{"id":1392,"date":"2015-12-03T10:24:42","date_gmt":"2015-12-03T10:24:42","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1392"},"modified":"2021-01-20T17:04:51","modified_gmt":"2021-01-20T17:04:51","slug":"diagramming-for-javascript-v2-2","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v2-2\/","title":{"rendered":"Diagramming for JavaScript, V2.5"},"content":{"rendered":"<p>The new release of MindFusion Diagramming library for JavaScript contains some useful new features and improvements. Below are the details:<\/p>\n<p><strong>Resize of table columns and rows<\/strong><\/p>\n<p>Columns and rows of a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_TableNode_0.htm\">TableNode<\/a> can now be resized interactively if its <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_TableNode_setAllowResizeColumns_1_Boolean.htm\">AllowResizeColumns<\/a> or <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_TableNode_setAllowResizeRows_1_Boolean.htm\">AllowResizeRows<\/a> properties are enabled. In order to resize, move the mouse pointer to the border line on column&#8217;s right side or row&#8217;s bottom side until it shows resize cursor and start dragging. The control raises <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_tableColumnResizing.htm\">tableColumnResizing<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_tableRowResizing.htm\">tableRowResizing<\/a> events to let you validate new size or prevent resizing some elements. The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_tableColumnResized.htm\">tableColumnResized<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?F_MindFusion_Diagramming_Events_tableRowResized.htm\">tableRowResized<\/a> events are raised after the operation completes.<\/p>\n<div id=\"attachment_1396\" style=\"width: 662px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/12\/jsdiagram_table_nodes_resize.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1396\" class=\"size-full wp-image-1396\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/12\/jsdiagram_table_nodes_resize.png\" alt=\"JavaScript Table Nodes: Resize\" width=\"652\" height=\"234\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/12\/jsdiagram_table_nodes_resize.png 652w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/12\/jsdiagram_table_nodes_resize-300x108.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/12\/jsdiagram_table_nodes_resize-500x179.png 500w\" sizes=\"auto, (max-width: 652px) 100vw, 652px\" \/><\/a><p id=\"caption-attachment-1396\" class=\"wp-caption-text\">JavaScript Table Nodes: Resize<\/p><\/div>\n<p><strong>Shape libraries<\/strong><\/p>\n<p>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_ShapeLibrary_0.htm\">ShapeLibrary<\/a> class lets you use custom geometric shapes created using MindFusion ShapeDesigner tool. Call its <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_ShapeLibrary_loadFromXml_3_String_Function_Function.htm\">loadFromXml<\/a> method to load a library XML file. <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_ShapeLibrary_getShapes_0.htm\">getShapes<\/a> returns an array of the loaded <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_Shape_0.htm\">Shape<\/a> objects. The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_NodeListView_setShapeLibraryLocation_1_String.htm\">ShapeLibraryLocation<\/a> property of <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_NodeListView.htm\">NodeListView<\/a> creates a prototype <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_ShapeNode_0.htm\">ShapeNode<\/a> object for each shape from the specified library.<\/p>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramItem_setTextStroke_1_String.htm\">TextStroke<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_DiagramItem_setTextStrokeThickness_1_Number.htm\">TextStrokeThickness<\/a> properties of <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_DiagramItem_0.htm\">DiagramItem<\/a> let you set color and thickness of text outlines.<\/li>\n<li>Items can now be deleted using Backspace key when running on Mac.<\/li>\n<li>Caption divider line in <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_TableNode_0.htm\">TableNode<\/a> and <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?CC_T_MindFusion_Diagramming_ContainerNode_0.htm\">ContainerNode<\/a> is now rendered clipped when caption height is smaller than corner radius.<\/li>\n<li>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_Diagram_setTooltipDelay_1_Number.htm\">TooltipDelay<\/a> property specifies the delay in milliseconds before showing tooltips.<\/li>\n<li>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?M_MindFusion_Diagramming_NodeListView_setOrientation_1_Orientation.htm\">Orientation<\/a> property of <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Diagramming_NodeListView.htm\">NodeListView<\/a> lets you set the view&#8217;s orientation to Horizontal or Vertical .<\/li>\n<li>MindFusion.Common.js contains code shared with other JavaScript libraries by MindFusion. It must be loaded before the MindFusion.Diagramming.js script.<\/li>\n<\/ul>\n<p><strong>Fixed bugs<\/strong><\/p>\n<ul>\n<li>Fixed overlaps in <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/jsdiagram\/index.htm?T_MindFusion_Graphs_TreeLayout.htm\">TreeLayout<\/a> when arranging nodes of different sizes.<\/li>\n<li>Anchor points indices were not serialized and could be reset to different values when loading from JSON.<\/li>\n<li>Deserialization of custom item classes worked correctly only if their names contained Node or Link suffix.<\/li>\n<\/ul>\n<p>Registered customers with an active upgrade subscription can download the licensed version from the <a href=\"http:\/\/clientsarea.eu\/\">clients area<\/a> on our site.<\/p>\n<p>A trial version is available for direct download from the following link:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/JsDiagramTrial.zip\">Download MindFusion Diagramming Library for JavaScript, V2.5<\/a><\/p>\n<p>We are glad to receive any comments, suggestions and feedback. 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?\nboard=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.<\/p>\n<p>The user interaction model includes resizing \/ moving \/ selecting and modifying any diagram element. 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\">Diagram for JavaScript page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The new release of MindFusion Diagramming library for JavaScript contains some useful new features and improvements. Below are the details: Resize of table columns and rows Columns and rows of a TableNode can now be resized interactively if its AllowResizeColumns &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v2-2\/\">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":[75,69,3,4,80,44,363,362,365,364],"class_list":["post-1392","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-container-node","tag-control","tag-diagram","tag-flowchart","tag-javascript","tag-library","tag-shape-library","tag-table-node","tag-text-stroke","tag-tooltip"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-ms","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1392","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=1392"}],"version-history":[{"count":5,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1392\/revisions"}],"predecessor-version":[{"id":2569,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1392\/revisions\/2569"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}