Skip to main content

Migration to newer versions

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 Editors

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