Инлайн-редактирование

Инлайн-редактирование позволяет редактировать текстовое содержимое элемента диаграммы двойным щелчком по нему. Вы можете редактировать элементы как в диаграмме, так и в редакторе.

Инлайн-редактирование для линий доступно только в стандартном режиме Diagram.

Примечание

Инлайн-редактирование не работает для пользовательских фигур.

Эта функциональность включена по умолчанию. Чтобы отключить инлайн-редактирование, установите свойство editable элемента, который должен стать нередактируемым, в значение false.

Ниже приведены примеры отключения инлайн-редактирования для элементов диаграммы:

Заголовки линий

Отключение возможности редактировать текстовое содержимое линии

const data = [
    // configuring shapes
    { "id": "shape_1", "type": "start", "x": 0, "text": "Start" },
    { "id": "shape_2", "type": "process", "x": 400, "text": "Step 1" },
    // configuring a line
    {
        "id": "line_1",
        "type": "line",
        "from": "shape_1",
        "to": "shape_2"
    },
    // configuring a line title
    {
        "id": "title_1",
        "type": "lineTitle",
        "parent": "line_1",
        "text": "Some text",
        "editable": false // disables inline editing of the text item of a line
    }
];

Фигуры

Отключение возможности редактировать текстовое содержимое фигуры

const data = [
    { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start", "editable": false}
];

Группы

Отключение возможности редактировать текстовое содержимое заголовка группы

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

Дорожки

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

const data = [
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "header": {
            "closable": true,
            "text": "Waterfall diagram template",
            // disables inline editing for the header
            "editable": false
        },
        "layout": [
            [1, 2, 3]
        ],
        "subHeaderCols": {
            "headers": [
                { "text": "September", "fill": "rgba(243, 92, 79, 0.4)" },
                // enables inline editing for the subheader
                { "text": "October", "fill": "rgba(155, 96, 248, 0.4)", "editable": true },
                { "text": "November", "fill": "rgba(255, 174, 18, 0.4)" }
            ],
            // disables inline editing for all subheaders
            "editable": false
        }
    }
];

Горячие клавиши

Встроенный текстовый редактор поддерживает следующие горячие клавиши:

Горячая клавиша	Описание
Ctrl+Enter (Win), CMD+Enter (macOS)	Открывает встроенный текстовый редактор для выбранного элемента. Работает как альтернатива двойному щелчку. Применимо только к фигурам с редактируемым свойством text.
Shift+Enter	Вставляет разрыв строки (\n), не закрывая редактор.
Delete (Del), Backspace	Удаляет символ в позиции курсора. Не удаляет сам элемент.
Enter	Подтверждает введённый текст и закрывает редактор. Поскольку редактор применяет изменения динамически по мере ввода, нажатие Enter означает успешное завершение редактирования.
Escape	Отменяет все несохранённые изменения и закрывает редактор, возвращая тексту элемента значение, которое было до начала редактирования.

События API

Библиотека включает набор полезных событий API, с помощью которых можно управлять поведением редактора при его открытии/закрытии, а также контролировать процесс редактирования текста элементов.