Rückgängig/Wiederherstellen Funktionalität
Das dhtmlxGantt-Diagramm enthält eine Funktion zum Rückgängig machen oder Wiederherstellen von Änderungen. Um diese Funktion zu aktivieren, muss das undo Plugin mit der gantt.plugins Methode aktiviert werden.
gantt.plugins({
undo: true
});
Standardmäßig sind sowohl die Rückgängig- als auch die Wiederherstellen-Optionen aktiviert. Bei Bedarf können Sie diese Funktionen über die undo und redo Einstellungen steuern.
Sie können auch nur eine der Optionen aktivieren, indem Sie die andere deaktivieren:
// Nur die Wiederherstellen-Funktionalität ist aktiv
gantt.config.undo = false;
gantt.config.redo = true;
Related sample: Undo/Redo changes in Gantt
Rückgängig/Wiederherstellen API
Um Änderungen im Gantt-Diagramm rückgängig zu machen, kann die undo Methode verwendet werden:
gantt.undo();
Um Änderungen, die zuvor rückgängig gemacht wurden, wiederherzustellen, verwenden Sie die redo Methode:
gantt.redo();
Ab Version 6.3 sind die undo()/redo() Methoden auch über das gantt.ext.undo Objekt zugänglich. Weitere Details finden Sie im Artikel Undo-Erweiterung.
Abrufen des Stapels gespeicherter Rückgängig/Wiederherstellen-Aktionen
Alle Aktionen im Gantt-Diagramm werden als Arrays gespeichert, die Sätze von Befehlsobjekten enthalten. Diese Befehle werden in einem Stapel der zuletzt ausgeführten Aktionen gehalten. Die undo Erweiterung kann diese Aktionen rückgängig machen und bei Bedarf wieder anwenden.
Beim Rückgängig machen oder Wiederherstellen eines Befehls zieht die Erweiterung das zuletzt verwendete Befehlsobjekt und führt die zugehörige Methode aus.
Um den Stapel der Rückgängig-Aktionen abzurufen, verwenden Sie die getUndoStack Methode:
var stack = gantt.getUndoStack();
Um den Stapel der Wiederherstellen-Aktionen zu erhalten, wenden Sie die getRedoStack Methode an:
var stack = gantt.getRedoStack();
Die zurückgegebenen Daten sind ein Array von Benutzeraktionen, wobei jede Aktion einen Satz von Befehlen enthält:
- UndoRedoAction - (Objekt) - ein Objekt, das Befehle für Rückgängig- oder Wiederherstellen-Aktionen enthält
- commands - (UndoRedoCommand[]) - ein Array von Änderungen (Befehlen) für die Rückgängig- oder Wiederherstellen-Aktion
Jeder Befehl hat die folgenden Attribute:
- UndoRedoCommand - (Objekt) - ein Objekt, das den ursprünglichen und aktualisierten Zustand von Task oder Link Objekten hält:
- type - (string) - der Befehlstyp: "add/remove/update"
- entity - (string) - die Art des geänderten Objekts: "task" oder "link"
- value - (Task | Link) - das geänderte Task/Link-Objekt
- oldValue - (Task | Link) - das Task/Link-Objekt vor den Änderungen
Zum Beispiel:
Hier gibt die getUndoStack() Methode einen Stapel zurück, der zwei Rückgängig-Aktionen enthält. Die erste Aktion hat drei Befehle, während die zweite nur einen enthält.
Ab Version 6.3 sind die getUndoStack()/getRedoStack() Methoden auch über das gantt.ext.undo Objekt verfügbar. Weitere Details finden Sie im Artikel Undo-Erweiterung.
Leeren des Stapels gespeicherter Rückgängig/Wiederherstellen-Befehle
Die gespeicherten Rückgängig/Wiederherstellen-Befehle können mit den jeweiligen Gantt-API-Methoden gelöscht werden.
Um den Rückgängig-Stapel zu leeren, verwenden Sie die clearUndoStack Methode:
gantt.clearUndoStack();
Um den Wiederherstellen-Stapel zu leeren, wenden Sie die clearRedoStack Methode an:
gantt.clearRedoStack();
Ab Version 6.3 sind die clearUndoStack()/clearRedoStack() Methoden auch über das gantt.ext.undo Objekt verfügbar. Weitere Details finden Sie im Artikel Undo-Erweiterung.
Rückgängig/Wiederherstellen von Änderungen, die im Code vorgenommen wurden
Änderungen, die direkt im Code vorgenommen wurden, können ebenfalls rückgängig gemacht oder wiederhergestellt werden. Dies erfordert die Kombination der undo()/redo() Methoden mit der saveState() Methode des gantt.ext.undo Objekts.
Standardmäßig verfolgt Gantt keine Änderungen, die direkt im Code vorgenommen werden. Um den Zustand einer Aufgabe oder eines Links vor der Durchführung von Änderungen zu speichern, muss die saveState() Methode vor Beginn der Änderungen verwendet werden.
Nachdem die Änderungen abgeschlossen sind, muss Gantt informiert werden. Dies kann mit den updateTask() oder updateLink() Methoden erfolgen. Diese Methoden speichern sowohl den vorherigen als auch den aktualisierten Zustand im Rückgängig-Stapel.
Hier ist ein Beispiel, wie der ursprüngliche Text einer Aufgabe wiederhergestellt werden kann, nachdem er im Code geändert wurde:
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";
In diesem Fall hat die saveState() Methode den ursprünglichen Text "task 1" gespeichert, bevor er in "modified" geändert wurde. Die gantt.ext.undo.undo() Methode stellte dann den Text auf seinen ursprünglichen Wert zurück. Weitere Informationen zur saveState() Methode finden Sie im Artikel Undo-Erweiterung.
Konfiguration der Rückgängig-Funktionalität
Es stehen mehrere Einstellungen zur Verfügung, um den Rückgängig-Vorgang anzupassen.
Um anzugeben, welche Aktionen rückgängig gemacht werden können, verwenden Sie den undo_actions Parameter:
gantt.config.undo_actions = {
update:"update",
remove:"remove", // entfernt ein Element aus dem Datenspeicher
add:"add"
};
Um die maximale Anzahl von Schritten festzulegen, die rückgängig gemacht werden können, verwenden Sie den undo_steps Parameter:
gantt.config.undo_steps = 10;
Standardmäßig können bis zu 10 Aktionen rückgängig gemacht werden.
Sie können auch festlegen, auf welche Entitäten sich die Rückgängig-Funktion bezieht, indem Sie den undo_types Parameter verwenden:
gantt.config.undo_types = {
link:"link",
task:"task"
};
Die Liste der API-Ereignisse
Hier sind einige nützliche Ereignisse im Zusammenhang mit der Rückgängig/Wiederherstellen-Funktionalität:
- onBeforeUndo - wird ausgelöst, bevor die undo Methode ausgeführt wird
- onAfterUndo - wird ausgelöst, nachdem die undo Methode ausgeführt wurde
- onBeforeRedo - wird ausgelöst, bevor die redo Methode ausgeführt wird
- onAfterRedo - wird ausgelöst, nachdem die redo Methode ausgeführt wurde
- onBeforeRedoStack - wird ausgelöst, bevor eine Aktion dem Wiederherstellen-Stapel hinzugefügt wird
- onBeforeUndoStack - wird ausgelöst, bevor eine Aktion dem Rückgängig-Stapel hinzugefügt wird