Skip to main content

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 user
  • value - 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

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:

  1. 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 }]
            }
        }
    }
});
  1. 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"]
            }
        }
    }
});
  1. 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.

  1. 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