Diagramming for JavaScript, V2.0

We have released Diagramming for JavaScript with a host of new features. Here is an overview:

Undo / redo support
If you set the UndoEnabled property to true, the Diagram control tracks changes done to its items and allows undoing and redoing them later by calling the undo() and redo() methods respectively. Multiple changes could be recorded as a single undoable operation by enclosing them between startCompositeOperation() and commitCompositeOperation() calls. You can also create custom undoable operations.

Animations
You can animate Diagram items through the Animation class in the MindFusion.Animations namespace. The class
implements several built-in animation and easing types, and allows definition of custom animation functions, to create fluid and pleasing animation effects.

Clipboard support
Now you can copy or cut a single item or a selection of items to a clipboard maintained by the diagram control. This is done programmatically using the copyToClipboard and cutToClipboard methods. To paste the clipboard contents into the current diagram, call pasteFromClipboard.

Swimlanes
The lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. If you want to display the lane grid, set the EnableLanes property of the Diagram class to true. In order to customize the grid, set the various attributes exposed by the LaneGrid property, which lets you specify the number of rows and columns, add headers, customize the cell appearance, etc.

A diagram with swimlanes.

A diagram with swimlanes.

Resize of multiple nodes
You can now resize multiple selected nodes simultaneously – just set the AllowMultipleResize property to true. When enabled, dragging a corner or side adjustment handle of any node resizes all nodes in the selection. The selectionModifying validation event lets you cancel the operation for all nodes.

Magnifier
The new magnifier tool allows users to interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. You can customize the magnifier’s appearance via properties such as MagnifierShape and MagnifierFrameColor. Its size and magnification can be set via MagnifierWidth, MagnifierHeight and MagnifierFactor properties.

The new magnifier tool.

The new magnifier tool.

Intellisense support
The package now includes a MindFusion.Diagramming-vsdoc.js file providing code completion information. To load it in Visual Studio, add e /// <reference path=”MindFusion.Diagramming-vsdoc.js” /> tag to the top of your script files. Use the static Diagram.create and Diagram.find methods instead of $create and $find to let Visual Studio infer the type of returned Diagram objects correctly.

Miscellaneous

  • Set the ModificationStart property to AutoHandles to let users start moving or resizing an item without selecting it first.
  • The diagram area can be resized automatically to fit the current diagram items as set through the AutoResize property.
  • The AutoScroll property enables automatic scrolling when the mouse is dragged near the diagram edges.
  • And much more. Read the full list here.

The trial version of the new Diagramming for JavaScript release is available for direct download from the following link:

Download MindFusion.Diagramming for JavaScript Library 2.0 Trial Version

We have always taken special effort in providing quality technical support to all our clients and evaluators. 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 JsDiagram page.

MindFusion.Diagramming for ASP.NET MVC, V2.0

MindFusion has released Diagramming for ASP.NET MVC, V2.0 with an impressive list of new features. Here is an overview of the most important of them:

Undo/redo support
If you set the UndoEnabled property to true, the Diagram control tracks changes done to its items and you can undo and redo them later by calling the undo() and redo() methods respectively. You can record multiple changes as a single undoable operation by enclosing them between startCompositeOperation() and commitCompositeOperation() calls. You can also create custom undoable operations.

Animations
You can animate diagram items with the new Animation class in the MindFusion.Animations namespace. The class implements several built-in animation and easing types, and you can define custom animation functions as well.

Animations

Animations

Clipboard support
A set of new methods – copyToClipboard, cutToClipboard and pasteFromClipboard make it possible to use clipboard operations on a single item or a selection of items.

Swimlanes
The lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. To display the lane grid set the EnableLanes property of the Diagram class to true. The various attributes exposed by the LaneGrid property let you customize the grid – you can specify the number of rows and columns, add headers, customize the cell appearance, etc.

A diagram with swimlanes.

A diagram with swimlanes.

Resize of multiple nodes
The new AllowMultipleResize property lets you resize multiple selected nodes simultaneously. When the property is enabled, dragging a corner or side adjustment handle of any node resizes all nodes in the selection. You can cancel the operation.

Magnifier
The new magnifier tool lets users zoom in or out portions of the diagram by holding down a modifier key or pressing a mouse button. The magnifier’s appearance – its zoom factor, shape, size, frame color – can be customized with properties.

The Magnifier Tool

The Magnifier Tool

Intellisense support
The package includes a MindFusion.Diagramming-vsdoc.js file that provides code completion information. To load it in Visual Studio, add e /// tag to the top of your script files. Use the static Diagram.create and Diagram.find methods instead of $create and $find to let Visual Studio infer the type of returned Diagram objects correctly.

Export of Visio 2013 files
You can export the content of Diagram and DiagramDocument objects to Visio 2013 VSDX files. In order to use the exporter, add a reference to the MindFusion.Diagramming.Export.Visio.dll assembly. Currently, the exporter supports shapes from Visio basic stencil. Support for more shapes will be added upon request.

Improvements in the Visio2013Importer

  • The importer now supports Visio group shapes. Child shapes in groups are no longer lost when importing, and their corresponding diagram nodes are attached to the corresponding group node.
  • Visio NURBS curves are now imported as Bezier-style links.
  • Fix for importing connectors with applied rotation transform.
  • Shapes with a ‘hidden’ attribute in master definition are now imported as invisible items.

Headers and footers in PDF
The PdfExporter can add headers and footers to the exported pages. Use the HeaderFormat, HeaderFont, FooterFormat and FooterFont properties to customize the header and the footer.

Miscellaneous
Set the ModificationStart property to AutoHandles to let users start moving or resizing an item without selecting it first.

  • The diagram area can be resized automatically to fit the current diagram items as set through the AutoResize property.
  • The AutoScroll property enables automatic scrolling when the mouse is dragged near the diagram edges.
  • enterInplaceEditMode and leaveInplaceEditMode events raised when the control shows or hides the in-place edit box.
  • as well other new properties and features.

You can find further details about the release here. The trial version is available for download from the link below:

Download MindFusion.Diagramming for ASP.NET MVC, V2.0

MindFusion support team is happy to assist you with any questions you might have about 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 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 ASP.NET 5.0

MindFusion has released a new version of its Diagramming for ASP.NET component. There are many new features for customizing the appearance, a new layout and a few enhancements. Here are the details:

Styles & Themes

You can apply now styles to change the appearance of the diagram items. Each style is a set
of properties, which can be applied to a given diagram item (with the DiagramItem.Style
property) or to all items of a specific type (by using a Theme). The theme is a collection of
styles. Each style in the theme sets the appearance of all items of a specific type. Themes
can be loaded from XML files.

The Slate Theme

The Slate Theme

 

Node effects
(n.a. in Canvas mode)

Two visual effects – the GlassEffect and the AeroEffect can be applied to nodes. Effects can
be added, removed or modified at any time and this reflects immediately on the diagram. You
can apply effects of different types simultaneously.

One way graph layout

This layout ensure that links enter into nodes from the same general direction and exit from
the opposite side. If the graph contains cycles some links bend around the nodes to keep the
enter/exit direction consistent. The algorithm aims to minimize the number of such links.

one_way_layout1

The One Way Graph Layout

Enhancements in Canvas mode

  • Items can cast shadows
  • Items can be Locked
  • Containers are available in Canvas mode
  • Tables are available in Canvas mode
  • Tooltips for items
  • and more

Enhancements in ImageMap mode

  • Items can be Locked
  • Interactive rotation of nodes
  • ImageFormat property added to ShapeListBox
  • and more

Multiple Labels per Link
(n.a. in Canvas mode)
The LinkLabels class allows multiple captions to be displayed for a single DiagramLink instance.
Link labels provide a set of properties that allow full customization of their location and
appearance. Labels support automatic arrangement to avoid overlapping nodes or other
labels.

Layers
(n.a. in Canvas mode)
Items can be assigned to layers and layers can be hidden, locked or moved up/down in the
Z-order or as a group. Use the LayerIndex property to associate and item with a layer in the
Diagram.Layers collection. Each layer has Visible, Locked and ZIndex properties, which affect
all items in the layer.

Parallel Layouts
The .NET 4 version of Diagramming for ASP.NET takes advantage of the Task Parallel Library
to enable parallelism on the different layout algorithms. Set the EnableParallelism property of
the Layout class to true to enable arranging different sub graphs on different threads to
improve performance on multiprocessor systems.

Magnifier
(in Java and Silverlight modes)
The new magnifier tool allows user to interactively zoom in or zoom out portions of the
diagram by holding down a magnifier tree or pressing a mouse button. The magnifier’s
appearance and zoom factor can be customized.

The Magnifier Tool

The Magnifier Tool

API changes
A variety of changes have been made to the API of the control to keep it elegant and simple – please consult the “What’s new section” in the online documentation.

Detailed information about the release is posted at the forum. The trial version is available for direct download from the link below:

Download MindFusion.Diagramming for ASP.NET 5.0

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 87 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.