@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.eu/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 ### What's New in Pack for JavaScript 2025.R1 #### Diagramming ##### ItemListView component [ItemListView](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_ItemListView.htm) supersedes [NodeListView](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_NodeListView.htm) and lets you show both nodes and links in the list. Items can be added by calling [addItem](https://www.mindfusion.eu/onlinehelp/javascript.pack/M_MindFusion_Diagramming_ListViewBase_addItem_4_DiagramItem_String_Boolean_Boolean.htm) method, and removed by calling [removeItem](https://www.mindfusion.eu/onlinehelp/javascript.pack/M_MindFusion_Diagramming_ListViewBase_removeItem_1_DiagramItem.htm). [defaultNodeSize](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeListView_defaultNodeSize_0.htm) property from **NodeListView** is called [newInstanceSize](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ListViewBase_newInstanceSize_0.htm) in the new class. The [autoConnectLinks](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemListView_autoConnectLinks_0.htm) and [autoConnectDistance](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemListView_autoConnectDistance_0.htm) properties control whether links created via drag-and-drop should connect to nearby nodes in the target diagram. **ItemListView** also provides more properties for customizing the list layout, such as [columns](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemListView_columns_0.htm) and [labelPosition](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemListView_labelPosition_0.htm). For compatibility with legacy code, **NodeListView** won't be removed from the library, bit it won't be getting any new improvements. ##### Palette component The [Palette](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_Controls_Palette.htm) control represents a tool palette that displays [DiagramItem](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_DiagramItem_0.htm) objects grouped into categories. It implements [Accordion](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Common_UI_Accordion.htm) user interface that displays [ItemListView](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_ItemListView.htm) components as its child panels, and category icon, title and collapse/expand button in pane headers. Each child **ItemListView** displays the items added to its corresponding category. Call the [addCategory](https://www.mindfusion.eu/onlinehelp/javascript.pack/M_MindFusion_Diagramming_Controls_Palette_addCategory_2_String_String.htm) method to define a category and create its respective accordion pane. Call [addItem](https://www.mindfusion.eu/onlinehelp/javascript.pack/M_MindFusion_Diagramming_Controls_Palette_addItem_3_DiagramItem_String_String.htm) to add an item to specified category. Palette provides same layout and appearance properties as the **ItemListView** class. ##### ItemLabel image New [image](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_image_0.htm) and [imageLocation](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_imageLocation_0.htm) properties added to [ItemLabel](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_ItemLabel.htm) let you display icons along a link's geometry, or add more images to a [ShapeNode](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_ShapeNode_0.htm). If a label contains both [text](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_text_0.htm) and **image**, their relative position is specified by [imageAlign](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_imageAlign_0.htm) property (by default the image is placed on left side of text), and distance by [contentPadding](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_contentPadding_0.htm). The image is rendered using bitmap's intrinsic size, unless you override it by setting [imageSize](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_imageSize_0.htm) property. You can treat label images as clickable icons by handling [linkClicked](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_linkClicked_1.htm) or [nodeClicked](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_nodeClicked_1.htm) events and checking [label](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeEventArgs_label_0.htm) argument passed to their handlers. ##### Spatial index Set the [enableSpatialIndex](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_Diagram_enableSpatialIndex_0_1.htm) property of [Diagram](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_Diagram_0.htm) to create an index of item positions for faster hit-testing and viewport clipping queries. This should greatly improve user interaction and rendering speed for diagrams containing tens of thousands or more items. ```` // create 20000 links + nodes in total for (var i = 0; i < 10000; i++) { var node = diagram.factory.createShapeNode(x, y, size, size); node.text = i; if (x > diagram.bounds.x) { diagram.factory.createDiagramLink( diagram.nodes[i - 1], diagram.nodes[i]); } x += dist; if (x >= diagram.bounds.right()) { x = diagram.bounds.x; y += dist; } } diagram.enableSpatialIndex = true; ```` ##### Node constraints The [constraints](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramNode_constraints_0_1.htm) property lets you apply size and direction constraints to a node. It returns a [NodeConstraints](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_NodeConstraints_1.htm) object with following properties: - [keepRatio](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeConstraints_keepRatio_0_1.htm): a bool value indicating whether the initial width/height ratio of a node should be preserved. - [maxHeight](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeConstraints_maxHeight_0_1.htm): the maximum node height allowed. - [maxWidth](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeConstraints_maxWidth_0_1.htm): the maximum node width allowed. - [minHeight](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeConstraints_minHeight_0_1.htm): the minimum node height allowed. - [minWidth](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeConstraints_minWidth_0_1.htm): the minimum node width allowed. - [moveDirection](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_NodeConstraints_moveDirection_0_2.htm): a member of the [DirectionConstraint](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_DirectionConstraint_1.htm) enumeration. Set it to **Horizontal** or **Vertical** to let users move a node only in specified direction. These constraints are considered when a user modifies the node interactively. They are ignored if node placement is changed programmatically by using API methods and properties. ##### Shape design enhancements - The [anchorPattern](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_Shape_anchorPattern_0_1.htm) property of [Shape](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_Shape_0.htm) lets you associate anchor points with shape definitions. That pattern is shared between all nodes of same shape, but can be overridden by setting node's own [anchorPattern](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramNode_anchorPattern_0_1.htm). - Individual segments of a [shape's geometry](https://www.mindfusion.eu/onlinehelp/javascript.pack/Define_Shape_Geometries.htm) can be styled independently by setting stroke and fill attributes of [ShapeElement](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_ShapeElement.htm) and [ShapeDecoration](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_ShapeDecoration_1.htm) objects. - We have replaced the Windows -only shape designer tool with an [online shape editor](https://mindfusion.eu/tools/shape-designer.html). - The shape editor is implemented as a reusable [ShapeDesigner](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_Controls_ShapeDesigner.htm) control, which can be integrated into your own applications. ##### New event system Event emitter objects are now exposed as properties of [Diagram](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_DiagramBase_1_0.htm) and [DiagramView](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_DiagramView_0.htm) and you can register handlers by calling their [addEventListener](https://www.mindfusion.eu/onlinehelp/javascript.pack/M_MindFusion_Controls_EventDispatcher_addEventListener_0.htm) method: ```` diagram.nodeCreated.addEventListener( (sender, args) => { if (sender.defaultShape.id == "Rectangle") args.node.anchorPattern = pattern1; else args.node.anchorPattern = pattern2; }); ```` Legacy event handling syntax will remain supported for compatibility with old code. ##### New events - **nodePointed** event has been replaced by a set of more specific events: [nodePointerEnter](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_nodePointerEnter_0.htm) and [nodePointerLeave](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_nodePointerLeave_0.htm) are raised when the mouse pointer respectively enters or leaves the boundaries of a node. [nodeHovered](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_nodeHovered.htm) fires if the pointer rests over a node for [hoverDelay](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramView_hoverDelay_0.htm) milliseconds. - **linkPointed** event has been replaced by a set of more specific events: [linkPointerEnter](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_linkPointerEnter_0.htm) and [linkPointerLeave](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_linkPointerLeave_0.htm) are raised when the mouse pointer respectively enters or leaves the boundaries of a link. [linkHovered](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_linkHovered.htm) fires if the pointer rests over a link for **hoverDelay** milliseconds. - [linkRouted](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_linkRouted_1.htm) event raised when links are modified by automatic routing. - [actionUndone](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_actionUndone_2.htm) and [actionRedone](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_actionRedone_2.htm) events raised by undo manager for either top-level commands or children of [CompositeCommand](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_CompositeCommand.htm). - [shapeLibraryLoaded](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_shapeLibraryLoaded.htm) event raised when library XML file is loaded and its shape definitions are available for use. ##### Collapse and expand table rows Table rows can be assigned to distinct sections of the table. Each section can be collapsed or expanded, hiding or showing all rows in the section except the header one. To define a section, set the [header](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_TableRow_header_0.htm) property of a row. A section consists of all rows after a header row and spans to the next header. Each header row displays [±]a button that allows expanding or collapsing the section interactively. Clicking that button raises the [tableSectionCollapsed](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_tableSectionCollapsed_0.htm) and [tableSectionExpanded](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_tableSectionExpanded_0.htm) events. Sections can be collapsed or expanded programmatically by setting the [expanded](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_TableRow_expanded_0.htm) property of their header rows. ##### Miscellaneous - The [foldedSize](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ContainerNode_foldedSize_0_0.htm) property of [ContainerNode](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_ContainerNode_0.htm) specifies the container's size when it is folded. - [clipText](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ShapeNode_clipText_0.htm) property added to [ShapeNode](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_ShapeNode_0.htm). - [strokeThickness](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramItem_strokeThickness_0_0.htm) is now scaled by [zoomFactor](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramView_zoomFactor_0.htm). - [dividerStroke](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_CaptionedNode_dividerStroke_0.htm) properties added to **ContainerNode**, [TableNode](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_TableNode_0.htm) and [TreeViewNode](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_TreeViewNode_1.htm) classes. It lets you customize the appearance of the divider line drawn between a node's caption bar and content area. - [TabbedDiagramView](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_Controls_TabbedDiagramView.htm) now keeps separate zoom level and scroll position per tab. - [label](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_LinkEventArgs_label_0.htm) argument now provided with item click and double click events. - [locked](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ItemLabel_locked_0.htm) property added to [ItemLabel](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_ItemLabel.htm). It lets you prevent users from editing label's text, and moving it when [behavior](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramView_behavior_0.htm) is set to [MoveLabels](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramView_behavior_0.htm). - Improved repaint speed of [Overview](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_Overview.htm) component. - Enable the [autoDeleteChildren](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_ContainerNode_autoDeleteChildren_0_1.htm) property to automatically delete child nodes when a container is deleted. - Removed an **eval** call used for creating custom components from [CompositeNode](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_CompositeNode_0.htm) Json templates, allowing for stricter Content Security Policy rules. Now custom components must be registered by calling [registerComponent](https://www.mindfusion.eu/onlinehelp/javascript.pack/M_MindFusion_Diagramming_Diagram_registerComponent_2_Object_String.htm) method to allow instantiating them from a template. - Fix for custom [Shape](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_Shape_0.htm) definitions not setting the **id** property. - Fix for [selected](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_DiagramItem_selected_0_1.htm) property setter of [DiagramItem](https://www.mindfusion.eu/onlinehelp/javascript.pack/CC_T_MindFusion_Diagramming_DiagramItem_0.htm) not immediately reflecting assigned value due to async calls. - Fixed multiple resize when selection contains rotated nodes. - Fixed rotation when rotation handle is at a custom position (set from [hitTestAdjustmentHandle](https://www.mindfusion.eu/onlinehelp/javascript.pack/E_MindFusion_Diagramming_DiagramBase_hitTestAdjustmentHandles_2.htm) event handler). - Fixed undo / redo of text in-place edit operations. - Fix for item hover events of [DiagramDocument](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Diagramming_DiagramDocument_1.htm) not raised by **TabbedDiagramView**. ##### API changes - **linkPointed** and **nodePointed** events replaced by [linkHovered](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_Events_linkPointed_0.htm) and [nodeHovered](https://www.mindfusion.eu/onlinehelp/javascript.pack/P_MindFusion_Diagramming_Events_nodePointed_0.htm). - To allow for stricter Content Security Policy rules, the library no longer loads CSS scripts automatically. If you use components from the [Diagramming.Controls](https://www.mindfusion.eu/onlinehelp/javascript.pack/N_MindFusion_Diagramming_Controls.htm) package, you must now explicitly link the common-ui.css file from distribution's *themes* folder. #### MindFusion.UI New [Accordion](https://www.mindfusion.eu/onlinehelp/javascript.pack/T_MindFusion_Common_UI_Accordion.htm) control displays a list of collapsible child controls. ### Documentation - [Programming Interface Overview](https://www.mindfusion.eu/onlinehelp/javascript.pack/index.htm) - [Tutorials](https://www.mindfusion.eu/onlinehelp/javascript.pack/index.htm?Building_Your_First_Chart.htm) - [Detailed API Reference](https://www.mindfusion.eu/onlinehelp/javascript.pack/index.htm?T_MindFusion_Animations_Animation.htm) ### Samples - [Online demo](https://mindfusion.eu/javascript-demo.html?sample=Activities) - [Online samples for diagrams, flowcharts, hierarchies and schemes](https://mindfusion.eu/products/javascript/diagramming/samples) - [Online samples for schedules, timetables, calendars and resource views](https://mindfusion.eu/products/javascript/scheduling/samples) - [Online samples for charts and gauges](https://mindfusion.eu/products/javascript/charting/samples) - [Online samples for the Virtual Keyboard control](https://mindfusion.eu/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.eu/JsPack.zip) ### Additional Information Learn more about MindFusion JavaScript Pack from the [official product page.](https://mindfusion.eu/javascript-pack.html) Stay in touch with MindFusion and learn about our latest product announcements, tutorials and programming guidelines via [Twitter](https://twitter.com/MindFusion_News) or [our company blog.](https://mindfusion.eu/blog/) A YouTube channel with interactive video tutorials is available [here.](https://www.youtube.com/channel/UCirPVdFWM2RTEnEAF5PK7Qg) ### Technical Support * [Forum](https://mindfusion.eu/Forum/YaBB.pl) * [E-mail](support@mindfusion.eu) * [Help desk](http://www.mindfusion.eu/HelpDesk/index.php) ### Licensing The end-user license agreement for all MindFusion developer tools is uploaded [here.](https://mindfusion.eu/eula.html)