Feature/improved signature element (#2489)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Co-authored-by: Reece Browne <reece@stirling.pdf>

src/main/resources/static/js/pages/add-image.js

@@ -1,23 +1,38 @@
+window.goToFirstOrLastPage = goToFirstOrLastPage;
+
 document.getElementById('download-pdf').addEventListener('click', async () => {
-  const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
-  const modifiedPdfBytes = await modifiedPdf.save();
-  const blob = new Blob([modifiedPdfBytes], {type: 'application/pdf'});
-  const link = document.createElement('a');
-  link.href = URL.createObjectURL(blob);
-  link.download = originalFileName + '_addedImage.pdf';
-  link.click();
+  const downloadButton = document.getElementById('download-pdf');
+  const originalContent = downloadButton.innerHTML;
+
+  downloadButton.disabled = true;
+  downloadButton.innerHTML = `
+    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+  `;
+
+  try {
+    const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+    const modifiedPdfBytes = await modifiedPdf.save();
+    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = originalFileName + '_addedImage.pdf';
+    link.click();
+  } finally {
+    downloadButton.disabled = false;
+    downloadButton.innerHTML = originalContent;
+  }
 });
 let originalFileName = '';
 document.querySelector('input[name=pdf-upload]').addEventListener('change', async (event) => {
   const fileInput = event.target;
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
+    const { allFiles } = e.detail;
     if (allFiles && allFiles.length > 0) {
       const file = allFiles[0];
       originalFileName = file.name.replace(/\.[^/.]+$/, '');
       const pdfData = await file.arrayBuffer();
       pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
-      const pdfDoc = await pdfjsLib.getDocument({data: pdfData}).promise;
+      const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
       await DraggableUtils.renderPage(pdfDoc, 0);
 
       document.querySelectorAll('.show-on-file-selected').forEach((el) => {
@@ -30,6 +45,11 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.show-on-file-selected').forEach((el) => {
     el.style.cssText = 'display:none !important';
   });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Delete') {
+      DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted());
+    }
+  });
 });
 
 const imageUpload = document.querySelector('input[name=image-upload]');
@@ -45,3 +65,12 @@ imageUpload.addEventListener('change', (e) => {
     };
   }
 });
+
+async function goToFirstOrLastPage(page) {
+  if (page) {
+    const lastPage = DraggableUtils.pdfDoc.numPages;
+    await DraggableUtils.goToPage(lastPage - 1);
+  } else {
+    await DraggableUtils.goToPage(0);
+  }
+}

src/main/resources/static/js/pages/sign.js

@@ -73,6 +73,16 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.show-on-file-selected').forEach((el) => {
     el.style.cssText = 'display:none !important';
   });
+  document.querySelectorAll('.small-file-container-saved img ').forEach((img) => {
+    img.addEventListener('dragstart', (e) => {
+      e.dataTransfer.setData('fileUrl', img.src);
+    });
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Delete') {
+      DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted());
+    }
+  });
 });
 
 const imageUpload = document.querySelector('input[name=image-upload]');
@@ -203,11 +213,26 @@ async function goToFirstOrLastPage(page) {
 }
 
 document.getElementById('download-pdf').addEventListener('click', async () => {
-  const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
-  const modifiedPdfBytes = await modifiedPdf.save();
-  const blob = new Blob([modifiedPdfBytes], {type: 'application/pdf'});
-  const link = document.createElement('a');
-  link.href = URL.createObjectURL(blob);
-  link.download = originalFileName + '_signed.pdf';
-  link.click();
+  const downloadButton = document.getElementById('download-pdf');
+  const originalContent = downloadButton.innerHTML;
+
+  downloadButton.disabled = true;
+  downloadButton.innerHTML = `
+    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+  `;
+
+  try {
+    const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+    const modifiedPdfBytes = await modifiedPdf.save();
+    const blob = new Blob([modifiedPdfBytes], {type: 'application/pdf'});
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = originalFileName + '_signed.pdf';
+    link.click();
+  } catch (error) {
+    console.error('Error downloading PDF:', error);
+  } finally {
+    downloadButton.disabled = false;
+    downloadButton.innerHTML = originalContent;
+  }
 });