Eine Möglichkeit, eine grundlegende Funktion zum Rückgängigmachen / Wiederherstellen zu implementieren, besteht darin, sowohl das Erinnerungs- als auch das Befehlsentwurfsmuster zu verwenden.
Memento zielt darauf ab, den Zustand eines Objekts beizubehalten, das beispielsweise später wiederhergestellt werden soll. Dieses Andenken sollte zu Optimierungszwecken so klein wie möglich sein.
Das Befehlsmuster kapselt in einem Objekt (einem Befehl) einige Anweisungen, die bei Bedarf ausgeführt werden sollen.
Basierend auf diesen beiden Konzepten können Sie einen grundlegenden Rückgängig- / Wiederherstellungsverlauf schreiben, wie den folgenden, der in TypeScript codiert ist ( extrahiert und angepasst aus der Front-End-Bibliothek Interacto ).
Eine solche Geschichte beruht auf zwei Stapeln:
- Der Stapel für Objekte, die rückgängig gemacht werden können
- Der Stapel für Objekte, die wiederholt werden können
Kommentare werden im Algorithmus bereitgestellt. Beachten Sie nur, dass beim Rückgängigmachen der Wiederherstellungsstapel gelöscht werden muss! Der Grund dafür ist, dass die Anwendung in einem stabilen Zustand bleibt: Wenn Sie in die Vergangenheit zurückkehren, um einige von Ihnen durchgeführte Aktionen zu wiederholen, werden Ihre früheren Aktionen nicht mehr vorhanden sein, wenn Sie die Zukunft ändern.
export class UndoHistory {
/** The undoable objects. */
private readonly undos: Array<Undoable>;
/** The redoable objects. */
private readonly redos: Array<Undoable>;
/** The maximal number of undo. */
private sizeMax: number;
public constructor() {
this.sizeMax = 0;
this.undos = [];
this.redos = [];
this.sizeMax = 30;
}
/** Adds an undoable object to the collector. */
public add(undoable: Undoable): void {
if (this.sizeMax > 0) {
// Cleaning the oldest undoable object
if (this.undos.length === this.sizeMax) {
this.undos.pop();
}
this.undos.push(undoable);
// You must clear the redo stack!
this.clearRedo();
}
}
private clearRedo(): void {
if (this.redos.length > 0) {
this.redos.length = 0;
}
}
/** Undoes the last undoable object. */
public undo(): void {
const undoable = this.undos.pop();
if (undoable !== undefined) {
undoable.undo();
this.redos.push(undoable);
}
}
/** Redoes the last undoable object. */
public redo(): void {
const undoable = this.redos.pop();
if (undoable !== undefined) {
undoable.redo();
this.undos.push(undoable);
}
}
}
Die UndoableOberfläche ist ganz einfach:
export interface Undoable {
/** Undoes the command */
undo(): void;
/** Redoes the undone command */
redo(): void;
}
Sie können jetzt rückgängig zu machende Befehle schreiben, die für Ihre Anwendung ausgeführt werden.
Zum Beispiel (immer noch basierend auf Interacto-Beispielen) können Sie einen Befehl wie diesen schreiben:
export class ClearTextCmd implements Undoable {
// The memento that saves the previous state of the text data
private memento: string;
public constructor(private text: TextData) {}
// Executes the command
public execute() void {
// Creating the memento
this.memento = this.text.text;
// Applying the changes (in many
// cases do and redo are similar, but the memento creation)
redo();
}
public undo(): void {
this.text.text = this.memento;
}
public redo(): void {
this.text.text = '';
}
}
Sie können den Befehl jetzt ausführen und der UndoHistory-Instanz hinzufügen:
const cmd = new ClearTextCmd(...);
//...
undoHistory.add(cmd);
Schließlich können Sie eine Schaltfläche zum Rückgängigmachen (oder eine Verknüpfung) an diesen Verlauf binden (dasselbe gilt für Wiederherstellen).
Solche Beispiele finden Sie auf der Interacto-Dokumentationsseite .
