Allow users to draw tower charts, render series side-by-side and compare data sequence and size.
Features
New in Diagramming for JavaScript
- 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.
- 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 - Added NodeLabel class which allows you to display multiple captions for a single diagram node.
- 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 now be zoomed or panned using two-touch pinch / flick gestures.
- If MultiTouchModify property is enabled (default), diagram nodes can now be moved, scaled and rotated using two-touch pinch / flick gestures.
- If MultiTouchZoom property is disabled, each touch now draws diagram items corresponding to current behavior.
- If MultiTouchModify property is disabled, each touch started from a node now 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.
- 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 has been 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 now lets users 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.
- Added contentAlign property of SvgNode which specifies alignment of SVG drawing inside the node.
- Added lineAlignment property of DiagramLink which sets the vertical position of link's text.
- Horizontal scroll gestures should now work on Apple Macbook trackpad when using virtual scroll mode.
- Improved precision of vertical alignment of text in SVG exported by SvgExporter.
New in Charting for JavaScript
- Tower charts - Added new TowerChart and TowerRenderer components which allow users to draw tower charts, render series side-by-side and compare data sequence and size. Tower charts require three-dimensional series:
- The first dimension specifies event order or timing and is used to sort or position segments.
- The second dimension specifies duration and is rendered as segment length along the main axis.
- The third dimension specifies a value rendered as segment width along the cross axis.
New in DataViews for JavaScript
- Property Grid - The DataViews module now includes a Property Grid providing a 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.
New in MindFusion.UI for JavaScript
- MindFusion UI for React now 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.