Line shape

Комплексный элемент управления для отображения коннекторов и управления ими

К сведению

Элемент управления Line shape доступен только для элемента line в режиме default в Diagram Editor.

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

{
    type: "lineShape",

    hidden?: boolean, // false по умолчанию
    disabled?: boolean, // false по умолчанию

    css?: string,
    width?: string | number | "content", // "content" по умолчанию
    height?: string | number | "content", // "content" по умолчанию
    padding?: string | number, // "0 16px" по умолчанию

    label?: string,
    labelAlignment?: "left" | "right" | "center", // "left" по умолчанию
    align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "between" по умолчанию
    compact?: boolean, // false по умолчанию

    // Служебные свойства
    $properties?: object
}

Описание

Базовые свойства

• type - (обязательный) тип элемента управления. Установите значение "lineShape"
• hidden - (опциональный) определяет, скрыт ли элемент управления. false по умолчанию
• disabled - (опциональный) определяет, включен (false) или отключен (true) элемент управления. false по умолчанию
• css - (опциональный) добавляет CSS-классы к элементу управления
• width - (опциональный) ширина элемента управления. "content" по умолчанию
• height - (опциональный) высота элемента управления. "content" по умолчанию
• padding - (опциональный) задаёт отступы для содержимого внутри группы элементов управления. "0 16px" по умолчанию
• label - (опциональный) задаёт подпись для элемента управления
• labelAlignment - (опциональный) определяет положение подписи. "left" по умолчанию
• align - (опциональный) задаёт выравнивание элементов управления внутри группы. "between" по умолчанию
• compact - (опциональный) задаёт компактный режим, убирает отступы и рамку. false по умолчанию

Служебные свойства

• $properties - (опциональный) позволяет переопределить значения базовых элементов управления внутри сложного элемента управления. Вы можете настроить следующий элемент Line shape на основе базовых элементов управления:
  • connectType - (toggleGroup) задаёт тип коннектора

Пример

const editor= new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        editbar: {
            properties: {
                $line: [
                    {
                        type: "lineShape",
                        label: "Line connection type"
                    }
                ]
            }
        }
    }
});