Пользовательская фигура

Если стандартные фигуры не соответствуют вашим потребностям, вы можете создать пользовательскую фигуру.

Представим, что вы хотите создать новую фигуру networkCard, которая отображает изображение, текст и IP-адрес.

Для этого выполните следующие шаги:

1. Примените метод addShape(), чтобы задать уникальное имя для вашей фигуры (в нашем случае "networkCard") и предоставить для неё шаблон:

diagram.addShape("networkCard", {
    template: ({ img, text, ip }) => (`
        <section className="dhx-diagram-demo_network-card">
            <img src="${img}" alt="${text}"/></img>
            <span>${text}</span>
            <span>${ip}</span>
        </section>
    `),
    // конфигурация по умолчанию для фигур с type:"networkCard"
    defaults: {
        width: 160,
        height: 160,
        img: path.network + "desktop.svg",
        text: "Network Card",
        ip: "138.68.41.78"
    }
});

Атрибут defaults используется для определения конфигурации по умолчанию фигуры "networkCard". При необходимости значения указанных свойств можно изменить в объектах конфигурации отдельных фигур.

2. Используйте уникальное имя фигуры в качестве значения атрибута type внутри объекта фигуры при подготовке набора данных для загрузки в диаграмму.

Примечание

Объект данных пользовательской фигуры может содержать любые свойства конфигурации, включая пользовательские.

const networkDiagram = [
    {
        "id": 1,
        "type": "networkCard",
        "x": 0,
        "y": 380,
        // изменение значений по умолчанию атрибутов text и ip
        "text": "Remote expert desktop",
        "ip": "192.168.32.2" // пользовательское свойство
    },
    // другие варианты
]

Чтобы изменить значения по умолчанию свойств text и ip, мы указали те же свойства с новыми значениями в объекте конфигурации фигуры. Таким образом, значение текста "Network Card" будет заменено на "Remote expert desktop", а значение ip "138.68.41.78" будет заменено на "192.168.32.2".

Обработчики событий для пользовательских фигур

Может потребоваться добавить обработчики к событиям, которые возникают при взаимодействии пользователя с пользовательскими фигурами. Это можно сделать, добавив обработчики событий к HTML-элементам шаблона фигуры через атрибут eventHandlers метода addShape().

В примере ниже контекстное меню будет открываться после того, как пользователь щёлкнет по значку с классом toggle_container:

Объект eventHandlers включает набор пар ключ:значение, где:

• key - имя события. Обратите внимание, что в начале имени события используется префикс 'on' (onclick, onmouseover).
• value - объект, содержащий пару ключ:значение, где key - имя css-класса, к которому будет применён обработчик, а value - функция, принимающая два параметра:
  • event - объект события
  • shape - объект фигуры

Рекомендуем использовать разные CSS-классы для разных пользовательских фигур.