Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic MindFusion.JavaScript Pack, 2023.R3 (Read 666 times)
Forum Admin
YaBB Administrator
*****
Offline


Rock and Roll

Posts: 691
Joined: Apr 6th, 2003
MindFusion.JavaScript Pack, 2023.R3
Nov 14th, 2023 at 11:09am
Print Post  
We have released MindFusion JavaScript Pack 2023.R3. It adds following new features and improvements:

Diagramming

Web components
The library registers each control class as a web component. You can 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.

Code (HTML)
Select All
<mindfusion-diagramview
    id="diagramView"
    style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: auto;">
</mindfusion-diagramview> 


Code (Javascript)
Select All
var diagramView = DiagramView.find("diagramView");
var diagram = diagramView.diagram;
 


Animations
The library now includes several standard animation classes and methods.

The animate method of DiagramItem can run 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.

Following animations can 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 run following animations:
  • ScrollAnimation animates the scroll position of a view.
  • ZoomAnimation animates the zoom factor of a view.

DiagramLink improvements
  • 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.
  • 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.

Reversed tree layouts
The reversedLinks property of TreeLayout, RadialTreeLayout and BorderedTreeLayout lets you arrange trees where links point from child to parent nodes, instead of the default parent to child direction.

Miscellaneous
  • column, row and node property getters added to CellEventArgs.
  • fixed RaiseEvents mode of expandButtonAction; it no longer collapses or expands clicked node's subtree.
  • ContainerNode now sorts its child nodes by zIndex instead of insertion order.

Scheduling

The library registers the Calendar class as a web component. You can use the <mindfusion-calendar> tag to create the control.

When instantiated as a web component, the control creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling the find method with id argument.

Code (HTML)
Select All
<mindfusion-calendar id="calendar" style="height: 100%; width: 100%;">
</mindfusion-calendar>
 


Code (Javascript)
Select All
var ms = MindFusion.Scheduling;
calendar = ms.Calendar.find("calendar");
calendar.currentView = ms.CalendarView.SingleMonth;
 


DataViews

The library registers the Grid class as a web component. You can use the <mindfusion-grid> tag to create the control.

When instantiated as a web component, the control creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling the find method with id argument.

Code (HTML)
Select All
<mindfusion-grid id="grid">
</mindfusion-grid>
 


Code (Javascript)
Select All
var dv = MindFusion.DataViews;
var grid = dv.Grid.find("grid");
grid.model = new dv.ArrayModel(participants, columns, "index");
 




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!
  
Back to top
WWW  
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint