sections
The default sections of the shapebar are: Shapes, Groups, Swimlanes.
Using the sections property you can change the structure of the shapebar and display the necessary items.
Description
Optional. An object which specifies sections of items that will be shown in the shapebar of the editor
Usage
sections?: {
[name: string]: (obj | string)[]
};
Parameters
The sections
object can contain a set of key:value pairs where:
key
- the name of a section specified by a uservalue
- an array which can include:- an object with one key:value pair for rendering a basic set of shapes. The list of available pairs is given below:
{flowShapes: true}
- (optional) displays all available types of the Flow-chart shapes{org: true}
- (optional) displays Org shapes: the "card" and "img-card" shape types{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.)
- an object with several key:value pairs for redefining the default properties of any shape
- an object with one key:value pair for rendering a basic set of shapes. The list of available pairs is given below:
Example
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
// shapebar: true, // displays default Shapebar
// or configure Shapebar via object
shapebar: {
sections: {
"Swimlane": [{ swimlane: true }],
"Groups": [{ group: true }],
"Flowchart shapes": [{ flowShapes: true }],
"Org shapes, text, topic": [{ org: true }, "text", "topic"]
}
}
}
});
Details
Depending on the chosen elements, the configuration of items of a particular section can be the following:
- Rendering of basic sections
You can render a basic set of shapes using the sections
configuration object. For example:
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
shapebar: {
sections: {
"Base flow shapes": [{ flowShapes: true }],
"Base org cards": [{ org: true }],
"Base groups": [{ group: true }],
"Base swimlane": [{ swimlane: true }]
}
}
}
});
- Specifying items with the help of string literals
You can render Shapebar items by specifying the types of shapes with the help of string literals. Check the example below:
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
shapebar: {
sections: {
"Custom section": ["custom_shape"],
"Other shapes": ["text", "topic", "circle"]
}
}
}
});
- Redefining basic configurations
Another option is to redefine basic properties of any shape and render it with the necessary parameters. The example below shows rendering of a shape of the circle
type with various text and color settings:
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
shapebar: {
sections: {
"Circles": [
{
type: "circle",
fill: "#fcba03",
text: "Orange"
},
{
type: "circle",
fill: "#03d7fc",
text: "Blue"
},
{
type: "circle",
fill: "#03fc88",
text: "Green"
}
]
}
}
}
});
You can reconfigure any type of shapes in such a way.
- Combining different types of items in a section
If your project presupposes usage of various elements, you can create sections with mixed types of items in the Shapebar. Check the following example:
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
// shapebar: true, // displays default Shapebar
// or configure Shapebar via object
shapebar: {
sections: {
"Base flow shapes": [{ flowShapes: true }, "text", "topic"],
"Circles": [
"circle",
{
type: "circle",
fill: "#fcba03",
text: "Orange"
},
{
type: "circle",
fill: "#03d7fc",
text: "Blue"
},
{
type: "circle",
fill: "#03fc88",
text: "Green"
}
]
}
}
}
});
Related article: Shapebar
Change log: Added in v6.0