Search
Version History

The list below describes past changes and additions to JsDiagram:

New in version 4.3.2

Reversed tree layouts

The reversedLinks property of TreeLayout, RadialTreeLayout and BorderedTreeLayout lets you arrange trees where links point from child to parent nodes, instead of the default parent to child direction.

Miscellaneous

New in version 4.3.1

TabbedDiagramView wrapper components now available in React, Angular, Vue and Blazor packages.

New in version 4.3

Multiple diagram pages

The DiagramDocument class represents a collection of diagram pages or sheets, represented by DiagramPage objects. New pages can be added to the document and existing pages can be removed and reordered by using the addPage and removePage methods respectively. The toJsonsaveToXml and saveToString methods of DiagramDocument save all pages in a single file, and respectively the fromJsonloadFromXml and loadFromString methods load all pages from the file. DiagramDocument can also load files created by the serialization methods of Diagram, and will show them in a single page.

DiagramPage is derived from Diagram and only adds a few properties, so any code that processes Diagram objects will work with DiagramPage objects too. A diagram document forwards each event raised by its pages, giving you a chance to use the same handler for events raised by different pages. If a page should implement distinct user interaction or validation logic, it is also possible to attach handlers to the Diagram events inherited by DiagramPage.

A single DiagramPage could be assigned to the diagram property of DiagramView, and that lets you create your own user interface for presenting a list of pages to the user and selecting a current page. The package also includes a TabbedDiagramView that presents all pages of a document in a tabbed user interface where each tab corresponds to a page. The page displayed in the active tab is exposed by the selectedPage property of TabbedDiagramView. The active page can be changed interactively by activating its associated tab. New pages can be added and removed to / from the document through buttons in the tab strip and the pages can be rearranged by dragging their associated tabs with the mouse.

Tabbed diagram view

The TabbedDiagramView control is a view that displays DiagramDocument objects. Individual diagram pages can be activated through the tabs located at the top or at the bottom of the control. The appearance and behavior of the tab strip can be customized using various properties. The location and visibility of the strip is specified through the tabAlignment property. Its height can be changed via the tabsSize property. showAddButton and showNavigationButtons determine the visibility of the buttons for interactive tab creation and tab navigation respectively. showTabCloseButtons specifies whether the tabs can be closed interactively, by clicking on the small 'x' button displayed in each tab. allowReorder enables interactive tab rearrangement by mouse dragging.

TabbedDiagramView comes as s a part of the diagramming-controls npm package or the MindFusion.Diagramming.Controls namespace for UMD users.

For npm users simply import the diagramming-controls package:

JavaScript  Copy Code

import * as Controls from '@mindfusion/diagramming-controls';

For UMD users, add references to files from distrbution's /umd folder using <script> tags. Note that the order of the scripts matters.

HTML  Copy Code

<!-- core Diagramming -->
<script src="Scripts/collections.js" type="text/javascript"></script>
<script src="Scripts/drawing.js" type="text/javascript"></script>
<script src="Scripts/controls.js" type="text/javascript"></script>
<script src="Scripts/graphs.js" type="text/javascript"></script>
<script src="Scripts/animations.js" type="text/javascript"></script>
<script src="Scripts/diagramming.js" type="text/javascript"></script>

<!-- for TabbedDiagramView -->
<script src="Scripts/common.js" type="text/javascript"></script>
<script src="Scripts/common-collections.js" type="text/javascript"></script>
<script src="Scripts/common-ui.js" type="text/javascript"></script>
<script src="Scripts/diagramming-controls.js" type="text/javascript"></script> 


Creating the control instance and adding it to an HTML page is the same as for the DiagramView control. You can pass a DiagramDocument instance to the create function, or omit that parameter to let the control create a new document with a single DiagramPage.

JavaScript  Copy Code

var doc = new MindFusion.Diagramming.DiagramDocument();
var page1 = new MindFusion.Diagramming.DiagramPage("diagram1");
var node = page1.factory.createShapeNode(10, 10, 20, 20);
doc.addPage(page1);
var diagramView = MindFusion.Diagramming.Controls.TabbedDiagramView.create(
    document.getElementById("diagram"), doc);

 or simply

JavaScript  Copy Code

var diagramView = MindFusion.Diagramming.Controls.TabbedDiagramView.create(
    document.getElementById("diagram"));

You can specify a title, iconUrl and titleColor for diagram pages by setting the corresponding properties.

Default images for the navigation buttons must be located in an ./icons folder. Alternatively, you can style the control with a predefined css theme, in which case the themes included in the distribution must be located in a ./themes folder and referenced in the head of the HTML document, e.g.

HTML / JavaScript  Copy Code

<link rel="stylesheet" type="text/css" href="themes/business.css" />
...
diagramView.theme = MindFusion.Diagramming.Theme.fromId("business");

New in version 4.2.5

Blazor bindings

MindFusion.Diagramming for Blazor allows integrating the JavaScript diagramming API into Blazor applications. It contains a set of .NET wrapper classes, that use Blazor's JSInterop API to create and manipulate the client-side objects. The package provides easy access from C# code to the most of the MindFusion.Diagramming functionality, including different node types, layouts and styling. Additional UI components such as Overview, NodeListView, ZoomControl and Ruler are included too.

Miscellaneous

Fixed bugs

New in version 4.2.4

Lasso zoom tool

The control now supports several ways to zoom using lasso tool:

Miscellaneous

New in version 4.2.3

Radial tree layout

The RadialTreeLayout class arranges tree levels in concentric circles around the root. The levelDistance property specifies the distance between adjacent circles. The direction property specifies placement of first child node. Set stretchFactor to a value larger than 1 in order to stretch level circles into ellipses, providing more space for the layout when using wider nodes.

Miscellaneous

New in version 4.2.2

React functional components

The @mindfusion/diagramming-react package now contains functional-component wrappers for the DiagramView and auxiliary controls, and has been upgraded to React 18. Old class-component wrappers have been moved to the @mindfusion/diagramming-react-cc package.

Using the functional components looks like this:

JSX  Copy Code

const [diagram] = useState(new Diagramming.Diagram());
...
<DiagramView diagram={diagram} {...props}
    onDiagramChanged={(diagram, args) => onDiagramChanged(diagram, args)}
    onNodeCreated={(diagram, args) => onDiagramNodeCreated(diagram, args)} />

The DiagramView control exposes a forwardRef, that can be passed on to other controls, such as the Overview and ZoomControl. To obtain a reference to the underlying core controls, use the respective find method of the ref.

Miscellaneous

  • Fix for NodeListView not working correctly when hosted nodes contain NodeLabel objects.
  • Fixed exception in dispose method of Overview control if called before the overview is attached to the diagram.

New in version 4.2.1

Fixed LinkLabel deserialization from old file formats when using along-length positioning.

New in version 4.2

Multiple labels per node

The NodeLabel class allows multiple captions to be displayed for a single DiagramNode of any type. Node labels provide a set of properties allowing full customization of their display and positioning. Label position is defined by specifying a pin point and offset from it, set through setCornerPosition, setEdgePosition, setCenterPosition methods. In addition, the horizontalAlign and verticalAlign properties of NodeLabel specify on which side of pin point to draw the label's caption.

For example, following code adds extra labels to top-left and bottom-right corners of a ShapeNode:

JavaScript  Copy Code

var node = diagram.factory.createShapeNode(10, 50, 40, 30);
node.text= "text"; // centered main text

var lb1 = node.addLabel("label 1");
lb1.setCornerPosition(0, 0, 0);
lb1.horizontalAlign = Alignment.Near;
lb1.verticalAlign = Alignment.Near;
lb1.brush = "red";
lb1.textColor = "white";

var lb2 = node.addLabel("label 2");
lb2.setCornerPosition(2, 0, 0);
lb2.horizontalAlign = Alignment.Far;
lb2.verticalAlign = Alignment.Far;
lb2.brush = "yellow";
lb2.textColor = "red";

Multi-touch improvements

Miscellaneous

Bug fixes

New in version 4.1

Multi-touch support

The control now handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items:

  • If multiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
  • If multiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
  • If multiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
  • If multiTouchModify property is disabled, each touch started from a node draws a diagram link.

Latter modes can be used for collaborative whiteboarding / classroom scenarios.

Built-in multi-touch can be disabled altogether by setting enableMultiTouch to false, e.g. if you need to handle touch events yourself or through a third-party gesture library. If disabled, the control will revert to its mouse event handling code from previous versions. It will also no longer be able to capture mouse input during drag operations (to detect mouse pointer leaving the view), which is handled through DOM Pointers API.

Miscellaneous

  • The createDiagramLink method can now be used to connect to TableNode rows or TreeViewNode items.
  • cancelDrag method added to DiagramView.
  • The control now captures mouse input during drag operations and will not lose current drag state if mouse pointer leaves the view.
  • Fixed exceptions when linkCrossing is set to Arcs.
  • Fix for containers clipping their child nodes when children are being dragged.

New in version 4.0.1

Updated framework wrappers

  • React diagramming library has been updated for version 4 API. In addition, it has been moved to scoped @mindfusion/diagramming-react package on NPM, and now requires React 17.0.2 as minimum version.
  • Vue diagramming library has been updated for version 4 API. In addition, it has been moved to scoped @mindfusion/diagramming-vue package on NPM, and now requires Vue.js 3.0.0 as minimum version.
  • Angular diagramming library has been updated for version 4 API. In addition, it has been moved to scoped @mindfusion/diagramming-angular package on NPM, and now requires Angular 12.2.0 as minimum version.

API changes

Angular component's event emitter names no longer have an 'on' prefix. E.g. use (nodeCreated) instead of (onNodeCreated) to bind to the nodeCreated event.

New in version 4

ES6 modules, classes and properties

JsDiagram source code has been refactored following ES6 standards, including modules, classes, properties and native collections. ArrayList, Dictionary and Set classes from MindFusion.Collections namespace have been removed, and replaced by respective JavaScript native Array, Map and Set. Get/set functions have been replaced by getter/setter properties, which should help using the diagram API with binding expressions of various JS frameworks. You could enable propFunctions in CompatConfig in order to continue using legacy get/set functions during migration. The distribution still includes ES5-compatible scripts located in Scripts/umd folder, which are transpiled from current ES6 code, and whose classes are exposed as members of global MindFusion namespace object as in previous versions. The Scripts/esm folder contains ES6 code that lets you import JsDiagram classes from respective modules.

Diagram view

The Diagram control has been refactored into two classes. What remains of Diagram is now just a model class that defines diagram structure and implements serialization. The new DiagramView class deals with rendering and user interaction. You can show the same diagram in several views, each one rendering at different scroll positions and zoom levels. The separation also makes it easier to use the diagramming API in node.js server code, avoiding the need to load DOM shim/polyfill packages.

TreeView nodes

The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the rootItems property. Items can be added and removed individually by using the addItem and removeItem methods, or in bulk by calling the fromObject method, which loads the tree view items from an array of objects.

Print pagination

The printPreview and print methods of DiagramView let you export the diagram as a list of smaller images in HTML page. Supported options include printArea (defaults to diagram's content bounds) and pageSize (defaults to DiagramView's viewport). Note that print methods use HTMLCanvasElement.toDataURL() internally, so any limitations it has will apply (such as canvas size and CORS).

Orthogonal layout

The OrthogonalLayout class implements an orthogonal graph layout algorithm. Each link is drawn as a chain of alternating horizontal and vertical segments. Nodes are placed in a way that facilitates few links bends and crossings. This algorithm was designed for planar graphs where the nodes have at most four incident links, and produces best results with such graphs as input. It can arrange any arbitrary graph as well, by adding some dummy nodes and links to planarize the graph and reduce its vertex degree, and removing them after the layout.

New events

Miscellaneous

  • Clipboard methods now use modern Navigator.clipboard API when their systemClipboard argument is enabled.
  • Rotation of FreeFormNode instances.
  • ImageAlign supports new FitLeft, FitTop, FitRight and FitBottom alignment styles, which resize image to fit node's boundaries and align it to respective border.
  • mouseWheelAction property of DiagramView lets you choose between Scroll (default) and Zoom as the default behavior of the control in response of a wheel event.

API changes

New in version 3.5.4

Stock themes

The library now includes nine stock themes, accessible via respective static methods of the Theme class. Call the setTheme method of Diagram to apply a theme.

Blue

Business

Earth

Gray

Green

Light

Pastel

Peach

Standard

Miscellaneous

  • The MoveNodes behavior allows grabbing nodes to drag them without using adjustment handles.
  • New SelectedBrush and SelectedStroke properties of Style used to draw selected items.
  • CaptionBackBrush of ContainerNode and TableNode objects can now be set via Style instead of nodes' own properties.
  • Fix for resizeToFitText not calculating correct size when cells have text padding applied.
  • BackColor and TextColor properties added to NodeListView.
  • ToolTip property of AnchorPoint shows tooltip text when mouse hovers over the point.
  • New Scripting.js sample project demonstrates ControlNode objects and graph traversal.

New in version 3.5.3

Adjustment handles styling

Appearance of adjustment handles can be customized via ActiveItemHandlesStyle, SelectedItemHandlesStyle and DisabledHandlesStyle properties. The HandlesVisualStyle objects returned by them provide sub-properties corresponding to graphic attributes of the different handle types. Adjustment handles can now be painted not only in solid color but with arbitrary brushes such as gradients and patterns.

Miscellaneous

  • nodeTextEditing, linkTextEditing and cellTextEditing validation events let you prevent users from editing a specific item.
  • XML serialization fixes.
  • Fixed rendering of joints for links with larger strokeThickness and more than one segment.
  • ActiveItem reference is now serialized in JSON format.
  • Fix for scroll position serialization in virtual scroll mode.

New in version 3.5.2

Topological Layout

TopologicalLayout applies graph topological ordering to the diagram (topological ordering of a graph is one where link's origin node is placed before link's destination node). The layout algorithm arranges nodes in a row or a column, depending on the value of the direction property, in such a way that there are no backward links when the graph is acyclic. If the graph contains cycles, the algorithms selects ordering with as few backward links as possible. Links that connect non-adjacent nodes are rendered as arcs, whose amplitude is proportional to the distance between respective connected nodes. Forward links are rendered at one side of the nodes and back links are rendered at the opposite side. All that makes it easy to discern graph features such as overall flow direction, cycles and nested cycles.

Miscellaneous

  • The diagram canvas now automatically expands to fill the area freed up when a scrollbar auto-hides.
  • Fixed Overview flickering when the tracker rectangle is being dragged near the control's borders.

New in version 3.5.1

Virtual scroll improvements

  • The control now handles mouse wheel events to scroll the diagram when virtual scrolling is enabled.
  • DOM elements that implement virtual scroll mode now use CSS grid layout. You might need to adjust page layout to apply size constraints on the diagram div or its parent. For compatibility with older browsers, you can set CompatConfig.gridLayout = false to fall back to the absolute positioning from previous versions.
  • VirtualScroll mode is now enabled by default.

Electron compatibility

Serialization and clipboard operations should now work under Electron.js. In previous versions they would throw exceptions due to restricted use of eval.

Miscellaneous

  • Mouse pointer position is now provided as argument to nodeCreated and linkCreated events.
  • Visibility property added to CompositeNode components lets you keep invisible components in the template.
  • General performance improvements.
  • Collapse / expand icon is now drawn correctly for CompositeNode when Expandable is enabled.
  • Json deserialization no longer creates undo records.

API changes

For compatibility with MindFusion diagramming API for other platforms, StrokeThickness is now specified in diagram's MeasureUnit instead of pixels. You can set CompatConfig.pixelThickness = true in order to revert to using pixel values.

New in version 3.5

Control nodes

ControlNode objects display custom HTML content, specified via their Template property. A node's DOM structure is created inside the Content div element, which is then rendered on top of the diagram canvas. Note that this prevents ControlNodes drawing in diagram' usual Z order, and they will always appear on top of other diagram items.

By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true.

You can register event handlers for elements in the template by assigning function names to data-event attributes in the form data-event-'eventName'='handlerName'. Alternatively, you can attach event listeners using DOM API once nodeDomCreated is raised to signify that content is available. E.g. access child elements by calling args.getNode().getContent().querySelector(...) and attach handlers via elements' addEventListener method.

ControlNodes create DOM elements from their template only in the main diagram, and render images instead when shown in Overview or NodeListView. Note that in this case image elements in the template will render only if specified in base64 format. The Utils.toDataUrl method helps you convert an image URL to base64 data URL.

New ControlNodes.html example included in distribution demonstrates the ControlNode API.

Button components

Composite nodes can now contain buttons. Button components respond to user clicks by calling the JavaScript function whose name is assigned to their clickHandler attribute. A button can show a text label assigned to the text attribute, or an image whose URL is assigned to imageLocation. The following example adds a button to CompositeNode template:

JavaScript  Copy Code
{
    component: "Button",
    brush: "#ccc",
    text: "Delete",
    width: 30,
    cornerRadius: 3.5,
    clickHandler: "onDeleteClick"
}

Miscellaneous

  • Content of CompositeNodes is now clipped by default if Shape in the template is marked with isOutline attribute. To disable that, set ClipToOutline to false.
  • Set ExpandButtonAction to RaiseEvents and +/- buttons of Expandable nodes will only raise an expandButtonClicked event instead of expand or collapse the tree under that node. You can use this to implement custom logic for the +/- button.

New in version 3.4

React support

The DiagramView React component allows integrating the MindFusion.Diagramming API into React applications. It renders a Diagram instance assigned to "diagram" prop as its model. Most diagram properties can be set from JSX, and all diagram events can be handled through JSX syntax as well. For more information, see the Integration with React topic.

Vue.js support

The diagram-view Vue.js component allows integrating the MindFusion.Diagramming API into Vue.js applications. It renders a Diagram instance assigned to "diagram" prop as its model. Most diagram properties can be set from the vue template, and all diagram events can be handled through the v-on directive as well. For more information, see the Integration with Vue.js topic.

Angular support

The diagram-view Angular component allows integrating the MindFusion.Diagramming API into Angular applications. It renders a Diagram instance assigned to "diagram" property as its model. Most diagram properties can be set from the html template, and all diagram events can be handled through event binding syntax as well. For more information, see the Integration with Angular topic.

Video nodes

VideoNode objects display video streams, along with UI elements to play, pause, seek and change volume. Call node's setVideoLocation method to specify its video URL. Auto-playing is not supported at this time, and the video can be started only by users clicking the play button. VideoNode is built around Video component, which can also be used in CompositeNode templates.

Miscellaneous

  • Improved automatic routing of links.
  • More precise scrolling with TableNode scrollbar thumb.

New in version 3.3.4

Shape components

The Shape class used to specify ShapeNode geometry can also be used as a component. When its isOutline attribute is set, the shape will control CompositeNode's geometry too, defining hit test and clip area, and link alignment points along node's border. If isOutline is disabled, the shape will serve mostly as a decorative element. The code below shows a sample fragment specifying shape component in template:

JavaScript  Copy Code

{
    component: "Shape",
    id: "Cloud",
    autoProperty: true,
    name: "OutlineShape",
    pen: "gray",
    brush: "Transparent",
    isOutline: true
},

Miscellaneous

  • containerChildAdding event handlers can stop propagation of the event up in the container hierarchy by calling setHandled.
  • TableNode.resizeToFitText improvements and fixes.
  • LayeredLayout now uses stable sorting and should always create same results when applied to same graph.

New in version 3.3.3

  • Fixed handling of transparent BackBrush in new drawing system.
  • Fix for initializeNode and initializeLink events not firing.
  • Fixed several drawing glitches.

New in version 3.3.2

Improved performance

Diagram rendering and user interactions are now faster. The control redraws the smallest possible area after diagram changes, and compresses refresh operations into a single batch when possible. Custom node classes that need to draw outside of their Bounds should override the getRepaintBounds method to specify the repaint area.

Miscellaneous

  • The Border component draws frame lines around and background behind other components in CompositeNode templates.
  • NodeListView now displays nodes' Tooltip texts when the mouse hovers over an item in the list view.
  • Fix for FlowchartLayout creating node overlaps in some situations.

New in version 3.3.1

Default StandAlone mode

The component now loads in stand-alone mode by default and does not depend on any third party libraries. With this change, it won't work out of the box in Internet Explorer versions older than 11. You can still explicitly enable JQuery or MsAjax modes for older browsers, or alternatively use polyfill libraries for missing APIs (e.g. JSON serialization).

Miscellaneous

  • FlowchartLayout fixes and improvements.
  • The linkTextEdited event is now raised for labels too. Access to the edited LinkLabel is done via the getLabel method of LinkEventArgs.
  • LinkLabel property setters now redraw the label automatically
  • Fixed focus border appearing at click position in Firefox.

New in version 3.3

Flowchart graph layout

FlowchartLayout recognizes program code-like patterns in the graph, such as loops, sequences and if/switch branchings, and arranges them recursively. FlowchartLayout could be used to arrange other types of graphs as well, though with some restrictions. For example it treats all back links as loops in the code, and expects that they are nested - loop links starting closer to the stop node should end closer to the start node. Another similar restriction is that there shouldn't be any cross-links that connect different branches of a decision sub-graph.

Container improvements

  • resizeToFitText method and EnableStyledText property added to the ContainerNode class.
  • containerChildRemoved event now also raised when dragging multiple selected child nodes out of a container.
  • Improved handling of folded containers by automatic layout classes and link routing methods.

Miscellaneous

  • Typescript definitions now available for the Diagramming.Lanes namespace.
  • Auto-arranged link labels now can optionally be placed over link segments and containers by setting diagram's AutoArrangeAvoidSegments and AutoArrangeAvoidContainers properties to false.
  • The dispose method of Diagram class now removes a focus-proxy DIV element from the page.
  • Improved text alignment for DiagramLink texts.

New in version 3.2.1

Path finding

The PathFinder class provides methods that help you find paths and cycles in a graph:

Path objects returned by these methods contain nodes, links and items arrays containing sequences of elements in the path. The new PathFinder sample page included in distribution demonstrates path finding and animations over the found paths.

Embedded hyperlinks

Nodes and Text components with style text enabled can now contain <a> tags to create hyperlinks. When a link is clicked, the control raises hyperlinkClicked event to let you implement navigation:

JavaScript  Copy Code

// node is a ShapeNode instance
node.setText("test <a='http://mindfusion.eu'>link</a> test");
node.setEnableStyledText(true);

// attach an event listener to the hyperlinkClicked event
diagram.addEventListener(Events.hyperlinkClicked, onHyperlinkClicked);

function onHyperlinkClicked(sender, args)
{
    window.open(args.getHyperlink());
}

Miscellaneous

  • The serializeTag event lets you save complex Tag and Id objects in XML format.
  • Various arrowhead rendering fixes.

New in version 3.2

Export to SVG

The SvgExporter class creates a Scalable Vector Graphics (SVG) drawing from the content of a Diagram. The exportElement method returns a DOM <svg> element that can be directly added to the page. The exportString method returns an SVG string that can be saved in local storage or submitted to server.

C#  Copy Code

function onExportSvg()
{
    var diagram = $find("diagram");
    var exporter = new MindFusion.Diagramming.SvgExporter();
    var svgElement = exporter.exportElement(diagram);
    document.body.appendChild(svgElement);
    svgElement.style.position = 'fixed';
    svgElement.style.zIndex = 100;
}

AMD module

The diagramming.js script can be loaded as an AMD module now. If it detects an AMD loader during startup, it will list common.js as its dependency, so it is enough to require only diagramming.js as application's direct dependency:

C#  Copy Code

MindFusionImpl = "StandAlone";

requirejs(["MindFusion.Diagramming"],
    function(MindFusion)
    {
        // create a Diagram component that wraps the "diagram" canvas
        var Diagram = MindFusion.Diagramming.Diagram;
        var element = document.getElementById("diagram");
        var diagram = Diagram.create(element);
        var node = diagram.factory.createShapeNode(10, 10, 40, 30);
        node.setText("Hello, world!");
    }
);

Miscellaneous

  • Arc definitions in custom shapes now follow correct SVG syntax (A rx ry x-axis-rotation large-arc-flag sweep-flag x y) instead of specifying bounding box and angles.
  • ShapeNode's Stroke attribute is now also applied to shape decoration elements.
  • Underlined fonts can be applied to the text of links.
  • RowCount and ColumnCount properties now exposed by TableNode.

New in version 3.1

Composite nodes

The CompositeNode class implements nodes whose appearance can be defined via composition of components and layout containers. The content of a composite node can be created by building a tree of components programmatically, or by loading a JSON template. This initial release includes layout containers such as StackPanel and GridPanel. Objects from the MindFusion.Drawing namespace now double as CompositeNode components (Image, Text, Path, Rect). Future versions will add interactive components like buttons and text editors. Extended overview is available here.

Animated layout

arrangeAnimated methods added to Diagram and ContainerNode classes display movement of items from their original locations to new locations assigned by the layout object. This can be used to create an explode effect by starting new layout from overlapping nodes on same position, or an insertion effect by adding a new node to an existing layout.

Overview improvements

  • ScaleMode enumeration and properties added to Overview control implement several scaling modes. The FitAll element corresponds to the original behavior where the Overview always fits diagram's contents. FixedScale mode applies the scale specified via overview's ScaleFactor property. CombinedScales mode multiples overview's ScaleFactor by diagram's current ZoomFactor.
  • If AllowZoom is enabled, users can zoom the diagram by resizing the overview's viewport tracking rectangle.
  • MinVisibleFontSize specifies a threshold value that hides text if scaled font sizes become smaller.

Miscellaneous

  • ImagePadding property of ShapeNode and Cell lets you set padding space between elements' borders and their Image.
  • resizetoFitText method of TableNode resizes the columns and rows of tables to fit cells' texts.
  • The new GridRouter class implements link routing using A* algorithm with customizable criteria costs exposed by its LengthCost, NodeVicinityCost and TurnCost properties.
  • All sample projects now available in TypeScript.

New in version 3

User-interaction controllers

All kinds of user interaction are now carried out by controller objects. The startDraw method of BehaviorBase-derived classes that returned an opaque InteractionState instance has been replaced by createController method returning a controller of class specific to the modified item and interaction types. Built-in controllers include CreateNodeController, CreateLinkController, ModifyNodeController, ModifyLinkController, PanController. You can also create custom controllers by deriving and overriding the methods of SinglePointerController:

JavaScript  Copy Code

SinglePointerController.prototype =
{
    start: function (position) {},
    move: function (position) {},
    validate: function (position) {},
    commit: function (position) {},
    cancel: function (position) {},
    drawInteraction: function (context) {}
}

Record and replay

The Diagram class provides record, stopRecording and replay methods that can be used to save and replay all user actions with keyboard and mouse. The replay method takes recording, timer and diagramJson parameters. The recording argument is an array of records returned by stopRecording. If the timer argument is set to true, events are replayed from a timer preserving their original timing, otherwise they are replayed immediately. Timer mode can be used to show tutorials played directly in the diagram. Immediate mode could be used to automate user interaction testing where an assertion is checked after replaying series of events. Recorded events could also be replayed as macros if ran on a diagram with items placed on same initial coordinates.

Improved testability

User interaction can now be tested automatically in several ways outlined below.

  • Create a MouseInputDispatcher instance and call its methods
    JavaScript  Copy Code

    onMouseDown: function (position, button)
    onMouseMove: function (position)
    onMouseUp: function (position, button)

    where position is a Point instance specifying logical coordinates in the diagram (in current measure unit, not scaled by zoom factor). The results of called mouse methods will depend on diagram's current Behavior, e.g. you could assert that a sequence of down, move and up events creates a ShapeNode when Behavior is set to DrawShapes.
  • Create an instance of controller class and call its start, move and commit methods. This would not depend on the value of diagram's Behavior, but could be still affected by other behavioral properties such as AllowSelfLoops and AllowUnconnectedLinks.
  • Check assertions after replaying a recording on a saved diagram.

Ruler control

The Ruler control provides horizontal and vertical scales that help users measure and align diagram items. In order to set up a Ruler instance, create a DIV element parenting the diagram's scroller div -
HTML  Copy Code

<div id="ruler">
  <div id="view">
     <canvas id="diagram" width="2100" height="2100">
     ...

JavaScript  Copy Code

var ruler = MindFusion.Diagramming.Ruler.create(document.getElementById("ruler"));
ruler.setDiagram(diagram);

3rd party dependencies now optional

The diagram can now be used without JQuery and Microsoft Ajax libraries. To enable that mode, set MindFusionImpl = "StandAloneImpl" before loading diagramming.js. Stand-alone mode requires relatively modern browsers, the base feature-set against we test it is the one of IE11.

Flip shapes

The shape of a ShapeNode can be flipped horizontally or vertically. Enable the AllowFlip property and the shape flips when an edge is dragged over its opposite edge. You can get or set current flip state using FlipX and FlipY properties.

Revamped item dependency system

Dependencies between diagram items are now expressed by rule objects and applied in sequence by the DiagramMediator class. Built-in dependencies are implemented by ItemFollowsContainerRule, AttachedFollowsMasterRule, LinkFollowsNodesRule, NodeFollowsSelectionRule rules. You can create custom rule objects with following API and add them to DiagramMediator.AllRules array to make items follow other items during user interaction -
JavaScript  Copy Code

var MyRule =
{
    dependencies: function (master) {}, // return array of items that should follow master
    dependentUpon: function (dependency) {},  // return array of items that should be followed by dependency
    recognize: function (dependency) {},  // return true or false if this rule should be applied on an item
    updateFromMasters: function (dependency, originalStates) // set new position or size of dependency
}


License keys

There are no separate trial / licensed builds of MindFusion scripts provided anymore, instead you disable trial mode by specifying a license key string. License keys are now listed on the Keys & Downloads page at MindFusion customer portal. Copy the key to a diagram_lic.txt file in same folder where the diagram html page is located. The file name and location can be changed by calling the diagram's setLicenseLocation method. Alternatively, the key string can be set directly by calling setLicenseKey method.

Miscellaneous

  • CaptionBackBrush and FoldIconSize properties added to ContainerNode.
  • Multiple rotation of nodes improved, now node angles are modified by same rotation delta calculated from mouse position instead of pointing all rotation handles in mouse direction.
  • Xml serialization improved.
  • LinkSegments property of Diagram specifies initial number of link segments.
  • JQuery mode now supports version 3 of JQuery.

New in version 2.8

Fluent API

Builder objects with property setters and shortcut methods for font and brush creation add support for fluent programming style. Static With and instance init methods in DiagramItem, Style and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects:

JavaScript  Copy Code

diagram.addItem(
    ShapeNode.With()
        .brush("lightGray")
        .font("Arial", 4)
        .enableStyledText(true)
        .text("Task <i>1</i>")
        .tooltip("This is the task")
        .create());

diagram.getFactory()
    .createShapeNode(20, 20, 20, 20).init()
        .brush("lightGray", "white", 20)
        .font("Arial", 4)
        .enableStyledText(true)
        .text("Task <i>2</i>")
        .tooltip("This is the second task");

diagram.arrange(
    TreeLayout.With()
        .levelDistance(20)
        .nodeDistance(20)
        .linkType(TreeLayoutLinkType.Cascading3)
        .create());

DiagramLink improvements

  • HeadStroke, HeadStrokeThickness and HeadStrokeDashStyle properties let you customize arrowhead strokes independently of line segments strokes.
  • The AllowSelfLoops property of Diagram class controls whether users are allowed to draw self-loop links.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points:

Miscellaneous

  • TextAlignment and LineAlignment properties moved from ShapeNode to DiagramItem; you can now use them to set alignment for table and container captions as well.
  • Enable the AllowResizeHeaders property of swimlanes Grid to let users resize grid rows and columns interactively. The control raises headerStartResizing validation event when the user tries to resize, and headerResized event when the operation completes.
  • IconSize and DefaultNodeSize properties of NodeListView can be set to null, in which case the control will use the sizes stored in nodes' Bounds.
  • Implemented backward compatibility for XML files as old as v13 format (created by MindFusion diagram versions released in 2008).
  • The control now supports cyclic attachment created using DiagramNode.attachTo method, where moving any of the attached nodes will move all other nodes in the cycle.
  • RoundRect shape's corner arcs now keep constant radius and no longer deform when the node size changes to non-rectangular.
  • itemAdded and itemRemoved events raised when an item is added or removed, either from code or interactively.

New in version 2.7

Treemap layout

Tree-maps represent hierarchies by nesting child nodes within their parents, where the areas of leaf nodes are proportional to their Weight values. Unlike other layout algorithms, TreeMapLayout expects hierarchies to be defined via grouping or containment (attachTo method and ContainerNode class), and will ignore any links in the diagram. The diagram area covered by the topmost nodes in a hierarchy is specified via the layoutArea property. By default, the layout tries to keep the ratio of node sides as close as possible to one. However this could make it hard to distinguish separate levels of the hierarchy. To alleviate that, set squarify to false, and child nodes will be arranged either as a row or a column inside their parent node, alternating directions for each level. The drawback is that when Weight ratios differ greatly or nodes contain many children, some nodes could end up with very narrow rectangles.

XML serialization

In addition to the loadFromXml method added in a previous version, the Diagram class now provides saveToXml method that serializes its contents in XML format supported by all MindFusion diagram libraries for mobile, desktop and web platforms. saveToXml posts the XML as text/xml to specified URL. The new saveToString and loadFromString methods generate or load XML strings instead, when their argument is set to SaveToStringFormat.Xml (a Json enumeration member creates JSON strings by calling older toJson method).

Miscellaneous

  • Set TableNode.prototype.useScrollBars to show full scrollbars for scrollable tables instead of up/down buttons in captions.
  • The ShowDeleteButton property of DiagramNode displays a close/delete X button in upper-right that lets users delete the node by clicking.
  • Styled text mode (EnableStyledText) now supports <sub> and <sup> tags for respectively subscript and superscript.
  • DiagramLink now calls onUpdateVisuals method to let you implement custom-drawing, working in same manner as its counterpart in node classes.
  • The new Flowcharter sample project shows how to create an online flowchart editor, providing UI for zooming, scrolling, creating new nodes and formatting nodes' contents.
  • The new TreeMap sample project demonstrates the TreeMapLayout tree mapping algorithm, where node weights are set to either population size or area of world countries.
  • The new Inheritance Diagram sample project demonstrates how to visualize classes using TableNode objects.

New in version 2.6

Free-form nodes

A FreeFormNode collects all points from users' mouse or touch input and displays them as node's outline. To let users draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms. Use the Points property of FreeFormNode to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than AutoCloseDistance, the node's Closed property is automatically set to true. AutoCloseDistance default value is Number.MAX_VALUE, so free-form nodes are always closed.

Convert free-form drawings to ShapeNodes

Additional drawing modes, convenient for touch input, convert FreeFormNode objects drawn by user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user's input is matched are set via diagram's FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.

Miscellaneous

  • TypeScript definitions for the Diagramming API are now provided in jsdiag.d.ts file.
  • nodePasted and linkPasted events are now raised when new DiagramNode and DiagramLink instances are created from clipboard contents.
  • VirtualScroll mode fixed for parent div size specified in percent units.
  • Fixed bug where the ExpandOnIncoming property specifying link direction for collapse/expand actions did not work correctly.
  • Removed several global variables created inadvertently by the control.

New in version 2.5.1

  • System3D member added to CellFrameStyle enumeration. If it's assigned to the CellFrameStyle property of a TableNode, cell frames are rendered using 3D effect.
  • Resize and move interaction cursors now remain visible until the user releases mouse button.
  • Fixed bug where auto-handles mouse hint cursor would not match the item type.
  • Fixed bug where multiple lines in link's Text were drawn overlapped.
  • Fixed bug where BaseShape arrowhead would point in wrong direction for strictly vertical links.
  • Fixed fromJson bug where ShapeNodes were not loading correct shape.

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

  • TextStroke and TextStrokeThickness properties of DiagramItem let you set color and thickness of text outlines.
  • Items can now be deleted using Backspace key when running on Mac.
  • Caption divider line in TableNode and ContainerNode is now rendered clipped when caption height is smaller than corner radius.
  • The TooltipDelay property specifies the delay in milliseconds before showing tooltips.
  • The Orientation property of NodeListView lets you set the view's orientation to Horizontal or Vertical.
  • MindFusion.Common.js contains code shared with other JavaScript libraries by MindFusion. It must be loaded before the MindFusion.Diagramming.js script.

Fixed bugs

  • Fixed overlaps in TreeLayout when arranging nodes of different sizes.
  • Anchor points indices were not serialized and could be reset to different values when loading from JSON.
  • Deserialization of custom item classes worked correctly only if their names contained Node or Link suffix.

New in version 2.4

Appearance improvements

  • Set the Shape property of tables and containers to RoundedRectangle to render them with rounded corners.
  • Hide the frames of table cells by setting the CellFrameStyle property to None.
  • Set the EnableStyledText property of TableNode class to render styled text in tables.

New events

  • The control raises cellTextEdited event when users edit the text of table cells.
  • The createEditControl event lets you create custom DOM element or fragment to use as in-place text editor.
  • NodeListView raises nodeSelected event when the user selects a node.

Miscellaneous

  • jQuery mode is now the default and all sample projects have been updated to use jQuery. To continue using the Microsoft Ajax library, set MindFusionImpl = "MsAjax" before loading Diagramming.js
  • the loadFromXml method of Diagram class lets you load XML files created by MindFusion diagram controls for other platforms.
  • fixed setZoomFactorPivot bug in virtual scroll mode.

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:

  • <b> specifies bold text
  • <i> specifies italic text
  • <u> specifies underlined text
  • <color=value> specifies text color
  • <br /> specifies line break

Text rendering improvements

  • General text rendering quality improved. The component removes scale transformations applied for MeasureUnit and ZoomFactor before drawing text on the canvas, and instead specifies a scaled font size, which helps improve text appearance in Firefox and older versions of Chrome.
  • Now items' text can be drawn underlined. To enable this, set the underline attribute of the Font class.
  • Font styles can be specified via Style instance by calling its setFontStyle method with a combination of FontStyle enumeration members.

Miscellaneous

  • Items can be drawn using dashed lines in browsers that support the setLineDash function. To enable this, set the StrokeDashStyle property of DiagramItem or Style to a member of the DashStyle enumeration.
  • TreeLayout supports organizational charts with assistant nodes as in Microsoft Office diagrams. To mark nodes as assistants, set the treeLayoutAssistant field of node's LayoutTraits to a member of the AssistantType enumeration. Set the TreeLayout.enableAssistants flag to arrange assistant nodes in a separate branch between the main node levels.
  • Specify if separate connected components of a graph should be arranged horizontally or vertically relatively to each other by setting the multipleGraphsPlacement attribute of layout classes.
  • The type of LinkLabel.Margin property has been changed from number to Thickness, letting you specify different margin sizes at each side of the label.

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

  • Set the LinkLabel.Brush property to fill the background of link labels.
  • Number of link segments can now be set by calling the DiagramLink.setSegmentCount() method.
  • The BackgroundImageAlign property specifies the alignment of diagram's BackgroundImage.
  • The TextPadding property specifies the padding distance between the borders of a node and its text.
  • Nodes of all classes can be rotated.

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

  • Set the BackgroundImageUrl property to draw an image as Diagram's background.
  • The TextStyle property of links provides support for several different text position and orientation styles, defined by the LinkTextStyle enumeration.
  • Set the AllowUnconnectedLinks property to true to let users draw links without connecting them to nodes.

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

  • Set the ModificationStart property to AutoHandles to let users start moving or resizing an item without selecting it first.
  • Customize the function of keyboard modifier keys via the ModifierKeyActions property.
  • 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 Behavior to SelectOnly to let users select existing items but not to modify them or draw new ones.

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

  • Node rotation was ignored by link routing algorithm; now links are routed around the rotated node's boundaries.
  • The routeAllLinks function pulls apart link segments when they would overlap.
  • Several new predefined shapes available in the Shapes class - RightTriangle, Decagon, Trapezoid, Star4Pointed, Star5Pointed, Star6Pointed, Star7Pointed, Star16Pointed, Star24Pointed, Star32Pointed, Donut and Plaque.
  • Set Behavior to Pan to only let users pan the view when dragging the mouse.
  • The component now raises clicked event for the diagram when there isn't any item at the click location (which would cause nodeClicked or linkClicked event).

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

  • 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 version 1.6.1

ContainerNode improvements

  • Child nodes are now drawn by their containers; when containers overlap, the children of a lower container cannot appear in front of the upper container anymore.
  • The ClipChildren property specifies whether to clip child items to container's boundaries.
  • The ZIndex property no longer changes automatically when dropping nodes into a container.
  • The Visible property of child items no longer changes when folding or unfolding containers; this lets you keep invisible items inside containers.

Miscellaneous

  • The LinkHitDistance property lets you specify the furthest distance from links that a click would be considered a hit.
  • The HyperLink property lets you associate an URL with diagram items.
  • EnabledHandles lets you enable or disable individual adjustment handles of nodes.
  • The arrangeLinkLabels method rearranges link labels whose AutoArrange flag is set.

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

  • nodeSelected and linkSelected events are now raised when an item is selected, either programmatically or by the user.
  • nodeDeselected and linkDeselected events are now raised when an item is deselected, either programmatically or by the user.
  • nodeDoubleClicked and linkDoubleClicked events raised when the user double clicks an item.
  • nodeCreating is now also raised while the user drags a node from the NodeListView control.

Miscellaneous

  • Call setVirtualScroll to enable virtual scrolling mode. In this mode, the canvas stays as big as its containing div, and its content is drawn with a translation bound to the div's scrollbar positions. This allow displaying large diagrams in browsers and on mobile devices where the size of HTML canvas elements is limited.
  • resizeToFitText method added to ShapeNode.
  • Improved support for nested containers.

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

  • 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 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

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