addShape

creates a custom shape; sets sidebar options for its editing in the right panel of the editor

void addShape(string type,object parameters);

Parameters

typestringthe unique name of a type of a shape
parametersobjectan object with the additional parameters of the addShape function

Example

const diagram = new dhx.Diagram("diagram");
 
diagram.addShape("template", {
    template: config => (
        `<section class='template'>
            <h3>${config.organization}</h3>
            <ul>
                <li>${config.name.join("</li><li>")}</li>
            </ul>
        </section>`
    ),
    defaults: {
        organization: "Title",
        name: ["Text"],
        height: 90,
        preview: "../img/shape_preview/shape-1.png"
    },
    properties: [
        { type: "title", label: "Organization", property: "organization" },
        { type: "text", label: "Name", property: "name" },
    ]
});

Details
  1. Do not use default names of types of the dhtmlxDiagram library as names for your custom shapes.
  2. The parameters attribute contains one mandatory and two optional attributes:
  • template - (function) mandatory, the function that returns either an HTML or SVG template. The function takes the config of a shape as a parameter.

    Creating an HTML template can be implemented either in ES5 or in ES6+ formats. But note, that Internet Explorer does not support versions starting from ES6 (ECMAScript 2015).

An example of creating an HTML template using ES5:

function template(config) {
    var template = "<section class='template'>"
        template += "<h3>" + config.title +"</h3>";
        template += "<ul><li>" + config.text.join("</li><li>") +"</li></ul>";
        template += "</section>";
    return template;
};

An example of creating an HTML template using ES6+:

const template = config => (
    `<section class='template'>
         <h3>${config.title}</h3>
         <ul><li>${config.text.join("</li><li>")}</li></ul>
     </section>`
);
  • defaults - (object) optional, the default configuration for a created shape. See the full list of the configuration object properties for Diagram and Org Chart shapes.

  • properties - (array) optional, an array of objects that defines which sidebar options will be rendered in the right panel of the editor for the shape. Each object of a separate sidebar option can contain the following properties:

    • type - (string) mandatory, the type of a sidebar option for editing attributes of a shape. See the list of available types below.
    • label - (string) optional, specifies the label to the sidebar option in the right panel
    • property - (string) - optional, a custom configuration property of a shape

Types of sidebar options



- type: "arrange"

  • set the position of a shape via x and y coordinates;
  • define the width and height of a shape;
  • set the angle of rotation;
This type allows editing the width, height, angle, x, y attributes of a shape.

The properties can't be overridden. The Arrange sidebar option can be used only in Diagram Editor. It does not work in Org Chart Editor

- type: "position"

  • set the left and top offsets to define the position of a shape;
This type allows editing the dx, dy coordinate attributes of an org chart shape and x,y coordinate attributes of a diagram shape.

The properties can't be overridden.

- type: "size"

  • define the width and height of a shape;
This type allows editing the width and height attributes of a shape.

The properties can't be overridden.

- type: "title"

  • edit the text of a shape;
By default the type allows editing the title attribute of a shape.
The property can be overridden.

- type: "text"

  • edit the text of a shape;
By default the type allows editing the text attribute of a shape.
The property can be overridden.

- type: "img"

  • load an image for the card and update it
    An image is loaded from the computer and saved in the base64 format right into the data.
By default the type allows editing the img attribute of a shape.
The property can be overridden.

- type: "fill"

  • modify the color of a shape via the related colorpicker;
By default the type allows editing the fill attribute of a shape.
The property can be overridden.

- type: "textProps"

  • adjust the text settings:
    • font size, weight, style and color;
    • line spacing;
    • horizontal and vertical text alignment.
The type allows editing the textAlign, lineHeight, fontStyle, textVerticalAlign, fontSize attributes of a shape. You need to define all of these attributes in the data set for correct work of the Text sidebar option.

The properties can't be overridden.

- type: "strokeProps"

  • change the outline of a shape: set its color, type and width
The type allows editing the stroke, strokeWidth attributes of a shape. You need to define all of these attributes in the data set for correct work of the Stroke sidebar option.

The properties can't be overridden.

- type: "grid"

  • modify the step of moving a shape

The Grid Step sidebar will appear only when you set the showGridStep config option to true. Otherwise, the sidebar won't be displayed.

See also
Change log

added in v3.0

Back to top