Toolbar API overview

Toolbar is a part of the Diagram Editor that helps users to control the editing process. Use the toolbar property of the view configuration object to show, hide and configure the Toolbar. There are two ways of initialization you can choose from:

creating the default Toolbar by using the toolbar:true setting:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        toolbar: true // displaying the default Toolbar
    }
});

configuring Toolbar by specifying it as an object with a set of properties:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // configuring Toolbar via an object
        toolbar: {
            css: "custom_css",
            items: ["file", "spacer", "scale"],
            navigationType: "pointer"
        }
    }
});

Check the related API sections to explore the available methods, properties and events of Toolbar.

List of Toolbar methods

List of Toolbar properties

List of Toolbar events

Toolbar methods​

Toolbar properties​

Toolbar events​

Toolbar methods

Toolbar properties

Toolbar events