Перейти к основному содержимому

Свойства Group

Примечание

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

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

const data = [
    // объект группы
    {
        type: "$group",
        id?: string | number,
        x?: number,
        y?: number,
        width: number,
        height: number,
        groupChildren?: array,
        open?: boolean, // true по умолчанию
        fixed?: boolean, // false по умолчанию
        style?: {
            strokeWidth?: number, // 1 по умолчанию
            stroke?: string, // "#DEDEDE" по умолчанию
            fill?: string,
            overFill?: string,
            partiallyFill?: string
        },
        exitArea?: {
            // "unbound" по умолчанию
            groupBehavior?: "unbound" | "boundNoBorderExtension" | "boundBorderExtension",
            padding?: number
        },
        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", // "top" по умолчанию
            editable?: boolean, // true по умолчанию
            closable?: boolean, // false по умолчанию
            enable?: boolean // true по умолчанию
        },
        [key: string]?: any
    },
    // другие объекты групп
];

Описание​

Объект группы содержит список свойств конфигурации, которые позволяют настроить позиционирование и внешний вид группы:

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

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

  • fixed - (необязательное) включает/отключает возможность перемещения и изменения размера группы; false по умолчанию
  • style - (необязательное) объект с настройками стиля группы. Объект может содержать следующие атрибуты:
    • strokeWidth - (необязательное) ширина границы группы, 1 по умолчанию
    • stroke - (необязательное) цвет границы группы, "#DEDEDE" по умолчанию
    • fill - (необязательное) цвет фона группы
    • overFill - (необязательное) цвет фона группы, когда пользователь удерживает элемент и перемещает его внутрь/наружу группы при условии, что весь элемент находится внутри группы
    • partiallyFill - (необязательное) цвет фона группы, когда пользователь удерживает элемент и перемещает его внутрь/наружу группы при условии, что часть элемента находится за пределами группы, а прочие настройки не заданы через атрибут exitArea
  • exitArea - (необязательное) объект с настройками, которые будут применены к элементу, когда пользователь перетаскивает его за пределы группы (применяется только к дочерним элементам первого уровня вложенности группы). Объект может содержать следующие атрибуты:
    • groupBehavior - (необязательное) поведение дочернего элемента группы, когда пользователь перемещает его за пределы группы:
      • "unbound" (по умолчанию) - пользователь может перемещать элемент внутрь или за пределы группы
      • "boundNoBorderExtension" - пользователь может переместить элемент в группу, но не может перетащить его за пределы группы, если элемент уже был помещён внутрь группы. Элемент не будет расширять границы группы, когда пользователь пытается перетащить его за пределы группы
      • "boundBorderExtension" - пользователь может переместить элемент в группу, но не может перетащить его за пределы группы, если элемент уже был помещён внутрь группы. Элемент будет расширять границы группы, когда пользователь пытается перетащить его за пределы группы
        Связанный пример: Редактор Diagram. Режим по умолчанию. Взаимодействие Groups и фигур
    • padding - (необязательное) определяет отступ между группой и краем элемента при перемещении элемента внутри группы
    Подсказка

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

  • header - (необязательное) объект с настройками конфигурации заголовка группы. Атрибуты:
    • 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 - (необязательное) позиционирование заголовка группы: "top" (по умолчанию) | "bottom" | "left" | "right"
    • editable - (необязательное) включает/отключает возможность редактирования текста заголовка двойным щелчком по нему; true по умолчанию
    • closable - (необязательное) показывает/скрывает иконку, предназначенную для разворачивания/сворачивания группы; false по умолчанию
    • enable - (необязательное) показывает/скрывает заголовок группы; true по умолчанию
  • key - (необязательное) пользовательское свойство с вашей собственной логикой, реализованной "под капотом"

Пример​

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {
            text: "Top and collapsed header with tеxt alignment",
            editable: true,
            closable: true,
            textAlign: "left", // "left", "center", "right"
            textVerticalAlign: "center", // "top", "center", "bottom"
        },
      	// дочерние элементы группы
        groupChildren: [1.1, 1.2],
        open: false
    },
  	// настройка фигур для добавления в группу
    { type: "rectangle", id: 1.1, x: 50, y: 75, text: "Shape 1.1" },
    { type: "rectangle", id: 1.2, x: 200, y: 75, text: "Shape 1.2" }
];

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

Свойства, специфичные для объекта "project"​

Объект "project" используется как контейнер для задач и вех. Он работает как Group, позволяет создавать PERT-диаграммы различных уровней вложенности и обеспечивает визуальную группировку.

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

const data = [
    // объект project
    {
        type: "project",
        id: string | number,
        parent?: string | number | null,
        text?: string, // задаёт свойство header.text
        open?: boolean,

        // генерируется автоматически
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        groupChildren?: (string | number)[],
        style?: {
            fill?: string, // "#20B56D08" по умолчанию
            stroke?: string, // "#20B56D33" по умолчанию
            borderStyle?: string, // "dashed" по умолчанию
        },
        header?: {
            height?: number, // 40 по умолчанию
            text?: string, // генерируется автоматически на основе свойства text
            closable?: boolean, // false по умолчанию
            enable?: boolean, // true по умолчанию
            fill?: string // "inherit" по умолчанию
        }
    },
    // другие объекты project
]

Описание​

При подготовке набора данных для объекта "project" вы можете использовать следующие свойства конфигурации:

  • type - (обязательное) тип элемента, укажите значение "project"
  • id - (необязательное) уникальный id проекта
  • parent - (необязательное) id родителя проекта
  • text - (необязательное) описание проекта
  • open - (необязательное) определяет, инициализируется ли проект в развёрнутом (true, по умолчанию) или свёрнутом (false) состоянии

Свойства ниже генерируются автоматически. Они вычисляются во время рендеринга, и их не следует задавать вручную.

  • x - (необязательное) координата x положения проекта
  • y - (необязательное) координата y положения проекта
  • width - (обязательное) ширина проекта, включая его заголовок (position: left/right)
  • height - (обязательное) высота проекта, включая его заголовок (position: top/bottom)
  • groupChildren - (необязательное) массив с id дочерних элементов первого уровня вложенности проекта
  • style - (необязательное) объект с настройками стиля проекта. Объект может содержать следующие атрибуты:
    • fill - (необязательное) цвет фона проекта
    • stroke - (необязательное) цвет границы проекта
    • borderStyle - (необязательное) стиль границы проекта
  • header - (необязательное) объект с настройками конфигурации заголовка проекта. Атрибуты:
    • height - (необязательное) высота заголовка, 40 по умолчанию
    • text - (необязательное) текст, отображаемый в заголовке (генерируется автоматически на основе свойства text)
    • closable - (необязательное) показывает/скрывает иконку, предназначенную для разворачивания/сворачивания группы; false по умолчанию
    • enable - (необязательное) показывает/скрывает заголовок проекта; true по умолчанию
    • fill - (необязательное) цвет фона заголовка

Пример​

const data = [
    {
        "id": "4.2",
        "text": "QA Testing",
        "type": "project",
        "parent": "4",
        "start_date": new Date(2026, 1, 18),
        "duration": 3,
        "progress": 0,
        "open": true
    },
    {
        "id": "4.2.1",
        "text": "Functional Testing",
        "type": "task",
        "parent": "4.2",
        "start_date": new Date(2026, 1, 18),
        "duration": 2
    },
    {
        "id": "4.2.2",
        "text": "Usability Testing",
        "type": "task",
        "parent": "4.2",
        "start_date": new Date(2026, 1, 20),
        "duration": 1
    }
];

Полезная статья: Группировка фигур в режиме PERT

Need more help?Contact Support