MindFusion Pack for JavaScript 2020.R1 has just been released with the following new features and updates:

Grid

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

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 overlays

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

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

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)

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.

• 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.
• All other classses from the MindFusion.UI namespace have been moved to MindFusion.Common.UI namespace.

You can find out more about MindFusion Pack for JavaScript at https://mindfusion.eu/javascript-pack.html or download the trial version from https://mindfusion.eu/JsPack.zip.

---