Fix canvas pdf to csv (#2228)

* WIP: fixes canvas and rect to crop - small problem in smaller screens - neew to fix re render page on resize

* Closes #2209

* Closes #2227

.github/workflows/push-docker.yml

@@ -67,6 +67,7 @@ jobs:
           images: |
             ${{ secrets.DOCKER_HUB_USERNAME }}/s-pdf
             ghcr.io/${{ steps.repoowner.outputs.lowercase }}/s-pdf
+            ghcr.io/${{ steps.repoowner.outputs.lowercase }}/stirling-pdf
             ${{ secrets.DOCKER_HUB_ORG_USERNAME }}/stirling-pdf
           tags: |
             type=raw,value=${{ steps.versionNumber.outputs.versionNumber }},enable=${{ github.ref == 'refs/heads/master' }}
@@ -95,6 +96,7 @@ jobs:
           images: |
             ${{ secrets.DOCKER_HUB_USERNAME }}/s-pdf
             ghcr.io/${{ steps.repoowner.outputs.lowercase }}/s-pdf
+            ghcr.io/${{ steps.repoowner.outputs.lowercase }}/stirling-pdf
             ${{ secrets.DOCKER_HUB_ORG_USERNAME }}/stirling-pdf
           tags: |
             type=raw,value=${{ steps.versionNumber.outputs.versionNumber }}-ultra-lite,enable=${{ github.ref == 'refs/heads/master' }}
@@ -122,6 +124,7 @@ jobs:
           images: |
             ${{ secrets.DOCKER_HUB_USERNAME }}/s-pdf
             ghcr.io/${{ steps.repoowner.outputs.lowercase }}/s-pdf
+            ghcr.io/${{ steps.repoowner.outputs.lowercase }}/stirling-pdf
             ${{ secrets.DOCKER_HUB_ORG_USERNAME }}/stirling-pdf
           tags: |
             type=raw,value=${{ steps.versionNumber.outputs.versionNumber }}-fat,enable=${{ github.ref == 'refs/heads/master' }}

build.gradle

@@ -22,7 +22,7 @@ ext {
 }
 
 group = "stirling.software"
-version = "0.33.0"
+version = "0.33.1"
 
 java {
     // 17 is lowest but we support and recommend 21

src/main/resources/static/js/draggable-utils.js

@@ -74,16 +74,16 @@ const DraggableUtils = {
 
         modifiers: [
           interact.modifiers.restrictSize({
-          min: {width: 5, height: 5},
+            min: { width: 5, height: 5 },
           }),
         ],
         inertia: true,
       });
     //Arrow key Support for Add-Image and Sign pages
-    if(window.location.pathname.endsWith('sign') || window.location.pathname.endsWith('add-image')) {
+    if (window.location.pathname.endsWith('sign') || window.location.pathname.endsWith('add-image')) {
       window.addEventListener('keydown', (event) => {
         //Check for last interacted element
-        if (!this.lastInteracted){
+        if (!this.lastInteracted) {
           return;
         }
         // Get the currently selected element
@@ -288,7 +288,7 @@ const DraggableUtils = {
     }
   },
 
-  parseTransform(element) {},
+  parseTransform(element) { },
   async getOverlayedPdfDocument() {
     const pdfBytes = await this.pdfDoc.getData();
     const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, {
@@ -308,6 +308,7 @@ const DraggableUtils = {
       const offsetWidth = pagesMap[pageIdx + "-offsetWidth"];
       const offsetHeight = pagesMap[pageIdx + "-offsetHeight"];
 
+
       for (const draggableData of draggablesData) {
         // embed the draggable canvas
         const draggableElement = draggableData.element;
@@ -324,6 +325,24 @@ const DraggableUtils = {
           width: draggableData.offsetWidth,
           height: draggableData.offsetHeight,
         };
+
+        //Auxiliary variables
+        let widthAdjusted = page.getWidth();
+        let heightAdjusted = page.getHeight();
+        const rotation = page.getRotation();
+
+        //Normalizing angle
+        let normalizedAngle = rotation.angle % 360;
+        if (normalizedAngle < 0) {
+          normalizedAngle += 360;
+        }
+
+        //Changing the page dimension if the angle is 90 or 270
+        if (normalizedAngle === 90 || normalizedAngle === 270) {
+          let widthTemp = widthAdjusted;
+          widthAdjusted = heightAdjusted;
+          heightAdjusted = widthTemp;
+        }
         const draggablePositionRelative = {
           x: draggablePositionPixels.x / offsetWidth,
           y: draggablePositionPixels.y / offsetHeight,
@@ -331,18 +350,36 @@ const DraggableUtils = {
           height: draggablePositionPixels.height / offsetHeight,
         };
         const draggablePositionPdf = {
-          x: draggablePositionRelative.x * page.getWidth(),
-          y: draggablePositionRelative.y * page.getHeight(),
-          width: draggablePositionRelative.width * page.getWidth(),
-          height: draggablePositionRelative.height * page.getHeight(),
+          x: draggablePositionRelative.x * widthAdjusted,
+          y: draggablePositionRelative.y * heightAdjusted,
+          width: draggablePositionRelative.width * widthAdjusted,
+          height: draggablePositionRelative.height * heightAdjusted,
         };
 
+        //Defining the image if the page has a 0-degree angle
+        let x = draggablePositionPdf.x
+        let y = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height
+
+
+        //Defining the image position if it is at other angles
+        if (normalizedAngle === 90) {
+          x = draggablePositionPdf.y + draggablePositionPdf.height;
+          y = draggablePositionPdf.x;
+        } else if (normalizedAngle === 180) {
+          x = widthAdjusted - draggablePositionPdf.x;
+          y = draggablePositionPdf.y + draggablePositionPdf.height;
+        } else if (normalizedAngle === 270) {
+          x = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height;
+          y = widthAdjusted - draggablePositionPdf.x;
+        }
+
         // draw the image
         page.drawImage(pdfImageObject, {
-          x: draggablePositionPdf.x,
-          y: page.getHeight() - draggablePositionPdf.y - draggablePositionPdf.height,
+          x: x,
+          y: y,
           width: draggablePositionPdf.width,
           height: draggablePositionPdf.height,
+          rotate: rotation
         });
       }
     }

src/main/resources/templates/convert/pdf-to-csv.html

@@ -23,23 +23,26 @@
               </form>
               <p id="instruction-text" style="margin: 0; display: none" th:text="#{PDFToCSV.prompt}"></p>
 
-              <div style="position: relative; display: inline-block;">
+              <div style="position: relative; width: auto;" id="canvasesContainer">
                 <div>
                   <div style="display:none ;margin: 3px;position: absolute;top: 0;width: 120px;justify-content:space-between;z-index: 10" id="pagination-button-container">
                     <button id='previous-page-btn' style='opacity: 80% ; width: 50px; height: 30px; display: flex;align-items: center;justify-content: center; background: grey; color: #ffffff;  ;border: none;outline: none; border-radius: 4px;'> &lt; </button>
                     <button id='next-page-btn' style='opacity: 80% ; width: 50px; height: 30px; display: flex;align-items: center;justify-content: center; background: grey; color: #ffffff;  ;border: none;outline: none; border-radius: 4px;'> &gt; </button>
                   </div>
-                  <canvas id="crop-pdf-canvas" style="position: absolute; top: 0; left: 0; z-index: 1;"></canvas>
+                  <canvas id="cropPdfCanvas" style="width: 100%"></canvas>
                 </div>
-                <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>
+                <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; z-index: 2; width: 100%"></canvas>
               </div>
               <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
               <script>
-                let pdfCanvas  = document.getElementById('crop-pdf-canvas');
+                let pdfCanvas  = document.getElementById('cropPdfCanvas');
                 let overlayCanvas = document.getElementById('overlayCanvas');
+                let canvasesContainer = document.getElementById('canvasesContainer');
+                canvasesContainer.style.display = "none";
                 // let paginationBtnContainer = ;
 
                 let context = pdfCanvas.getContext('2d');
+                let overlayContext = overlayCanvas.getContext('2d');
 
                 let btn1Object = document.getElementById('previous-page-btn');
                 let btn2Object = document.getElementById('next-page-btn');
@@ -60,6 +63,8 @@
                 let rectWidth = 0;
                 let rectHeight = 0;
 
+                let timeId = null; // timeout id for resizing canvases event
+
                 btn1Object.addEventListener('click',function (e){
                   if (currentPage !== 1) {
                     currentPage = currentPage - 1;
@@ -102,14 +107,13 @@
                   }
                 });
 
-                fileInput.addEventListener('change', function(e) {
-                  file = e.target.files[0];
+                function renderPageFromFile(file) {
                   if (file.type === 'application/pdf') {
                     let reader = new FileReader();
-                    reader.onload = function(ev) {
+                    reader.onload = function (ev) {
                       let typedArray = new Uint8Array(reader.result);
                       pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
-                      pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
+                      pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {
                         pdfDoc = pdf;
                         totalPages = pdf.numPages;
                         renderPage(currentPage);
@@ -117,9 +121,37 @@
                       pageId.value = currentPage;
                     };
                     reader.readAsArrayBuffer(file);
-                    document.getElementById("pagination-button-container").style.display="flex";
-                    document.getElementById("instruction-text").style.display="block";
+                    document.getElementById("pagination-button-container").style.display = "flex";
+                    document.getElementById("instruction-text").style.display = "block";
                   }
+                }
+
+                window.addEventListener("resize", function() {
+                  clearTimeout(timeId);
+                  timeId = setTimeout(function () {
+                    if (fileInput.files.length == 0) return;
+                    let canvasesContainer = document.getElementById('canvasesContainer');
+                    let containerRect = canvasesContainer.getBoundingClientRect();
+
+                    context.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
+
+                    overlayContext.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+
+                    pdfCanvas.width = containerRect.width;
+                    pdfCanvas.height = containerRect.height;
+
+                    overlayCanvas.width = containerRect.width;
+                    overlayCanvas.height = containerRect.height;
+
+                    let file = fileInput.files[0];
+                    renderPageFromFile(file);
+                  }, 1000);
+                });
+
+                fileInput.addEventListener('change', function(e) {
+                  canvasesContainer.style.display = "block"; // set for visual purposes
+                  file = e.target.files[0];
+                  renderPageFromFile(file);
                 });
 
                 function renderPage(pageNumber) {

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

@@ -83,9 +83,6 @@
                     </span>
                   </button>
                 </div>
-                <div class="mb-3">
-                  <button type="button" id="resetFileInputBtn" class="btn btn-danger" onclick="removeAllElements()" th:text="#{reset}">Reset</button>
-                </div>
                 <div id="selected-pages-display" class="selected-pages-container hidden">
                   <div style="display:flex; height:3rem; margin-right:1rem">
                     <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected