Библиотека пользовательского интерфейса Webix не так давно представила свой виджет Diagram Library. Он стал удобным решением для построения диаграмм любого типа и настройки связей между блоками. Однако разработчики из Webix не стоят на месте и уже готовы сделать процесс создания диаграмм еще более увлекательным с помощью редактора Diagram. 

Редактор Diagram - это специальный интерфейс для размещения блоков и связей диаграмм. Он позволяет пользователям удобно изменять формы блоков и связей, перемещать и удалять их, устанавливать расстояние между блоками, просматривать и применять выбранные параметры.

Редактор включает в себя: 

  • Панель инструментов (тулбар)
  • Панель фигур
  • Рабочую область
  • Панель настроек

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

  • сбрасывать диаграммы к исходным параметрам
  • делать один шаг назад или вперед в последних действиях с помощью стрелок “Undo” и “Redo”
  • увеличивать или уменьшать диаграмму в рабочей области с помощью “Zoom”
  • настраивать шаг сетки рабочей области
  • переключаться между настройками и режимами отображения
  • автоматически размещать блоки наиболее подходящим способом
  • применять все настройки к диаграмме

 

Панель фигур находится в левой части редактора. Здесь вы можете выбрать один из различных типов блоков. Фигуры разделены на несколько групп, но вы также можете создавать собственные.

Рабочая область - это центральная часть редактора, где происходит все волшебство. В зависимости от режима рабочее пространство может отображаться как с сеткой, так и без нее. Вы можете вручную перетащить выбранные блоки на рабочую область. Нажав на любой блок, вы можете скопировать его, создать для него новую связь, удалить его. Кроме того, вы можете переместить выбранный блок и изменить его размер.

Панель настроек позволяет пользователям изменять параметры всей диаграммы или настраивать отдельные параметры для конкретного блока или связи. При щелчке по свободному пространству в рабочей области на панели настроек будут показаны настройки по умолчанию. Чтобы применить индивидуальные настройки для отдельного блока или связи, вы можете выбрать нужный объект, и форма покажет его настраиваемые параметры. Кликнув по связи, вы можете определить стиль для нее в панели настроек.

Когда вы нажимаете на определенный блок диаграммы в рабочей области, дополнительные настройки для этого блока отображаются на панели настроек. Там вы можете выбрать цвет блока, цвет шрифта. Вы можете изменить стиль границ и параметры текста.

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

Заключение

Редактор Diagram от Webix - это инструмент, который значительно облегчает процесс создания диаграмм. Он помогает соответствовать требованиям любого сложного проекта. Редактор Diagram очень гибкий в своих настройках, поэтому вы можете построить диаграмму любой сложности.