We have released MindFusion JavaScript Pack 2025.R1. It adds following new features and improvements:

Diagramming

ItemListView component
ItemListView supersedes NodeListView and lets you show both nodes and links in the list. Items can be added by calling addItem method, and removed by calling removeItem. defaultNodeSize property from NodeListView is called newInstanceSize in the new class. The autoConnectLinks and autoConnectDistance 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 and labelPosition. 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 control represents a tool palette that displays DiagramItem objects grouped into categories. It implements Accordion user interface that displays ItemListView 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 method to define a category and create its respective accordion pane. Call addItem to add an item to specified category. Palette provides same layout and appearance properties as the ItemListView class.

ItemLabel image
New image and imageLocation properties added to ItemLabel let you display icons along a link's geometry, or add more images to a ShapeNode. If a label contains both text and image, their relative position is specified by imageAlign property (by default the image is placed on left side of text), and distance by contentPadding. The image is rendered using bitmap's intrinsic size, unless you override it by setting imageSize property. You can treat label images as clickable icons by handling linkClicked or nodeClicked events and checking label argument passed to their handlers.

Spatial index
Set the enableSpatialIndex property of Diagram 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 property lets you apply size and direction constraints to a node. It returns a NodeConstraints object with following properties:

• keepRatio: a bool value indicating whether the initial width/height ratio of a node should be preserved.
• maxHeight: the maximum node height allowed.
• maxWidth: the maximum node width allowed.
• minHeight: the minimum node height allowed.
• minWidth: the minimum node width allowed.
• moveDirection: a member of the DirectionConstraint 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 property of Shape 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.
• Individual segments of a shape's geometry can be styled independently by setting stroke and fill attributes of ShapeElement and ShapeDecoration objects.
• We have replaced the Windows -only shape designer tool with an online shape editor at https://mindfusion.eu/tools/shape-designer.html
• The shape editor is implemented as a reusable ShapeDesigner control, which can be integrated into your own applications.

New event system
Event emitter objects are now exposed as properties of Diagram and DiagramView, and you can register handlers by calling their addEventListener 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 and nodePointerLeave are raised when the mouse pointer respectively enters or leaves the boundaries of a node. nodeHovered fires if the pointer rests over a node for hoverDelay milliseconds.
• linkPointed event has been replaced by a set of more specific events: linkPointerEnter and linkPointerLeave are raised when the mouse pointer respectively enters or leaves the boundaries of a link. linkHovered fires if the pointer rests over a link for hoverDelay milliseconds.
• linkRouted event raised when links are modified by automatic routing.
• actionUndone and actionRedone events raised by undo manager for either top-level commands or children of CompositeCommand.
• shapeLibraryLoaded 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 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 and tableSectionExpanded events. Sections can be collapsed or expanded programmatically by setting the expanded property of their header rows.

Miscellaneous

• The foldedSize property of ContainerNode specifies the container's size when it is folded.
• clipText property added to ShapeNode.
• strokeThickness is now scaled by zoomFactor.
• dividerStroke properties added to ContainerNode, TableNode and TreeViewNode classes. It lets you customize the appearance of the divider line drawn between a node's caption bar and content area.
• TabbedDiagramView now keeps separate zoom level and scroll position per tab.
• label argument now provided with item click and double click events.
• locked property added to ItemLabel. It lets you prevent users from editing label's text, and moving it when behavior is set to MoveLabels.
• Improved repaint speed of Overview component.
• Enable the autoDeleteChildren property to automatically delete child nodes when a container is deleted.
• Removed an eval call used for creating custom components from CompositeNode Json templates, allowing for stricter Content Security Policy rules. Now custom components must be registered by calling registerComponent method to allow instantiating them from a template.
• Fix for custom Shape definitions not setting the id property.
• Fix for selected property setter of DiagramItem 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 event handler).
• Fixed undo / redo of text in-place edit operations.
• Fix for item hover events of DiagramDocument not raised by TabbedDiagramView.

API changes

• linkPointed and nodePointed events replaced by linkHovered and nodeHovered.
• To allow for stricter Content Security Policy rules, the library no longer loads CSS scripts automatically. If you use components from the Diagramming.Controls package, you must now explicitly link the common-ui.css file from distribution's themes folder.
• iconSize value of NodeListView now depends on view's measureUnit property.

MindFusion.UI

New Accordion control displays a list of collapsible child controls.


Distribution for the latest version can be downloaded here, or from the clients area on our site:

https://mindfusion.eu/JsPack.zip

Updated scripts are also available as @mindfusion/pack NPM package.

Enjoy!