ui.diagram

Since 8.3

Мощный инструмент для построения даграмм.

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

Инициализация

webix.ui({
  view:"diagram",
  data: [
    { id: "1", value: "Block 1", type: "plus"}
  ],
});

С чего начать

Methods
add добавляет элемент в DataStore
addCss применяет CSS-класс к элементу компонента
addShape добавляет произвольную SVG фигуру
adjust подстраивает размеры компонента под размеры HTML-контейнера
adjustItem подстраивает ширину/высоту блока под его содержимое
attachEvent задает обработчик внутреннего события компонента
autoPlace включает/выключает авторазмещение блоков
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
clearAll удаляет все элементы из компонента
clearCss удалить CSS-класс у всех элементов
count возвращает количество элементов, отображаемых в компоненте на момент вызова
customize переопределяет свойство "item"
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
exists проверяет, существует ли элемент с указанным ID
filter фильтрует данные в компоненте
find возвращает все элементы данных, соответствующие заданному критерию, или только первый из элементов
getChildViews возвращает внутренние компоненты
getFirstId возвращает ID первого элемента
getFormView возвращает объект формы, которой принадлежит компонент
getIdByIndex возвращает id элемента по указанному индексу
getIndexById возвращает индекс элемента по заданному ID
getItem возвращает объект элемента данных по заданному ID
getItemNode возвращает HTML элемента
getItemValue возвращает текущее значение блока
getLastId возвращает ID последнего элемента
getLinkItemNode возвращает HTML элемент ссылки
getLinks возвращает коллекцию связей между блоками
getNextId возвращает ID элемента, расположенного после указанного элемента на заданной относительной позиции
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getPrevId возвращает ID элемента, расположенного до указанного элемента на заданной относительной позиции
getScrollState возвращает позицию скролла
getSelectedId возвращает id выбранного элемента(ов)
getSelectedItem возвращает выбранный элемент данных
getShape возвращает объект настроек указанной фигуры
getShapes возвращает коллекцию фигур
getTopParentView возвращает самого верхнего родителя
hasCss проверяет есть ли у элемента указанный CSS-класс
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
isEnabled проверяет, активен или заблокирован компонент
isSelected проверяет, выбран указанный элемент или нет
isVisible проверяет, виден ли компонент
load загружает данные из внешнего источника данных
loadNext отправляет запрос на загрузку определённого количества строк данных (до конца имеющихся данных или до определённой позиции)
locate получает ID элемента по связанному с ним HTML событию
mapEvent направляет события от одного компонента к другому
parse загружает данные, доступные на клиенте
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
refresh перерисовывает компонент или один из его элементов
remove удаляет указанный элемент(ы) из DataStore
removeCss удаляет CSS-класс у элемента компонента
render отрисовывает указанный элемент или весь компонент
resize перерисовывает компонент после изменения размеров
scrollTo прокручивает содержимое компонента до определенной позиции
select выбирает указанный элемент(ы)
selectAll выбирает все элементы или элементы из указанного диапазона id
serialize сериализует данные в массив JSON объектов
setShape используется для конфигурации фигур
show делает компонент видимым
sort сортирует DataStore
sync позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
unselect убирает выделение с указанного элемента
unselectAll убирает выделение со всех элементов
updateItem обновляет элемент данных (изменяет его поля)
waitSave позволяет определить момент, когда операции над данными были сохранены на сервер
Events
onAfterAdd срабатывает после добавления элемента в DataStore
onAfterContextMenu срабатывает после вызова контекстного меню
onAfterDelete срабатывает после удаления элемента
onAfterLoad срабатывает после завершения загрузки данных
onAfterRender происходит сразу после рендеринга компонента
onAfterScroll срабатывает, когда компонент прокручивается в любом направлении
onAfterSelect срабатывает после выбора элемента
onAfterSort срабатывает после сортировки данных
onBeforeAdd срабатывает перед добавлением элемента в DataStore
onBeforeContextMenu срабатывает перед вызовом контекстного меню
onBeforeDelete срабатывает перед удалением элемента
onBeforeLoad запускается непосредственно перед началом загрузки данных
onBeforeRender происходит непосредственно перед отрисовкой компонента
onBeforeSelect срабатывает перед выбором элемента
onBeforeSort срабатывает перед сортировкой данных
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onDataRequest срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных
onDataUpdate срабатывает при обновлении элемента данных
onDestruct происходит, когда компонент был разрушен деструктором
onItemClick срабатывает после клика по элементу компонента
onItemDblClick срабатывает после двойного клика по элементу компонента
onItemRender срабатывает при перерисовке элементов с заданным пользователем темплейтом
onItemSingleClick позволяет различать события одиночного и двойного клика
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onMouseMove срабатывает при наведении мыши на указанный компонент
onMouseMoving срабатывает при наведении указателя мыши на компонент
onMouseOut срабатывает, когда курсор мыши убирается с указанного элемента
onSelectChange срабатывает после изменения выбора
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
ariaLabel задает ярлыки для скринридера
autoplace определяет, необходимо ли разместить блоки автоматически
borderless скрывает или показывает границы компонента
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datathrottle устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса)
datatype тип загружаемых данных
disabled блокирует или разблокирует компонент
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
item объект с настройками для элементов
linkItem объект с настройками для ссылок
linkType алиас для свойства linkItem
links определяет источник данных для ссылок
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
mouseEventDelay задержка между реальным действием мыши и вызовом связанных событий
multiselect включает режим выбора нескольких элементов
on позволяет присоединять обработчики к внутренним событиям компонента
onClick присоединяет обработчик клика для частей компонента с указанным классом CSS
onContext свойство, используемое для определения пользовательских обработчиков контекстного клика (клика правой кнопкой мыши) для элементов в ячейках DataTable
onDblClick обрабатывает двойные клики по областям и элементам компонентов (по названию их CSS-классов)
onMouseMove обрабатывает событие mousemove для элементов компонента с указанным классом CSS
padding задаёт отступ между диаграммой и её содержимым
ready обработчик, который вызывается сразу после того, как компонент полностью инициализирован
removeMissed определяет что должно происходить с элементами данных при перезагрузке
root хранит ID корневого элемента для авторазмещения
save определяет URL для сохранения данных
scheme определяет схему для обработки данных
scroll включает/отключает полосу прокрутки
scrollSpeed время, в течение которого компонент прокручивается до указанной позиции (в миллисекундах)
select включает/отключает выбор одного или нескольких элементов в компонентах
shapes хранит конфигурацию фигур диаграммы
template определяет темплейт компонента
tooltip задает тултип, который появится при наведении курсора на элемент
treePadding определяет отступ между независимыми деревьями
type алиас для свойства item
url путь к данным, которые загрузятся в компонент сразу после инициализации
width задает ширину компонента
zoom определяет текущее значение зума
Other
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$onLoad действие по умолчанию при загрузке данных
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$tooltipIn показывает тултип
$tooltipMove определяет поведение тултипа в момент, когда курсор перемещается над компонентом или HTML-областью
$tooltipOut определяет поведение тултипа в момент, когда курсор выходит за пределы компонента или HTML-области
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
data DataStore компонента
name возвращает имя компонента (свойство только для чтения)
on_click переопределяет обработку кликов по элементам компонента
on_context свойство, используемое для определения пользовательских обработчиков клика правой кнопкой мыши для элементов в компонентах
on_dblclick определяет обработчики для двойных кликов по элементам компонентов (по названию их CSS-класса)
on_mouse_move добавляет обработчик для события mousemove над элементами компонентов (по названию их CSS-класса)
waitData конечный результат загрузки данных в компонент (промис)
Наверх