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

Diagramming

React functional components
The @mindfusion/diagramming-react package now contains functional-component wrappers for the DiagramView and auxiliary controls, and has been upgraded to React 18. Old class-component wrappers have been moved to the @mindfusion/diagramming-react-cc package.

Using the functional components looks like this:

const [diagram] = useState(new Diagramming.Diagram());
...
<DiagramView diagram={diagram} {...props}
    onDiagramChanged={(diagram, args) => onDiagramChanged(diagram, args)}
    onNodeCreated={(diagram, args) => onDiagramNodeCreated(diagram, args)} /> 

The DiagramView control exposes a forwardRef, that can be passed on to other controls, such as the Overview and ZoomControl. To obtain a reference to the underlying core controls, use the respective find method of the ref.

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 support
The control now handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items:

• If multiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
• If multiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
• If multiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
• If multiTouchModify property is disabled, each touch started from a node draws a diagram link.
• Latter modes can be used for collaborative whiteboarding / classroom scenarios.
• The handleTouchHitDistance property of DiagramView makes it easier to grab adjustment handles on mobile devices, without increasing the adjustmentHandlesSize value.
• The multiTouchDraw property of DiagramView lets you prevent drawing multiple items simultaneously, while keeping other multitouch gestures enabled.

Built-in multi-touch can be disabled altogether by setting enableMultiTouch to false, e.g. if you need to handle touch events yourself or through a third-party gesture library. If disabled, the control will revert to its mouse event handling code from previous versions. It will also no longer be able to capture mouse input during drag operations (to detect mouse pointer leaving the view), which is handled through DOM Pointers API.

Miscellaneous

• enableStyledText now supports <size> element specifying font size.
• The createDiagramLink method can now be used to connect to TableNode rows or TreeViewNode items.
• cancelDrag method added to DiagramView.
• The control now captures mouse input during drag operations and will not lose current drag state if mouse pointer leaves the view.
• 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 attach method of DiagramNode now automatically detaches from previous master.
• contentAlign property of SvgNode specifies alignment of SVG drawing inside the node.
• lineAlignment property of DiagramLink sets the vertical position of link's text.
• Horizontal scroll gestures should now work on Macbook trackpad when using virtual scroll mode.
• More precise vertical alignment of text in SVG exported by SvgExporter.

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.
• Fixed exception in dispose method of Overview control if called before the overview is attached to the diagram.
• Fixed exceptions when linkCrossing is set to Arcs.
• Fix for containers clipping their child nodes when children are being dragged.

Charting
Tower charts
The TowerChart control and TowerRenderer component draw tower charts, rendering series side by side to allow comparing data sequence and sizes. Assign the series to compare to leftSeries and rightSeries properties of the chart. The chart segments are arranged according to the value of towerLayout property, and their shape is drawn as specified by segmentShape.

Tower charts require three-dimensional series. The first dimension specifies event order or timing and is used to sort or position segments. Second dimension specifies duration and is rendered as segment length along the main axis. Third dimension specifies a value rendered as segment width along the cross axis. You could use the stock EventSeries class as data container, or implement the Series interface to provide data from your own data structures.



DataViews
The DataViews module now includes a Property Grid providing user interface for browsing and editing the properties of an object. The PropertyGrid control can be bound to any object or an array of objects as specified by its selectedObject property. If showAllProperties is set to true, the control enumerates all properties and fields of the object and its prototype chain, resolves their data types and displays their name and value in a grid layout. If showAllProperties is set to false, only properties and fields included in the metaData dictionary are displayed.

MindFusion.UI
MindFusion UI for React contains React functional wrapper components for ListView, TreeView, TabControl and ToolStrip controls from the @mindfusion/common-ui package. The components override core controls' DOM generation functions to generate React VDOM elements instead.

The React wrappers can be installed from the @mindfusion/ui-react package on npm:
npm i @mindfusion/ui-react

All wrapper components expose a forwardRef that can be passed on to other components. To obtain a reference to the underlying core control, use the respective find method of the ref, for example list1.current.find().

Properties and events defined by core controls can be set directly in JSX syntax:

<ListView
    id="list1" ref={list1}
    height="100%" theme="pastel"
    data={data}
    itemSize={common.Unit.pixel(20)}
    onSelectionChanged={(sender, args) => onSelectionChanged(sender, args)} >
</ListView> 

Several often-used methods such as addItem, removeItem, and selectItem are defined in the wrapper components' API. Other methods must be called through the respective core control:

list1.current.addItem(<ListItem imageSrc={na} title="unknown"></ListItem>);
index = list1.current.find().items.indexOfItem(item); 

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!