Moving to version 2021.R2

Diagramming changes

To port a project that uses an earlier version of MindFusion.Diagramming, follow these steps:

- For projects that use module loaders, rather than accessing the MindFusion namespace from the global namespace, check the various "Loading ... modules" sections in Getting Started guide.

- 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 as below, or otherwise moving it to the project's main folder may be necessary.

TypeScript

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

- The DOM control is now represented by the DiagramView class, rather than the Diagram class, and you will need to replace any Diagram.create, Diagram.find, MindFusion.AbstractionLayer.createControl calls with respective 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 in version 4 API changes section and replace the calling instance, e.g.

JavaScript

// 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.

JavaScript

MindFusion.Diagramming.CompatConfig.propFunctions = true;

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

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

JavaScript

// remove
overview.setDiagram(diagram);
ruler.setDiagram(diagram);
zoomControl.setTarget(diagram);

// add
overview.diagramView = diagramView;
ruler.diagramView = diagramView;
zoomControl.target = diagramView;

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

JavaScript

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.

JavaScript

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:

JavaScript

// remove
AbstractionLayer.registerClass(OrgChartNode, "OrgChartNode", TemplatedBase);// add
Diagram.registerClass(OrgChartNode, "OrgChartNode", "OrgChartNode", 1, TemplatedBase);

Pack script references changes

When referencing JsPack scripts in a JavaScript project, comply with the following dependency list. Replace the old references with references to the new scripts, located in the /umd folder for ES5 projects and /esm folder for ES6 projects. Note that when referencing with <script src> tags it is important to follow the order.

Diagram scripts

- remove
 MindFusion.Common.js
 MindFusion.Diagramming.js

- add 
 collections.js
 drawing.js
 controls.js
 animations.js
 graphs.js
 diagramming.js

Chart scripts

- remove
 MindFusion.Common.js
 MindFusion.Charting.js

- add
 drawing.js
 controls.js
 common.js
 common-collections.js
 charting.js

Scheduling scripts

- remove
 MindFusion.Common.js
 jscommon.js
 jscollections.js
 MindFusion.Scheduling.js

- add
 drawing.js
 controls.js
 common.js
 common-collections.js
 scheduling.js
 
Gauge scripts

- remove
 MindFusion.Common.js
 MindFusion.Gauges.js

- add
 drawing.js
 controls.js
 gauges.js

Dataviews scripts

- remove
 MindFusion.Common.js
 jscommon.js
 jscollections.js
 jsui.js
 MindFusion.Common.Full.js
 
- add
 drawing.js
 controls.js
 common.js
 common-collections.js
 common-ui.js
 dataviews.js

Keyboard scripts

- remove
 MindFusion.Common.js
 jscommon.js
 MindFusion.Keyboard.js

- add
 drawing.js
 controls.js
 common.js
 keyboard.js

Mapping scripts

- remove
 MindFusion.Common.js
 jscommon.js
 jscollections.js
 MindFusion.Mapping.js

- add
 drawing.js
 controls.js
 common.js
 common-collections.js
 mapping.js

UI scripts

- remove
 MindFusion.Common.js
 jscommon.js
 jscollections.js
 jsui.js
 MindFusion.Common.Full.js

- add
 drawing.js
 controls.js
 common.js
 common-collections.js
 common-ui.js

NPM packages changes

Product packages are now in the @mindfusion scope. Shared libraries are automatically added as dependencies, only install the main package of the product. Check the following list for package correspondence.

diagram-library	@mindsuion/diagramming
chart-library	@mindfusion/charting
scheduler-library	@mindfusion/scheduling
gauges-library	@mindfusion/gauges
dataviews-library	@mindfusion/dataviews
grid-library	@mindfusion/dataviews
mapping (N/A)	@mindfusion/mapping
keyboard (N/A)	@mindfusion/keyboard
UI (N/A)	@mindfusion/common-ui