We have released version 4.5 of MindFusion JavaScript Diagram library. It contains the following new features and improvements:

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.

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

• 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.
• 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.
• linkRouted event raised when links are modified by automatic routing.

API changes
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.

Distribution for the latest version can be downloaded here, or from the clients area on our site:
https://mindfusion.eu/JsDiagram.zip

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

Enjoy!