Diagram Editor

The dhtmlxDiagram component provides a special Editor mode that allows you to try and apply your designer skills in building neat and nice-looking diagrams.

In order to initialize a Diagram editor, you need to use the DiagramEditor instance. In all other aspects the initialization stage is the same as for the Diagram component: the constructor function takes as parameters either an HTML container or the document body and a configuration object.

var editor = new dhx.DiagramEditor(document.body, {// editor config settings});

It is possible to load an appropriate data set into the editor via the parse method.

editor.parse(data);

Related sample:  Basic editor

Using editor with Diagram

It is possible to use the editor together with the diagram, e.g. create an application that will allow switching between the diagram and the editor views and saving changes made in the editor to the diagram.

Related sample:  Live Diagram edit

See the related article for details.

Configuration properties

You can use the following properties specific for the Diagram Editor in its configuration object:

  • showApply - (boolean) enables the Apply All button in the editor, true by default
  • gridStep - (number) sets the size of a grid cell that defines the step of moving a shape, 10 by default
  • editMode - (boolean) switches the editor mode off and shows the preview mode, and vice versa
  • reservedWidth - (number) defines the left offset for the diagram

Interface

There are four functional parts in the interface of the Diagram editor. They are presented in the image below:

  • the toolbar with buttons for controlling the editing process



    The toolbar can contain the following buttons:

    • the Reset Changes button that resets all the applied changes to the previous state;
    • the Apply All button. This button is shown by default and can be hidden via the showApply option. The button works in tandem with the AfterApply event and is useful if you want to apply changes made in the editor to the diagram;
    • the Reset and Apply buttons for resetting changes to the previous step or reverting them;
    • the Edit Mode button to hide and show the editor mode;
    • the Zoom group of buttons to zoom a diagram in the editor in and out;
  • the grid area for editing the diagram. It is an area intended for editing shapes and connections between them. It allows setting exact position for the shapes;
  • the left panel with a full list of shapes;
  • the right panel with a property sheet that provides fields for modifying values of the shapes' attributes.

Modes of editing

Editing shapes

Editing via interface elements

You can drag shapes from the left panel into the grid area to place them on the desired positions and connect them. In the editing mode each selected shape gets resizing handles. You can pull the handles of an editable shape to change its sizes. It is also possible to rotate a shape by clicking a special icon next to it.

When you click any shape, it becomes editable and gets a personal toolbar with editing options.

The toolbar allows:

  • creating a copy of the shape;
  • activating the mode for setting connections to a different shape;
  • deleting the selected shape.

Editing via sidebar options

You can select a shape and use the sidebar to edit its attributes:

  • set the position of a shape via x and y coordinates;

  • define the width and height of a shape and set the angle of rotation;

  • modify the color of a shape via the related colorpicker;

  • edit the text of a shape;

  • change the outline of a shape: set its color, type and width;

  • adjust the text settings:
    • font size, weight, style and color;
    • line spacing;
    • horizontal and vertical text alignment.

Editing connectors

Editing via interface elements

When the connection mode is enabled for a shape, you can set links to other shapes, adjust their position and form, as well as delete unnecessary links.

Editing via sidebar options

You can select the necessary connector and update its attributes via the sidebar:

  • modify the color of a connector line;
  • define the width and type of a connector line;
  • choose the type of the connector's start and end points;
  • select the type of a connector line;
  • set the radius for rounded corners of a connector.

Using hotkeys

There is a set of hotkeys you can use while creating a diagram in the editor:

  • Ctrl+C - to copy a shape
  • Ctrl+V - to paste a shape
  • Ctrl+Z - to revert the latest action
  • Del - to delete a shape
  • Arrows - to move a shape left/right/up/down

Editor API

The editor object owns individual methods, properties and events. There is a list of available methods and events applied to the editor object:

Methods

  • parse()

loads data into the editor from a local data source

The method takes as a parameter the data that should be parsed into the editor.

var data = [
    // shapes
    {
        "id": "a",
        "x": 50,
        "y": 53,
        "type": "triangle",
        "text": "Shape 1",
        "height": 50,
        "width": 50
    },
    {
        "id": "b",
        "x": 367,
        "y": 158,
        "type": "rectangle",
        "text": "Shape 2"
    },
 
    // connector
    {
        "id": "ab",
        "from":"a",
        "to":"b",
        "type": "line"
    },
]
 
var editor = new dhx.FreeEditor("editor_container"); 
editor.parse(data);

You can load data in any supported data format. See the details in the parse article.

Related sample:  Basic editor

  • serialize()

serializes the data of the editor into an array of JSON objects

var data = editor.serialize();

The method returns an array of JSON objects for each shape and link from the editor data.

  • import()

imports data from an existing diagram into the editor

The method takes the diagram object as a parameter.

editor.import(diagram);
  • paint()

repaints the editor

editor.paint();

Events

  • ApplyButton

fires after the Apply All button has been clicked

editor.events.on("ApplyAll",function(){
    console.log("The changes are applied")
});
  • ResetButton

fires after the Reset Changes button has been clicked

editor.events.on("ResetButton",function(){
    console.log("The changes are reset")
});

Localization

It is possible to localize the interface of the Diagram editor into a desired language. For this, you need to provide the corresponding locale settings via the dhx.i18n.setLocale() method. The method takes two parameters: the diagram container and an object that contains rules of localization for a particular country.

dhx.i18n.setLocale("diagram", {
    applyAll: "Apply all",
    resetChanges: "Reset Changes",
    editCard: "Edit Card",
    color: "Color",
    position: "Position",
    size: "Size"
});

After that, you need to initialize the editor and check how the labels' names have changed.

var editor = new dhx.DiagramEditor(document.body, {//config options});
Back to top