items

Описание

Необязательный. Массив элементов управления, отображаемых на Toolbar Diagram Editor

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

items?: (object | string)[];

Настройка items через строки

Свойство items позволяет указать служебные элементы в виде массива строк:

items: [ "file", "edit", "view", "arrange", "spacer", "scale" ];

Полный список служебных элементов вы можете посмотреть здесь.

Настройка items через объекты

Свойство items позволяет указать служебные элементы и базовые элементы в виде массива объектов:

items: [
    {
        type: string,
        id?: string,
        value?: string,
        hotkey?: string,
        icon?: string,
        hidden?: boolean,
        disabled?: boolean,
        css?: string | string[],
        items?: (string | object)[],
        checkIcon?: (editor: object) => string,
        handler?: (editor: object, event: Event) => void
    }, {...}
];

Параметры

Для всех служебных элементов, кроме separator / spacer / scale, можно указать объект со следующими параметрами:

• type - (обязательный) - тип служебного элемента. Полный список типов служебных элементов вы можете посмотреть здесь
• id - (необязательный) - ID служебного элемента. По умолчанию ID служебного элемента включает $ и type служебного элемента: $file
• value - (необязательный) - метка служебного элемента
• hotkey - (необязательный) - метка сочетания горячих клавиш служебного элемента
• icon - (необязательный) - класс css для иконки служебного элемента
• hidden - (необязательный) - скрывает служебный элемент
• disabled - (необязательный) - отключает служебный элемент
• css - (необязательный) - применяет пользовательский класс css к служебному элементу
• items - (необязательный) - определяет структуру дочерних элементов
• checkIcon - (необязательный) - обработчик, который возвращает класс css иконки. Вызывается со следующим аргументом:
  • editor - объект Diagram Editor
• handler - (необязательный) - обработчик, который запускается при возникновении события click или inputChange. Вызывается со следующими аргументами:
  • editor - объект Diagram Editor
  • event - нативное событие

Пример 1

В примере ниже показано, как настроить элементы Toolbar через строки:

// Настройка элементов Toolbar через строки
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // toolbar: true, // отображение Toolbar по умолчанию
        // или настройте Toolbar через объект
        toolbar: {
            css: "custom_css",
            navigationType: "pointer",
            items: [
                "file",
                "spacer",
                "scale"
            ]
        }
    }
});

Пример 2

В примере ниже показано, как настроить элементы Toolbar через объекты:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        toolbar: {
            css: "custom_css",
            navigationType: "pointer",
            items: [
                {
                    type: "file",
                    items: [
                        "importJson",
                        {
                            type: "exportJson",
                            value: "Export to JSON"
                        },
                        {
                            id: "custom_id_1",
                            type: "menuItem",
                            value: "Server export",
                            icon: "dxi dxi-vault",
                            items: [
                                "exportPdf",
                                {
                                    id: "custom_id_2",
                                    type: "menuItem",
                                    value: "PNG",
                                    handler: editor => {
                                        editor.diagram.export.png();
                                        // пользовательская логика здесь
                                    }
                                }
                            ]
                        }
                    ]
                },
                "spacer",
                "scale"
            ]
        }
    }
});

Журнал изменений: Добавлено в v6.0

Полезная статья: Настройка Toolbar

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