Groups

Обзор Group

Group — это отдельный тип элемента Diagram. Вы можете рисовать простые или более сложные схемы, группируя фигуры или другие Groups различными способами. Вы можете создавать как одноуровневые, так и вложенные Groups, а также настраивать их внешний вид и поведение.

Примечание

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

Создание Groups

Чтобы создать Group, укажите "$group" в качестве значения атрибута type внутри объекта группы при подготовке соответствующей JSON-структуры для загрузки в Diagram:

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {
            text: "User Access"
        },
        groupChildren: ["1.1", "1.2"]
    },
    {
        type: "it",
        id: "1.1",
        x: 50,
        y: 75,
        text: "Remote Desktop"
    },
    {
        type: "it",
        id: "1.2",
        x: 200,
        y: 75,
        text: "Login Server"
    },
];

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

Свойства

Смотрите полный список свойств конфигурации объекта group, которые позволяют настроить позиционирование и внешний вид Group.

Группировка фигур в режиме PERT

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

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
    }
];

Свойства

Смотрите полный список свойств конфигурации объекта "project", которые позволяют настроить позиционирование и внешний вид задач и вех в проекте.

Настройка заголовка Group

Заголовок Group по умолчанию отключён. Чтобы создать Group с заголовком, укажите свойство header в объекте конфигурации Group.

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {}
    }
];

Это свойство содержит несколько атрибутов, которые позволяют легко настроить конфигурацию заголовка Group. Например, вы можете задать высоту заголовка и его позицию, указать текст заголовка и настроить остальные параметры.

Ознакомьтесь с полным списком свойств API объекта Group.

Иконка заголовка

Чтобы свернуть или развернуть Group, включите атрибут closable свойства заголовка. В результате в заголовок будет добавлена иконка, позволяющая пользователю разворачивать/сворачивать Group.

const data = [
    {
        type: "$group",
        id: 1,
        width: 400,
        height: 200,
        x: 0,
        y: 0,
        header: {
            text: "Top and collapsed header with tеxt alignment",
            closable: true
        }
    }
];

Вы можете изменить цвет иконки с помощью атрибута iconColor объекта Group.

Настройка поведения элементов Group

По умолчанию вы можете перетащить любой дочерний элемент Group за пределы Group и переместить его в другую Group. Чтобы изменить поведение элементов Group, используйте атрибуты groupBehavior и padding свойства exitArea объекта Group.

Примечание

Свойство exitArea определяет поведение только дочерних элементов первого уровня вложенности настраиваемой Group.

Значения "unbound" и "boundBorderExtension" атрибута groupBehavior позволяют определить, можно ли перемещать дочерние элементы за пределы Group, а также задать расширение границ Group, когда пользователь пытается перетащить элемент за её пределы. При необходимости вы также можете отключить возможность перетаскивания элементов за пределы Group с помощью значения "boundNoBorderExtension".

Если groupBehavior установлено в значение "boundNoBorderExtension" или "boundBorderExtension", вы можете задать отступ между Group и краем элемента при перемещении элемента внутри Group. Для этого используйте атрибут padding:

const data = [
    {
        type: "$group",
        id: 1,
        width: 830,
        height: 400,
        x: 0,
        y: 0,
        exitArea: {
            groupBehavior: "boundBorderExtension",
            padding: 10
        },
        //fixed: true,
        groupChildren: ["1.1", "1.2", "1.3"]
    },
    // ...
];