Version History

The list below describes past changes and additions to MindFusion JavaScript Pack:

New in 2023.R2

 Diagramming

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 toJson, saveToXml and saveToString methods of DiagramDocument save all pages in a single file, and respectively the fromJson, loadFromXml 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

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

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

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

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

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

New in 2023.R1

 Diagramming

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.

Lasso zoom tool

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

• Set the behavior property to Zoom to always draw zoom lasso.
• Set the Zoom flag for one of the keys in modifierKeyActions to let users draw zoom-lasso with respective modifier key pressed and the left mouse button.
• Assign Zoom value to rightButtonActions or middleButtonActions property to zoom using respective mouse button.

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

• The opacity property lets you create translucent DiagramItem by applying it to the alpha channel of all colors in the item.
• Diagram's background image now scales along with zoomFactor.
• The validateAnchorPoint event validates connecting diagram links to specific anchor points.
• The validateLinkCrossing event validates visibility of individual link crossing point decorations.
• The PanAndModify behavior lets you select and modify when the mouse pointer is over an item, or pan the view otherwise.
• removeNode method added to NodeListView.
• strokeDashArray and strokeDashOffset properties let you set custom dash patterns when strokeDashStyle is set to Custom.
• strokeThickness now affects dash distances.
• enableStyledText property added to ItemLabel lets you format labels using HTML-like format flags.
• enableWrap and maxWidth properties of ItemLabel let you wrap label's text.
• The ArrowHeads class exposes arrowhead shapes as static methods returning respective predefined shape.

Fixed bugs

• Fix for mouse wheel not scrolling when virtualScroll is disabled.
• Touch input fixes.
• Fix for not raising nodePointed and linkPointed events.
• Fixed strokeDashStyle XML serialization.
• Fixed clearAll method of NodeListView keeping visual elements from old nodes.
• Fixed linkTextStyle exception.
• Fixed styled text rendering in rotated NodeLabel, TableNode and ContainerNode objects.
• strokeThickness no longer affects text rendering.

 Scheduling

New localization files added to distribution:

• Spanish
• French
• Italian
• Korean
• Dutch
• Portuguese
• Chinese

New in 2022.R1

 Diagramming

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

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.

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

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 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.
• The handleTouchHitDistance property of DiagramView makes it easier to grab adjustment handles on mobile devices, without increasing the adjustmentHandlesSize value.
• The multiTouchDraw property of DiagramView lets you prevent drawing multiple items simultaneously, while keeping other multitouch gestures enabled.

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

• enableStyledText now supports <size> element specifying font size.
• 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.
• The MoveLabels behavior lets user move link and node labels interactively.
• LinkEventArgs now includes origin and destination properties that report respective candidate nodes to linkCreating and linkModifying event handlers.
• The attach method of DiagramNode now automatically detaches from previous master.
• contentAlign property of SvgNode specifies alignment of SVG drawing inside the node.
• lineAlignment property of DiagramLink sets the vertical position of link's text.
• Horizontal scroll gestures should now work on Macbook trackpad when using virtual scroll mode.
• More precise vertical alignment of text in SVG exported by SvgExporter.

Bug fixes

• DiagramLink.baseShape serialization fix.
• Fix for createDiagramLink not working with Point arguments (to create unconnected links).
• Fix for link adjustment handles not applying stroke from HandlesVisualStyle.
• Fixed exception in dispose method of Overview control if called before the overview is attached to the diagram.
• Fixed exceptions when linkCrossing is set to Arcs.
• Fix for containers clipping their child nodes when children are being dragged.

 Charting

Tower charts

The TowerChart control and TowerRenderer component draw tower charts, rendering series side by side to allow comparing data sequence and sizes. Assign the series to compare to leftSeries and rightSeries properties of the chart. The chart segments are arranged according to the value of towerLayout property, and their shape is drawn as specified by segmentShape.

Tower charts require three-dimensional series. The first dimension specifies event order or timing and is used to sort or position segments. Second dimension specifies duration and is rendered as segment length along the main axis. Third dimension specifies a value rendered as segment width along the cross axis. You could use the stock EventSeries class as data container, or implement the Series interface to provide data from your own data structures.

 DataViews

The DataViews module now includes a Property Grid providing user interface for browsing and editing the properties of an object. The PropertyGrid control can be bound to any object or an array of objects as specified by its selectedObject property. If showAllProperties is set to true, the control enumerates all properties and fields of the object and its prototype chain, resolves their data types and displays their name and value in a grid layout. If showAllProperties is set to false, only properties and fields included in the metaData dictionary are displayed.

 MindFusion.UI

MindFusion UI for React contains React functional wrapper components for ListView, TreeView, TabControl and ToolStrip controls from the @mindfusion/common-ui package. The components override core controls' DOM generation functions to generate React VDOM elements instead.

The React wrappers can be installed from the @mindfusion/ui-react package on npm:
npm i @mindfusion/ui-react

All wrapper components expose a forwardRef that can be passed on to other components. To obtain a reference to the underlying core control, use the respective find method of the ref, for example list1.current.find().

Properties and events defined by core controls can be set directly in JSX syntax:

JSX

<ListView
    id="list1" ref={list1}
    height="100%" theme="pastel"
    data={data}
    itemSize={common.Unit.pixel(20)}
    onSelectionChanged={(sender, args) => onSelectionChanged(sender, args)} >
</ListView>

Several often-used methods such as addItem, removeItem, and selectItem are defined in the wrapper components' API. Other methods must be called through the respective core control:

JSX

list1.current.addItem(<ListItem imageSrc={na} title="unknown"></ListItem>);
index = list1.current.find().items.indexOfItem(item);

New in 2021.R2

The distribution includes ES5-compatible scripts located in Scripts/umd folder, whose classes are exposed as members of global MindFusion namespace object.
The Scripts/esm folder contains ES6 code that lets you import the classes from respective modules.

 Diagramming

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

• nodeSelecting, linkSelecting, selectionChanged events allow handling of selection interactions.
• dataLoaded is raised when the diagram data is loaded from JSON or XML.
• mouseWheel is raised when the user rotates the mouse wheel while the cursor is positioned over the diagram surface.
• treeItemTextEditing, treeItemTextEdited allow handling of inplace-edit operations in TreeViewNode.

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

• The Diagram class is now purely a model class and no longer represents a DOM control. To display and allow interactions with a Diagram instance, you will need to create a DiagramView control and pass the Diagram instance to its diagram property.
• Auxiliary controls, such as Overview, Ruler and ZoomControl, must be attached to a DiagramView instance instead of Diagram via the diagramView / target properties.
• Most getProperty/setProperty function pairs have been replaced by ES6 getters/setters. Set CompatConfig.propFunctions to true in order to continue using legacy get/set functions (for properties added to the library before v.4.0) in your code.
• scroll and zoom properties moved from Diagram to DiagramView: autoScroll, scrollZoneSize, autoScrollAmount, scrollX, scrollY, viewport, virtualScroll, zoomFactor.
• input related properties moved from Diagram to DiagramView: allowInplaceEdit, delKeyAction, behavior, tooltipDelay, modificationStart, modifierKeyActions, leftButtonActions, middleButtonActions, rightButtonActions.
• magnifier properties moved from Diagram to DiagramView: magnifierEnabled, magnifierFactor, magnifierWidth, magnifierHeight, magnifierFrameThickness, magnifierShading, magnifierShape,magnifierFrameColor, magnifierSecondaryFrameColor.
• other properties moved from Diagram to DiagramView: defaultControlTemplate, licenseKey, licenseLocation.
• the following methods have been moved from Diagram class to DiagramView class: create, find, record, stopRecording, replay, clearTooltip, beginEdit, copyToClipboard, pasteFromClipboard, cutToClipboard, scrollTo, zoomToRect, zoomToFit, setZoomFactorPivot.
• MindFusion.AbstractionLayer class has been removed.
• EventArgs and CancelEventArgs classes have been moved to the MindFusion.Controls namespace.
• ArrayList, Dictionary, ObservableCollection, Set classes have been removed from MindFusion.Collections namespace.
• Due to Navigator.clipboard API being asynchronous, pasted items are not available immediately after calling pasteFromClipboard with systemClipboard enabled. You will be able to access them only after nodePasted and linkPasted events are raised.
• 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.

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.

 Scheduling

API Changes

• JsScheduler source code has been refactored and is now dependent on the following MindFusion shared libraries: drawing, controls, common, and common.collections.
• The distribution includes ES5-compatible scripts located in Scripts/umd folder, whose classes are exposed as members of global MindFusion namespace object.
• The Scripts/esm folder contains ES6 code that lets you import the classes from respective modules.

To port a project that uses an earlier version of MindFusion.Scheduling to v.2.0:

• For projects that access MindFusion namespace from the global namespace check the "Loading UMD namespaced scripts" section in "Getting Started" guide.
• For projects that use module loaders, check the various "Loading ... modules" sections in Getting Started guide.
• For TypeScript projects that access MindFusion namespace from the global namespace, add a reference to the common.d.ts and global.d.ts files.

Localization improvements

Date and time localization of the Calendar can now be done via the CLDR locale data JSON distributions, instead of writing the "date" object in the localization file. You can continue using the localization files for string localization. For more information see the Localization topic.

 Mapping

MindFusion.Mapping source code has been refactored and is now dependent on the following MindFusion shared libraries: drawing, controls, common, and common.collections.

 Virtual Keyboard

MindFusion.Keyboard source code has been refactored and is now dependent on the MindFusion common shared library.

 DataViews

MindFusion.DataViews source code has been refactored and is now dependent on the following MindFusion shared libraries: controls, common, and common.ui.

 Charting

• MindFusion.Charting source code has been refactored and is now dependent on the following MindFusion shared libraries: drawing, controls, common, common.collections and gauges.
• The FunctionSeries class -represents a series that calculates its values from provided formula.
• Area charts are now rendered relatively to axis' Origin too.

 Gauges

• MindFusion.Gauges source code has been refactored following ES6 standards, including modules, classes, properties and native collections.
• It is now dependent on the MindFusion drawing and controls shared libraries.
• Get/set functions are mostly replaced by properties.

 MindFusion.UI

MindFusion.UI source code has been refactored and is now dependent on the following MindFusion shared libraries: drawing, controls, common and common.collections.

New in 2021.R1

 Diagramming

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.

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

• The diagram canvas now automatically expands to fill the area freed up when a scrollbar auto-hides.
• nodeTextEditing, linkTextEditing and cellTextEditing validation events let you prevent users from editing a specific item.
• Fix for scroll position serialization in virtual scroll mode.
• XML serialization fixes.
• Fixed Overview flickering when the tracker rectangle is being dragged near the control's borders.
• ActiveItem reference is now serialized in JSON format.

 Grid

React support

The GridView React component allows integrating the MindFusion.DataViews API into React applications. It is a wrapper component for the Grid control, handles the rendering and
keeps its DOM in sync with React’s virtual DOM. Grid properties can be set from JSX, and grid events can be handled through JSX syntax as well.

JSX

import dv from 'grid-library'
import { GridView } from 'grid-library-react';
...
var columns = [
    new dv.GridColumn("index", dv.IntegerType, false),
    new dv.GridColumn("name", dv.StringType),
    new dv.GridColumn("registered", dv.DateType),
] 
var model = new dv.ArrayModel(dataArray, columns, "index");
this.state = { model: model };
...
<GridView
    id='view'
    model={this.state.model}
    {...props}
    onRowCreating={(grid, args) => this.onGridRowCreating(grid, args)}
    onRowDeleting={(grid, args) => this.onGridRowDeleting(grid, args)} />

GridView can be installed from the grid-library-react package on npm:

npm i grid-library-react

 Charting

• Area charts are now drawn relative to Axis' Origin.
• Fixed rendering of rotated data labels in Bar charts.
• Fixed strokeThickness rendering in gauge controls.

New in 2020.R2

 Diagramming

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

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

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

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

 Charting

The list below describes recent changes and additions to MindFusion.Charting for JavaScript:

Axis origin

The origin property of the Axis class lets you specify the origin of an axis. If set to a non-null value, the component renders an axis line inside the plot. Bars are drawn below that axis line if their values are smaller than the origin. For stacked bar charts, each bar length corresponds to the difference between bar's value and origin.

The Plot.drawOrigins and Plot2D.drawOrigins methods allow you to draw the axis origin lines when rendering the chart plot by yourself.

Miscellaneous

• A new SimpleSeries constructor override allows you to specify a list with tooltips for the newly created Series.
• The new drawLeftFromPoint method allows you to render text, which is left-aligned compared to a given Point.
• The new methods fromObject and toObject of the Font class allow you to deserialize and serialize Font instances from/to Json objects.

 Virtual Keyboard

API changes

• The VirtualKeyboard control now inherits from MindFusion.Common.Control.
• VirtualKeyboard.addEventListener method removed; use the EventDispatcher API to subscribe to events. e.g. keyboard.keyPressed.addEventListener(handler).
• Get / set methods have been refactored to properties and can be accessed directly.
• Important: A reference to the mindfusion-common/jsmodules package or to the MindFusion.Common.Full.js should be added to projects that use the virtual keyboard.

New in 2020.R1

Grid

JsDataViews Grid is a grid control, that binds to an array of objects and displays the data in tabular format. Grid column data types include String, Integer, RealNumber, Date, DateTime, Currency, Image and Lookup.

Some of the main features of the grid control are:

• Row virtualization
  Only the rows, that are visible within the current viewport are rendered, which allows large sets of records to be displayed faster.
• Inplace editing of grid cells.
  Data-type dependent inplace editors allow inline editing of grid cells data. Custom editors from the MindFusion.Common.UI library can also be used as inplace editors for the DateType, DateTimeType and ImageType data types.
• Select, add and delete grid rows interactively.
  A built-in row header context menu supports add and delete operations.
• Interactive column sorting and resizing.
  A built-in column header context menu supports sorting operations. 
• Custom draw cells and column headers.
  You should handle the customDraw events.
• Localization support.
  Date, number and currency values can be localized by specifying Intl locale and options in the column metadata.
• Themes
  A set of predefined css themes are available.

Diagramming

Shape components

The Shape class used to specify ShapeNode geometry can also be used as a component in CompositeNode. 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 from node's template specifying shape component's properties:

JavaScript

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

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.

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 help 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 help 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 help topic.

Miscellaneous

• Improved automatic routing of links.
• More precise scrolling with TableNode scrollbar thumb.
• 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.

Charting

• innerLabelRotation, outerLabelRotation and stackOuterLabels properties give you better control over the rendering of labels in bar charts.
• All Series can accept now simple JavaScript array-s as arguments instead of Collections.List instances.
• The ToolTip class is greatly extended with many new properties that allow you to customize the apparance and position of tooltips.
• The Color.knownColors field lists all standard CSS color names.
• Brush and Pen instances can be created with simple strings that specify the HTML code of the color as argument instead of Color objects.
• The yLabelAlignment property of BiaxialChart specifies horizontal alignment of Y-axis labels.
• Texts are now properly underlined when FontStyle.Underline is set.
• Fixed a bug that caused a stacked BarChart sometimes to crash.

Mapping

Canvas overlaysCanvas-based decoration layers can display Circle and Poly drawings at specified geographical locations. The radius of the circles and the stroke thickness can be set in meters (scalable) or in pixels (fixed-width).
Polylines can be drawn as straight lines or smooth curves.

API changes

Some of the code in the MindFusion.Mapping namespace has been refactored. 

• EventArgs, EmptyEventArgs, CancelEventArgs, EventDispatcher, Control and Unit classes are now part of MindFusion.Common namespace.
• IEnumerable, List, ObservableCollection and Dictionary classes are now part of MindFusion.Common.Collections namespace.

Important
A reference to the mindfusion-common/jsmodules package or to the MindFusion.Common.Full.js should be added to projects that use MindFusion.Mapping

Scheduling

• The registerClass method of the Schedule class allows you to register custom types for serialization support. Members of your custom class will be serialized with the schedule. You should override saveToXml, loadFromXml, toJson, fromJson in your custom class.
  
  
  

  JavaScript

  //register the CustomEvent class
  var p = MindFusion.Scheduling;
  p.Schedule.registerClass(CustomEvent, "[custom:customEvent]", "customEvent", 1);

  
  If you don't register your custom class, but it derives from one of the library classes that support serialization (Item, Task, Resource, Contact etc.), your class will be serialized the way the base class is serialized.
• Serializing the JS Calendar schedule is now uniform with the serialization in MindFusion .NET and Java Scheduling libraries.
• The itemDraw event has been added to the Calendar class. It is raised when schedule items are drawn. An instance of ItemEventArgs provides you data about the event and allows you to access the DOM element of the Item that is drawn.
  
  

  JavaScript

  // attach a handler - when the item is drawn
  calendar.itemDraw.addEventListener(onItemDraw);function onItemDraw(sender, args) {
     args.rawEventArgs.target.setAttribute("style", "color:red; border: 1px solid blue;");
  }

  
  

API changes

Some of the code in the MindFusion.Scheduling namespace has been refactored.

• EventArgs, EmptyEventArgs, CancelEventArgs, EventDispatcher classes are now part of MindFusion.Common namespace.
• IEnumerable, List, ObservableCollection and Dictionary classes are now part of MindFusion.Common.Collections namespace.
• The Calendar control now inherits from MindFusion.Common.Control; the calendarLoad event is renamed to controlLoad (inherited from Control)
  

Important
A reference to the mindfusion-common/jsmodules package or to the MindFusion.Common.Full.js should be added to projects that use MindFusion.Scheduling

Virtual Keyboard

You can use the virtual keyboard with Quill.

UI

DateTimePicker control

An input control with the ability to parse and select dates from a popup calendar and/or time from a popup list.

Calendar control

A lightweight month calendar control.

ImagePicker control

An input control with the ability select images from the filesystem or a predefined list.

API changes

Some of the code in the MindFusion.UI namespace has been refactored.

• EventDispatcher, Control and Unit classes are now part of MindFusion.Common namespace.
• IEnumerable, List, ObservableCollection and Dictionary classes are now part of MindFusion.Common.Collections namespace.
• All other classses from the MindFusion.UI namespace have been moved to MindFusion.Common.UI namespace.

Important
A reference to the mindfusion-common/jsmodules package or to the MindFusion.Common.Full.js should be added to projects that use MindFusion.Common.UI