MindFusion.JavaScript Pack 2022.R1

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.