Skip to main content

addShape()

Description​

Creates a custom shape

The addShape() method can be used both in the diagram and in the editor. Check the examples below

Usage​

addShape(
    type: string, 
    parameters: object
): void;

Parameters​

  • type - (required) the unique name for the type of a custom shape. The name must differ from the names of default shapes
  • parameters - (required) an object with the additional parameters of the addShape() method. Here you can specify the following attributes:
    • template: function - (required) the function that takes the configuration object of the shape as a parameter and returns either an HTML or SVG template
    • defaults: object - (optional) the default configuration for a created shape. See the full list of the configuration properties of a shape
    • eventHandlers: object - (optional) adds custom event handlers to HTML elements of the template of a shape. The eventHandlers object includes a set of key:value pairs, where:
      • key: string - the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover)
      • value: object - an object that contains a key:value pair, where
        • key is the CSS class name that the handler will be applied to
        • value is a function that takes two parameters:
          • event: object - (required) an event object
          • shape: object - (required) the shape object
      tip

      Note, we recommend that you use different CSS classes for different custom shapes when initializing custom event handlers.

Example​

Adding a shape into the Diagram
const diagram = new dhx.Diagram("diagram_container", {
    type: "org", //  or type: "default", or type: "mindmap"
    defaultShapeType: "personal",
});

diagram.data.parse(data);

diagram.addShape("personal", {
    template: ({ name, photo, post }) => (`
        <div className="dhx_diagram_template_a_box dhx_diagram_template_a">
            <div className="dhx_diagram_template_a__inside">
                <div className="dhx_diagram_template_a__picture" style={{backgroundImage: 'url(${photo})'}}></div>
                <div className="dhx_diagram_template_a__body">
                    <div className="dhx_diagram_template_a__title">${name}</div>
                    <div className="dhx_diagram_template_a__row">
                        <span className="dhx_diagram_template_a__text">${post}</span>
                    </div>
                </div>
                <div className="toggle--open-menu">
                    <span className="dhx_diagram_template_a__icon mdi mdi-dots-vertical"></span>
                </div>
            </div>
        </div>
    `), 
    defaults: {
        height: 115, width: 330,
        name: "Name and First name",
        post: "Resident",
        photo: "",
    },
    eventHandlers: {
        onclick: {
            "toggle--open-menu": () => console.log("open menu")
        }
    }
});

Related sample: Diagram with Editor. Org chart mode. Customization of cards, editbar and toolbar

The example below shows how you can add a custom shape into the Diagram Editor as well as configure the Shapebar and Editbar panels of the editor. The configuration of a custom shape in the editbar of the Editor is implemented via the properties property of the Editbar panel.

Adding a shape into the Diagram Editor
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        shapebar: {
            sections: {
                "Network shapes": [
                    { type: "network", text: "Core", img: src + "core.svg" },
                    { type: "network", text: "Server", img: src + "server.svg" }
                ],
                "Flow shapes": [{ flowShapes: true }]
            }
        },
        editbar: {
            properties: {
                network: [
                    { type: "arrange" },
                    {
                        type: "fieldset",
                        label: "Network information",
                        rows: [
                            { type: "avatar", key: "img", circle: true, readOnly: true },
                            { type: "textarea", key: "text", label: "Description" },
                            { type: "input", key: "ip", label: "IP" }
                        ]
                    }
                ]
            }
        }
    }
});

editor.parse(data);

editor.diagram.addShape("network", {
    template: ({ img, text, ip }) => {
        return `
            <section className="dhx_diagram_template_d">
                <img className="dhx_diagram_template_d__image" src="${img}" alt="${text}"/></img>
                <span className="dhx_diagram_template_d__title">${text}</span>
                <span className="dhx_diagram_template_d__text">${ip}</span>
            </section>
        `;
    },
    defaults: {
        width: 160, height: 160,
        preview: { scale: 0.7 },
        ip: "127.0.0.1"
    }
});

Change log: The properties attribute is removed in v6.0.

Related articles: Custom Shape

Related samples: