MindFusion.Diagramming for JavaScript Programmer's Guide
Version History

The list below describes recent changes and additions to JsDiagram:

New in version 2.5.1

New in version 2.5

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

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

Fixed bugs

New in version 2.4

Appearance improvements

New events

Miscellaneous

New in version 2.3

Styled text in nodes

The EnableStyledText property of ShapeNode allows using HTML-like formatting tags to apply various attributes to the node's text. At this time the component supports the following formatting tags:

Text rendering improvements

Miscellaneous

New in version 2.2

Zoom control

The ZoomControl class lets users change interactively the current zoom level and scroll position of a Diagram. To set it up, add a <canvas> to the page, place it anywhere over the target diagram canvas, call the create method, and set the control's Target property to that diagram. Set the ZoomStep and ScrollStep properties to specify the amount added to diagram's zoom level or scroll position by ZoomControl's buttons. You can customize the control's appearance by setting properties such as Fill, BorderColor, CornerRadius and TickPosition.

Shadow styles

The Diagram.ShadowsStyle property and ShadowsStyle enumeration let you switch shadow rendering order between rendering all shadows in a single background layer (OneLevel) and drawing each shadow close to its node, possibly overlapping other nodes (ZOrder). ShadowsStyle.None lets you disable shadows altogether.

Miscellaneous

New in version 2.1

SVG Nodes

The SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of Image, and on top of the geometry rendered by the base ShapeNode class. Enable the Transparent property to hide the node's geometry and leave only the drawing visible. The SVG file is loaded and associated with the node through an SvgContent object, which should be initialized and then assigned to the Content property.

jQuery support

Now the control can use jQuery for browser abstraction instead of Microsoft Ajax. To enable jQuery support, set MindFusionImpl="JQuery" before loading the diagram script. Instead of Microsoft Ajax $create function, use the static Diagram.create(element) method to create a Diagram instance for a given Canvas element.

Miscellaneous

New in version 2.0

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 new Animations example demonstrates how to apply several animation 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 is 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 ShowLaneGrid 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

New in version 1.7.1

Rounded links

Links whose Shape is set to Polyline or Cascading can be rendered with rounded joints between their segments. To enable that, set the diagram's RoundedLinks property to true. The RoundedLinksRadius property lets you specify the radius of joint arcs.

Link crossings

The component can represent the crossing point of two links either as an arc (bridge) drawn for the link with higher Z index, or as a cut in the link with lower Z index. To enable that, set the diagram's LinkCrossings property to either Arcs or Cut member of LinkCrossings enumeration. Set CrossingRadius to specify the radius of crossing arcs.

Miscellaneous

New in version 1.7

Adjustment handle styles

Appearance of nodes' adjustment handles can be customized by calling the setHandlesStyle method. Supported styles include round and square handles, dashed and hatched frames, and some combinations. Apart from appearance, the handles style also controls what part of a node can be dragged to move or resize it. It is also possible to render custom handles by handling the drawAdjustmentHandles event, and implement custom hit-testing by handling the hitTestAdjustmentHandles event.

Dynamic links

A dynamic link automatically orients its end segments so that they point to the target nodes' centers while the link's nodes are dragged around. If a node's AnchorPattern is set, link ends will align to the closest anchor point instead. Positions of the link's end points are also updated when the next-to-last control points are being modified. To enable this, set the Dynamic property to true.

ContainerNode enhancements

Miscellaneous

New in version 1.6.1

ContainerNode improvements

Miscellaneous

New in version 1.6

Node effects

Two visual effects, represented by GlassEffect and AeroEffect classes, can be applied to nodes. To apply an effect, create an instance of the respective class, set up its properties, then add the instance to the Effects collection of a node (or to Diagram.NodeEffects collection to apply it to all nodes). Effects can be added, removed or modified at any time and this will immediately reflect on the diagram. Effects of different types can be applied simultaneously. It is also possible to apply more than one effect of the same type.

Multiple labels per link

The LinkLabel class allows multiple captions to be displayed for a single DiagramLink object. Link labels provide a set of properties allowing full customization of their display and positioning. Labels can also be arranged automatically to avoid overlapping nodes and other labels by setting LinkLabel.AutoArrange to true.

New events

Miscellaneous

New in version 1.5

Styles and Themes

An instance of the Style class can be used to set items' appearance properties as a single unit via the setStyle method. In order for style attributes to be used, the respective local appearance properties of DiagramItem objects must have undefined or null values. If an item's Style does not define a value for some attribute, it is looked up in the styling hierarchy, first in the diagram's Style, next in the current Theme, and finally in the set of default styles defined for each item class.

Shadows

Diagram items can now cast shadows. The shadow color is specified via the setShadowColor method and the offset of a shadow from its item is set via setShadowOffsetX and setShadowOffsetY methods. Shadows aren't rendered if getEffectiveShadowColor returns null or undefined value.

Radial gradients

Nodes can be filled using radial gradients by passing objects in following format to setBrush. If the gradient should blend only two colors, they can be specified using color1 and color2 fields instead of colorStops.

JavaScript  Copy Code

var brush =
{
 type: "RadialGradientBrush",
 colorStops:
 [
  { position: 0, color: "white" },
  { position: 0.5, color: "lightGray" },
  { position: 1, color: "blue" }
 ],
 x1: 20, y1: 20, radius1: 30,
 x2: 40, y2: 20, radius2: 80
};
node.setBrush(brush);

Miscellaneous

New in version 1.4

Table Nodes

A TableNode displays tabular data, and can be used to represent table schemas in database diagrams or classes in class-hierarchies. A table contains cells arranged in a grid, and every cell can display text and/or image. Cells, columns and rows can be customized in various ways - there are properties available for setting their extents, style, image and text alignment. The number of cells in a table's grid can be programmatically changed by calling methods such as redimTable, insertRow and insertColumn. If a table contains many rows, you can let users scroll them up or down by calling the setScrollable method.

Container Nodes

A ContainerNode can contain other diagram nodes. When a container is moved, its child nodes move too. Containers can be nested one within another to unlimited depth. They can be folded to a smaller size, hiding their child items, and unfolded to show content again. Nodes inside a container can be linked to nodes both inside and outside of it. If a link connects items in the same container, the container is not considered an obstacle by the auto-routing algorithm.

Miscellaneous

New in version 1.3

Attaching and grouping items

JsDiagram allows attaching a node to another node, establishing a subordinate - master relationship between them. The easiest way to attach nodes is to call the attachTo method. When a master node is moved, all of its subordinates follow it, so that the initial distance between them stays constant. This happens both when a user moves the master node around, and when the node's position is changed using a method or a property.

Collapse and expand tree branches

If a diagram represents a tree structure, the tree branch starting from a node can be collapsed or expanded again in order to hide or display hierarchy details. To enable this, call the setExpandable method. There is a [±] button displayed beside an expandable node to allow users to collapse or expand the tree branch starting there. By default, pressing that button automatically toggles the Expanded property of the node and raises the TreeExpanded or TreeCollapsed events.

User interaction modes

Call setBehavior with one of the Behavior members as argument to specify how the diagram should handle mouse input.

Touch input

When running under the iOS Safari web browser, the control handles one-finger touch events to allow drawing and selecting items interactively. In addition, the hit-test area around adjustment handles is larger to make touch modifications easier. Two-finger gestures are delegated to the browser - they either scroll the canvas when dragging in the same direction or zoom the page when dragging in opposite directions. The preventDefaultTouch flag can be set to false to revert to the default one-finger touch behavior (scroll the whole page).

Miscellaneous

New in version 1.2

Alignment grid

The alignment grid help users place the diagram items more precisely. To activate the grid, set the AlignToGrid property to true. If the grid is active while an item is being created or modified, the item's control-points are aligned to the nearest grid points. The distance between adjacent grid points is set via the GridSizeX and GridSizeY properties. The grid can be either visible or invisible, depending on whether the ShowGrid value is true or false. If visible, the grid is painted as a matrix of points or as series of crossing lines, as specified by the GridStyle property. GridColor defines the color with which the alignment points or lines are painted.

Bordered tree layout

In contrast to TreeLayout, which centers the parent node above its child nodes, BorderedTreeLayout arranges children in columns at a horizontal offset form their parent (see Tutorial 2). BorderedTreeLayout members control the tree direction, how much space to leave between tree levels, and between nodes on the same level.

Anchor points

The AnchorPattern class represents a set of AnchorPoint objects, which specify the exact locations where links are allowed to connect to nodes. A pattern can be assigned to nodes by calling their setAnchorPattern method. The AnchorPattern class exposes several predefined patterns as static fields: decision2In2Out, decision1In3Out, leftInRightOut, topInBottomOut.

New in version 1.1

Automatic link routing

A link whose AutoRoute property is enabled automatically finds a route that won't cross nodes marked as obstacles. Call setRouteLinks to specify the default AutoRoute value of new links. Links can be explicitly routed by calling their route method or the routeAllLinks method of Diagram. The minimal distance between routed links and nodes can be set by calling setRouteMargin.

Fractal layout

The FractalLayout tree layout algorithm places child nodes symmetrically around their parent node.Nodes at the lowest level are arranged directly in a circle around their parent. At the upper level, the already arranged nodes form branches that are arranged in a circle around the new parent node. The algorithm is recursively repeated till the highest level is reached. To apply FractalLayout, pass its instance as argument to the arrange method.

Miscellaneous