Пользовательское руководство

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

Редактор Diagram

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

  • создавать и удалять блоки
  • устанавливать связи между блоками
  • управлять параметрами блоков и связей
  • управлять размещением блоков и связей.

Основной экран

Визуально, редактор Diagram состоит из 4 частей:

  • Тулбар
  • Панель фигур
  • Рабочая область
  • Панель настроек.

Тулбар

Тулбар находится в верхней части экрана и включает в себя контролы для управления редактором.

Здесь вы можете найти следующие контролы:

  • кнопка “Reset” - позволяет сбрасывать настройки в первоначальное состояние
  • иконки “Undo” и “Redo” - позволяют управлять изменениями в редакторе и переходить на шаг назад или вперед соответственно
  • контрол масштабирования - позволяет управлять масштабом рабочей области. При клике по иконкам “-” и “+”, масштаб будет уменьшаться или увеличиваться соответственно. По умолчанию установлено значение 100%
  • контрол управления размером сетки - позволяет задавать шаг для перемещения блоков (расстояние между точками сетки) на рабочей области. По умолчанию, расстояние между точками равно 10 px
  • иконка переключения режимов редактора - позволяет переключаться между режимом настроек и режимом отображения.
  • кнопка “Autoplace” - позволяет применить авторасстановку для всех блоков на рабочей области. Блоки будут размещены самым оптимальным образом с помощью специального алгоритма кнопка “Apply” - позволяет применить внесенные изменения и вернуться к режиму просмотра.

Панель фигур

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

Рабочая область

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

Рабочая область в режиме редактирования

Рабочая область в режиме отображения

На рабочей области вы можете делать следующее:

  • создавать новые блоки
  • копировать блоки
  • удалять блоки
  • перемещать блоки
  • изменять размеры блоков
  • устанавливать/удалять связи между блоками.

Все перечисленные операции будут подробно рассмотрены в этой статье.

Панель настроек

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

Учитывайте, что у индивидуальных настроек приоритет выше чем у настроек по умолчанию.

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

Настройки по умолчанию

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

Настройки блоков по умолчанию

В секции Block settings вы можете задать ширину и высоту для всех блоков диаграммы. Ширина и высота стандартного блока - 100 и 45 пикселей соответственно (если другие размеры не указаны в настройках).

Чтобы изменить ширину или высоту блоков, клините по соответствующему полю и введите нужное значение. Также можно воспользоваться специальными стрелками (увеличить/уменьшить значение) в правой части каждого из полей (появляются при наведении курсора или когда поле находится в фокусе).

Настройки по умолчанию для стрелок

В секции Link arrow вы можете задать тип и размер стрелки для всех связей.

По умолчанию, связи отображаются без стрелок (выбрано значение none).

Чтобы задать тип стрелок, кликните по селектору выбора типа и выберете нужную опцию из выпадающего списка.

Чтобы задать размер стрелок, кликните по крайнему правому полю секции и укажите нужное значение. Также можно воспользоваться специальными стрелками (увеличить/уменьшить значение) в правой части этого поля (появляются при наведении курсора или когда поле находится в фокусе).

Настройки по умолчанию для связей

В секции Link mode вы можете задать режим для всех связей диаграммы. Для этого предусмотрены специальные иконки, которые позволяют сделать все связи либо “угловыми”, либо “прямыми”.

"Угловые связи"

"Прямые связи"

Управление блоками

Интерфейс редактора позволяет работать с блоками, а именно:

  • добавлять новые
  • копировать
  • удалять
  • размещать
  • вращать
  • указывать координаты
  • управлять индивидуальными настройками.

Добавление блоков

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

Копирование блоков

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

Удаление блока

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

Вы также можете удалить выделенный блок с помощью клавиши “Delete” на клавиатуре.

Размещение блоков

Размещать блоки на рабочей области можно тремя способами:

Авторазмещение

Чтобы воспользоваться функцией авторазмещения блоков, необходимо кликнуть по кнопке “Autoplace” на тулбаре виджета. Кнопка запустит алгоритм, который расставит блоки самым оптимальным образом с учетом установленных связей.

Перетаскивание

Управлять размещением блоков можно через перетаскивание (drag-n-drop).

Rotating blocks

You can rotate blocks on the workspace using a special control on the right side of a selected block.

To rotate a block around its axis, hold down the rotation control with the left mouse button and move it clockwise or counterclockwise. During block rotation, the arrows will be replaced with the current angle degree.

Размеры блоков

Управлять размерами блоков диаграммы можно несколькими способами:

Управление размером через ресайз

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

Индивидуальные настройки блоков

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

Здесь вы можете задать:

  • параметры блока
  • текст блока
  • цвет фона
  • настройки границы
  • настройки шрифта.

Параметры блока

В секции Block settings вы можете задать следующие параметры блока:

  • ширину и высоту
  • координаты размещения (X и Y)
  • угол вращения.

Чтобы изменить любой из этих параметров, кликните по соответствующему полю и введите нужное значение. Также можно воспользоваться специальными стрелками (увеличить/уменьшить значение) в правой части каждого из полей (появляются при наведении курсора или когда поле находится в фокусе).

Текст блока

В секции Content вы можете указать текст, который будет отображаться в текущем блоке.

Цвет фона

В секции Fill вы можете задать цвет заливки текущего блока.

Чтобы задать цвет фона, нужно кликнуть по полю ввода, выбрать желаемый цвет или указать его код, и подтвердить выбор.

Настройки границы

В секции Border style вы можете задать цвет, тип и толщину границы блока.

Чтобы задать цвет границы блока, кликните по селектору выбора цвета, выберите желаемый цвет или укажите его код, и подтвердите выбор.

Чтобы задать тип границы блока, кликните по селектору типов и выберите нужную опцию из выпадающего списка.

Чтобы задать толщину границы блока, кликните по крайнему правому полю секции и укажите нужное значение. Также можно воспользоваться специальными стрелками (увеличить/уменьшить значение) в правой части этого поля (появляются при наведении курсора или когда поле находится в фокусе).

Настройки шрифта

В секции Font вы можете задать параметры шрифта для текста в блоке.

Здесь можно задать следующие параметры:

  • цвет шрифта и его стиль
  • тип шрифта и его размер
  • выровнять текст (по горизонтали и вертикали).

Учитывайте, что для текстового блока (Common-Text) нельзя задать настройки фона и границы. Для этого блока они не предусмотрены.

Управление связями

Интерфейс редактора позволяет работать со связями, а именно:

  • устанавливать связи между блоками
  • удалять связи
  • перемещать связи
  • управлять индивидуальными настройками связей.

Установка связей

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

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

Если соединить любой из маркеров блока с одним из боковых маркеров другого блока, то установится связь, параметры которой заданы в общих настройках (настройках по умолчанию).

Результат будет таким:

Если соединить маркеры, которые находятся в центре двух блоков, то установится "прямая" связь между блоками.

Результат будет таким:

Удаление связей

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

Moving links

You can move links on the workspace using drag-n-drop. When clicking on a link, the dedicated handles will come up on it.

Oval handles

The oval handles allow you to move the link horizontally and vertically. To do this, hold down the handle with the left mouse button and drag it in the needed direction.

Note, if you move the link with the direct type, it will get the edges type. If such a link has an arrow, you need to make sure that the handle with this arrow is connected to the nearest edge marker of the block. Otherwise, the arrow will be overlapped by the block.

Round handles on the link edges

You can change the start and end points of a link dragging it by the round handles on the link edges. You can connect these handles to any marker of the current or any other block, as well as leave them on an empty space of the workspace. To do this, hold down the handle with the left mouse button and drag it to the desired place.

Note, if you leave the handle on an empty space and change the link type or apply the auto-placement, it will return back to the block it was connected to before moving.

Round handles on the link bends

You can move the bends of the link with the edges type using the round handles on these bends. To do this, hold down the handle with the left mouse button and drag it to the desired place.

Individual link settings

Чтобы задать индивидуальные настройки для конкретной связи, необходимо кликнуть по ней на рабочей области. Панель настроек отобразит индивидуальные настройки связей:

Здесь вы можете задать:

  • параметры стрелки
  • режим связи
  • стили для связи.

Параметры стрелки

В секции Link arrow вы можете задать тип, направление и размер стрелки для текущей связи.

По умолчанию, связи отображаются без стрелок (выбрано значение none).

Чтобы задать тип стрелки, кликните по селектору выбора типа и выберете нужную опцию из выпадающего списка.

Чтобы изменить направление стрелки, кликните по иконке с двумя стрелками.

Чтобы задать размер стрелки, кликните по крайнему правому полю секции и укажите нужное значение. Также можно воспользоваться специальными стрелками (увеличить/уменьшить значение) в правой части этого поля (появляются при наведении курсора или когда поле находится в фокусе).

Тип связи

В секции Link mode вы можете задать режим текущей связи. Для этого предусмотрены специальные иконки, которые позволяют сделать связь либо “угловой”, либо “прямой”.

Стили для связи

В секции Line style вы можете задать цвет, тип штриха и толщину текущей связи.

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

Чтобы задать тип связи, кликните по селектору выбора типа и выберите нужную опцию из выпадающего списка.

Чтобы задать толщину связи, кликните по крайнему правому полю секции и укажите нужное значение. Также можно воспользоваться специальными стрелками (увеличить/уменьшить значение) в правой части этого поля (появляются при наведении курсора или когда поле находится в фокусе).

Наверх