Панель инструментов

Панель инструментов — это верхняя часть Diagram Editor, которая помогает пользователям управлять процессом редактирования.

Чтобы настроить панель инструментов, вы можете использовать следующие свойства:

css — применяет пользовательский класс CSS
navigationType — определяет действие, которое активирует элемент панели инструментов. Вы можете указать одно из следующих действий:
- "click" — активирует элемент панели инструментов при клике пользователя
- "pointer" — активирует элемент панели инструментов при наведении указателя мыши
items — массив items (элементов управления), размещённых на панели инструментов. Есть 2 способа настроить элементы панели инструментов:
- Настройка элементов с помощью строк
- Настройка элементов с помощью объектов

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // toolbar: true, // отображает панель инструментов по умолчанию
        // или настройте панель инструментов через объект
        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();
                                        // custom logic here
                                    }
                                }
                            ]
                        }
                    ]
                },
                "spacer",
                "scale"
            ]
        }
    }
});

Служебные элементы

Элементы панели инструментов представлены служебными элементами. Вы можете использовать и настраивать следующие служебные элементы:

file — формирует группу служебных элементов для импорта и экспорта файлов
Details
Элемент file имеет следующую структуру:
- file - importJson - export - exportJson - exportPdf - exportPng
Набор элементов file выглядит следующим образом:
importJson — открывает диалоговое окно для импорта файла в формате JSON
export — формирует группу служебных элементов для экспорта файла в выбранном формате
Details
Элемент export имеет следующую структуру:
- export - exportJson - exportPdf - exportPng
exportJson — экспортирует файл в формате JSON
exportPdf — экспортирует файл в формате PDF
exportPng — экспортирует файл в формате PNG

edit — формирует группу служебных элементов для управления и редактирования фигур, линий, групп и дорожек
Details
В режиме default набор элементов edit имеет следующую структуру по умолчанию:
- edit - undo - redo - separator - duplicate - copy - paste - separator - copyStyle - pasteStyle - separator - selectAll - selectNone
В режимах org/mindmap набор элементов edit имеет следующую структуру по умолчанию:
- edit - undo - redo - separator - copyStyle - pasteStyle - separator - selectAll - selectNone
undo — выполняет шаг назад в истории изменений
redo — выполняет шаг вперёд в истории изменений
duplicate — дублирует выбранные элементы
copy — копирует выбранные файлы в объект model
paste — вставляет скопированные файлы из объекта model
copyStyle — копирует стили выбранного элемента в объект model
pasteStyle — применяет стили, сохранённые в объекте model, к выбранным элементам
selectAll — выбирает все элементы, доступные для выбора
selectNone — снимает выделение со всех доступных элементов

view — формирует группу служебных элементов для управления отображением элементов Diagram Editor

Details

В режиме default набор элементов view имеет следующую структуру по умолчанию:

- view
    - theme
        - themeLight
        - themeDark
        - themeLightContrast
        - themeDarkContrast
    - separator
    - shapebar
    - editbar
    - grid
    - separator
    - connectionPoints
    - resizePoints
    - magnetic
    - separator
    - zoomIn
    - zoomOut

В режимах org/mindmap набор элементов view имеет следующую структуру по умолчанию:

- view
    - theme
        - themeLight
        - themeDark
        - themeLightContrast
        - themeDarkContrast
    - separator
    - editbar
    - separator
    - grid
    - separator
    - resizePoints
    - itemsDraggable
    - separator
    - zoomIn
    - zoomOut

theme — формирует группу служебных элементов для применения тем
Details
Элемент theme имеет следующую структуру:
- theme - themeLight - themeDark - themeLightContrast - themeDarkContrast
themeLight — применяет тему Light
themeDark — применяет тему Dark
themeLightContrast — применяет тему LightContrast
themeDarkContrast — применяет тему DarkContrast
shapebar — показывает/скрывает панель Shapebar
editbar — показывает/скрывает панель Editbar
grid — показывает/скрывает grid в области сетки
connectionPoints — показывает/скрывает точки соединения
resizePoints — показывает/скрывает точки изменения размера
magnetic — включает/выключает функциональность magnetic
zoomIn — увеличивает значение масштаба на 0.05 (5%)
zoomOut — уменьшает значение масштаба на 0.05 (5%)

arrange — формирует группу служебных элементов для упорядочивания элементов Diagram Editor

Details

В режиме default набор элементов arrange имеет следующую структуру по умолчанию:

- arrange
    - layout
        - layoutMode
            - layoutModeDirect
            - layoutModeEdges
        - separator
        - layoutOrthogonal
        - layoutRadial
    - align
        - alignHorizontalLeft
        - alignHorizontalCenter
        - alignHorizontalRight
        - separator
        - alignVerticalTop
        - alignVerticalCenter
        - alignVerticalBottom
    - distribute
        - distributeVertical
        - distributeHorizontal

layout — формирует группу служебных элементов для автоматического размещения элементов Diagram Editor
Details
Элемент layout имеет следующую структуру:
- layout - layoutMode - layoutModeDirect - layoutModeEdges - separator - layoutOrthogonal - layoutRadial
layoutMode — формирует группу служебных элементов для управления режимом автоматического размещения
Details
Элемент layoutMode имеет следующую структуру:
- layoutMode - layoutModeDirect - layoutModeEdges
layoutModeDirect — применяет режим direct для соединителей элементов
layoutModeEdges — применяет режим edges для соединителей элементов
layoutOrthogonal — применяет режим orthogonal для расположения элементов
layoutRadial — применяет режим radial для расположения элементов
align — формирует группу служебных элементов для управления выравниванием элементов Diagram Editor
Details
Элемент align имеет следующую структуру:
- align - alignHorizontalLeft - alignHorizontalCenter - alignHorizontalRight - separator - alignVerticalTop - alignVerticalCenter - alignVerticalBottom
alignHorizontalLeft — выравнивает элементы по горизонтали слева
alignHorizontalCenter — выравнивает элементы по горизонтали по центру
alignHorizontalRight — выравнивает элементы по горизонтали справа
alignVerticalTop — выравнивает элементы по вертикали сверху
alignVerticalCenter — выравнивает элементы по вертикали по центру
alignVerticalBottom — выравнивает элементы по вертикали снизу
distribute — формирует группу служебных элементов для распределения элементов Diagram Editor
Details
Элемент distribute имеет следующую структуру:
- distribute - distributeVertical - distributeHorizontal
distributeVertical — распределяет элементы по вертикали
distributeHorizontal — распределяет элементы по горизонтали

scale — элемент управления, который позволяет пользователям увеличивать или уменьшать значение масштаба на 0.05 (5%)

Details
Элемент scale выглядит следующим образом:
separator — горизонтальная (между пунктами меню) или вертикальная (между элементами управления панели инструментов) линия, разделяющая элементы/группы элементов между собой.
spacer — пространство на панели инструментов, используемое для выравнивания элементов управления

Базовые элементы

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

В примере ниже показано, как добавить элемент управления Button на панель инструментов:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org", // "default" | "org" | "mindmap"
    view: {
        // toolbar: true, // отображает панель инструментов по умолчанию
        // или настройте панель инструментов через объект
        toolbar: {
            items: [
                {
                    type: "button",
                    value: "Best button"
                }
            ]
        }
    }
});

В дополнение к внутренним свойствам базовых элементов (за исключением Separator, Spacer и Title) вы также можете использовать следующие свойства:

checkIcon - (необязательный) - обработчик, который возвращает класс CSS для иконки. Он вызывается со следующим аргументом:
- editor - объект Diagram Editor

checkIcon?: (editor: IDiagramEditor) => string; // Используйте только для базовых элементов, содержащих иконку

handler - (необязательный) - обработчик, который запускается при возникновении события click или inputChange. Он вызывается со следующими аргументами:
- editor - объект Diagram Editor
- event - нативное событие

handler?: (editor: object, event: Event) => void;

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

Служебные элементы​

Базовые элементы​

Служебные элементы

Базовые элементы