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' }}

README.md

@@ -190,29 +190,29 @@ Stirling-PDF currently supports 36 languages!
 
 | Language                                     | Progress                               |
 | -------------------------------------------- | -------------------------------------- |
-| Arabic (العربية) (ar_AR)                     | ![98%](https://geps.dev/progress/98)   |
+| Arabic (العربية) (ar_AR)                     | ![97%](https://geps.dev/progress/97)   |
 | Basque (Euskara) (eu_ES)                     | ![55%](https://geps.dev/progress/55)   |
-| Bulgarian (Български) (bg_BG)                | ![97%](https://geps.dev/progress/97)   |
+| Bulgarian (Български) (bg_BG)                | ![96%](https://geps.dev/progress/96)   |
 | Catalan (Català) (ca_CA)                     | ![90%](https://geps.dev/progress/90)   |
 | Croatian (Hrvatski) (hr_HR)                  | ![98%](https://geps.dev/progress/98)   |
-| Czech (Česky) (cs_CZ)                        | ![98%](https://geps.dev/progress/98)   |
+| Czech (Česky) (cs_CZ)                        | ![97%](https://geps.dev/progress/97)   |
-| Danish (Dansk) (da_DK)                       | ![97%](https://geps.dev/progress/97)   |
+| Danish (Dansk) (da_DK)                       | ![96%](https://geps.dev/progress/96)   |
 | Dutch (Nederlands) (nl_NL)                   | ![96%](https://geps.dev/progress/96)   |
 | English (English) (en_GB)                    | ![100%](https://geps.dev/progress/100) |
 | English (US) (en_US)                         | ![100%](https://geps.dev/progress/100) |
 | French (Français) (fr_FR)                    | ![97%](https://geps.dev/progress/97)   |
-| German (Deutsch) (de_DE)                     | ![98%](https://geps.dev/progress/98)   |
+| German (Deutsch) (de_DE)                     | ![99%](https://geps.dev/progress/99)   |
-| Greek (Ελληνικά) (el_GR)                     | ![98%](https://geps.dev/progress/98)   |
+| Greek (Ελληνικά) (el_GR)                     | ![97%](https://geps.dev/progress/97)   |
 | Hindi (हिंदी) (hi_IN)                           | ![95%](https://geps.dev/progress/95)   |
 | Hungarian (Magyar) (hu_HU)                   | ![98%](https://geps.dev/progress/98)   |
-| Indonesian (Bahasa Indonesia) (id_ID)        | ![98%](https://geps.dev/progress/98)   |
+| Indonesian (Bahasa Indonesia) (id_ID)        | ![97%](https://geps.dev/progress/97)   |
 | Irish (Gaeilge) (ga_IE)                      | ![88%](https://geps.dev/progress/88)   |
-| Italian (Italiano) (it_IT)                   | ![98%](https://geps.dev/progress/98)   |
+| Italian (Italiano) (it_IT)                   | ![99%](https://geps.dev/progress/99)   |
-| Japanese (日本語) (ja_JP)                    | ![86%](https://geps.dev/progress/86)   |
+| Japanese (日本語) (ja_JP)                    | ![85%](https://geps.dev/progress/85)   |
-| Korean (한국어) (ko_KR)                      | ![96%](https://geps.dev/progress/96)   |
+| Korean (한국어) (ko_KR)                      | ![95%](https://geps.dev/progress/95)   |
-| Norwegian (Norsk) (no_NB)                    | ![88%](https://geps.dev/progress/88)   |
+| Norwegian (Norsk) (no_NB)                    | ![87%](https://geps.dev/progress/87)   |
 | Polish (Polski) (pl_PL)                      | ![97%](https://geps.dev/progress/97)   |
-| Portuguese (Português) (pt_PT)               | ![98%](https://geps.dev/progress/98)   |
+| Portuguese (Português) (pt_PT)               | ![97%](https://geps.dev/progress/97)   |
 | Portuguese Brazilian (Português) (pt_BR)     | ![98%](https://geps.dev/progress/98)   |
 | Romanian (Română) (ro_RO)                    | ![90%](https://geps.dev/progress/90)   |
 | Russian (Русский) (ru_RU)                    | ![97%](https://geps.dev/progress/97)   |
@@ -225,7 +225,7 @@ Stirling-PDF currently supports 36 languages!
 | Traditional Chinese (繁體中文) (zh_TW)       | ![98%](https://geps.dev/progress/98)   |
 | Turkish (Türkçe) (tr_TR)                     | ![92%](https://geps.dev/progress/92)   |
 | Ukrainian (Українська) (uk_UA)               | ![80%](https://geps.dev/progress/80)   |
-| Vietnamese (Tiếng Việt) (vi_VN)              | ![89%](https://geps.dev/progress/89)   |
+| Vietnamese (Tiếng Việt) (vi_VN)              | ![88%](https://geps.dev/progress/88)   |
 
 ## Contributing (Creating Issues, Translations, Fixing Bugs, etc.)
 

build.gradle

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

scripts/ignore_translation.toml

@@ -32,12 +32,12 @@ ignore = [
 ignore = [
     'AddStampRequest.alphabet',
     'AddStampRequest.position',
-    'home.pipeline.title'
     'PDFToBook.selectText.1',
     'PDFToText.tags',
     'addPageNumbers.selectText.3',
     'alphabet',
     'certSign.name',
+    'home.pipeline.title',
     'language.direction',
     'licenses.version',
     'pipeline.title',
@@ -46,7 +46,6 @@ ignore = [
     'sponsor',
     'text',
     'watermark.type.1',
-    'certSign.name',
 ]
 
 [el_GR]

src/main/resources/messages_ar_AR.properties

@@ -81,6 +81,7 @@ page=صفحة
 pages=صفحات
 loading=جارٍ التحميل...
 addToDoc=إضافة إلى المستند
+reset=Reset
 
 legal.privacy=سياسة الخصوصية
 legal.terms=شروط الاستخدام

src/main/resources/messages_bg_BG.properties

@@ -81,6 +81,7 @@ page=Страница
 pages=Страници
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Политика за поверителност
 legal.terms=Правила и условия

src/main/resources/messages_ca_CA.properties

@@ -81,6 +81,7 @@ page=Pàgina
 pages=Pàgines
 loading=Carregant...
 addToDoc=Afegeix al document
+reset=Reset
 
 legal.privacy=Política de Privacitat
 legal.terms=Termes i condicions

src/main/resources/messages_cs_CZ.properties

@@ -81,6 +81,7 @@ page=Strana
 pages=Strany
 loading=Načítání...
 addToDoc=Přidat do dokumentu
+reset=Reset
 
 legal.privacy=Politika soukromí
 legal.terms=Podmínky použití

src/main/resources/messages_da_DK.properties

@@ -81,6 +81,7 @@ page=Sidenummer
 pages=Sideantal
 loading=Laster...
 addToDoc=Tilføj til Dokument
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Vilkår og betingelser

src/main/resources/messages_de_DE.properties

@@ -81,6 +81,7 @@ page=Seite
 pages=Seiten
 loading=Laden...
 addToDoc=In Dokument hinzufügen
+reset=Reset
 
 legal.privacy=Datenschutz
 legal.terms=AGB

src/main/resources/messages_el_GR.properties

@@ -81,6 +81,7 @@ page=Σελίδα
 pages=Σελίδες
 loading=Φόρτωση...
 addToDoc=Πρόσθεση στο Εκπομπώματο
+reset=Reset
 
 legal.privacy=Πολιτική Προνομίους
 legal.terms=Φράσεις Υποχρεωτικότητας

src/main/resources/messages_en_US.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_es_ES.properties

@@ -81,6 +81,7 @@ page=Página
 pages=Páginas
 loading=Cargando...
 addToDoc=Agregar al Documento
+reset=Reset
 
 legal.privacy=Política de Privacidad
 legal.terms=Términos y Condiciones

src/main/resources/messages_eu_ES.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_fr_FR.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Chargement...
 addToDoc=Ajouter au Document
+reset=Reset
 
 legal.privacy=Politique de Confidentialité
 legal.terms=Conditions Générales

src/main/resources/messages_ga_IE.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_hi_IN.properties

@@ -81,6 +81,7 @@ page=पृष्ठ
 pages=पृष्ठों
 loading=डालिंग...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=गुप्तता सूचना
 legal.terms=शर्तें और प्रवाह

src/main/resources/messages_hr_HR.properties

@@ -81,6 +81,7 @@ page=Stranica
 pages=Stranice
 loading=Učitavanje...
 addToDoc=Dodaj u dokument
+reset=Reset
 
 legal.privacy=Politika privatnosti
 legal.terms=Uspe sodržine

src/main/resources/messages_hu_HU.properties

@@ -81,6 +81,7 @@ page=Oldal
 pages=Oldalak
 loading=Betöltés...
 addToDoc=Hozzáadás dokumentumba
+reset=Reset
 
 legal.privacy=Adatvédelmi nyilatkozat
 legal.terms=Feltételek és feltételek

src/main/resources/messages_id_ID.properties

@@ -81,6 +81,7 @@ page=Halaman
 pages=Halaman-halaman
 loading=Mengambil data...
 addToDoc=Tambahkan ke Dokumen
+reset=Reset
 
 legal.privacy=Kebijakan Privasi
 legal.terms=Syarat dan Ketentuan

src/main/resources/messages_it_IT.properties

@@ -81,6 +81,7 @@ page=Pagina
 pages=Pagine
 loading=Caricamento...
 addToDoc=Aggiungi al documento
+reset=Reset
 
 legal.privacy=Informativa sulla privacy
 legal.terms=Termini e Condizioni
@@ -141,7 +142,7 @@ navbar.language=Lingue
 navbar.settings=Impostazioni
 navbar.allTools=Strumenti
 navbar.multiTool=Strumenti multipli
-navbar.search=Search
+navbar.search=Cerca
 navbar.sections.organize=Organizza
 navbar.sections.convertTo=Converti in PDF
 navbar.sections.convertFrom=Converti da PDF
@@ -944,7 +945,7 @@ multiTool.downloadAll=Esporta
 multiTool.downloadSelected=Esporta selezionata
 
 #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!
+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!
 
 #view pdf
 viewPdf.title=Visualizza PDF

src/main/resources/messages_ja_JP.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=プライバシーポリシー
 legal.terms=利用規約

src/main/resources/messages_ko_KR.properties

@@ -81,6 +81,7 @@ page=페이지
 pages=페이지
 loading=로딩 중...
 addToDoc=문서에 추가
+reset=Reset
 
 legal.privacy=개인 정보 정책
 legal.terms=이용 약관

src/main/resources/messages_nl_NL.properties

@@ -81,6 +81,7 @@ page=Pagina
 pages=Pagen
 loading=Laden...
 addToDoc=Toevoegen aan document
+reset=Reset
 
 legal.privacy=Privacybeleid
 legal.terms=Voorwaarden van gebruik

src/main/resources/messages_no_NB.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_pl_PL.properties

@@ -81,6 +81,7 @@ page=Strona
 pages=Strony
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Polityka Prywatności
 legal.terms=Zasady i Postanowienia

src/main/resources/messages_pt_BR.properties

@@ -81,6 +81,7 @@ page=Página
 pages=Páginas
 loading=Carregando...
 addToDoc=Adicionar ao Documento
+reset=Reset
 
 legal.privacy=Política de Privacidade
 legal.terms=Termos e Condições

src/main/resources/messages_pt_PT.properties

@@ -81,6 +81,7 @@ page=Página
 pages=Páginas
 loading=A carregar...
 addToDoc=Adicionar ao Documento
+reset=Reset
 
 legal.privacy=Política de Privacidade
 legal.terms=Termos e Condições

src/main/resources/messages_ro_RO.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_ru_RU.properties

@@ -81,6 +81,7 @@ page=Страница
 pages=Страницы
 loading=Загрузка...
 addToDoc=Добавить в документ
+reset=Reset
 
 legal.privacy=Политика конфиденциальности
 legal.terms=Условия использования

src/main/resources/messages_sk_SK.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_sr_LATN_RS.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_sv_SE.properties

@@ -81,6 +81,7 @@ page=Sidan
 pages=Sidor
 loading=Laddar...
 addToDoc=Lägg till i dokument
+reset=Reset
 
 legal.privacy=Dataprotektionspolicy
 legal.terms=Villkor och betingelser

src/main/resources/messages_th_TH.properties

@@ -81,6 +81,7 @@ page=หน้า
 pages=หน้า
 loading=กำลังโหลด...
 addToDoc=เพิ่มเข้าสู่เอกสาร
+reset=Reset
 
 legal.privacy=นโยบายความเป็นส่วนตัว
 legal.terms=ข้อกำหนดการใช้งาน

src/main/resources/messages_tr_TR.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Gizlilik Politikası
 legal.terms=Şartlar ve koşullar

src/main/resources/messages_uk_UA.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_vi_VN.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_zh_CN.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/messages_zh_TW.properties

@@ -81,6 +81,7 @@ page=頁面
 pages=頁面
 loading=載入中...
 addToDoc=新增至文件
+reset=Reset
 
 legal.privacy=隱私權政策
 legal.terms=使用條款

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

@@ -9,81 +9,81 @@ const DraggableUtils = {
 
   init() {
     interact(".draggable-canvas")
-    .draggable({
+      .draggable({
-      listeners: {
+        listeners: {
-        move: (event) => {
+          move: (event) => {
-          const target = event.target;
+            const target = event.target;
-          const x = (parseFloat(target.getAttribute("data-bs-x")) || 0)
+            const x = (parseFloat(target.getAttribute("data-bs-x")) || 0)
               + event.dx;
-          const y = (parseFloat(target.getAttribute("data-bs-y")) || 0)
+            const y = (parseFloat(target.getAttribute("data-bs-y")) || 0)
               + event.dy;
 
-          target.style.transform = `translate(${x}px, ${y}px)`;
+            target.style.transform = `translate(${x}px, ${y}px)`;
-          target.setAttribute("data-bs-x", x);
+            target.setAttribute("data-bs-x", x);
-          target.setAttribute("data-bs-y", y);
+            target.setAttribute("data-bs-y", y);
 
-          this.onInteraction(target);
+            this.onInteraction(target);
-          //update the last interacted element
+            //update the last interacted element
-          this.lastInteracted = event.target;
+            this.lastInteracted = event.target;
+          },
         },
-      },
+      })
-    })
+      .resizable({
-    .resizable({
+        edges: { left: true, right: true, bottom: true, top: true },
-      edges: { left: true, right: true, bottom: true, top: true },
+        listeners: {
-      listeners: {
+          move: (event) => {
-        move: (event) => {
+            var target = event.target;
-          var target = event.target;
+            var x = parseFloat(target.getAttribute("data-bs-x")) || 0;
-          var x = parseFloat(target.getAttribute("data-bs-x")) || 0;
+            var y = parseFloat(target.getAttribute("data-bs-y")) || 0;
-          var y = parseFloat(target.getAttribute("data-bs-y")) || 0;
 
-          // check if control key is pressed
+            // check if control key is pressed
-          if (event.ctrlKey) {
+            if (event.ctrlKey) {
-            const aspectRatio = target.offsetWidth / target.offsetHeight;
+              const aspectRatio = target.offsetWidth / target.offsetHeight;
-            // preserve aspect ratio
+              // preserve aspect ratio
-            let width = event.rect.width;
+              let width = event.rect.width;
-            let height = event.rect.height;
+              let height = event.rect.height;
 
-            if (Math.abs(event.deltaRect.width) >= Math.abs(
+              if (Math.abs(event.deltaRect.width) >= Math.abs(
                 event.deltaRect.height)) {
-              height = width / aspectRatio;
+                height = width / aspectRatio;
-            } else {
+              } else {
-              width = height * aspectRatio;
+                width = height * aspectRatio;
+              }
+
+              event.rect.width = width;
+              event.rect.height = height;
             }
 
-            event.rect.width = width;
+            target.style.width = event.rect.width + "px";
-            event.rect.height = height;
+            target.style.height = event.rect.height + "px";
-          }
 
-          target.style.width = event.rect.width + "px";
+            // translate when resizing from top or left edges
-          target.style.height = event.rect.height + "px";
+            x += event.deltaRect.left;
+            y += event.deltaRect.top;
 
-          // translate when resizing from top or left edges
+            target.style.transform = "translate(" + x + "px," + y + "px)";
-          x += event.deltaRect.left;
-          y += event.deltaRect.top;
 
-          target.style.transform = "translate(" + x + "px," + y + "px)";
+            target.setAttribute("data-bs-x", x);
-
+            target.setAttribute("data-bs-y", y);
-          target.setAttribute("data-bs-x", x);
+            target.textContent = Math.round(event.rect.width) + "\u00D7"
-          target.setAttribute("data-bs-y", y);
-          target.textContent = Math.round(event.rect.width) + "\u00D7"
               + Math.round(event.rect.height);
 
-          this.onInteraction(target);
+            this.onInteraction(target);
+          },
         },
-      },
 
-      modifiers: [
+        modifiers: [
-        interact.modifiers.restrictSize({
+          interact.modifiers.restrictSize({
-          min: {width: 5, height: 5},
+            min: { width: 5, height: 5 },
-        }),
+          }),
-      ],
+        ],
-      inertia: true,
+        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(),
+          x: draggablePositionRelative.x * widthAdjusted,
-          y: draggablePositionRelative.y * page.getHeight(),
+          y: draggablePositionRelative.y * heightAdjusted,
-          width: draggablePositionRelative.width * page.getWidth(),
+          width: draggablePositionRelative.width * widthAdjusted,
-          height: draggablePositionRelative.height * page.getHeight(),
+          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,
+          x: x,
-          y: page.getHeight() - draggablePositionPdf.y - draggablePositionPdf.height,
+          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) {
+                function renderPageFromFile(file) {
-                  file = e.target.files[0];
                   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("pagination-button-container").style.display = "flex";
-                    document.getElementById("instruction-text").style.display="block";
+                    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
@@ -165,4 +162,4 @@
   </script>
 </body>
 
-</html>
+</html>