MindFusion.Diagramming for JavaScript Programmer's Guide

What's New in this Release

The list below describes recent changes and additions to JsDiagram:

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

  • The Locked property can be used to disable interaction with a diagram item.
  • Improved rendering speed when changing items' appearance properties.

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.

  • DoNothing: the diagram is read-only, but nodeClicked and linkClicked events are still raised.
  • Modify: existing diagram items can be selected and modified, but no new items can be created interactively.
  • DrawLinks: existing nodes can be linked interactively, but no new nodes can be drawn.
  • DrawShapes: drawing with the mouse creates new ShapeNode objects; links cannot be created interactively.
  • LinkShapes: this is the default behavior, where drawing over an empty spot of the diagram creates a ShapeNode, and drawing over a node creates a link.

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

  • The Events class exposes available events as static members that can be used as arguments of addEventListener.
  • nodeTextEdited and linkTextEdited events raised when the user edits the text of nodes or links.
  • The mouse cursor changes when pointing an adjustment handles to indicate what kind of modification will occur.