Skip to main content

shapeSections

info

The property is available only in the default mode of the editor (type:"default")

The default sections of the left panel are: Shapes, Groups, Swimlanes.

Using the shapeSections property you can change the structure of the left panel and display only the items which you need there.

Description

Optional. An object which specifies sections of items that will be shown in the left panel of the editor

Usage

shapeSections?: {
[key: string]: any
}

Parameters

The shapeSections object can contain a set of key:value pairs where:

  • key - the name of a section
  • value - an array which can include:
    • an object with one key:value pair. The list of available pairs is given below:
      • flowShapes: true - (optional) displays all available flow-chart shapes
      • org: true - (optional) displays "card" and "img-card" shapes
      • group: true - (optional) displays a basic set of groups
      • swimlane: true - (optional) displays a basic set of swimlanes
    • a string value with a specific type of the item to be rendered in the section (for example, "text", "topic", etc.)

Example

const editor = new dhx.DiagramEditor("editor_container", {
shapeSections: {
"Swimlane": [{ swimlane: true }],
"Groups": [{ group: true }],
"Flowchart shapes": [{ flowShapes: true }],
"Org shapes, text, topic": [{ org: true }, "text", "topic"]
},
});

Related articles: Left Panel

Related samples: