Начиная с версии 1.1, библиотека dhtmlxDiagram предоставляет своим пользователям возможность оперативно вносить изменения в организационную структуру. Наш совершенно новый редактор организационных диаграмм значительно упрощает способ изменения внешнего вида диаграммы. Больше нет необходимости возиться с исходным кодом, когда вы хотите внести некоторые изменения. Отныне вы можете настроить внешний вид вашего приложения либо с помощью интерфейса редактора, ориентированного на перетаскивание, либо изменив свойства через боковую панель редактора.
В этой статье мы рассмотрим способ добавления редактора в ваше приложение и проверим возможности, которые он предоставляет.
Добавление Live Editor в ваше приложение организационной диаграммы
Редактор диаграмм по умолчанию не включен. Чтобы заставить его работать, требуется дополнительная работа.
Во-первых, вам нужно добавить на страницу новый контейнер и инициализировать в нем редактор. Следующим шагом является создание кнопки, которая запускает редактор. Он должен содержать событие onclick, необходимое для вызова функции, описывающей логику запуска редактора организационной диаграммы. После инициализации приложения окно редактора скрыто. Все, что видит пользователь, — это организационная диаграмма и кнопка Изменить:
Чтобы включить такое поведение, мы должны сделать окно редактора скрытым по умолчанию. Чтобы запустить редактор, пользователь должен нажать кнопку Изменить. При запуске редактора приложение скроет контейнер с организационной схемой, а контейнер с редактором появится на экране:
Вы можете ознакомиться с нашим Руководством по редактору организационных диаграмм, чтобы узнать, как все работает и какой код требуется для добавления редактора в ваше приложение.
Работа с редактором организационных диаграмм
Редактор состоит из нескольких частей, каждая из которых имеет определенный функционал. Начнем с панели инструментов.
Панель инструментов
Панель инструментов редактора организационной диаграммы содержит три типа кнопок:
- кнопка Сбросить изменения позволяет сбросить все сделанные изменения;
- кнопка Применить все позволяет применить все сделанные изменения;
- с помощью кнопок Сбросить и Применить можно сбросить изменения на предыдущий шаг или отменить их;
Наш редактор предоставляет два способа изменения состояния организационной структуры. Во-первых, вы можете использовать интерфейс организационной диаграммы. Второй вариант — применить изменения с помощью боковой панели редактора.
Использование интерфейса для редактирования диаграммы
Чтобы сделать конкретный узел редактируемым, вы должны щелкнуть его. В результате над выбранным узлом появится панель инструментов с параметрами редактирования, как показано на следующем снимке экрана:
Панель инструментов содержит четыре кнопки, позволяющие выполнять следующие действия:
- добавить подузел для выбранного узла
- удалить выбранный узел (кроме корневого)
- выбрать вертикальный или горизонтальный режим расположения
Вот как выглядит режим вертикального расположения:
Кроме того, редактор организационных диаграмм поддерживает перетаскивание. Это позволяет редактировать диаграмму с помощью мыши. Вы можете перетащить конкретный узел, чтобы изменить его положение. Вы также можете перетащить корневой узел, чтобы изменить положение всей диаграммы.
Каждый выбранный узел имеет специальные маркеры изменения размера, которые можно использовать для изменения его размера:
Для редактирования организационной схемы вы также можете использовать боковую панель.
Использование боковой панели редактора
Когда вы выбираете конкретный узел, боковая панель редактора показывает его атрибуты и позволяет их изменить.
Вы можете изменить название узла и отредактировать отображаемый текст. Редактор позволяет загрузить изображение для карты с вашего компьютера. Используя палитру цветов, вы можете изменить цвет заголовка. Кроме того, боковая панель позволяет задать точный размер выбранного узла в пикселях и изменить его положение относительно исходного.
Чтобы узнать больше о возможностях редактора и его API, посетите эту страницу документации.
