Swimlanes

Обзор Swimlane

Swimlane представляет собой прямоугольный элемент Diagram, состоящий из ячеек (или дорожек), расположенных вертикально или горизонтально. Каждая ячейка (type: "$sgroup") может включать дочерние элементы, такие как фигуры или Groups.

Примечание

Swimlanes доступны только в режиме по умолчанию для Diagram/Diagram Editor (type: "default").

Swimlanes помогут визуализировать любой процесс (бизнес-процесс, производственный, сервисный или любой другой) или его отдельные части от начала до конца.

Создание Swimlanes

Чтобы создать Swimlane, укажите type: "$swimlane" и определите структуру layout объекта Swimlane при подготовке набора данных для загрузки в Diagram:

const data = [
    // настройка swimlane
    {
        type: "$swimlane",
        height: 500,
        width: 850,
        // layout swimlane должен содержать не менее одной ячейки
        layout: [
            [1] // ячейка с id:"1" и type:"$sgroup"
        ]
    }
];

// инициализация Diagram
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Приведённый выше пример кода показывает простейшую конфигурацию Swimlane с настройками по умолчанию (т.е. без заголовка и подзаголовка).

Структура Swimlane

Структура Swimlane может быть весьма разной. Она определяется через свойство конфигурации layout объекта Swimlane. Это свойство позволяет располагать ячейки Swimlane по строкам и столбцам.

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

// swimlane с 3 столбцами
layout: [
    [1, 2, 3]
]

так и набором массивов, разделённых запятыми:

// swimlane с 2 строками и 3 столбцами
layout: [
    [1, 2, 3],
    [4, 5, 6]
]

где:

• каждая ячейка в layout имеет уникальный номер;
• количество массивов определяет количество строк (если массивов несколько, количество ячеек должно быть одинаковым во всех массивах);
• количество ячеек в массиве определяет количество столбцов.

Свойства объекта Swimlane

Ознакомьтесь с полным списком свойств конфигурации объекта Swimlane, чтобы иметь возможность создавать различные Swimlanes с разными настройками в зависимости от ваших потребностей.

Настройка ячейки Swimlane

При инициализации Swimlane на странице id ячейки Swimlane, а также её конфигурация, генерируются автоматически. Чтобы изменить конфигурацию ячейки по умолчанию, создайте объект ячейки, который должен включать атрибуты type: "$sgroup" и id, и укажите в нём необходимые настройки конфигурации:

const data = [
    // настройка swimlane
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 850,
        layout: [
            [1, 2, 3]
        ]
    },
    // настройка ячейки swimlane
    {
        type: "$sgroup",
        id: 3,
        style: {
            fill: "#D4DAE4"
        }
    }
];

Свойства объекта ячейки

Ознакомьтесь с полным списком свойств конфигурации ячейки Swimlane.

Группировка ячеек

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

layout: [
    [1, 2, 3],
    [4, 5, 6]
]

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

layout: [
    [1, 1, 3],
    [4, 5, 6]
]

Результат будет выглядеть следующим образом:

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

layout: [
    [1, 2, 3],
    [4, 2, 6]
]

Результат:

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

Размеры Swimlane и её ячеек

Размер Swimlane определяется атрибутами конфигурации width и height Swimlane.

const data = [
    // настройка swimlane
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 850,
        layout: [
            [1, 2, 3]
        ]
    }
];

Ширина ячейки

Ширина ячейки зависит от ширины Swimlane, количества столбцов и высоты левого/правого заголовка и подзаголовка Swimlane. Например:

const data = [
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 830,
        layout: [
            // 3 столбца
            [1, 2, 3]
        ],
        header: {
            position: "left",
            height: 40
        },
        subHeaderRows: {
            enable: true,
            position: "left",
            height: 40
        }
    }
];

Ширина каждой ячейки может быть рассчитана как (830-40-40)/3 = 250.

Высота ячейки

Высота ячейки зависит от высоты Swimlane, количества строк и высоты верхнего/нижнего заголовка и подзаголовка Swimlane. Например:

const data = [
    {
        type: "$swimlane",
        id: "main",
        height: 500,
        width: 830,
        layout: [
            // 2 строки
            [1, 2, 3],
            [4, 5, 6]
        ],
        header: {
            position: "top",
            height: 40
        },
        subHeaderCols: {
            enable: true,
            position: "top",
            height: 40
        }
    }
];

Высота каждой ячейки может быть рассчитана как (500-40-40)/2 = 210.