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

Примечание

Указывайте значения цвета в формате HEX.

Свойства Swimlane

Использование

const data = [
    // объект swimlane
    {
        type: "$swimlane",
        id?: string | number,
        width: number,
        height: number,
        x?: number,
        y?: number,
        layout: array,
        fixed?: boolean,
        open?: boolean, // true по умолчанию
        style?: {
            strokeWidth?: number, // 1 по умолчанию
            stroke?: string,
            fill?: string
        },
        header?: {
            height?: number, // 40 по умолчанию
            fill?: string,
            text?: string,
            fontSize?: number, // 14 по умолчанию
            lineHeight?: number, // 14 по умолчанию
            textAlign?: "left" | "center" | "right", // "center" по умолчанию
            textVerticalAlign?: "top" | "center" | "bottom", // "center" по умолчанию
            fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию
            fontColor?: string, // "#4C4C4C" по умолчанию
            fontWeight?: string, // "500" по умолчанию
            iconColor?: string, // "#808080" по умолчанию
            position?: "top" | "bottom" | "left" | "right",
            editable?: boolean, // true по умолчанию
            closable?: boolean, // false по умолчанию
            enable?: boolean // true по умолчанию
        },
        subHeaderRows?: {
            height?: number | string, // 40 по умолчанию
            position?: "left" | "right",
            enable?: boolean, // true по умолчанию
            fill?: string,
            fontSize?: number, // 14 по умолчанию
            lineHeight?: number, // 14 по умолчанию
            textAlign?: "left" | "center" | "right", // "center" по умолчанию
            textVerticalAlign?: "top" | "center" | "bottom", // "center" по умолчанию
            fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию
            fontColor?: string, // "#4C4C4C" по умолчанию
            fontWeight?: string, // "500" по умолчанию
            iconColor?: string, // "#808080" по умолчанию
            editable?: boolean, // true по умолчанию
            headers?: [
                // объект заголовка
                {
                    id?: string,
                    text: string,
                    fill?: string,
                    fontSize?: number, // 14 по умолчанию
                    lineHeight?: number, // 14 по умолчанию
                    textAlign?: "left" | "center" | "right", // "center" по умолчанию
                    textVerticalAlign?: "top" | "center" | "bottom", // "center" по умолчанию
                    fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию
                    fontColor?: string, // "#4C4C4C" по умолчанию
                    fontWeight?: string, // "500" по умолчанию
                    iconColor?: string, // "#808080" по умолчанию
                    editable?: boolean // true по умолчанию
                },
                // другие объекты заголовков
            ]
        },
        subHeaderCols?: {
            position?: "top" | "bottom",
            // ... остальные атрибуты аналогичны атрибутам subHeaderRows
        },
        [key: string]?: any
    }
    // другие объекты swimlane
];

Описание

Каждый объект Swimlane может включать следующие свойства конфигурации:

• type - (обязательное) тип элемента, укажите значение "$swimlane"
• id - (необязательное) уникальный id Swimlane
• width - (обязательное) ширина Swimlane, включая её заголовок (position: left/right)
• height - (обязательное) высота Swimlane, включая её заголовок (position: top/bottom)
• x - (необязательное) координата x положения Swimlane
• y - (необязательное) координата y положения Swimlane
• layout - (обязательное) массив с матричным представлением ячеек Swimlane
• fixed - (необязательное) включает/отключает возможность перемещения и изменения размера Swimlane; false по умолчанию
• open - (необязательное) определяет, инициализируется ли Swimlane в развёрнутом (true, по умолчанию) или свёрнутом (false) состоянии

Подсказка

Свойство open работает, если header инициализирован с атрибутом closable

• style - (необязательное) объект с настройками стиля Swimlane. Объект может содержать следующие атрибуты:
  • strokeWidth - (необязательное) ширина границы Swimlane, 1 по умолчанию
  • stroke - (необязательное) цвет границы Swimlane, "#DEDEDE" по умолчанию
  • fill - (необязательное) цвет фона всех ячеек Swimlane
• header - (необязательное) объект с настройками конфигурации заголовка Swimlane. Атрибуты:
  • height - (необязательное) высота заголовка, 40 по умолчанию
  • fill - (необязательное) цвет фона заголовка
  • text - (необязательное) текст, отображаемый в заголовке
  • fontSize - (необязательное) размер шрифта в пикселях, 14 по умолчанию
  • lineHeight - (необязательное) высота строки, 14 по умолчанию
  • textAlign - (необязательное) выравнивание текста в заголовке: "left", "center" (по умолчанию), "right"
  • textVerticalAlign - (необязательное) вертикальное выравнивание текста в заголовке: "top", "center" (по умолчанию), "bottom"
  • fontStyle - (необязательное) стиль шрифта текста: "normal" (по умолчанию), "italic", "oblique"
  • fontColor - (необязательное) цвет шрифта текста, "#4C4C4C" по умолчанию
  • fontWeight - (необязательное) насыщенность шрифта текста, возможные значения: "normal", "bold", "bolder", "lighter", значения "100"-"900", где "400" соответствует normal, а "600" и выше - самый жирный шрифт; "500" по умолчанию
  • iconColor - (необязательное) цвет иконки заголовка, "#808080" по умолчанию
  • position - (необязательное) позиционирование заголовка Swimlane: "top" (по умолчанию) | "bottom" | "left" | "right"
  • editable - (необязательное) включает/отключает возможность редактирования текста заголовка двойным щелчком по нему; true по умолчанию
  • closable - (необязательное) показывает/скрывает иконку, предназначенную для разворачивания/сворачивания Swimlane; false по умолчанию
  • enable - (необязательное) показывает/скрывает заголовок Swimlane; true по умолчанию
• subHeaderRows - (необязательное) объект с настройками конфигурации левых/правых подзаголовков Swimlane. Объект содержит следующие атрибуты:
  • height - (необязательное) высота подзаголовков, 40 по умолчанию
  • position - (необязательное) позиционирование подзаголовков: "left" | "right"
  • enable - (необязательное) показывает/скрывает подзаголовки Swimlane; true по умолчанию
  • fill - (необязательное) цвет фона подзаголовков
  • fontSize - (необязательное) размер шрифта в пикселях, 14 по умолчанию
  • lineHeight - (необязательное) высота строки, 14 по умолчанию
  • textAlign - (необязательное) выравнивание текста в подзаголовках: "left", "center" (по умолчанию), "right"
  • textVerticalAlign - (необязательное) вертикальное выравнивание текста в подзаголовках: "top", "center" (по умолчанию), "bottom"
  • fontStyle - (необязательное) стиль шрифта текста: "normal" (по умолчанию), "italic", "oblique"
  • fontColor - (необязательное) цвет шрифта текста, "#4C4C4C" по умолчанию
  • fontWeight - (необязательное) насыщенность шрифта текста, возможные значения: "normal", "bold", "bolder", "lighter", значения "100"-"900", где "400" соответствует normal, а "600" и выше - самый жирный шрифт; "500" по умолчанию
  • iconColor - (необязательное) цвет иконки подзаголовков, "#808080" по умолчанию
  • editable - (необязательное) включает/отключает возможность редактирования текста подзаголовков двойным щелчком; true по умолчанию
  • headers - (необязательное) массив объектов подзаголовков. Каждый объект может содержать следующие свойства:
    • id - (необязательное) id подзаголовка
    • text - (обязательное) текст, отображаемый в подзаголовке
    • fill - (необязательное) цвет фона подзаголовка
    • fontSize - (необязательное) размер шрифта в пикселях, 14 по умолчанию
    • lineHeight - (необязательное) высота строки, 14 по умолчанию
    • textAlign - (необязательное) выравнивание текста в подзаголовке: "left", "center" (по умолчанию), "right"
    • textVerticalAlign - (необязательное) вертикальное выравнивание текста в подзаголовке: "top", "center" (по умолчанию), "bottom"
    • fontStyle - (необязательное) стиль шрифта текста: "normal" (по умолчанию), "italic", "oblique"
    • fontColor - (необязательное) цвет шрифта текста, "#4C4C4C" по умолчанию
    • fontWeight - (необязательное) насыщенность шрифта текста, возможные значения: "normal", "bold", "bolder", "lighter", значения "100"-"900", где "400" соответствует normal, а "600" и выше - самый жирный шрифт; "500" по умолчанию
    • iconColor - (необязательное) цвет иконки подзаголовка, "#808080" по умолчанию
    • editable - (необязательное) включает/отключает возможность редактирования текста подзаголовка двойным щелчком по нему; true по умолчанию
• subHeaderCols - (необязательное) объект с настройками конфигурации верхних/нижних подзаголовков Swimlane. Объект содержит следующий атрибут:
  • position - (необязательное) позиционирование подзаголовков: "top" | "bottom"
  • остальные атрибуты subHeaderCols совпадают с атрибутами subHeaderRows (см. подробности выше)
• key - (необязательное) пользовательское свойство с вашей собственной логикой, реализованной "под капотом"

Пример

const data = [
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "header": {
            "closable": true,
            "text": "Waterfall diagram template"
        },
        "layout": [
           [1, 2, 3, 4]
        ],
        "subHeaderCols": {
            "headers": [
                {
                    "text": "September",
                    "fill": "#f35c4f66"
                },
                {
                    "text": "October",
                    "fill": "#9b60f866"
                },
                {
                    "text": "November",
                    "fill": "#ffae1266"
                },
                {
                    "text": "December",
                    "fill": "#3cc97a66"
                }
            ]
        }
    }
];

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

Использование

const data = [
    // объект ячейки swimlane
    {
        type: "$sgroup",
        id?: string | number,
        groupChildren?: array,
        style?: {
            fill?: string,
            overFill?: string,
            partiallyFill?: string
        },
        exitArea?: {
            groupBehavior?: "unbound" | "boundNoBorderExtension", // "unbound" по умолчанию
            padding?: number
        }
    },
    // другие объекты ячеек swimlane
];

Описание

Свойства конфигурации ячейки Swimlane приведены ниже:

• type - (обязательное) тип ячейки Swimlane, укажите значение "$sgroup"
• id - (необязательное) уникальный id ячейки Swimlane
• groupChildren - (необязательное) массив с id дочерних элементов первого уровня вложенности ячейки
• style - (необязательное) объект с настройками стиля ячейки. Объект может содержать следующие свойства:
  • fill - (необязательное) цвет фона ячейки
  • overFill - (необязательное) цвет фона ячейки, когда пользователь удерживает элемент и перемещает его внутрь/наружу ячейки при условии, что не менее 75% площади элемента находится внутри ячейки
  • partiallyFill - (необязательное) цвет фона ячейки, когда пользователь удерживает элемент и перемещает его внутрь/наружу ячейки при условии, что 75% площади элемента или более находится за пределами ячейки, а прочие настройки не заданы через атрибут exitArea
• exitArea - (необязательное) объект с настройками, которые будут применены к элементу, когда пользователь перетаскивает его за пределы ячейки (применяется только к дочерним элементам первого уровня вложенности ячейки). Объект может содержать следующие атрибуты:
  • groupBehavior - (необязательное) поведение дочернего элемента ячейки, когда пользователь перемещает его за пределы ячейки:
    • "unbound" (по умолчанию) - пользователь может перемещать элемент внутрь или за пределы ячейки
    • "boundNoBorderExtension" - пользователь может переместить элемент в ячейку, но не может перетащить его за пределы ячейки, если элемент уже был помещён внутрь ячейки. Элемент не будет расширять границы ячейки, когда пользователь пытается перетащить его за пределы ячейки
  • padding - (необязательное) определяет отступ между ячейкой и краем элемента при перемещении элемента внутри ячейки.
    
  Подсказка

  Атрибут padding доступен, если groupBehavior установлен в значение "boundNoBorderExtension"

Пример

const data = [
  // настройка swimlane
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "layout": [
            [1, 2, 3, 4]
        ]
    },
    // настройка ячейки swimlane
    {
        "id": 1,
        "type": "$sgroup",
        "groupChildren": ["s1"],
        "style": {
            "fill": "#D4DAE4"
        },
        "x": 0,
        "y": 80
    },
    // настройка фигуры для добавления в ячейку
    {
        "id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110
    }
];

Полезная статья: Настройка Swimlanes

Связанные примеры:

• Diagram. Режим по умолчанию. Игровые уровни и локации
• Diagram. Режим по умолчанию. Шаблон Swimlane
• Diagram. Режим по умолчанию. Шаблон каскадной диаграммы
• Diagram. Режим по умолчанию. Пример матрицы Эйзенхауэра
  Подробности читайте в статье Как создать матрицу Эйзенхауэра на JavaScript с помощью DHTMLX