Jednym ze sposobów zaimplementowania podstawowej funkcji cofania / ponawiania jest użycie wzorców projektowania memento i poleceń.
Memento ma na celu na przykład zachowanie stanu obiektu, który ma być później przywrócony. Ta pamiątka powinna być jak najmniejsza w celu optymalizacji.
Na polecenie kapsułkowane substancje wzór w obiekt (polecenie) jakieś instrukcje do wykonania w razie potrzeby.
W oparciu o te dwie koncepcje możesz napisać podstawową historię cofania / ponawiania, taką jak następująca zakodowana w TypeScript ( wyodrębniona i dostosowana z biblioteki frontendowej Interacto ).
Taka historia opiera się na dwóch stosach:
- stos obiektów, które można cofnąć
- stos dla obiektów, które można przerobić
W algorytmie znajdują się komentarze. Zwróć uwagę, że podczas operacji cofania stos powtórzeń musi zostać wyczyszczony! Powodem jest pozostawienie aplikacji w stabilnym stanie: jeśli cofniesz się w przeszłości, aby powtórzyć niektóre działania, które wykonałeś, poprzednie działania przestaną istnieć, ponieważ zmienisz przyszłość.
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);
}
}
}
UndoableInterfejs jest dość prosty:
export interface Undoable {
/** Undoes the command */
undo(): void;
/** Redoes the undone command */
redo(): void;
}
Możesz teraz pisać polecenia, które można cofnąć, które działają w Twojej aplikacji.
Na przykład (wciąż na podstawie przykładów Interacto) możesz napisać takie polecenie:
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 = '';
}
}
Możesz teraz wykonać i dodać polecenie do instancji UndoHistory:
const cmd = new ClearTextCmd(...);
//...
undoHistory.add(cmd);
Na koniec możesz przypisać przycisk cofania (lub skrót) do tej historii (to samo dotyczy ponawiania).
Takie przykłady są szczegółowo opisane na stronie dokumentacji Interacto .
