Pack of UI Controls for JavaScript and TypeScript

A diverse package with useful UI libraries for JavaScript and TypeScript developed by MindFusion.

Installing

For the latest stable version:

npm i @mindfusion/pack

MindFusion Pack for JavaScript Controls

• DataViews / Grid
• Diagrams
• Schedules
• Charts
• Gauges
• Maps
• Virtual Keyboard
• Calendar
• DateTimePicker
• Dialogs
• ImagePicker
• ListView
• Menu
• ToolTip
• ToolStrip
• Tabs
• TreeView
• Window
• WindowHost

New in 2025.R2

Diagramming

Paged containers

PagedContainerNode is a ContainerNode subclass that organizes its child nodes into a collection of pages, represented by ContainerPage objects. This allows for the creation of more organized diagrams where nodes can be grouped into logical views within a single container. Only the nodes belonging to the currently active page, specified by currentPage property, are rendered and participate in user interactions. Navigation between pages is handled by scroll arrows in the caption bar, allowing users to cycle through the pages sequentially. For faster access, users can also double-click the container's caption to open an in-place combo box listing available page titles, enabling direct navigation to any page. The node's text value is automatically set to the title of newly activated ContainerPage.

Pattern router

New PatternRouter class routes links by applying patterns of segment and turn sequences and accepting them when resulting paths do not cross nodes. A path is accepted if its final segment ends in target point and is orthogonal to respective side of target node. If there are several possible paths, the router selects the shortest one. The minimumDistance property specifies minimum allowed distance of link segments from nodes. The preferredDistance property specifies distance of first or last link bend from associated node. PatternRouter includes several predefined patterns designed to create consistent-looking paths, and allows creation of custom patterns. Custom patterns can be defined as sequence of RouteStep objects specifying whether the path advances by relative or absolute distance, or changes direction:

var rightZigzag = new RoutePattern();
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.AdvanceRelative, 0.5));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.TurnRight));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.AdvanceRelative, 1));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.TurnLeft));
rightZigzag.steps.push(
    new RouteStep(RouteStepKind.AdvanceRelative, 0.5));
router.patterns.push(rightZigzag);

// this can be defined in shorter form using a pattern string
// var rightZigzag = new RoutePattern(
//    "ADR0.5 TRR ADR1 TRL ADR0.5");

Composite router

The CompositeRouter class lets you chain link routers (objects implementing the Router interface) so that a link passes through the sequence until it gets routed successfully. Diagram's default router is now set to a CompositeRouter instance containing a PatternRouter and Router sequence. This applies the several standard pattern paths when possible, and otherwise routes links using a simple cost-minimizing router.

Grid layout

The GridLayout algorithm arranges diagram nodes in a grid, keeping connected nodes close to each other. The algorithm strives to achieve a small number of link crossings. It is based on an iterative process whose initial steps shuffle the grid nodes randomly. That can lead to very different results each time the algorithm is run.

Miscellaneous

• startNode and endNode properties added to LayeredLayout. They let you specify which nodes to place on first and last layer, instead of relying on the algorithm selecting them automatically.
• The crossingCost property of GridRouter implements penalty cost for link crossings. It's applied only when routing multiple links at once,e.g. when running routeAllLinks.
• The bringIntoView method scrolls the diagram view to make the specified item visible.
• The allowLinksRepeat property of Diagram specified whether more than one links can connect the same origin and destination diagram nodes.
• controlUnloading and controlUnloaded events let you handle the control being unloaded from page DOM, or disposed by wrapper components for supported frameworks (e.g. byngDestroy hook in angular).
• Improved BPMN shapes.
• Spatial indexing fixes.

API changes

Default Diagram.linkRouter changed from Router to CompositeRouter instance.

Scheduling

Localization improvements

MindFusion.Scheduling now uses theIntl API ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) for localized formatting of dates and times. All properties of the Calendar control, that used to contain a format string, should now be set to an Intl.DateTimeFormat options object, e.g.:

settings.generalFormat = "dd MMMM";

must be changed to

settings.generalFormat = { day: '2-digit', month: 'long' };

The following list contains the fields and values that can be set in the options object:

• weekday: 'narrow' | 'short' | 'long'
• era: 'narrow' | 'short' | 'long'
• year: 'numeric' | '2-digit'
• month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long'
• day: 'numeric' | '2-digit'
• hour: 'numeric' | '2-digit'
• minute: 'numeric' | '2-digit'
• second: 'numeric' | '2-digit'
• timeZoneName: 'short' | 'long'
• timeZone: 'Asia/Shanghai'
• hour12: true | false
• hourCycle: 'h11' | 'h12' | 'h23' | 'h24'
• formatMatcher: 'basic' | 'best fit'

Miscellaneous

• repainted event raised after Calendar updates its DOM elements, letting you adjust their content or layout.
• realGroupType property returns the effective GroupType.
• buttonClick event now also raised when calendar is disabled (enabled property set to false).
• Improved React wrapper component in sample projects.
• Fixed exceptions when saving Schedule with recurrent events to JSON.
• 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.

Virtual Keyboard

Layout ring

You can define a sequence of keyboard layouts that can be cycled through by setting the layoutRing property. Add LayoutRingKey to your layouts to let users cycle through the list. Layouts from this list are automatically assigned to layout when user presses the LayoutRingKey, or if you call the selectLayout method from code. The KeyboardLayout class includes two new properties to control the appearance of the LayoutRingKey: image and label. One of these is displayed by the key to indicate the next layout in the cycle, following this priority:

1. If the next layout has a non-null / empty image property, that image is displayed.
2. If there is no image assigned to the layout, but the label property is set, that text is displayed as key's content.
3. If neither image nor label is set, the key will display the Unicode keyboard symbol (U+2328) as a fallback.

This code from the LayoutRing sample project demonstrates how to load layouts and populate the layoutRing:

 var lettersLayout = mk.KeyboardLayout.create(lettersLayoutDef);
 var numbersLayout = mk.KeyboardLayout.create(numbersLayoutDef);
 var symbolsLayout = mk.KeyboardLayout.create(symbolsLayoutDef);

 vk.layoutRing = [];
 vk.layoutRing.push(lettersLayout);
 vk.layoutRing.push(numbersLayout);
 vk.layoutRing.push(symbolsLayout);

 vk.selectLayout(0);

 vk.render();

Documentation

• Programming Interface Overview
• Tutorials
• Detailed API Reference

Samples

• Online demo
• Online samples for diagrams, flowcharts, hierarchies and schemes
• Online samples for schedules, timetables, calendars and resource views
• Online samples for charts and gauges
• Online samples for the Virtual Keyboard control

MindFusion Pack for JavaScript is distributed as an archive that contains over 100 samples with all components in the pack. You can download it from here.

Additional Information

Learn more about MindFusion JavaScript Pack from the official product page. Stay in touch with MindFusion and learn about our latest product announcements, tutorials and programming guidelines via X or our company blog. A YouTube channel with interactive video tutorials is available here.

Technical Support

• Forum
• E-mail
• Help desk

Licensing

The end-user license agreement for all MindFusion developer tools is uploaded here.