What's New In This Release

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

New in 2024.R1

Web components

The WebComponents.register method of each module from the pack lets you register its controls as web components:

• call register method of Charting.WebComponents to register chart controls as web components.
• call register method of DataViews.WebComponents to register grid controls as web components.
• call register method of Diagramming.WebComponents to register main diagramming controls as web components.
• call register method of Diagramming.Controls.WebComponents to register TabbedDiagramView as web component.
• call register method of Gauges.WebComponents to register gauge controls as web components.
• call register method of Keyboard.WebComponents to register VirtualKeyboard as web component.
• call register method of Mapping.WebComponents to register map controls as web components.
• call register method of Scheduling.WebComponents to register Calendar as web component.
• call register method of UI.WebComponents to register smaller UI controls as web components.

 Diagramming

TableNode improvements

• getRow and getColumn methods now return strongly-typed TableRow and TableColumn objects.
• The anchorPattern property of TableRow and rowAnchorPattern property of TableNode let you specify the points where links connect to table rows.
• cellTextColor property lets you set default color of cell texts, without changing caption color.

DiagramLink improvements

• Disable allowUnanchoredLinks to prevent users from drawing links to nodes without designated anchor points.
• Fix for allowUnconnectedLinks not working when allowSelfLoops is disabled.
• Set the autoDeleteLinks property to false to prevent deleting links along with a node they connect, and disconnect the links instead.
• Fixed XML serialization of unconnected links.
• Custom-draw anchor points by setting MarkStyle.Custom and handling drawAnchorPoint event.
• The showAnchors property can be set to Selected | Auto combination.

TabbedDiagramView improvements

• Enable allowRenamePages to let users edit the title of DiagramPage by clicking the active tab.
• The control raises pageAdding event when users click the plus icon to let you validate the operation, and pageAdded once the page is added.
• The control raises pageRemoving event when users close a tab to let you validate the operation, and pageRemoved once the page is removed.
• Fix for scroll range not updating when changing tabs.
• Fixed exception when moving multiple selection in TabbedDiagramView.

NodeListView improvements

• Set horizontalDropAlignment and verticalDropAlignment properties to specify how nodes are positioned relatively to the drop point after drag operations from NodeListView.
• Set dragIndicatorOpacity property to specify the opacity of drag indicator displayed during drag-and-drop operations.
• Fixed NodeListView exception for nodes with rotation handle.

Miscellaneous

• Angular bindings updated to Angular version 16.
• Set inplaceEditAcceptOnEnter and inplaceEditCancelOnEsc properties to specify whether edit operations end when user presses respectively Enter and Esc keys.
• SinglePointerController can now be inherited from TypeScript.
• Set validityChecks to false to add items faster.
• Set cornerRadius to change the size of corners when node's shape is set to a rounded rectangle.
• Fix for ControlNodes drawing on top of DiagramView's scrollbars.

API changes

• Due to problems with some script loaders, the library no longer registers web components automatically. Call the WebComponents.register method to explicitly register component classes.
• Blazor bindings moved to MindFusion.Diagramming.JavaScript nuget package.

New in 2023.R3

 Diagramming

Web components

The library registers each control class as a web component. You can use the following tags to create corresponding components:

• <mindfusion-diagramview> creates a DiagramView instance.
• <mindfusion-ruler> creates a Ruler instance.
• <mindfusion-zoomcontrol> creates a ZoomControl instance.
• <mindfusion-overview> creates an Overview instance.
• <mindfusion-nodelistview> creates a NodeListView instance.

When instantiated as a web component, each control class creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling controls' find method with id argument.

HTML

<mindfusion-diagramview
    id="diagramView"
    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: auto;">
</mindfusion-diagramview>

JavaScript

var diagramView = DiagramView.find("diagramView");
var diagram = diagramView.diagram;

Animations

The library now includes several standard animation classes and methods.

The animate method of DiagramItem can run following animations:

• FillColorAnimation animates the fill color of nodes or link arrowheads.
• StrokeColorAnimation animates the color of node borders or link segments.
• OpacityAnimation animates items' opacity for fade-in and fade-out effects.

Following animations can be applied to DiagramNodes:

• BounceAnimation animates vertical position of nodes.
• ShakeAnimation animates horizontal position of nodes.
• PulseAnimation animates node's local scale factor.
• PathAnimation moves nodes along specified path.

The animate method of DiagramView can run following animations:

• ScrollAnimation animates the scroll position of a view.
• ZoomAnimation animates the zoom factor of a view.

DiagramLink improvements

• Set the intermediateShape property to display arrowheads at the middle of each link segment. This could help users follow longer link paths. Intermediate arrowheads can be customized further by setting intermediateBrush and intermediateShapeSize.
• Set the allowSplitLinks property of Diagram to let users insert new link segments by dragging any point of a selected link's segment. In this mode users can also merge link segments by making them close to collinear, or by moving adjustment handles close to each other, as set via mergeThreshold.

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

• column, row and node property getters added to CellEventArgs.
• fixed RaiseEvents mode of expandButtonAction; it no longer collapses or expands clicked node's subtree.
• ContainerNode now sorts its child nodes by zIndex instead of insertion order.

 Scheduling

The library registers the Calendar class as a web component. You can use the <mindfusion-calendar> tag to create the control.

When instantiated as a web component, the control creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling the find method with id argument.

HTML

<mindfusion-calendar id="calendar" style="height: 100%; width: 100%;">
</mindfusion-calendar>

JavaScript

var ms = MindFusion.Scheduling;
calendar = ms.Calendar.find("calendar");
calendar.currentView = ms.CalendarView.SingleMonth;

 DataViews

The library registers the Grid class as a web component. You can use the <mindfusion-grid> tag to create the control.

When instantiated as a web component, the control creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling the find method with id argument.

HTML

<mindfusion-grid id="grid">
</mindfusion-grid>

JavaScript

var dv = MindFusion.DataViews;
var grid = dv.Grid.find("grid");
grid.model = new dv.ArrayModel(participants, columns, "index");