shapeToolbar

Описание

Необязательный параметр. Определяет, какие элементы управления отображаются в персональной панели инструментов элементов диаграммы

Использование

shapeToolbar?: boolean | array;

Параметры

В виде массива свойство shapeToolbar может включать:

• значение типа boolean - для отображения/скрытия панели инструментов по умолчанию
• строковые значения с именами элементов управления панели инструментов. Порядок значений в массиве определяет порядок отображения элементов управления на панели инструментов. Доступны следующие значения:
  • в режиме по умолчанию: "copy" | "connect" | "remove" | "addRowLast" | "addColumnLast"
  • в режиме организационной диаграммы: "add" | "horizontal" | "vertical" | "remove"
  • в режиме интеллект-карты: "add" | "addLeft" | "addRight" | "remove"
• набор объектов иконок. Каждый объект иконки может иметь следующие свойства:
  • id: string - (обязательный) идентификатор иконки. Обратите внимание, что использование стандартных имён элементов управления панели инструментов в качестве идентификаторов новых элементов управления запрещено
  • content: string - (обязательный) содержимое иконки. Может содержать HTML-элемент с именем класса иконки
  • check: function - (необязательный) проверяет, должна ли иконка применяться к фигуре. Функция принимает объект фигуры и возвращает true, если иконка будет отображена для этой фигуры
  • css: function - (необязательный) функция, которая возвращает имя (имена) CSS-класса(ов), которые должны применяться к фигуре
  • tooltip: string - (необязательный) подсказка, которая появляется при наведении курсора на иконку

Пример

Настройка свойства в виде булевого значения

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org",
    shapeToolbar: false, // по умолчанию true
});

Настройка свойства в виде массива имён иконок или объектов иконок

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org",
    shapeToolbar: [
        "add",
        // добавление пользовательского элемента управления "download"
        {
            id: "download",
            content: "<i className='dxi dxi-download'></i>",
            tooltip: "Download to PDF"
        },
        {
            id: "remove",
            content: "<i className='dxi dxi-delete-outline'>",
            check: item => item.parent,
            css: () => "dhx_diagram_toolbar__icon--remove",
            tooltip: "Remove"
        }
    ]
});

Переопределение панели инструментов по умолчанию для отдельных элементов

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

Настройка иконки загрузки для элементов с типом start

const editor = new dhx.DiagramEditor("editor_container", {
    shapeToolbar:
    [
        true,
        {
            id: "download",
            content: "<i className='dxi dxi-download'></i>",
            tooltip: "Download to PDF",
            check: item => item.type === "start"
        }
    ]
});

Журнал изменений: Параметр tooltip объекта иконки добавлен в v5.0

Полезная статья: Область сетки

Связанный пример: Diagram Editor. Режим организационной диаграммы. Настройка панели инструментов фигур