Обзор DHTMLX Diagram Editor
Компонент DHTMLX Diagram предоставляет редактор, который позволяет применить свои дизайнерские навыки для создания аккуратных и красивых диаграмм.
Редактор в режиме по умолчанию
Интерфейс редактора, инициализированного в режиме по умолчанию, состоит из четырёх функциональных частей:
Чтобы построить диаграмму, нужно либо перетащить необходимые элементы с панели фигур, либо создать копию элементов с помощью панели инструментов фигуры.
Вы можете настраивать атрибуты элементов через боковые параметры панели редактирования. Чтобы ускорить процесс оформления, используйте комбинацию Alt (Option) + Ctrl (Cmd) + С для копирования стилей элемента и Alt (Option) + Ctrl (Cmd) + V для применения этих стилей к выбранным элементам.
Связанный пример: Diagram Editor. Режим по умолчанию. Широкая блок-схема
Вы можете настроит ь панель фигур и, если вы добавили пользовательскую фигуру, настроить панель редактирования в соответствии с атрибутами вашей фигуры.
Редактор в режиме организационной диаграммы
Интерфейс редактора, инициализированного в режиме организационной диаграммы, состоит из трёх функциональных частей:
В этом режиме у редактора нет панели фигур
Чтобы построить диаграмму в режиме организационной диаграммы редактора, нужно выбрать фигуру и добавить для неё новый дочерний элемент. Вы можете перетаскивать фигуры от одного родительского элемента к другому. При перетаскивании элемент перемещается вместе со всеми своими дочерними элементами.
Вы можете настраивать атрибуты фигур через доступные боковые параметры панели редактирования. Чтобы ускорить процесс оформления, используйте комбинацию Alt (Option) + Ctrl (Cmd) + С для копирования стилей элемента и Alt (Option) + Ctrl (Cmd) + V для применения этих стилей к выбранным элементам.
Связанный пример: Diagram Editor. Режим организационной диаграммы. Базовая инициализация
Если вы добавили пользовательскую фигуру в редактор в режиме организационной диаграммы, вы можете настроить панель редактирования, чтобы иметь возможность редактировать пользовательские свойства фигуры.
Для родительской фигуры любого уровня можно добавить элементы assistant или partner. Вспомогательные и партнёрские элементы не могут быть родительскими.
Соединение между родительской фигурой и её партнёром всегда горизонтальное. Кроме того, соединения между родительской фигурой и всеми её дочерними элементами становятся горизонтальными после добавления партнёрского элемента для родителя, даже если ранее соединения были вертикальными.
Редактор в режиме интеллект-карты
Интерфейс редактора, инициализированного в режиме интеллект-карты, состоит из трёх частей:
В этом режиме у редактора нет панели фигур
Чтобы построить диаграмму в режиме интеллект-карты редактора, нужно выбрать фигуру и добавить для неё новый дочерний элемент. Вы можете перетаскивать фигуры от одного родительского элемента к другому. При перетаскивании элемент перемещается вместе со всеми своими дочерними элементами.
Вы можете настраивать атрибуты фигур через доступные боковые параметры панели редактирования. Чтобы ускорить процесс оформления, используйте комбинацию Alt (Option) + Ctrl (Cmd) + С для копирования стилей элемента и Alt (Option) + Ctrl (Cmd) + V для применения этих стилей к выбранным элементам.
Связанный пример: Diagram Editor. Режим интеллект-карты. Интеллект-карта эмоций
Если вы добавили пользовательскую фигуру в редактор в режиме интеллект-карты, вы можете настроить панель редактирования, чтобы иметь возможность редактировать пользовательские свойства фигуры.
Что дальше
Это всё. Теперь вы можете начать работу с диаграммами или продолжить изучение внутреннего устройства JavaScript Diagram и Diagram Editor в разделе руководства.