From 0f0c5f3d49e68570e5388d052f42141e9799e0f8 Mon Sep 17 00:00:00 2001
From: ntran18 <108908370+ntran18@users.noreply.github.com>
Date: Tue, 5 Nov 2024 15:21:40 -0800
Subject: [PATCH 1/4] Fixing the exportToPDF so the image doesn't too scale on
 width or height

---
 web-client/public/js/setup-handlers.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/web-client/public/js/setup-handlers.js b/web-client/public/js/setup-handlers.js
index 4b71a42a..4550b93d 100644
--- a/web-client/public/js/setup-handlers.js
+++ b/web-client/public/js/setup-handlers.js
@@ -185,10 +185,24 @@ export const setupHandlers = grnState => {
         const imgData = canvas.toDataURL("image/png");
 
         const pdf = new jsPDF("l", "mm", "letter");
-        const width = pdf.internal.pageSize.getWidth();
-        const height = pdf.internal.pageSize.getHeight();
+        const pdfWidth = pdf.internal.pageSize.getWidth();
+        const pdfHeight = pdf.internal.pageSize.getHeight();
 
-        pdf.addImage(imgData, "PNG", 0, 0, width, height);
+        const svgWidth = canvas.width;
+        const svgHeight = canvas.height;
+
+        const aspectRatio = svgWidth / svgHeight;
+        let scaledWidth = pdfWidth;
+        let scaledHeight = pdfWidth / aspectRatio;
+
+        if (scaledHeight > pdfHeight) {
+            scaledHeight = pdfHeight;
+            scaledWidth = pdfHeight * aspectRatio;
+        }
+
+        pdf.addImage(imgData, "PNG", 0, 0, scaledWidth, scaledHeight);
+    
+        // pdf.addImage(imgData, "PNG", 0, 0, width, height);
         pdf.save(name);
     };
 

From 0bd532223f24b01fb8a92f0fc5fc909bfa6d9ba6 Mon Sep 17 00:00:00 2001
From: ntran18 <108908370+ntran18@users.noreply.github.com>
Date: Tue, 5 Nov 2024 15:29:46 -0800
Subject: [PATCH 2/4] Clean code for #59

---
 web-client/public/js/setup-handlers.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web-client/public/js/setup-handlers.js b/web-client/public/js/setup-handlers.js
index 4550b93d..9dd2a97d 100644
--- a/web-client/public/js/setup-handlers.js
+++ b/web-client/public/js/setup-handlers.js
@@ -193,7 +193,8 @@ export const setupHandlers = grnState => {
 
         const aspectRatio = svgWidth / svgHeight;
         let scaledWidth = pdfWidth;
-        let scaledHeight = pdfWidth / aspectRatio;
+        // ratio = width/height --> height = width/ratio
+        let scaledHeight = scaledWidth / aspectRatio;
 
         if (scaledHeight > pdfHeight) {
             scaledHeight = pdfHeight;
@@ -201,8 +202,6 @@ export const setupHandlers = grnState => {
         }
 
         pdf.addImage(imgData, "PNG", 0, 0, scaledWidth, scaledHeight);
-    
-        // pdf.addImage(imgData, "PNG", 0, 0, width, height);
         pdf.save(name);
     };
 

From fbb13df1647ffbb9bce4b0377ae2993db756b745 Mon Sep 17 00:00:00 2001
From: ntran18 <108908370+ntran18@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:22:20 -0800
Subject: [PATCH 3/4] #59 change the background color from black to white for
 PNG export

---
 web-client/public/js/setup-handlers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/public/js/setup-handlers.js b/web-client/public/js/setup-handlers.js
index 9dd2a97d..f353efdd 100644
--- a/web-client/public/js/setup-handlers.js
+++ b/web-client/public/js/setup-handlers.js
@@ -222,7 +222,7 @@ export const setupHandlers = grnState => {
     $(EXPORT_TO_PNG).click(() => {
         var svgContainer = document.getElementById("exportContainer");
         var editedName = grnState.name.replace(determineFileType(grnState.name), "") + ".png";
-        saveSvgAsPng(svgContainer, editedName);
+        saveSvgAsPng(svgContainer, editedName, { backgroundColor: "white"});
     });
 
     $(EXPORT_TO_SVG).click(() => {

From 808f6c4367fa0ea3ac72352fde096ef7db146255 Mon Sep 17 00:00:00 2001
From: ntran18 <108908370+ntran18@users.noreply.github.com>
Date: Tue, 5 Nov 2024 21:26:01 -0800
Subject: [PATCH 4/4] Modify the location of the image in pdf

---
 web-client/public/js/setup-handlers.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web-client/public/js/setup-handlers.js b/web-client/public/js/setup-handlers.js
index f353efdd..f3f82de5 100644
--- a/web-client/public/js/setup-handlers.js
+++ b/web-client/public/js/setup-handlers.js
@@ -201,7 +201,14 @@ export const setupHandlers = grnState => {
             scaledWidth = pdfHeight * aspectRatio;
         }
 
-        pdf.addImage(imgData, "PNG", 0, 0, scaledWidth, scaledHeight);
+        pdf.addImage(
+            imgData,
+            "PNG",
+            (pdfWidth - scaledWidth) / 2,
+            (pdfHeight - scaledHeight) / 2,
+            scaledWidth,
+            scaledHeight
+        );
         pdf.save(name);
     };