Skip to main content

Left panel

Left panel is a part of the editor that renders previews of Diagram items. You can choose the necessary items and drag them from the left panel into the grid area.

note

The left panel is available only in the editor initialized in the default mode (type: "default").

Default sections​

By default, the left panel is divided into three sections: Shapes, Groups, and Swimlanes. The Shapes section includes all default shapes as well as custom ones. The Groups and Swimlanes sections contain basic sets of the items.

Custom sections​

To customize the structure of the left panel, you should use the shapeSections property of the editor object. The property allows you to specify your own sections in the necessary order and put the items into the corresponding sections.

The shapeSections property is an object with a set of key:value pairs where key is the name of a section and value is an array with the list of items which should be rendered in the section.

note

To display a basic set of items in the section, include an object with the related key:value pair into the array. Check the list of available pairs in the shapeSections article.

Adding identical items with different settings into the left panel​

The library allows you to add several identical items (i.e. items of the same type) with different settings to the left panel of the editor. To do that, you need to:

  • create separate objects with different configurations for the items of the necessary type. You can create as many objects as you need;
  • use the names of the created objects as the types of the items and add them into the sections of the left panel using the shapeSections property.

Setting shape preview​

To customize the appearance of the shapes rendered in the left panel of the editor, you can apply the preview configuration property of a shape object.

The property can be applied in two cases:

  • when setting the default configuration of a default shape via the defaults property of the editor object;
  • when setting the default configuration of a custom shape via the defaults attribute of the addShape() method.

Let's consider three examples of configuring a shape preview:

1. You can specify an image to be shown in the left panel for a custom shape. For this purpose, you need to pass either an URL to load an image from or a base64 image as a string value to the preview property:

const defaults = {
    title: "Name and First name", img: "../avatar-1.jpg", height: 115, width: 330,
    preview: "../shape_preview.png",
};

editor.diagram.addShape("template", {
    template: template,
    defaults: defaults
});

2. If you need to specify an image and define its width and height, you should provide the preview property as an object with the img, heigh, and width attributes:

const defaults = {
    title: "Name and First name", email: "some@mail.com",
    img: "../avatar-1.jpg", height: 115, width: 330,
    preview: { 
        img: "../shape_preview.png", 
        height: 58, width: 165, 
    }
}

editor.diagram.addShape("template", {
    template: template,
    defaults: defaults
});
note

You can set the precise width and height of the image, but there is no ability to set the scale of the image.

3. You can redefine the scale of a specific shape rendered in the left panel via the scale property:

const defaults = {
    name: "Name and First name",
    post: "Position held",
    ...
    preview: {
        scale: 0.72
    }
};

const editor = new dhx.DiagramEditor("editor_container", {
    shapeSections: {
        "Custom shapes": ["personalCard"],
        "OrgChart shapes": ["card", "img-card"]
    },
    scalePreview: 0.65,
});

editor.diagram.addShape("personalCard", {
    template: personalCard,
    defaults,
    ...
});

Related sample: Diagram editor. Default mode. Custom image shape

While the scale of the "personalCard"-type shapes is 0.72, the scale of the other shapes in the left panel is 0.65.

note

Note, that the preview property will be omitted when exporting data to the JSON format.

Width of the panel​

The default width of the left panel is 295. You can change it and set any other width via the shapeBarWidth property, e.g.:

const editor = new dhx.DiagramEditor("editor_container", {
    shapeBarWidth: 350  
});