Коннекторы в Diagram – это линии, которые визуально соединяют блоки. В этой статье вы узнаете как настраивать коннекторы и управлять ими.
Данные коннекторов загружаются в Diagram через соответствующее свойство links в объекте конфигурации. В качестве источника данных для коннекторов вы можете использовать следующее:
{
view:"diagram",
data:[/* данные для блоков */],
links:"remote/data/links"
// или
links:[
/* данные для коннекторов */
]
}
Если данные приходят в формате XML, вам нужно указать свойство datatype в значении "xml":
webix.ui({
view:"diagram",
datatype:"xml", links:"remote/links.xml",
url:"remote/data.xml"
});
Помните, что у всех входящих данных (как для блоков так и для коннекторов) должен быть одинаковый формат: JSON или XML.
Коннекторы отражают отношения между блоками. Для их конфигурации предусмотрены следующие свойства:
Для каждого коннектора вы также можете указать следующие параметры:
Вы также можете настраивать стрелку коннектора:
Чтобы избежать конфликтов при указании пути ссылок, изучите следующую информацию:
line
указано, Diagram отрисует ссылки в соответствии со значениями массива from
и to
, а поле line
не указано, Diagram отрисует ссылки в соответствии с заданными значениямиmode
, а from
, to
, и line
- нет, Diagram отрисует ссылки в соответствии с указанным режимом. В этом случае ссылка будет соединять центры блоковline
, но from
или to
- нет, ссылка не будет следовать за своим исходным/целевым блоком при drag-n-dropautoPlace()
, ссылки отрисуются в соответствии с их режимом или режимом, заданным в linkItem
(поля from
, to
, и line
будут удалены). В этом случае ссылка будет соединять центры блоков.Чтобы настроить каждый коннектор отдельно, добавьте вышеупомянутые свойства в объект его настроек и укажите для них необходимые значения:
webix.ui({
view:"diagram",
data:[/* данные для блоков */],
links:[
{
source:"1",
target:"1.2",
lineColor:"#2d9bf0"
},
// другие коннекторы
]
});
Чтобы указать глобальные настройки для всех коннекторов виджета, определите их в объекте свойства linkItem конструктора Diagram. Вы можете указать css, mode (только “edges” или “direct”), arrow, arrowCSS и arrowSize свойства:
webix.ui({
view:"diagram",
data:[/* данные для блоков */],
links:"remote/data/links",
linkItem:{
css:"cssForLinks",
mode:"direct",
arrow:true,
arrowCss:"cssForArrows",
arrowSize:5
}
});
Стоит отметить, что у индивидуальных настроек приоритет выше чем у глобальных.
Виджет Diagram предлагает 4 стандартных типа коннекторов: “edges”, “direct”, “child”, и “sibling”.
Коннекторы типа "edges" отображаются в виде угловых линий, которые идут от центра одного блока к верхнему/боковому краю другого.
Коннекторы типа "direct" отображаются в виде прямых линий, которые соединяют два блока.
Коннекторы типа "child" lпомогают соединять блоки, у которых есть родительский и дочерние элементы. Дочерние элементы расположены под родительским в виде списка. На изображении ниже вы можете увидеть "child" коннекторы, подсвеченные фиолетовым цветом.
Коннекторы типа "sibling" помогают соединять родственные блоки, которые расположены в виде списка (например, дочерние элементы одного родителя). На изображении ниже вы можете увидеть "sibling" коннекторы, подсвеченные зеленым цветом.
webix.ui({
view:"diagram",
linkItem:{
mode:"direct", // для всех коннекторов, у которых нет собственного режима
},
links:[
{ source:"1.2.1", target:"1.2.1.1", mode:"child" },
{ source:"1.2.1.1", target:"1.2.1.2", mode:"sibling"},
// ... другие коннекторы
],
});
Related sample: Diagram: Link Mode Priority
Вы можете задать желаемую ширину, цвет и стиль коннектора. Цвет и ширина будут распространяться и на стрелку.
Вы можете указать эти параметры в виде набора данных:
// набор данных с настройками коннекторов
[
{
source:"1",
target:"1.2",
lineColor:"#61b578",
linkStyle:"dotted",
lineWidth:2
}
]
Чтобы задать общие стили для всех коннекторов, определите объект свойства linkItem внутри конструктора Diagram. Внутри объекта укажите название CSS класса через свойство css:
{
view:"diagram",
links:[/* объекты с настройками коннекторов */],
linkItem:{
css:"common_links" }
}
Если вам нужно стилизовать конкретный коннектор, укажите его CSS класс через свойство $css в соответствующем объекте настроек:
// набор данных с настройками коннекторов
[
{
source:"1",
target:"1.2",
$css:"styles_for_link" }
]
Виджет Diagram позволяет отображать классические стрелки (по умолчанию), а также пустые или заполненные треугольники. Они указывают направление коннектора.
Для каждого отдельного коннектора вы можете задать необходимый тип стрелки или вообще убрать ее:
view:"diagram",
links:[
// пустой треугольник
{ source:"1", target:"1.2", arrow:"triangle" },
// заполненный треугольник
{ source:"1", target:"1.2", arrow:"triangle", backgroundColor:"#CCD7E6" },
// без стрелки
{ source:"1.2", target:"1.2.2", arrow:false }
]
Вы также можете задать размер стрелки и прозрачность ее фона:
{
source:"1", target:"1.2"
arrow:"triangle",
arrowSize:4,
backgroundColor:"#CCD7E6", fillOpacity:"50%",
}
Чтобы задать общие стили для всех стрелок, определите объект свойства linkItem внутри конструктора Diagram. Внутри объекта укажите название CSS класса через свойство arrowCss:
{
view:"diagram",
links:[/* объекты с настройками коннекторов */],
linkItem:{
arrowCss:"common_arrows" }
}
Если вам нужно стилизовать конкретную стрелку, укажите ее CSS класс через свойство $arrowCss в объекте настроек нужного коннектора:
// набор данных с настройками коннекторов
[
{
source:"1",
target:"1.2",
$arrowCss:"styles_for_arrow" }
]
Related sample: Diagram: Styling Links
Если вам необходимо, чтобы линии и стрелки были отрисованы с помощью фиксированных координат, вы можете задать их в соответствующих массивах line и arrow.
Каждый элемент массива является сегментом линии/стрелки. Это может быть либо другой массив с двумя числами, которые представляют координаты X и Y, либо строка с числами, разделенными запятой. Правило работает одинаково для обоих случаев - последовательно задайте координаты сегментов линии/стрелки.
// набор данных с настройками коннекторов
[
{
source:"core",
target:"query",
line:["300,230", "180,205", "100,205"],
arrow:["300,101", "298,104", "292,98", "285,100"]
// или
line:[[300,230], [180,205], [100,205]],
arrow:[[300,101], [298,104], [292,98]]
},
// другие коннекторы
]
Related sample: Diagram: Custom Links
Отправной точкой для стрелок и линий является левый верхний угол виджета (0, 0).
На стороне клиента коннекторы хранятся в хранилище под названием DataCollection. Чтобы получить доступ к коллекции, вызовите метод getLinks для Diagram:
const links = $$("diagram1").getLinks();
Вы можете работать с коллекцией при помощи соответствующего API. Например, вы можете получить массив коннекторов через сериализацию коллекции:
const linksArray = $$("diagram1").getLinks().serialize();
/*
[
{id:161968034646, source:"core", target:"diagram" },
{
$arrowCss:"batman",
arrow:["300,101", "298,104"],
id:1619680346462
source:"core",
target:"kanban"
}
// ...
]
*/
Наверх