Skip to main content

Editbar

You can configure Editbar controls for each Diagram element separately and for a group of elements taking into account various conditions. For this purpose, use the Editbar properties config.

If you want to configure Editbar controls for an individual shape, you need to specify the corresponding shape type within the properties config as shown in the example below:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                rectangle: [ // configure editbar controls for the "pert" shape
                    { type: "arrange", $properties: { angle: { hidden: true } }},
                    // ... other Editbar controls configuration
                ],
                // ... other shapes configuration
            }
        }
    }
});

To configure a group of elements, you need to use the following service properties within the properties config:

  • $default - allows configuring Editbar controls if no elements are selected, or more than one element is selected
  • $shape - allows configuring Editbar controls for all shapes including custom shapes
  • $group - allows configuring Editbar controls for all elements with the group type
  • $swimlane - allows configuring Editbar controls for all elements with the swimlane type
  • $line allows configuring Editbar controls for all elements with the line type
  • $lineTitle - allows configuring Editbar controls for all elements with the lineTitle type

Configure Editbar for the grid area​

The $default service property allows configuring Editbar controls if no elements are selected, or more than one element is selected.

properties: {
    $default: [
        {
            type: "gridStep",
            readOnly: true,
            // ...
        }
    ]
}

Related complex controls: Grid step, Border, Arrange

Configure Editbar for shapes​

The $shape service property allows configuring Editbar controls for all shapes including custom shapes.

properties: {
    $shape: [
        {
            type: "position",
            $properties: {
                dx: { disabled: true },
                // ...
            },
            // ...
        }
    ]
}

Related complex controls: Border, Arrange, Position, Size, Text align, Text style

Configure Editbar for group elements​

The $group service property allows configuring Editbar controls for all elements with the group type.

properties: {
    $group: [
        { 
            type: "header", 
            label: "Group header style",
            // ... 
        }
    ]
}

Related complex controls: Border, Arrange, Header, Header common, Header position, Size, Text align, Text style

Configure Editbar for swimlanes​

The $swimlane service property allows configuring Editbar controls for all elements with the swimlane type.

properties: {
    $swimlane: [
        { 
            type: "header", 
            label: "Swimlane header style",
            // ... 
        }
    ]
}

Related complex controls: Border, Arrange, Header, Header common, Header position, Size, Text align, Text style

Configure Editbar for lines​

The $line service property allows configuring Editbar controls for all elements with the line type.

properties: {
    $line: [
        {
            type: "lineShape",
            label: "Line connection type",
            // ...
        }
    ]
}

Related complex controls: Border, Line shape, Pointer view

Configure Editbar for line titles​

The $lineTitle service property allows configuring Editbar controls for all elements with the lineTitle type.

properties: {
    $lineTitles: [
        {
            type: "textAlign",
            label: "Text align",
            // ...
        },
        // ...
    ]
}

Related complex controls: Text align, Text style

Create and configure custom Editbar controls​

You can use the controls property of the Editbar view to create a custom control based on Basic controls and/or Complex controls.

warning

We do not recommend you to use a default control type (refer to the Basic controls and/or Complex controls) as the name for a custom control. Use the unique name for each custom control to avoid errors!

After creating a custom control, you need to apply it to the needed Diagram element via the properties property.