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 shapesorg: true
- (optional) displays "card" and "img-card" shapesgroup: true
- (optional) displays a basic set of groupsswimlane: 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.)
- an object with one key:value pair. The list of available pairs is given below:
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: