@mindfusion/pack

# 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](https://mindfusion.dev/product_images/javascript/pack/javascript_pack.png) ### 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](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_PagedContainerNode.htm) is a [ContainerNode](https://mindfusion.dev/docs/javascript/pack/CC_T_MindFusion_Diagramming_ContainerNode_0.htm) subclass that organizes its child nodes into a collection of [pages](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_PagedContainerNode_pages_0.htm), represented by [ContainerPage](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_ContainerPage.htm) 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](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_PagedContainerNode_currentPage_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_DiagramItem_text_0_0.htm) value is automatically set to the [title](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_ContainerPage_title_0.htm) of newly activated **ContainerPage**. ##### Pattern router New [PatternRouter](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_PatternRouter_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_PatternRouter_minimumDistance_0_0.htm) property specifies minimum allowed distance of link segments from nodes. The [preferredDistance](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_PatternRouter_preferredDistance_0_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_RouteStep_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_CompositeRouter_0.htm) class lets you chain link routers (objects implementing the [Router](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_Router.htm) 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](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_PatternRouter_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Graphs_GridLayout.htm) 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](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Graphs_LayeredLayout_startNode_0.htm) and [endNode](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Graphs_LayeredLayout_endNode_0.htm) properties added to [LayeredLayout](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Graphs_LayeredLayout.htm). They let you specify which nodes to place on first and last layer, instead of relying on the algorithm selecting them automatically. - The [crossingCost](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_GridRouter_crossingCost_0.htm) property of [GridRouter](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_GridRouter_1.htm) implements penalty cost for link crossings. It's applied only when routing multiple links at once,e.g. when running [routeAllLinks](https://mindfusion.dev/docs/javascript/pack/CC_M_MindFusion_Diagramming_Diagram_routeAllLinks_0_0.htm). - The [bringIntoView](https://mindfusion.dev/docs/javascript/pack/M_MindFusion_Diagramming_DiagramView_bringIntoView_1_DiagramItem.htm) method scrolls the diagram view to make the specified item visible. - The [allowLinksRepeat](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_Diagram_allowLinksRepeat_0_0.htm) property of [Diagram](https://mindfusion.dev/docs/javascript/pack/CC_T_MindFusion_Diagramming_Diagram_0.htm) specified whether more than one links can connect the same origin and destination diagram nodes. - [controlUnloading](https://mindfusion.dev/docs/javascript/pack/E_MindFusion_Controls_Control_controlUnloading.htm) and [controlUnloaded](https://mindfusion.dev/docs/javascript/pack/E_MindFusion_Controls_Control_controlUnloaded.htm) events let you handle the control being unloaded from page DOM, or disposed by wrapper components for supported frameworks (e.g. by**ngDestroy** hook in angular). - Improved BPMN shapes. - Spatial indexing fixes. ##### API changes Default [Diagram.linkRouter](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Diagramming_Diagram_linkRouter_0_1.htm) changed from [Router](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_Router.htm) to [CompositeRouter](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Diagramming_CompositeRouter_0.htm) instance. #### Scheduling ##### Localization improvements MindFusion.Scheduling now uses the**Intl API** ( [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl](https://mindfusion.dev/docs/javascript/pack/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)) for [localized formatting](https://mindfusion.dev/docs/javascript/pack/Localization_2.htm) of dates and times. All properties of the [Calendar](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Scheduling_Calendar_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/E_MindFusion_Scheduling_Calendar_repainted.htm) event raised after [Calendar](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Scheduling_Calendar_0.htm) updates its DOM elements, letting you adjust their content or layout. - [realGroupType](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Scheduling_Calendar_realGroupType_0.htm) property returns the effective [GroupType](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Scheduling_GroupType.htm). - [buttonClick](https://mindfusion.dev/docs/javascript/pack/E_MindFusion_Scheduling_Calendar_buttonClick.htm) event now also raised when calendar is disabled ([enabled](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Controls_Control_enabled_0.htm) property set to **false**). - Improved React wrapper component in sample projects. - Fixed exceptions when saving [Schedule](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Scheduling_Schedule_1.htm) with recurrent events to JSON. - Due to problems with some script loaders, the library no longer registers web components automatically. Call the [WebComponents.register](https://mindfusion.dev/docs/javascript/pack/M_MindFusion_Scheduling_WebComponents_register_0.htm) 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](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Keyboard_VirtualKeyboard_layoutRing_0.htm) property. Add **LayoutRingKey** to your layouts to let users cycle through the list. Layouts from this list are automatically assigned to [layout](https://mindfusion.dev/docs/javascript/pack/P_MindFusion_Keyboard_VirtualKeyboard_layout_0.htm) when user presses the **LayoutRingKe**y, or if you call the [selectLayout](https://mindfusion.dev/docs/javascript/pack/M_MindFusion_Keyboard_VirtualKeyboard_selectLayout_0.htm) method from code. The [KeyboardLayout](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_KeyboardLayout.htm) 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](https://mindfusion.dev/docs/javascript/pack/index.htm) - [Tutorials](https://mindfusion.dev/docs/javascript/pack/Building_Your_First_Chart.htm) - [Detailed API Reference](https://mindfusion.dev/docs/javascript/pack/T_MindFusion_Animations_Animation.htm) ### Samples - [Online demo](https://mindfusion.dev/javascript-demo.html?sample=Activities) - [Online samples for diagrams, flowcharts, hierarchies and schemes](https://mindfusion.dev/products/javascript/diagramming/samples) - [Online samples for schedules, timetables, calendars and resource views](https://mindfusion.dev/products/javascript/scheduling/samples) - [Online samples for charts and gauges](https://mindfusion.dev/products/javascript/charting/samples) - [Online samples for the Virtual Keyboard control](https://mindfusion.dev/javascript-keyboard.html) 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.](https://mindfusion.dev/JsPack.zip) ### Additional Information Learn more about MindFusion JavaScript Pack from the [official product page.](https://mindfusion.dev/javascript-pack.html) Stay in touch with MindFusion and learn about our latest product announcements, tutorials and programming guidelines via [X](https://x.com/MindFusion_News) or [our company blog.](https://mindfusion.dev/blog/) A YouTube channel with interactive video tutorials is available [here.](https://www.youtube.com/channel/UCirPVdFWM2RTEnEAF5PK7Qg) ### Technical Support * [Forum](https://mindfusion.dev/Forum/YaBB.pl) * [E-mail](support@mindfusion.eu) * [Help desk](https://www.mindfusion.dev/HelpDesk/index.php) ### Licensing The end-user license agreement for all MindFusion developer tools is uploaded [here.](https://mindfusion.dev/eula.html)