Skip to main content

Migration to newer versions

4.2 -> 5.0​

Diagram API​

The lineGap property of Diagram is deprecated and no longer supported. Instead, use the lineGap parameter of the lineConfig property.

Before v5.0
const diagram = new dhx.Diagram("diagram_container", { 
    type: "default",
    lineGap: 30
});
From v5.0
const diagram = new dhx.Diagram("diagram_container", { 
    type: "default",
    lineConfig: {
        lineGap: 30
    },
    // other config parameters
});

Editor API​

The lineGap property of Diagram Editor is deprecated and no longer supported. Instead, use the lineGap parameter inside the lineConfig property.

Before v5.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineGap: 30
});
From v5.0
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    lineConfig: {
        lineGap: 30
    },
    // other config parameters
});

4.1 -> 4.2​

Diagram API​

In v4.2, the defaultLinkType property is deprecated.

Starting from v4.2, you need to apply the new lineConfig property to specify the default type for connector lines.

Before v4.2
const diagram = new dhx.Diagram("diagram_container", { 
    defaultLinkType: "dash"
});
From v4.2
const diagram = new dhx.Diagram("diagram_container", { 
    lineConfig: {
        lineType: "dash",
    },
    // other config parameters
});

Editor API​

The syntax of specifying basic sets of items for sections in the left panel of the editor has been changed.

Before v4.2, you could set boolean true value to the array of the section's items to display all available flow-chart shapes in the section:

Before v4.2
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "flowchart shapes": [true],
        "text": ["text"],
        "mind map shape": ["topic"]
    },
});

Starting from v4.2, you need to use the different syntax for this purpose:

From v4.2
const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "flowchart shapes": [{ flowShapes: true }],
        "text": ["text"],
        "mind map shape": ["topic"]
    },
});

Besides, it became possible to specify other basic sets of items via the related key:value pairs. For more details, check the shapeSections article.

3.1 -> 4.0​

API​

The shapeHover event has been deprecated in v4.0. Starting with v4.0, use the new itemMouseOver event instead.

Before v4.0
diagram.events.on("shapeHover",function(id,e){
    console.log("An item"+ diagram.data.getItem(id).text +"has been hovered over");
});
From v4.0
diagram.events.on("itemMouseOver", (id, event) => {
    console.log(id, event);
});
// For diagram editor
editor.diagram.events.on("itemMouseOver", (id, event) => {
    console.log(id, event);
});

3.0 -> 3.1​

Editor API​

The shapeMove event of the editor object has been deprecated in v3.1. Starting with v3.1, use the new BeforeShapeMove and AfterShapeMove events instead.

Before v3.1
editor.events.on("shapeMove",function() {
    console.log("The shape is moved");
});
From v3.1
// BeforeShapeMove event
editor.events.on("BeforeShapeMove", function(events) {
    console.log("Before the shape is moved:", events);
    return true;
});

// AfterShapeMove event
editor.events.on("AfterShapeMove", function(events) {
    console.log("After the shape is moved:", events);
});

2.2 -> 3.0​

Creating custom shapes​

The way of creating custom shapes has been changed, simplified and improved.

Starting from v3.0, in order to create your own types of shapes, the new addShape method should be used instead of the diagram.flowShapes object. The method provides you with the ability to create HTML templates that will work in different browsers. Besides, the method allows creating and editing custom shapes in Diagram Editor.

Despite the diagram.flowShapes object has been deprecated, it will still continue working.

Toolbar buttons in Editor​

Before version 3.0 you were able to show/hide toolbar buttons in Diagram Editor via the related showApply, showReset, showExport configuration properties of the Editor.

In the version 3.0 these properties are deprecated and removed. Instead, the controls config property that contains a set of control_name:value pairs is added. Thus, the properties are replaced with:

  • showApply -> controls.apply
  • showReset -> controls.reset
  • showExport -> controls.export
const editor = new dhx.DiagramEditor("editor_container", {
    controls: { 
        apply: false,
        reset: false,
        export: true
    },
});

To enable/disable a toolbar button you need to specify the value of the control to true (by default) or false.

See the full list of the available controls in the Toolbar article.

1.1 -> 2.0​

Removed API​

  • diagram.eachChild

Changed API​