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

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

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

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

Блоки распределяются автоматически в соответствии с их отношениями, которые определяются в массиве коннекторов.

Как включить авторазмещение

Авторазмещение включено по умолчанию. За него отвечает свойство autoplace.

webix.ui({
  view:"diagram",
  root:"blockId",
  // не обязательный параметр (установлен по умолчанию)
  autoplace:true 
});

Свойство root определяет главный блок, от которого начинается автоматическое ветвление. Если root не указан, то Diagram определит его самостоятельно.

Вы также можете включать/выключать авторазмещение динамически. Для этого предусмотрен метод autoPlace:

$$("diagram1").autoPlace();
 
// или, передайте id корневого блока в качестве параметра
$$("diagram1").autoPlace("blockId");

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

При активации авторазмещения следующие операции также вызывают пересчёт расположения блоков:

добавление/обновление/удаление

const diagram = $$("diagram1");
 
// добавление блоков
diagram.add({id: newId});
// при необходимости, можно связать его с любым другим блоком
diagram.getLinks().add({source:blockId, target:newId});

сортировка и фильтрация

{view:"search", placeholder:"Type to search", width:700, on:{
  onTimedKeyPress:function(){
    const value = this.getValue().toLowerCase();
    // фильтрует блоки в соответствии с введенным значением
    $$("diagram1").filter("value", value);
  }
}}

Как установить отступы между блоками

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

margin (number) - определяет минимальный отступ вокруг блока. Расстояние измеряется между центрами блоков
marginX (number) - определяет горизонтальный отступ для блоков с иерархической структурой расположения
marginY (number) - определяет вертикальный отступ для блоков с иерархической структурой расположения. По умолчанию, вертикальный отступ равен максимальному из значений ширины и высоты блока плюс значение свойства margin. Иногда, нужно будет установить отрицательное значение для этого свойства, чтобы задать желаемое расстояние между блоками
listMarginX (number) - определяет отступ между левым краем родителя и левым краем его дочерних элементов, которые расположены в виде списка.

Свойство item позволяет задать отступы глобально для всех элементов:

{
  view:"diagram",
  item:{
    marginX: 50,
    marginY: -20
  }
}

margin

marginX и marginY

listMarginX

Помните, что эти отступы можно устанавливать только в том случае, если autoplace активирован.

Как установить отступы между диаграммами

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

webix.ui({
  view:"diagram",
  root:"root",
  treePadding:150,   // ...
});

Размещение с помощью фиксированных координат

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

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

view:"diagram",
autoplace:false, // настройки блоков
data:[
  { id:"n1", x:800, y:320 },
  { id:"n2", x:800, y:500 },
  { id:"n3", x:1000, y:500 }
]

Размещение меток коннекторов

Метка коннектора - особый тип блока. Позиция блока этого типа задаётся относительно коннектора, к которому привязана метка. Подробнее см. выравнивание меток.

Наверх