Moving to version 4

To port a project that uses an earlier version of 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 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);