Diagramming for JavaScript, V2.5

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 or AllowResizeRows properties are enabled. In order to resize, move the mouse pointer to the border line on column’s right side or row’s bottom side until it shows resize cursor and start dragging. The control raises tableColumnResizing and tableRowResizing events to let you validate new size or prevent resizing some elements. The tableColumnResized and tableRowResized events are raised after the operation completes.

JavaScript Table Nodes: Resize

JavaScript Table Nodes: Resize

Shape libraries

The ShapeLibrary class lets you use custom geometric shapes created using MindFusion ShapeDesigner tool. Call its loadFromXml method to load a library XML file. getShapes returns an array of the loaded Shape objects. The ShapeLibraryLocation property of NodeListView creates a prototype ShapeNode object for each shape from the specified library.

Miscellaneous

  • TextStroke and TextStrokeThickness properties of DiagramItem let you set color and thickness of text outlines.
  • Items can now be deleted using Backspace key when running on Mac.
  • Caption divider line in TableNode and ContainerNode is now rendered clipped when caption height is smaller than corner radius.
  • The TooltipDelay property specifies the delay in milliseconds before showing tooltips.
  • The Orientation property of NodeListView lets you set the view’s orientation to Horizontal or Vertical .
  • MindFusion.Common.js contains code shared with other JavaScript libraries by MindFusion. It must be loaded before the MindFusion.Diagramming.js script.

Fixed bugs

  • Fixed overlaps in TreeLayout when arranging nodes of different sizes.
  • Anchor points indices were not serialized and could be reset to different values when loading from JSON.
  • Deserialization of custom item classes worked correctly only if their names contained Node or Link suffix.

Registered customers with an active upgrade subscription can download the licensed version from the clients area on our site.

A trial version is available for direct download from the following link:

Download MindFusion Diagramming Library for JavaScript, V2.5

We are glad to receive any comments, suggestions and feedback. You can write us at e-mail support@mindfusion.eu or use the help desk. You can use the JsDiagram section on MindFusion forum to post questions about the tool.

About Diagramming for JavaScript Library: 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. 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 – check them here. JsDiagram is not only the perfect choice for creating any type of diagram in the browser – 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 Diagram for JavaScript page.

MindFusion.Diagramming for ASP.NET, V5.0.4 and MindFusion.Diagramming for ASP.NET MVC, V1.7

MindFusion has released beta versions of its Diagramming components for ASP.NET and ASP.NET MVC. Here is an overview of the most important new features added to both controls:

Import of Visio *.vsdx files

Use the new Visio2013Importer class to import any *.vsdx file created with Visio 2013 into your diagrams. First, you must add a reference to MndFusion.Diagramming.Import.Visio.dll assembly. Various overloads of the Import method let you choose how your Visio file will be presented – as a DiagramDocument, whose pages correspond to the Visio pages or as a single Diagram, whose content is merged from all Visio pages. Every node shape and connector from the Visio file is represented with a ShapeNode and DiagramLink object in the imported diagram. The Shape, Text, Brush and properties of each MindFusion.ShapeNode object and the Origin, Destination and ControlPoints properties of each MindFusion.DiagramLink object are set to values that make the imported links and nodes resemble as much as possible their Visio counterparts.

New predefined shapes

The Shapes class boasts a handful of new shapes – RightTriangle, Decagon, Trapezoid, Star4Pointed, Star5Pointed, Star6Pointed, Star7Pointed, Star16Pointed, Star24Pointed, Star32Pointed, Donut and Plaque.

The new predefined node shapes.

The new predefined node shapes.

New features only in MindFusion.Diagramming for ASP.NET

  • Canvas mode improvements:
    • support for the HandlesStyle property of nodes
    • support for dynamic links
    • layout algorithms can be applied to the content of a ContainerNode
    • and more
  • Java mode improvements:
    • support for RoundedLinks and RoundedLinksRadius properties
    • the AutoSnapDistance lets you snap links, which are drawn interactively to a nearby node
    • Permissions attribute added to applet manifest file to allow loading the applet under Java 7 update 51
Container nodes.

Container nodes.

New features only in MindFusion.Diagramming for ASP.NET MVC:

Adjustment handle styles.

You can customize the appearance of nodes’ adjustment handles with the HandlesStyle property. Choose among round and square handles, dashed and hatched frames, and some combinations. The handles style also sets what part of the node can be dragged, which moves or resizes it. You can even create your own custom handles.

Dynamic links

A dynamic link automatically changes its end segments to point to the centers of its target nodes when they are dragged around. If a node’s AnchorPattern is set, the ends of the dynamic link will align to the closest anchor point instead.

ContainerNode enhancements

  • You can apply layout algorithms to the content of a ContainerNode by calling its arrange method
  • The new containerChildAdding and containerChildRemoving events let you prevent adding or removing child nodes to/from a container

You can read more about the new features of the components at the corresponding news page at our forum – click here for NetDiagram and here for MVC Diagram.

MindFusion support team is happy to assist you with any questions you might have about Diagramming for ASP.NET, Diagramming for ASP.NET MVC or any other of our products. You can leave a message at the discussion board, use the help desk or e-mail support@mindfusion.eu.. We strive to provide competent and detailed answers to your questions within hours of receiving them.

About Diagramming for ASP.NET: An advanced WebForms programming component that offers all the functionality that is needed for creating, styling and presenting attractive flowcharts, hierarchies, trees, graphs, schemes, diagrams and many more. The control offers numerous utility methods, path finding and cycle detection, rich event set and many useful user interaction features like tool tips, multiple selection, copy/paste to/from Windows clipboard and many more.

NetDiagram offers more than 100 predefined node shapes, scrollable tables, 13 automatic layouts and many more. You can check the online demo to see some of the features in action. The control includes many samples, detailed documentation and step-by-step tutorials. Every features is duly documented and there’s plenty of code to copy. We have done our best to make the component not only powerful and scalable, but easy to learn and fun to use.

About Diagramming for ASP.NET MVC Control: It is a multi-purpose diagramming tool that consists of two parts: a .NET class library running on the server and a client side control implemented in JavaScript. The server side .NET library implements a flow-diagramming object model that lets you define structures such as trees, flowcharts and graphs. Every element in the diagram is easily accessible and the whole diagram is rendered as part of an HTML page by just calling the DiagramView extension method.

On the client the diagram is rendered by a DiagramView JavaScript control that draws its content on an HTML Canvas. The user is able to add nodes and links simply by drawing them with the mouse. There is also a NodeListView control, which lets users create new nodes via drag and drop.

MvcDiagram also supports various automatic layout algorithms that will make every diagram easy to understand and nice to look at. The diagram can also be easily serialized in binary or XML format. Exporting is done in a variety of formats including Pdf, Svg, Visio and more. You can read details about the components at the MvcDiagram features page.

Diagramming for WPF 3.0.1

MindFusion has released a new version of its Diagramming component for Wpf. Most of the new features are requested by customers. Here are details:

Preserve order in tree layout
You can set the Balance property of the TreeLayout to Preserve to keep the original geometric order of child nodes when arranging them under their parent. You can use this to arrange tree branches in a specific order by first positioning them in increasing horizontal or vertical positions.

The tree layout.

The tree layout.

Selection improvements

  • When you set the Behavior property to SelectOnly users can select existing items, but not modify them or draw new ones.
  • Use the SetsDirtyFlag property of the Selection class to specify whether the Dirty flag should be set when selection changes.
  • SelectionStartMoving event is raised when the user begins moving multiple selected items.
  • You can use the ToggleSelection modifier key to select or deselect items by clicking, but selection via lasso rectangle is disabled.
Container nodes

Container nodes

Miscellaneous

You can find details about this release at the news page in the MindFusion forum. A trial version is available for immediate download from the following link:

Download MindFusion.Diagramming for WPF 3.0.1

The download contains all runtime libraries of the control, various samples for different .NET versions, extensive desktop documentation and step-by-step tutorials.

If you face difficulties installing or using Diagramming for Wpf, please contact MindFusion support team per e-mail or phone. You can also use the forum or help desk. All support inquiries are answered within hours of receiving them.

About MindFusion.Diagramming for Wpf: Designed and developed to be easy to integrate, use, and customize, this native WPF component places at your disposal every single feature you’d ever need to create flowcharts, diagrams, graphs, schemes, DB relationships, trees and many more. Its long list of style options gives you complete control over the appearance of the diagram. With a set of eight automatic layouts you are sure to choose the best arrangement for your items and make the diagram easy to comprehend.

The control boasts a long list of events, properties and methods for user interaction, item creation, data input and output. You can read the full features list here. The online demo shows samples that demonstrate various capabilities of the control – click here. The licensing scheme and prices are uploaded at the buy page. Source code is also available.