Adding the functionality to reverse the addition on all pages and imp…

…lementing buttons to navigate to the first and last pages (Stirling-Tools#2008)
thisisrenan · Nov 22, 2024 · e6d80ec · e6d80ec
1 parent a1c30f8
commit e6d80ec
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js
@@ -200,7 +200,7 @@ const DraggableUtils = {
   },
   async addAllPagesDraggableCanvas(element) {
     if (element) {
-
+      let currentPage = this.pageIndex
       if (!this.elementAllPages.includes(element)) {
         this.elementAllPages.push(element)
         element.style.filter = 'sepia(1) hue-rotate(90deg) brightness(1.2)';
@@ -232,7 +232,32 @@ const DraggableUtils = {
           }
           await this.goToPage(pageIndex)
         }
+      } else {
+        const index = this.elementAllPages.indexOf(element);
+        if (index !== -1) {
+          this.elementAllPages.splice(index, 1);
+        }
+        element.style.filter = '';
+        let pagesMap = this.documentsMap.get(this.pdfDoc);
+
+        if (!pagesMap) {
+          pagesMap = {};
+          this.documentsMap.set(this.pdfDoc, pagesMap);
+        }
+        for (let pageIndex = 0; pageIndex < this.pdfDoc.numPages; pageIndex++) {
+          if (pagesMap[`${pageIndex}-offsetWidth`] && pageIndex != currentPage) {
+            const pageElements = pagesMap[pageIndex];
+            pageElements.forEach(elementPage => {
+              const elementIndex = pageElements.findIndex(elementPage => elementPage['element'].id === element.id);
+              if (elementIndex !== -1) {
+                pageElements.splice(elementIndex, 1);
+              }
+            });
+          }
+          await this.goToPage(pageIndex)
+        }
       }
+      await this.goToPage(currentPage)
     }
   },
   deleteDraggableCanvas(element) {

diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
@@ -376,9 +376,13 @@ <h5 th:text="#{sign.sharedSigs}"></h5>
                     content_copy
                   </span>
                 </button>
+                <button class="btn btn-outline-secondary" onclick="goToFirstOrLastPage(false)" style="margin-left:auto">
+                  <span class="material-symbols-rounded">
+                    keyboard_double_arrow_left
+                  </span>
+                </button>
                 <button class="btn btn-outline-secondary" id="incrementPage"
-                  onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()"
-                  style="margin-left:auto">
+                  onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     class="bi bi-chevron-left" viewBox="0 0 16 16">
                     <path fill-rule="evenodd"
@@ -393,6 +397,11 @@ <h5 th:text="#{sign.sharedSigs}"></h5>
                       d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                   </svg>
                 </button>
+                <button class="btn btn-outline-secondary" onclick="goToFirstOrLastPage(true)">
+                  <span class="material-symbols-rounded">
+                    keyboard_double_arrow_right
+                  </span>
+                </button>
               </div>
             </div>
 
@@ -402,6 +411,17 @@ <h5 th:text="#{sign.sharedSigs}"></h5>
                 th:text="#{downloadPdf}"></button>
             </div>
 
+            <script>
+              async function goToFirstOrLastPage(page) {
+                if (page) {
+                  const lastPage = DraggableUtils.pdfDoc.numPages
+                  await DraggableUtils.goToPage(lastPage - 1)
+                } else {
+                  await DraggableUtils.goToPage(0)
+                }
+              }
+            </script>
+
             <script>
               document.getElementById("download-pdf").addEventListener('click', async () => {
                 const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();