Функциональность Undo/Redo

dhtmlxGantt Chart позволяет отменять/повторять сделанные изменения. Чтобы включить эту функциональность, необходимо включить плагин undo с помощью метода gantt.plugins.

gantt.plugins({
    undo: true
});

По умолчанию включены обе функции Undo и Redo. Чтобы управлять функциональностью Undo/Redo, используйте конфигурационные параметры undo / redo.

Вы можете использовать Undo и Redo по отдельности, отключив одну из опций:

// just the Redo functionality is enabled
gantt.config.undo = false;
gantt.config.redo = true;

Изменения Undo/Redo в Gantt

API Undo/Redo

Чтобы отменить сделанные в диаграмме Ганта изменения, используйте метод undo:

gantt.undo();

Чтобы повторно применить ранее отменённые изменения, используйте метод redo:

gantt.redo();

Начиная с версии v6.3 методы undo()/redo() также доступны через объект gantt.ext.undo. См. статью Расширение Undo.

Получение стека сохранённых действий Undo/Redo

Все действия пользователя в диаграмме Ганта реализованы как массивы, содержащие наборы объектов-команд. Gantt хранит стек недавно выполненных команд. Расширение undo может выполнять обратные операции над ними и исполнять их в Gantt.

Когда нужно отменить или повторить команду, расширение берёт самый последний объект команды и выполняет соответствующий метод.

Чтобы получить стек сохранённых действий Undo, используйте метод getUndoStack:

var stack = gantt.getUndoStack();

Чтобы вернуть стек сохранённых действий Redo, применяйте метод getRedoStack:

var stack = gantt.getRedoStack();

Возвращаемый стек представляет собой массив действий пользователя. Каждое действие содержит набор команд:

• UndoRedoAction - (object) - объект, который хранит команды действия Undo или Redo
  • commands - (UndoRedoCommand[]) - массив, который хранит изменения (команды) действия Undo или Redo

Команда — это объект со следующими атрибутами:

• UndoRedoCommand - (object) - объект, который хранит исходное и обновлённое состояние объектов Task или Link:
  • type - (string) - тип команды: "add/remove/update"
  • entity - (string) - тип изменённого объекта: "task" или "link"
  • value - (Task | Link) - изменённый объект задачи/ссылки
  • oldValue - (Task | Link) - исходный объект задачи/ссылки до изменений

Посмотрите пример ниже:

Метод getUndoStack() возвращает стек из 2 действий Undo. Первое действие содержит 3 команды, второе — 1 команду.

Начиная с версии v6.3 методы getUndoStack()/getRedoStack() также доступны через объект gantt.ext.undo. См. статью Расширение Undo.

Очистка стека сохранённых команд Undo/Redo

Существует возможность очистить стек Undo/Redo команд через соответствующий API Gantt.

Чтобы очистить стек сохранённых команд Undo, используйте метод clearUndoStack:

gantt.clearUndoStack();

Чтобы очистить стек сохранённых команд Redo, используйте метод clearRedoStack:

gantt.clearRedoStack();

Начиная с версии v6.3 методы clearUndoStack()/clearRedoStack() также доступны через объект gantt.ext.undo. См. статью Расширение Undo.

Отмена/Повтор изменений, сделанных в коде

Можно отменять/повторять изменения, сделанные в вашем коде. Для этого нужно использовать методы undo()/redo() в сочетании с методом saveState() объекта gantt.ext.undo.

Сам по себе Gantt не отслеживает изменения, которые вы вносите напрямую в код. Поэтому Gantt не может сохранить предыдущее состояние задачи/ссылки. Чтобы указать Gantt сохранить исходное значение задачи/ссылки до внесения изменений в код, необходимо применить метод saveState(). Метод следует вызывать до того, как вы начнёте изменять задачу.

Однако Gantt не может самостоятельно определить, когда вы закончите вносить изменения через API. Чтобы сообщить Gantt, что обновления задачи или ссылки завершены, нужно применить методы updateTask() или updateLink(). Тогда предыдущее и новое состояния будут сохранены в стек действий Undo.

Например, вот как можно вернуть исходный текст задачи после того, как он был переназначен в коде на другое значение:

const undoExtension = gantt.ext.undo;
const task = gantt.getTask(1);

console.log(task.text);
// ->  "task 1";

undoExtension.saveState(task.id, "task"); /*!*/

task.text = "modified"; /*!*/
gantt.updateTask(1); /*!*/

console.log(task.text);
// ->  "modified";

undoExtension.undo();

console.log(task.text);
// ->  "task 1";

Метод saveState() сохранил текст задачи "task 1" задачи с id = 1 до того, как он был обновлён текстом "modified". Затем метод gantt.ext.undo.undo() откатил изменения, внесённые в код, к начальному значению.

Подробности о методе saveState() смотрите в статьe Расширение Undo.

Настройка функциональности Undo

Существует несколько настроек, которые помогают подстроить операцию Undo.

Чтобы указать действия, к которым будет применяться Undo, используйте параметр undo_actions:

gantt.config.undo_actions = {
    update:"update",
    remove:"remove", // remove an item from the datastore
    add:"add"
};

Чтобы определить, сколько шагов можно вернуть, применяйте параметр undo_steps:

gantt.config.undo_steps = 10;

По умолчанию можно отменить 10 действий.

Вы также можете указать сущности, к которым будет применяться операция Undo, в параметре undo_types:

gantt.config.undo_types = {
    link:"link",
    task:"task"
};

Список API-событий

Существует набор полезных событий, связанных с Undo/Redo:

• onBeforeUndo - срабатывает перед вызовом метода undo
• onAfterUndo - срабатывает после вызова метода undo
• onBeforeRedo - срабатывает перед вызовом метода redo
• onAfterRedo - срабатывает после вызова метода redo
• onBeforeRedoStack - срабатывает перед добавлением действия в стек redo
• onBeforeUndoStack - срабатывает перед добавлением действия в стек undo