From f093d657296cedb7df8119a84276bfe989e0afb7 Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sun, 5 Feb 2023 18:08:43 +0300
Subject: [PATCH] Fixed bugs

---
 .../SPDF/controller/RotationController.java   |  4 +-
 src/main/resources/templates/rotate-pdf.html  | 38 ++++++++++++++-----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/main/java/stirling/software/SPDF/controller/RotationController.java b/src/main/java/stirling/software/SPDF/controller/RotationController.java
index 42676f6d..436dc484 100644
--- a/src/main/java/stirling/software/SPDF/controller/RotationController.java
+++ b/src/main/java/stirling/software/SPDF/controller/RotationController.java
@@ -37,7 +37,7 @@ public class RotationController {
 
 	@PostMapping("/rotate-pdf")
 	public ResponseEntity<byte[]> rotatePDF(@RequestParam("fileInput") MultipartFile pdfFile,
-			@RequestParam("angle") String angle) throws IOException {
+			@RequestParam("angle") Integer angle) throws IOException {
 
 		// Load the PDF document
 		PDDocument document = PDDocument.load(pdfFile.getBytes());
@@ -50,7 +50,7 @@ public class RotationController {
 
 		while (iterPage.hasNext()) {
 			PDPage page = iterPage.next();
-			page.setRotation(Integer.valueOf(angle));
+			page.setRotation(page.getRotation() + angle);
 		}
 
 		return PdfUtils.pdfDocToWebResponse(document, pdfFile.getName() + "_rotated.pdf");
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index d22c40c8..58855922 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -24,9 +24,19 @@
 					</div>
 
 					<div class="buttonContainer">
-						<button type="button" class="btn btn-secondary" onclick="rotate(-90)">L</button>
+						<button type="button" class="btn btn-secondary" onclick="rotate(-90)">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+								<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+								<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+							</svg>
+						</button>
 						<button type="submit" class="btn btn-primary">Complete</button>
-						<button type="button" class="btn btn-secondary" onclick="rotate(90)">R</button>
+						<button type="button" class="btn btn-secondary" onclick="rotate(90)">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+								<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+								<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+							</svg>
+						</button>
 					</div>
 				</form>
 
@@ -57,8 +67,13 @@
 			const canvas = document.createElement("canvas");
 
 			// set the canvas size to the size of the page
-			canvas.width = page.view[2];
-			canvas.height = page.view[3];
+			if (page.rotate == 90 || page.rotate == 270) {
+				canvas.width = page.view[3];
+				canvas.height = page.view[2];
+			} else {
+				canvas.width = page.view[2];
+				canvas.height = page.view[3];
+			}
 
 			// render the page onto the canvas
 			var renderContext = {
@@ -71,14 +86,14 @@
 		});
 
 		function rotate(deg) {
-			var lastTransform = preview.style.transform;
+			var lastTransform = preview.style.rotate;
 			if (!lastTransform) {
 				lastTransform = "0";
 			}
 			const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
 			const newAngle = lastAngle + deg;
 
-			preview.style.transform = "rotate(" + newAngle + "deg)";
+			preview.style.rotate = newAngle + "deg";
 			angleInput.value = newAngle;
 		}
 	</script>
@@ -86,10 +101,14 @@
 		#pdf-preview {
 			margin: 0 auto;
 			display: block;
-			max-width: 100%;
-			max-height: 100%;
+			max-width: calc(100% - 30px);
+			max-height: calc(100% - 30px);
     		box-shadow: 0 0 4px rgba(100,100,100,.25);
-    		transition: transform .3s;
+    		transition: rotate .3s;
+    		position: absolute;
+    		top: 50%;
+    		left: 50%;
+    		translate: -50% -50%;
 		}
 		.previewContainer {
 			aspect-ratio: 1;
@@ -100,6 +119,7 @@
 			padding: 15px;
 			display: none;
 			overflow: hidden;
+			position: relative;
 		}
 
 		.buttonContainer {