MindFusion Released Diagramming for JavaScript, V4.0

Sofia, Bulgaria, November 14, 2021 --(PR.com)-- Diagramming for JavaScript, V4.0 is released with the following new features and improvements:

ES6 modules, classes and properties
JsDiagram source code has been refactored following ES6 standards, including modules, classes, properties and native collections. ArrayList, Dictionary and Set classes from MindFusion.Collections namespace have been removed, and replaced by respective JavaScript native Array, Map and Set. Get/set functions have been replaced by getter/setter properties, which should help using the diagram API with binding expressions of various JS frameworks.

Diagram view
The Diagram control has been refactored into two classes. What remains of Diagram is now just a model class that defines diagram structure and implements serialization. The new DiagramView class deals with rendering and user interaction. You can show the same diagram in several views, each one rendering at different scroll positions and zoom levels.

TreeView nodes
The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the rootItems property. Items can be added and removed individually by using the addItem and removeItem methods, or in bulk by calling the fromObject method, which loads the tree view items from an array of objects.

Print pagination
The printPreview and print methods of DiagramView let you export the diagram as a list of smaller images in HTML page. Supported options include printArea (defaults to diagram's content bounds) and pageSize (defaults to DiagramView's viewport). Note that print methods use HTMLCanvasElement.toDataURL() internally, so any limitations it has will apply (such as canvas size and CORS).

Orthogonal layout
The OrthogonalLayout class implements an orthogonal graph layout algorithm. Each link is drawn as a chain of alternating horizontal and vertical segments. Nodes are placed in a way that facilitates few links bends and crossings. This algorithm was designed for planar graphs where the nodes have at most four incident links, and produces best results with such graphs as input. It can arrange any arbitrary graph as well, by adding some dummy nodes and links to planarize the graph and reduce its vertex degree, and removing them after the layout.

New events
nodeSelecting, linkSelecting, selectionChanged events allow handling of selection interactions.
dataLoaded is raised when the diagram data is loaded from JSON or XML.
mouseWheel is raised when the user rotates the mouse wheel while the cursor is positioned over the diagram surface.
treeItemTextEditing, treeItemTextEdited allow handling of inplace-edit operations in TreeViewNode.

Miscellaneous
The new release also includes a long list of API changes, rotation of FreeFormNode instances, improved align of images and many more.

The library is available for Vue, React and Angular. You can use npm to install it.

Diagramming for JavaScript on npm:
https://www.npmjs.com/package/@mindfusion/diagramming

Diagramming for React on npm:
https://www.npmjs.com/package/@mindfusion/diagramming-react

Diagramming for Angular on npm:
https://www.npmjs.com/package/@mindfusion/diagramming-angular

Diagramming for Vue on npm:
https://www.npmjs.com/package/@mindfusion/diagramming-vue

Technical support is available on MindFusion's forum, HelpDesk or per email. The licenses are royalty-free and include 12-month subscription for all upgrades that are released.

About MindFusion: For over two decades, MindFusion has successfully provided cutting-edge programming components that greatly increase developers productivity. Built with passion and commitment, the controls create value for customers from all types of industries and company sizes.

The company started in 2000 with a single ActiveX flowchart control and has since then expanded into offering components for more than 10 platforms - desktop, web and mobile. MindFusion components aim to provide software developers with easy-to-use solutions for complex and time-consuming features of their applications like scheduling, diagramming, reporting, charting and spreadsheets.