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

Multiple labels per node
The NodeLabel class allows multiple captions to be displayed for a single DiagramNode of any type. Node labels provide a set of properties allowing full customization of their display and positioning. Label position is defined by specifying a pin point and offset from it, set through setCornerPosition, setEdgePosition, setCenterPosition methods. In addition, the horizontalAlign and verticalAlign properties of NodeLabel specify on which side of pin point to draw the label's caption.

For example, following code adds extra labels to top-left and bottom-right corners of a ShapeNode:

var node = diagram.factory.createShapeNode(10, 50, 40, 30);
node.text= "text"; // centered main text

var lb1 = node.addLabel("label 1");
lb1.setCornerPosition(0, 0, 0);
lb1.horizontalAlign = Alignment.Near;
lb1.verticalAlign = Alignment.Near;
lb1.brush = "red";
lb1.textColor = "white";

var lb2 = node.addLabel("label 2");
lb2.setCornerPosition(2, 0, 0);
lb2.horizontalAlign = Alignment.Far;
lb2.verticalAlign = Alignment.Far;
lb2.brush = "yellow";
lb2.textColor = "red";
 

Multi-touch improvements

• The multiTouchDraw property of DiagramView lets you prevent drawing multiple items simultaneously, while keeping other multitouch gestures enabled.
• The handleTouchHitDistance property of DiagramView makes it easier to grab adjustment handles on mobile devices, without increasing the adjustmentHandlesSize value.

Miscellaneous

• The MoveLabels behavior lets user move link and node labels interactively.
• LinkEventArgs now includes origin and destination properties that report respective candidate nodes to linkCreating and linkModifying event handlers.
• The node.attach method now automatically detaches from previous master.
• SvgNode.contentAlign property specifies alignment of SVG drawing inside the node.
• DiagramLink.lineAlignment property sets the vertical position of link's text.
• Horizontal scroll gestures should now work on Macbook trackpad when using virtual scroll mode.

Bug fixes

• DiagramLink.baseShape serialization fix.
• Fix for createDiagramLink not working with Point arguments (to create unconnected links).
• Fix for link adjustment handles not applying stroke from HandlesVisualStyle.

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

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

Enjoy!