Панель редактирования

Вы можете настраивать элементы управления панели редактирования отдельно для каждого элемента Diagram и для группы элементов, учитывая различные условия. Для этого используйте конфигурацию properties панели редактирования.

Если вы хотите настроить элементы управления панели редактирования для отдельной фигуры, укажите соответствующий тип фигуры в конфигурации properties, как показано в примере ниже:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                rectangle: [ // настройка элементов управления панели редактирования для фигуры "pert"
                    { type: "arrange", $properties: { angle: { hidden: true } }},
                    // ...остальная настройка элементов управления панели редактирования
                ],
                // ...остальная настройка фигур
            }
        }
    }
});

Чтобы настроить группу элементов, используйте следующие служебные свойства в конфигурации properties:

• $default — позволяет настраивать элементы управления панели редактирования, если не выбрано ни одного элемента или выбрано несколько элементов
• $shape — позволяет настраивать элементы управления панели редактирования для всех фигур, включая пользовательские
• $group — позволяет настраивать элементы управления панели редактирования для всех элементов с типом group
• $swimlane — позволяет настраивать элементы управления панели редактирования для всех элементов с типом swimlane
• $line — позволяет настраивать элементы управления панели редактирования для всех элементов с типом line
• $lineTitle — позволяет настраивать элементы управления панели редактирования для всех элементов с типом lineTitle

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

Служебное свойство $default позволяет настраивать элементы управления панели редактирования, если не выбрано ни одного элемента или выбрано несколько элементов.

properties: {
    $default: [
        {
            type: "gridStep",
            readOnly: true,
            // ...
        }
    ]
}

Похожие сложные элементы управления: Шаг сетки, Граница, Упорядочивание

Настройка панели редактирования для фигур

Служебное свойство $shape позволяет настраивать элементы управления панели редактирования для всех фигур, включая пользовательские.

properties: {
    $shape: [
        {
            type: "position",
            $properties: {
                dx: { disabled: true },
                // ...
            },
            // ...
        }
    ]
}

Похожие сложные элементы управления: Граница, Упорядочивание, Позиция, Размер, Выравнивание текста, Стиль текста

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

Служебное свойство $group позволяет настраивать элементы управления панели редактирования для всех элементов с типом group.

properties: {
    $group: [
        {
            type: "header",
            label: "Group header style",
            // ...
        }
    ]
}

Похожие сложные элементы управления: Граница, Упорядочивание, Заголовок, Общий заголовок, Позиция заголовка, Размер, Выравнивание текста, Стиль текста

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

Служебное свойство $swimlane позволяет настраивать элементы управления панели редактирования для всех элементов с типом swimlane.

properties: {
    $swimlane: [
        {
            type: "header",
            label: "Swimlane header style",
            // ...
        }
    ]
}

Похожие сложные элементы управления: Граница, Упорядочивание, Заголовок, Общий заголовок, Позиция заголовка, Размер, Выравнивание текста, Стиль текста

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

Служебное свойство $line позволяет настраивать элементы управления панели редактирования для всех элементов с типом line.

properties: {
    $line: [
        {
            type: "lineShape",
            label: "Line connection type",
            // ...
        }
    ]
}

Похожие сложные элементы управления: Граница, Форма линии, Вид указателя

Настройка панели редактирования для заголовков линий

Служебное свойство $lineTitle позволяет настраивать элементы управления панели редактирования для всех элементов с типом lineTitle.

properties: {
    $lineTitles: [
        {
            type: "textAlign",
            label: "Text align",
            // ...
        },
        // ...
    ]
}

Похожие сложные элементы управления: Выравнивание текста, Стиль текста

Создание и настройка пользовательских элементов управления панели редактирования

Вы можете использовать свойство controls представления панели редактирования, чтобы создать пользовательский элемент управления на основе базовых элементов управления и/или сложных элементов управления.

Предупреждение

Не рекомендуется использовать тип элемента управления по умолчанию (см. базовые элементы управления и/или сложные элементы управления) в качестве имени для пользовательского элемента управления. Используйте уникальное имя для каждого пользовательского элемента управления, чтобы избежать ошибок!

После создания пользовательского элемента управления примените его к нужному элементу Diagram с помощью свойства properties.