Skip to main content

Right panel

Right panel is a part of the editor with a property sheet that provides options for modifying values of the attributes of the diagram items.

You can select a necessary item and edit its attributes via the related sidebar options.

Right panel can contain different sidebar options for editing various attributes of a shape. The presence or absence of the options in the right panel completely depends on the type and configuration of the shape, and the mode of Diagram initialization.

Grid step

Use to modify the step of moving a shape. When you change the value of the grid step, the distance between points in the Grid area will be also changed

The option can be hidden via the gridStep attribute of the controls property of the editor.

Arrange

Use to set the position of a shape via x and y coordinates; to define the width and height of a shape and set the angle of rotation.

The option is available for flow chart shapes in the default mode of the editor only.

Position

Use to set the left and top offsets to define the position of a shape.

The option is available for "card", "img-card", and "topic" shapes.

Size

Use to set the width and height of a shape.

The option is available for "card", "img-card", and "topic" shapes.

Fill

Use to modify the color of a shape via the related colorpicker.

The option is available for "topic" and flow chart shapes.

Color

Use to modify the color of a shape header via the related colorpicker.

The option is available for "img-card" shapes.

Text

Use to edit the text of a shape.

Stroke

Use to change the outline of a shape: set its color, type and width.

The option is available for "topic" and flow chart shapes.

Text settings

Use to adjust the text settings:

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

The option is available for "topic" and flow chart shapes.

Title

Use to edit the title.

The option is available for "img-card" shapes.

Image

Use to load an image for the card and update it. An image is loaded from the computer and saved in the base64 format right into the data.

The option is available for "img-card" shapes.

Configuring options for editing custom shapes

When you create a custom shape with a standard configuration (i.e. without adding custom properties), the options of the right panel will be rendered automatically depending on the data set of the shape.

In case you create more complex shape, you can change the structure of the right panel and specify additional options for editing custom properties of the shape. To do this, you need to make use of the properties attribute of the addShape() method.

The properties attribute contains a set of objects that defines which sidebar options will be rendered in the right panel of the editor for the shape. Check the full list of available types of the options you can apply while configuring the right panel.

The order of the objects in the array defines the order the sidebar options will be displayed in the right panel.

Grid step

Use to modify the step of moving a line. The option can be hidden via the gridStep attribute of the controls property of the editor.

Stroke

Use to change the settings of a line:

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

Lines with title are available in the default mode only.

Fill

Use to modify the background color of the text item of a line via the related colorpicker.

Text

Use to edit the text of the text item of a line.

Text style

Use to adjust the text settings:

  • font size, line spacing, weight, style
  • color, horizontal text alignment.

Grid step

Use to modify the step of moving an item. The option can be hidden via the gridStep attribute of the controls property of the editor.

Arrange

Use to set the position of an item via x and y coordinates; to define the width and height of a group/swimlane.

Fill

Use to modify the color of an item via the related colorpicker.

Stroke

Use to change the outline of an item: set its color and width.

Header text

Use to edit the text of the header of an item.

Header style

Use to adjust the text settings of the header of an item:

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

Header fill

Use to modify the color of the header of an item via the related colorpicker.

Header position

Use to define the position of the header of an item.

Use to show/hide the header of an item. If you hide the header, such options as Header text, Header style, Header fill, Header position will become hidden.

Subheader rows

Use to show/hide the left/right subheadings of a swimlane.

Subheader cols

Use to show/hide the top/bottom subheadings of a swimlane.