Released: Oct 26, 2023

Aggiornamenti in 4.4

Funzionalità

• Web components - The library registers each control class as a web component.
  • You can now use the following tags to create corresponding components:
    • <mindfusion-diagramview> - Creates a DiagramView instance.
    • <mindfusion-ruler> - Creates a Ruler instance.
    • <mindfusion-zoomcontrol> - Creates a ZoomControl instance.
    • <mindfusion-overview> - Creates an Overview instance.
    • <mindfusion-nodelistview> - Creates a NodeListView instance.
  • When instantiated as a web component, each control class creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling controls' find method with id argument.
• Animations - The library now includes several standard animation classes and methods.
  • The animate method of DiagramItem can now run the following animations:
    • FillColorAnimation - Animates the fill color of nodes or link arrowheads.
    • StrokeColorAnimation - Animates the color of node borders or link segments.
    • OpacityAnimation - Animates items' opacity for fade-in and fade-out effects.
  • The following animations can now be applied to DiagramNodes:
    • BounceAnimation - Animates vertical position of nodes.
    • ShakeAnimation - Animates horizontal position of nodes.
    • PulseAnimation - Animates node's local scale factor.
    • PathAnimation - Moves nodes along specified path.
  • The animate method of DiagramView can now run the following animations:
    • ScrollAnimation - Animates the scroll position of a view.
    • ZoomAnimation - Animates the zoom factor of a view.
• DiagramLink improvements
  • You can now set the intermediateShape property to display arrowheads at the middle of each link segment. This could help users follow longer link paths. Intermediate arrowheads can be customized further by setting intermediateBrush and intermediateShapeSize.
  • You can now set the allowSplitLinks property of Diagram to let users insert new link segments by dragging any point of a selected link's segment. In this mode, users can also merge link segments by making them close to collinear, or by moving adjustment handles close to each other, as set via mergeThreshold.