Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Version 4 beta (Read 1549 times)
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 2703
Joined: Oct 19th, 2005
Version 4 beta
Sep 16th, 2021 at 12:17pm
Print Post  
Version 4 of MindFusion JavaScript Diagram contains the following new features and improvements -

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. 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 properties
JsDiagram 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 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 by using the addItem and removeItem methods, or 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.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 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 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.
~ Auxilliary 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.zip

Any comments, questions and general feedback are welcome.
« Last Edit: Sep 16th, 2021 at 1:48pm by Slavcho »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 2703
Joined: Oct 19th, 2005
Referencing v4 scripts
Reply #1 - Sep 16th, 2021 at 1:24pm
Print Post  
Previous common.js and diagramming.js script files have been split into separate files, each containing the classes from the corresponding MindFusion.* namespace:

~ controls.js, drawing.js and collections.js correspond to the v3 MindFusion.Common.js file;
~ diagramming.js, graphs.js and animations.js correspond to the v3 MindFusion.Diagramming.js file;

Script files are available in three distributions - ES module, CommonJs module and UMD.

Loading JsDiagram using namespaced scripts
The UMD scripts let you continue using global MindFusion namespace object. In order to load them, add references to script files in /umd folder. Note that the order of the scripts matters - controls.js must be loaded after collections and drawing, and diagramming.js must be loaded after animations and graphs.

Code
Select All
<script src="umd/collections.js" type="text/javascript"></script>
<script src="umd/drawing.js" type="text/javascript"></script>
<script src="umd/controls.js" type="text/javascript"></script>

<script src="umd/animations.js" type="text/javascript"></script>
<script src="umd/graphs.js" type="text/javascript"></script>
<script src="umd/diagramming.js" type="text/javascript"></script> 



Loading JsDiagram ES6 modules in a web project with <script type="module">
For pure client-side imports, add the following importmap, referencing the ES6 scripts from /esm folder. Note that firefox does not support importmap at time of writing this, but from what we know it's under development.

Code
Select All
<script type="importmap">
{
	"imports":
        {
          	  "@mindfusion/collections":"./esm/collections.js",
          	  "@mindfusion/controls":"./esm/controls.js",
          	  "@mindfusion/drawing":"./esm/drawing.js",
          	  "@mindfusion/diagramming":"./esm/diagramming.js",
          	  "@mindfusion/graphs":"./esm/graphs.js",
          	  "@mindfusion/animations":"./esm/animations.js"
        }
}</script>
 



Importing the packages
mindfusion-common and diagram-library npm packages has been split into separate scoped packages, each containing the classes from the corresponding MindFusion.* namespace:

@mindfusion/controls, @mindfusion/drawing and @mindfusion/collections correspond to the v3 mindfusion-common package.
@mindfusion/diagramming, @mindfusion/graphs and @mindfusion/animations correspond to the v3 diagram-library package.

Consuming a module as an ES6 module
import * as Diagramming from '@mindfusion/diagramming';
import { DiagramView, Diagram } from '@mindfusion/diagramming';

Consuming a module as a CommonJS module
const Diagramming = require('@mindfusion/diagramming');
const { DiagramView } = require('@mindfusion/diagramming');
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 2703
Joined: Oct 19th, 2005
Moving a project to JsDiagram 4
Reply #2 - Sep 16th, 2021 at 1:39pm
Print Post  
To port a project that uses an earlier version of the JsDiagram to v.4.0, follow these steps:

- For projects that use module loaders, rather than accessing the MindFusion namespace from the global namespace, check the "Importing the packages" section above.

- For TypeScript projects that access MindFusion namespace from the global namespace, add a reference to the global.d.ts file.

- diagramming.compat.d.ts contains the module augmentation for the diagramming module and enables using legacy get/set functions in your TypeScript code. Use it with a reference path such as

/// <reference path="./node_modules/@mindfusion/diagramming/diagramming.compat.d.ts" />

or moving it to the project's main folder may be necessary.

- The DOM control is now represented by the DiagramView class, rather than the Diagram class, so replace any Diagram.create, Diagram.find, MindFusion.AbstractionLayer.createControl(Diagram) calls with DiagramView.create and DiagramView.find calls.

The Diagram model object can be created first and passed to the view as a second argument of the DiagramView.create method,
or if not provided, an empty Diagram will be created and will be accessible through the view's diagram property. For TypeScript projects, a cast to <HTMLCanvasElement> will be necessary for the first argument.

- Most getProperty/setProperty functions have been replaced by getter/setter properties. In addition, some properties and methods of the Diagram class related to clipboard operations, zoom and scroll, inplace-edit and recording have been moved to the DiagramView class. Check the complete list of the moved properties and methods and replace the calling instance, e.g.

[remove]
diagram.setBehavior(MindFusion.Diagramming.LinkTables);

[add]
diagramView.behavior = MindFusion.Diagramming.LinkTables;

You can continue using legacy get/set functions for properties defined in versions up to v.4.0 in your code by setting the propFunctions field of CompatConfig class to true.

[add]
MindFusion.Diagramming.CompatConfig.propFunctions = true;

If using that with TypeScript projects, also add a reference to @mindfusion/diagramming/diagramming.compat.d.ts.

- Auxilliary controls, such as Overview, ZoomControl and Ruler, must be attached to a DiagramView instance instead of Diagram.

overview.setDiagram(diagram) should be changed to overview.setDiagramView(diagramView);
ruler.setDiagram(diagram) should be changed to ruler.setDiagramView(diagramView);
zoomControl.setTarget(diagram) should be changed to zoomControl.setTarget(diagramView);

- The MindFusion.AbstractionLayer class has been removed. Custom node classes in ES6 projects should be created following the ES6 class pattern, e.g.

Code
Select All
var TemplatedBase = Diagramming.CompositeNode.classFromTemplate("TemplatedBase", ...

export class OrgChartNode extends TemplatedBase
{
    _cost: string;

    constructor(parent) {
        super(parent);
    };

    getCost() {
        return this._cost;
    }

    setCost(value) {
        this._cost = value;
    }

    toJson() {
       var json = super.toJson();
       json.cost = this._cost;
       return json;
    }
} 



Custom node classes in ES5 projects should be created following the prototypal inheritance pattern, with the account for the removal of AbstractionLayer class, e.g.

Code
Select All
var TemplatedBase = CompositeNode.classFromTemplate("TemplatedBase", ...

function OrgChartNode(parent) {
    var _this = TemplatedBase.call(this, parent);
    _this.cost = "low";
    return _this;
};

OrgChartNode.prototype.getCost = function () {
    return this.cost;
};

OrgChartNode.prototype.setCost = function (value) {
    this.cost = value;
};

OrgChartNode.prototype.toJson = function ()
{
    var json = TemplatedBase.prototype.toJson.call(this);
    json.cost = this.cost;
    return json;
}; 



Registering a custom node type with the Diagram now also includes serialization identifiers and version:

[remove]
AbstractionLayer.registerClass(OrgChartNode, "OrgChartNode", TemplatedBase);

[add]
Diagram.registerClass(OrgChartNode, "OrgChartNode", "OrgChartNode", 1, TemplatedBase);
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 2703
Joined: Oct 19th, 2005
Re: Version 4 beta
Reply #3 - Sep 23rd, 2021 at 12:05pm
Print Post  
Version 4 pre-release package is now available on npm (https://www.npmjs.com/package/@mindfusion/diagramming). You can add it to a project with this command line:

npm install @mindfusion/diagramming
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 2703
Joined: Oct 19th, 2005
Re: Version 4 beta
Reply #4 - Oct 20th, 2021 at 9:14am
Print Post  
We have uploaded what should hopefully be the final V4 build, along with a help file showing the new property get/set based API:
https://mindfusion.eu/_beta/JsDiagram4.zip

The new build is also available as 4.0.0-beta.1 package version on NPM:
https://www.npmjs.com/package/@mindfusion/diagramming
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint