61e750646c
* Implement Command class for Command Pattern Created a base `Command` class to implement the **Command Pattern**. This class provides a skeletal implementation for `execute`, `undo`, and `redo` methods. **Note:** This class is intended to be subclassed and not instantiated directly. * Add undo/redo stacks and operations * Use rotate element command to perform execute/undo/redo operations * Handle commands executed through events - Add "command-execution" event listener to execute commands that are not invoked from the same class while adding the command to the undo stack and clearing the redo stack. * Add and use rotate all command to rotate/redo/undo all elements * Use command pattern to delete pages * Use command pattern for page selection * Use command pattern to move pages up and down * Use command pattern to remove selected pages * Use command pattern to perform the splitting operation * Add undo/redo functionality with filename input exclusion - Implement undo (Ctrl+Z) and redo (Ctrl+Y) functionality. - Prevent undo/redo actions when the filename input field is focused. - Ensures proper handling of undo/redo actions without interfering with text editing. * Introduce UndoManager for managing undo/redo operations - Encapsulate undo/redo stacks and operations within UndoManager. - Simplify handling of undo/redo functionality through a dedicated manager. * Call execute on splitAllCommand - Fix a bug that caused split all functionality to not work as execute() wasn't called on splitAllCommand * Add undo/redo buttons to multi tool - Add undo/redo buttons to multi tool - Dispatch an event upon state change (such as changes in the undo/redo stacks) to update the UI accordingly. * Add undo/redo to translations * Replace hard-coded "Undo"/"Redo" with translation keys in multi tool --------- Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
66 lines
1.2 KiB
JavaScript
66 lines
1.2 KiB
JavaScript
export class UndoManager {
|
|
_undoStack;
|
|
_redoStack;
|
|
|
|
constructor() {
|
|
this._undoStack = [];
|
|
this._redoStack = [];
|
|
}
|
|
|
|
pushUndo(command) {
|
|
this._undoStack.push(command);
|
|
this._dispatchStateChange();
|
|
}
|
|
|
|
pushRedo(command) {
|
|
this._redoStack.push(command);
|
|
this._dispatchStateChange();
|
|
}
|
|
|
|
pushUndoClearRedo(command) {
|
|
this._undoStack.push(command);
|
|
this._redoStack = [];
|
|
this._dispatchStateChange();
|
|
}
|
|
|
|
undo() {
|
|
if (!this.canUndo()) return;
|
|
|
|
let cmd = this._undoStack.pop();
|
|
cmd.undo();
|
|
|
|
this._redoStack.push(cmd);
|
|
this._dispatchStateChange();
|
|
}
|
|
|
|
canUndo() {
|
|
return this._undoStack && this._undoStack.length > 0;
|
|
}
|
|
|
|
redo() {
|
|
if (!this.canRedo()) return;
|
|
|
|
let cmd = this._redoStack.pop();
|
|
cmd.redo();
|
|
|
|
this._undoStack.push(cmd);
|
|
this._dispatchStateChange();
|
|
}
|
|
|
|
canRedo() {
|
|
return this._redoStack && this._redoStack.length > 0;
|
|
}
|
|
|
|
_dispatchStateChange() {
|
|
document.dispatchEvent(
|
|
new CustomEvent("undo-manager-update", {
|
|
bubbles: true,
|
|
detail: {
|
|
canUndo: this.canUndo(),
|
|
canRedo: this.canRedo(),
|
|
},
|
|
})
|
|
);
|
|
}
|
|
}
|