Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Diagramming for JavaScript, V2.0 (Read 2136 times)
Forum Admin
YaBB Administrator
*****
Offline


Rock and Roll

Posts: 701
Joined: Apr 6th, 2003
Diagramming for JavaScript, V2.0
May 22nd, 2014 at 11:56am
Print Post  
We have released version 2.0 of MindFusion.Diagramming for JavaScript. It contains the following new features:

Undo / redo support
If the UndoEnabled property is set 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. It is also possible to create custom undoable operations by deriving from the Command class and calling executeCommand() with the custom command as argument.

Animations
Diagram items can now be animated 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. The Animations example demonstrates how to apply several aimation types to both nodes and links.

Clipboard support
A single item or a selection of items can be copied or cut 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. If running under Internet Explorer, it's also possible to copy to the system clipboard by passing a true argument to clipboard methods.

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. 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. The new Lanes sample page uses the lane grid to let users draw Gantt charts.

Resize multiple nodes
Now it is possible to resize multiple selected nodes simultaneously. To enable that, 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 operation can be cancelled for all nodes by handling the selectionModifying validation event.

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. The magnifier's appearance can be customized via properties such as MagnifierShape and MagnifierFrameColor. Its size and magnification can be set via MagnifierWidth, MagnifierHeight and MagnifierFactor properties. The magnifier appears when users press the mouse button mapped to MouseButtonActions.Magnify. It can also be shown programmatically by setting the MagnifierEnabled property.

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.
~ enterInplaceEditMode and leaveInplaceEditMode events raised when the control shows or hides the in-place edit box.
~ linkPointed and nodePointed events raised when the mouse hovers over an item.
~ The control displays a scaled-down copy of the node being dragged from the NodeListView control.
~ Set Diagram.Behavior to SelectOnly to let users select existing items but not to modify them or draw new ones.

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 download here:
https://mindfusion.eu/JsDiagramTrial.zip

Enjoy!
  
Back to top
WWW  
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint