Skip to main content

shapeIconClick

Description​

Fires on clicking an icon of the shape toolbar

Usage​

"shapeIconClick": (
    id: string | number, 
    event: MouseEvent
) => void;

Parameters​

The callback of the event is called with the following parameters:

  • id - the id of the icon
  • event - a native HTML event object

Example​

// initializing Diagram
const diagram = new dhx.Diagram("diagram_container", {
    select: true,
    // setting a toolbar with buttons for items
    toolbar: [
        {
            id: "add",
            content: "<i className='dxi dxi-plus-box'>"
        },
        {
            id: "download",
            content: "<i className='dxi dxi-download'></i>"
        },
        {
            id: "remove",
            content: "<i className='dxi dxi-delete-outline'>"
        }
    ]
});
// loading data
diagram.data.parse(data);

diagram.events.on("shapeIconClick", function (action) {
    const selectedId = diagram.selection.getItem().id;
    switch(action) {
        case "download":
            diagram.export.pdf();
            break;
        case "remove":
            diagram.data.remove(selectedId);
            break;
        case "add":
            diagram.data.add({
                text: "New shape",
                parent: selectedId,
            });
            break;
    }
});

Related article: Event handling

Related sample: Diagram. Configuration. Shape toolbar