Version 4 of MindFusion JavaScript Diagram contains the following new features and improvements -
Diagram viewThe 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. The separation also makes it easier to use the diagramming API in node.js server code, avoiding the need to load DOM shim/polyfill packages.
Classes and getter/setter propertiesJsDiagram source code has been refactored following ES6 standards, including classes, properties and native collections.
Get/set functions have been replaced by getter/setter properties, which should help using the diagram API with binding expressions of various JS frameworks. You could enable CompatConfig.propFunctions in order to continue using legacy get/set functions during migration.
ArrayList, Dictionary and Set classes from MindFusion.Collections namespace have been removed, and replaced by respective JavaScript native Array, Map and Set.
TreeView nodesThe 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 by using the addItem and removeItem methods, or the fromObject method, which loads the tree view items from an array of objects.
Print paginationThe 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.bounds) and pageSize (defaults to diagramView.viewport). Note that print methods use HTMLCanvasElement.toDataURL() internally, so any limitations it has will apply (such as canvas size and CORS).
Orthogonal layoutThe 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 allow handling of selection interactions
~ dataLoaded is raised when the diagram data is loaded from JSON/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 TreeView node
Miscellaneous~ rotation of FreeFormNode instances
~ ImageAlign supports new FitLeft, FitTop, FitRight and FitBottom alignment styles, which resize Image to fit node's boundaries and align it to respective border.
~ mouseWheelAction property of the DiagramView class lets you choose between Scroll(default) and Zoom as the default behavior of the control in response of a wheel event
API changes~ The Diagram class is now purely a model class and no longer represents a DOM control. To display and allow interactions with a Diagram instance, you will need to create a DiagramView control and pass the Diagram instance to its diagram property.
~ Auxiliary controls, such as Overview, Ruler and ZoomControl, must be attached to a DiagramView instance instead of Diagram via the diagramView / target properties.
~ Most getProperty/setProperty function pairs have been replaced by ES6 getters/setters. Set CompatConfig.propFunctions = true in order to continue using legacy get/set functions (for properties added to the library before v.4.0) in your code.
~ MindFusion.AbstractionLayer class has been removed.
~ EventArgs and CancelEventArgs classes have been moved to the MindFusion.Controls namespace.
~ ArrayList, Dictionary, ObservableCollection, Set classes have been removed from MindFusion.Collections namespace.
~ the following properties have been moved from Diagram class to DiagramView class: autoScroll, scrollZoneSize, autoScrollAmount, allowInplaceEdit, delKeyAction, mouseWheelAction, scrollX, scrollY, behavior, zoomFactor, viewport, virtualScroll, tooltipDelay, modificationStart, magnifierEnabled, magnifierFactor, magnifierWidth, magnifierHeight, magnifierFrameThickness, magnifierShading, magnifierShape,magnifierFrameColor, magnifierSecondaryFrameColor, modifierKeyActions, leftButtonActions, middleButtonActions, rightButtonActions, defaultControlTemplate, licenseKey, licenseLocation
~ the following methods have been moved from Diagram class to DiagramView class: create, find, record, stopRecording, replay, clearTooltip, beginEdit, copyToClipboard, pasteFromClipboard, cutToClipboard, scrollTo, zoomToRect, zoomToFit, setZoomFactorPivot
If anyone is interested in trying the beta version, please download this archive containing updated script and sample files:
https://mindfusion.eu/_beta/JsDiagram4.zipAny comments, questions and general feedback are welcome.