Softpedia >Windows >Programming >Components & Libraries >JsDiagram >  Changelog

JsDiagram Changelog

What's new in JsDiagram 2.0

May 26, 2014
  • 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 /// 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.

New in JsDiagram 1.7 (Dec 30, 2013)

  • 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:
  • Apply layout algorithms to content of a ContainerNode by calling its arrange method.
  • Selectively prevent adding or removing child nodes to/from a container by handling the containerChildAdding and containerChildRemoving events.
  • Miscellaneous:
  • The Dirty flag is automatically set when a serializable property of an item or the diagram has been modified. It lets you determine where there are any changes that need to be saved.
  • The AdjustmentHandlesSize property specifies the size of adjustment handles.
  • The ShowDisabledHandles property controls whether disabled adjustment handles are draw on screen.

New in JsDiagram 1.5 (Apr 4, 2013)

  • 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.
  • Miscellaneous:
  • Call the setTooltip method to associate tooltip text with an item. The tooltip appears when the mouse pointer hovers over an item for a second.
  • Specify the line width of item frames via the setStrokeThickness method.
  • initializeNode and initializeLink events are raised when users start drawing a node or a link interactively.
  • The NodeListView control can now host tables and containers. The addBox and selectBox methods have been replaced by addNode and selectItem methods.
  • The setStartPoint and setEndPoint methods of links provide shortcuts for setting the first and last points in ControlPoints.

New in JsDiagram 1.4 (Jan 6, 2013)

  • The new features are:
  • container nodes
  • table nodes
  • lock items to prevent modification
  • improved rendering speed

New in JsDiagram 1.3 (Feb 17, 2012)

  • 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:
  • The Visible property specifies whether an item should be shown on screen.
  • Validation events added: nodeCreating, linkCreating, nodeDeleting, linkDeleting, nodeModifying and linkModifying.
  • The ScrollX and ScrollY properties and scrollTo method lets you set the diagram's scroll position.
  • getViewport returns the currently visible part of the diagram.
  • setZoomFactorPivot sets the zoom level in such way that the pivot point's screen position does not change.
  • zoomToRect zooms and scrolls the view to fit the specified document rectangle in the Diagram's visible area.
  • zoomToFit zooms the view to fit the document contents into the current view size.
  • getContentBounds returns the smallest rectangle that bounds all diagram objects.
  • keepGroupLayout indicates whether to treat each group of attached nodes as a single vertex in the arranged graph.

New in JsDiagram 1.1 (Aug 26, 2011)

  • 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 along a circle centered at their parent. At upper levels, the already arranged nodes form branches that are arranged in a circle around their common 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.
  • 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 handle to indicate what kind of modification will occur.