Feature/2198/multitool multi select move pages (#2294)

* Multitool - Select multiple pages for rotation tool

* Multitool multi select delete feature

* Multitool multi select UI improvements and big fixes

* Multitool multi select select all and UI improvements

* Multi tool multi select, download selected, clean up and bug fixes

* Groundwork for multiselect drag and drop

* Multi select drag and drop finalised

* Update translation files

Signed-off-by: GitHub Action <action@github.com>

* Turn off select mode after multidrag

---------

Signed-off-by: GitHub Action <action@github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

src/main/java/stirling/software/SPDF/controller/api/security/CertSignController.java

@@ -160,8 +160,7 @@ public class CertSignController {
                         extState.setNonStrokingAlphaConstant(0.5f);
                         cs.setGraphicsStateParameters(extState);
                         cs.transform(Matrix.getScaleInstance(0.08f, 0.08f));
-                        PDImageXObject img =
+                        PDImageXObject img = PDImageXObject.createFromFileByExtension(logoFile, doc);
-                                PDImageXObject.createFromFileByExtension(logoFile, doc);
                         cs.drawImage(img, 100, 0);
                         cs.restoreGraphicsState();
                     }
@@ -209,10 +208,7 @@ public class CertSignController {
     }
 
     @PostMapping(consumes = "multipart/form-data", value = "/cert-sign")
-    @Operation(
+    @Operation(summary = "Sign PDF with a Digital Certificate", description = "This endpoint accepts a PDF file, a digital certificate and related information to sign the PDF. It then returns the digitally signed PDF file. Input:PDF Output:PDF Type:SISO")
-            summary = "Sign PDF with a Digital Certificate",
-            description =
-                    "This endpoint accepts a PDF file, a digital certificate and related information to sign the PDF. It then returns the digitally signed PDF file. Input:PDF Output:PDF Type:SISO")
     public ResponseEntity<byte[]> signPDFWithCert(@ModelAttribute SignPDFWithCertRequest request)
             throws Exception {
         MultipartFile pdf = request.getFileInput();
@@ -314,20 +310,17 @@ public class CertSignController {
 
     private PrivateKey getPrivateKeyFromPEM(byte[] pemBytes, String password)
             throws IOException, OperatorCreationException, PKCSException {
-        try (PEMParser pemParser =
+        try (PEMParser pemParser = new PEMParser(new InputStreamReader(new ByteArrayInputStream(pemBytes)))) {
-                new PEMParser(new InputStreamReader(new ByteArrayInputStream(pemBytes)))) {
             Object pemObject = pemParser.readObject();
             JcaPEMKeyConverter converter = new JcaPEMKeyConverter().setProvider("BC");
             PrivateKeyInfo pkInfo;
             if (pemObject instanceof PKCS8EncryptedPrivateKeyInfo) {
-                InputDecryptorProvider decProv =
+                InputDecryptorProvider decProv = new JceOpenSSLPKCS8DecryptorProviderBuilder()
-                        new JceOpenSSLPKCS8DecryptorProviderBuilder().build(password.toCharArray());
+                        .build(password.toCharArray());
                 pkInfo = ((PKCS8EncryptedPrivateKeyInfo) pemObject).decryptPrivateKeyInfo(decProv);
             } else if (pemObject instanceof PEMEncryptedKeyPair) {
-                PEMDecryptorProvider decProv =
+                PEMDecryptorProvider decProv = new JcePEMDecryptorProviderBuilder().build(password.toCharArray());
-                        new JcePEMDecryptorProviderBuilder().build(password.toCharArray());
+                pkInfo = ((PEMEncryptedKeyPair) pemObject)
-                pkInfo =
-                        ((PEMEncryptedKeyPair) pemObject)
                         .decryptKeyPair(decProv)
                         .getPrivateKeyInfo();
             } else {

src/main/resources/messages_ar_AR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=هذه الميزة متوفرة في <a href="{0}">صفحة الأدوات المتعددة</a> لدينا. اطلع عليها للحصول على واجهة مستخدم محسّنة لكل صفحة وميزات إضافية!

src/main/resources/messages_bg_BG.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_ca_CA.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_cs_CZ.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_da_DK.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_de_DE.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=Diese Funktion ist auch auf unserer <a href="{0}">PDF-Multitool-Seite</a> verfügbar. Probieren Sie sie aus, denn sie bietet eine verbesserte Benutzeroberfläche und zusätzliche Funktionen!

src/main/resources/messages_el_GR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_en_GB.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_en_US.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_es_ES.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_eu_ES.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_fr_FR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_ga_IE.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_hi_IN.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_hr_HR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_hu_HU.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_id_ID.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_it_IT.properties

@@ -952,6 +952,7 @@ multiTool.split=Dividi
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=Questa funzione è disponibile anche nella nostra <a href="{0}">pagina multi-strumento</a>. Scoprila per un'interfaccia utente pagina per pagina migliorata e funzionalità aggiuntive!

src/main/resources/messages_ja_JP.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_ko_KR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_nl_NL.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_no_NB.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_pl_PL.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_pt_BR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_pt_PT.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_ro_RO.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_ru_RU.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_sk_SK.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_sr_LATN_RS.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_sv_SE.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_th_TH.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_tr_TR.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_uk_UA.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_vi_VN.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_zh_CN.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/messages_zh_TW.properties

@@ -952,6 +952,7 @@ multiTool.split=Split
 multiTool.moveLeft=Move Left
 multiTool.moveRight=Move Right
 multiTool.delete=Delete
+multiTool.dragDropMessage=Page(s) Selected
 
 #multiTool-advert
 multiTool-advert.message=This feature is also available in our <a href="{0}">multi-tool page</a>. Check it out for enhanced page-by-page UI and additional features!

src/main/resources/static/css/dragdrop.css

@@ -19,6 +19,15 @@
   transform-origin: top left;
 }
 
+#drag-container .multidrag {
+  position: fixed;
+  max-width: 200px;
+  max-height: 200px;
+  transform-origin: top left;
+  margin-left: 1rem;
+  background-color: rgba(0, 29, 41, 0.9);
+}
+
 .drag-manager_dragging {
   width: 0px;
   visibility: hidden;

src/main/resources/static/css/pdfActions.css

@@ -138,7 +138,7 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
   padding: 6px 8px;
   border-radius: 8px;
   font-size: 16px;
-  z-index: 3;
+  z-index: 10;
 }
 
 .hidden {

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

@@ -1,29 +1,21 @@
 class DragDropManager {
-  dragContainer;
-  wrapper;
-  pageDirection;
-  movePageTo;
-  pageDragging;
-  draggelEl;
-  draggedImageEl;
-  hoveredEl;
-  endInsertionElement;
-
   constructor(id, wrapperId) {
     this.dragContainer = document.getElementById(id);
     this.pageDirection = document.documentElement.getAttribute("dir");
     this.wrapper = document.getElementById(wrapperId);
     this.pageDragging = false;
     this.hoveredEl = undefined;
-    this.draggelEl = undefined;
     this.draggedImageEl = undefined;
+    this.draggedEl = undefined;
+    this.selectedPageElements = []; // Store selected pages for multi-page mode
 
-    var styleElement = document.createElement("link");
+    // Add CSS dynamically
+    const styleElement = document.createElement("link");
     styleElement.rel = "stylesheet";
     styleElement.href = "css/dragdrop.css";
-
     document.head.appendChild(styleElement);
 
+    // Create the endpoint element
     const div = document.createElement("div");
     div.classList.add("drag-manager_endpoint");
     div.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
@@ -32,6 +24,7 @@ class DragDropManager {
         </svg>`;
     this.endInsertionElement = div;
 
+    // Bind methods
     this.startDraggingPage = this.startDraggingPage.bind(this);
     this.onDragEl = this.onDragEl.bind(this);
     this.stopDraggingPage = this.stopDraggingPage.bind(this);
@@ -40,20 +33,41 @@ class DragDropManager {
   }
 
   startDraggingPage(div) {
+    if (window.selectPage) {
+      // Multi-page drag logic
+      this.selectedPageElements = window.selectedPages.map((index) => {
+        const pageEl = document.getElementById(`page-container-${index}`);
+        if (pageEl) {
+          pageEl.initialTransform = pageEl.style.transform || "translate(0px, 0px)";
+        }
+        return pageEl;
+      }).filter(Boolean);
+
+      if (this.selectedPageElements.length === 0) return;
+
+      this.pageDragging = true;
+      this.draggedImageEl = document.createElement("div");
+      this.draggedImageEl.classList.add("multidrag");
+      this.draggedImageEl.textContent = `${this.selectedPageElements.length} ${window.translations.dragDropMessage}`;
+      this.draggedImageEl.style.visibility = "hidden";
+      this.dragContainer.appendChild(this.draggedImageEl);
+    } else {
+      // Single-page drag logic
       this.pageDragging = true;
       this.draggedEl = div;
       const img = div.querySelector("img");
       div.classList.add("drag-manager_dragging");
-    const imageSrc = img.src;
 
       const imgEl = document.createElement("img");
       imgEl.classList.add("dragged-img");
-    imgEl.src = imageSrc;
+      imgEl.src = img.src;
-    this.draggedImageEl = imgEl;
       imgEl.style.visibility = "hidden";
       imgEl.style.transform = `rotate(${img.style.rotate === "" ? "0deg" : img.style.rotate}) translate(-50%, -50%)`;
+      this.draggedImageEl = imgEl;
       this.dragContainer.appendChild(imgEl);
+    }
 
+    // Common setup for both modes
     window.addEventListener("mouseup", this.stopDraggingPage);
     window.addEventListener("mousemove", this.onDragEl);
     this.wrapper.classList.add("drag-manager_dragging-container");
@@ -74,22 +88,44 @@ class DragDropManager {
     this.wrapper.classList.remove("drag-manager_dragging-container");
     this.wrapper.removeChild(this.endInsertionElement);
     window.removeEventListener("mouseup", this.stopDraggingPage);
+
+    if (this.draggedImageEl) {
+      this.dragContainer.removeChild(this.draggedImageEl);
       this.draggedImageEl = undefined;
-    this.pageDragging = false;
-    this.draggedEl.classList.remove("drag-manager_dragging");
-    this.hoveredEl?.classList.remove("drag-manager_draghover");
-    this.dragContainer.childNodes.forEach((dragChild) => {
-      this.dragContainer.removeChild(dragChild);
-    });
-    if (!this.hoveredEl) {
-      return;
     }
+
+    if (window.selectPage) {
+      // Multi-page drop logic
+      if (!this.hoveredEl) {
+        this.selectedPageElements.forEach((pageEl) => {
+          pageEl.style.transform = pageEl.initialTransform || "translate(0px, 0px)";
+          pageEl.classList.remove("drag-manager_dragging");
+        });
+      } else {
+        this.selectedPageElements.forEach((pageEl) => {
+          pageEl.classList.remove("drag-manager_dragging");
+          if (this.hoveredEl === this.endInsertionElement) {
+            this.movePageTo(pageEl);
+          } else {
+            this.movePageTo(pageEl, this.hoveredEl);
+          }
+        });
+      }
+      this.selectedPageElements = [];
+      window.resetPages()
+    } else {
+      // Single-page drop logic
+      if (!this.hoveredEl) return;
+      this.draggedEl.classList.remove("drag-manager_dragging");
       if (this.hoveredEl === this.endInsertionElement) {
         this.movePageTo(this.draggedEl);
-      return;
+      } else {
-    }
         this.movePageTo(this.draggedEl, this.hoveredEl);
       }
+    }
+
+    this.pageDragging = false;
+  }
 
   setActions({ movePageTo }) {
     this.movePageTo = movePageTo;

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

@@ -29,6 +29,7 @@ class PdfContainer {
     this.updatePagesFromCSV = this.updatePagesFromCSV.bind(this);
     this.addFilesBlankAll = this.addFilesBlankAll.bind(this)
     this.removeAllElements = this.removeAllElements.bind(this);
+    this.resetPages = this.resetPages.bind(this);
 
     this.pdfAdapters = pdfAdapters;
 
@@ -55,6 +56,7 @@ class PdfContainer {
     window.updatePageNumbersAndCheckboxes = this.updatePageNumbersAndCheckboxes;
     window.addFilesBlankAll = this.addFilesBlankAll
     window.removeAllElements = this.removeAllElements;
+    window.resetPages = this.resetPages;
 
     const filenameInput = document.getElementById("filename-input");
     const downloadBtn = document.getElementById("export-button");
@@ -193,7 +195,7 @@ class PdfContainer {
       const div = document.createElement("div");
 
       div.classList.add("page-container");
-
+      div.id = "page-container-" + (i + 1);
       var img = document.createElement("img");
       img.classList.add("page-image");
       const imageSrc = await renderer.renderPage(i);
@@ -202,7 +204,6 @@ class PdfContainer {
       img.rend = renderer;
       img.doc = pdfDocument;
       div.appendChild(img);
-
       this.pdfAdapters.forEach((adapter) => {
         adapter.adapt?.(div);
       });
@@ -701,6 +702,31 @@ class PdfContainer {
     }
   }
 
+   resetPages() {
+    const pageContainers = this.pagesContainer.querySelectorAll(".page-container");
+
+    pageContainers.forEach((container, index) => {
+      container.id = "page-container-" + (index + 1);
+    });
+
+    const checkboxes = document.querySelectorAll(".pdf-actions_checkbox");
+    window.selectAll = false;
+    const selectIcon = document.getElementById("select-All-Container");
+    const deselectIcon = document.getElementById("deselect-All-Container");
+
+      selectIcon.style.display = "inline";
+      deselectIcon.style.display = "none";
+
+    checkboxes.forEach((checkbox) => {
+      const pageNumber = Array.from(checkbox.parentNode.parentNode.children).indexOf(checkbox.parentNode) + 1;
+
+        const index = window.selectedPages.indexOf(pageNumber);
+        if (index !== -1) {
+          window.selectedPages.splice(index, 1);
+        }
+    });
+    window.toggleSelectPageVisibility();
+  }
 
   setDownloadAttribute() {
     this.downloadLink.setAttribute("download", this.fileName ? this.fileName : "managed.pdf");

src/main/resources/templates/multi-tool.html

@@ -112,13 +112,6 @@
               <div class="multi-tool-container">
                 <div class="d-flex flex-wrap" id="pages-container-wrapper">
                   <div id="pages-container">
-                    <div class="page-container" th:each="file, status: ${fileList}"
-                      th:id="'page-container-' + ${status.index}">
-                      <div class="page-number-container">
-                        <span th:text="${status.index + 1}"></span>
-                      </div>
-                      <img th:src="${file.imageUrl}" alt="File Page">
-                    </div>
                   </div>
                 </div>
               </div>
@@ -145,7 +138,8 @@
         delete: '[[#{multiTool.delete}]]',
         split: '[[#{multiTool.split}]]',
         addFile: '[[#{multiTool.addFile}]]',
-        insertPageBreak:'[[#{multiTool.insertPageBreak}]]'
+        insertPageBreak:'[[#{multiTool.insertPageBreak}]]',
+        dragDropMessage:'[[#{multiTool.dragDropMessage}]]'
     };