Feature: Undo Redo options multi tool #2297 (#2348)

* 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>

src/main/resources/static/js/multitool/PdfActionsManager.js

@@ -1,12 +1,20 @@
+import { DeletePageCommand } from "./commands/delete-page.js";
+import { SelectPageCommand } from "./commands/select.js";
+import { SplitFileCommand } from "./commands/split.js";
+import { UndoManager } from "./UndoManager.js";
+
 class PdfActionsManager {
   pageDirection;
   pagesContainer;
   static selectedPages = []; // Static property shared across all instances
+  undoManager;
 
-  constructor(id) {
+  constructor(id, undoManager) {
     this.pagesContainer = document.getElementById(id);
     this.pageDirection = document.documentElement.getAttribute("dir");
 
+    this.undoManager = undoManager || new UndoManager();
+
     var styleElement = document.createElement("link");
     styleElement.rel = "stylesheet";
     styleElement.href = "css/pdfActions.css";
@@ -27,7 +35,8 @@ class PdfActionsManager {
 
     const sibling = imgContainer.previousSibling;
     if (sibling) {
-      this.movePageTo(imgContainer, sibling, true);
+      let movePageCommand = this.movePageTo(imgContainer, sibling, true, true);
+      this._pushUndoClearRedo(movePageCommand);
     }
   }
 
@@ -35,7 +44,12 @@ class PdfActionsManager {
     var imgContainer = this.getPageContainer(e.target);
     const sibling = imgContainer.nextSibling;
     if (sibling) {
-      this.movePageTo(imgContainer, sibling.nextSibling, true);
+      let movePageCommand = this.movePageTo(
+        imgContainer,
+        sibling.nextSibling,
+        true
+      );
+      this._pushUndoClearRedo(movePageCommand);
     }
   }
 
@@ -43,30 +57,27 @@ class PdfActionsManager {
     var imgContainer = this.getPageContainer(e.target);
     const img = imgContainer.querySelector("img");
 
-    this.rotateElement(img, -90);
+    let rotateCommand = this.rotateElement(img, -90);
+    this._pushUndoClearRedo(rotateCommand);
   }
 
   rotateCWButtonCallback(e) {
     var imgContainer = this.getPageContainer(e.target);
     const img = imgContainer.querySelector("img");
 
-    this.rotateElement(img, 90);
+    let rotateCommand = this.rotateElement(img, 90);
+    this._pushUndoClearRedo(rotateCommand);
   }
 
   deletePageButtonCallback(e) {
-    var imgContainer = this.getPageContainer(e.target);
-    this.pagesContainer.removeChild(imgContainer);
-    if (this.pagesContainer.childElementCount === 0) {
-      const filenameInput = document.getElementById("filename-input");
-      const filenameParagraph = document.getElementById("filename");
-      const downloadBtn = document.getElementById("export-button");
+    let imgContainer = this.getPageContainer(e.target);
+    let deletePageCommand = new DeletePageCommand(
+      imgContainer,
+      this.pagesContainer
+    );
+    deletePageCommand.execute();
 
-      filenameInput.disabled = true;
-      filenameInput.value = "";
-      filenameParagraph.innerText = "";
-
-      downloadBtn.disabled = true;
-    }
+    this._pushUndoClearRedo(deletePageCommand);
   }
 
   insertFileButtonCallback(e) {
@@ -81,7 +92,15 @@ class PdfActionsManager {
 
   splitFileButtonCallback(e) {
     var imgContainer = this.getPageContainer(e.target);
-    imgContainer.classList.toggle("split-before");
+
+    let splitFileCommand = new SplitFileCommand(imgContainer, "split-before");
+    splitFileCommand.execute();
+
+    this._pushUndoClearRedo(splitFileCommand);
+  }
+
+  _pushUndoClearRedo(command) {
+    this.undoManager.pushUndoClearRedo(command);
   }
 
   setActions({ movePageTo, addFiles, rotateElement }) {
@@ -159,25 +178,10 @@ class PdfActionsManager {
 
     selectCheckbox.onchange = () => {
       const pageNumber = Array.from(div.parentNode.children).indexOf(div) + 1;
-      if (selectCheckbox.checked) {
-        //adds to array of selected pages
-        window.selectedPages.push(pageNumber);
-      } else {
-        //remove page from selected pages array
-        const index = window.selectedPages.indexOf(pageNumber);
-        if (index !== -1) {
-          window.selectedPages.splice(index, 1);
-        }
-      }
+      let selectPageCommand = new SelectPageCommand(pageNumber, selectCheckbox);
+      selectPageCommand.execute();
 
-      if (window.selectedPages.length > 0 && !window.selectPage) {
-        window.toggleSelectPageVisibility();
-      }
-      if (window.selectedPages.length == 0 && window.selectPage) {
-        window.toggleSelectPageVisibility();
-      }
-
-      window.updateSelectedPagesDisplay();
+      this._pushUndoClearRedo(selectPageCommand);
     };
 
     const insertFileButtonContainer = document.createElement("div");