From 58423bfc21c3c5be6ddda90ca550b249826f42b3 Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sun, 5 Feb 2023 02:45:33 +0300
Subject: [PATCH 1/4] Redesigned the rotate page

---
 .../resources/templates/fragments/common.html |  24 +++++
 src/main/resources/templates/rotate-pdf.html  | 102 ++++++++++++++----
 2 files changed, 108 insertions(+), 18 deletions(-)

diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index d8abe242..18352416 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -6,6 +6,9 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/build/pdf.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/web/pdf_viewer.min.css" rel="stylesheet">
+
 <link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
 <script>
 	function toggleDarkMode() {
@@ -93,4 +96,25 @@
 			};
 		}
 	</script>
+</th:block>
+
+<th:block th:fragment="fileSelector(name, multiple)">
+	<div class="custom-file-chooser">
+		<div class="custom-file">
+			<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}">
+			<label class="custom-file-label" th:for="${name}+'-input'">Choose file</label>
+		</div>
+	</div>
+
+	<script th:inline="javascript">
+		$([[${"#"+name+"-input"}]]).on("change", function() {
+			const files = $(this).get(0).files;
+			const fileNames = Array.from(files).map(f => f.name).join(", ");
+			if (fileNames) {
+				$(this).siblings(".custom-file-label").addClass("selected").html(fileNames);
+			} else {
+				$(this).siblings(".custom-file-label").addClass("selected").html("Choose file");
+			}
+		});
+	</script>
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index cd17e8aa..d22c40c8 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -15,28 +15,20 @@
 			<div class="col-md-6">
 				<h2>Rotate PDF</h2>
 
+				<form action="#" th:action="@{rotate-pdf}" th:object="${rotateForm}" method="post" enctype="multipart/form-data">
+					<div th:replace="fragments/common :: fileSelector(name='fileInput', multiple=false)"></div>
+					<input type="hidden" id="angleInput" name="angle" value="0">
 
-
-				<form action="#" th:action="@{rotate-pdf}" th:object="${rotateForm}"
-					method="post" enctype="multipart/form-data">
-					<div class="custom-file">
-						<input type="file" class="custom-file-input" id="fileInput"
-							name="fileInput" required> <label
-							class="custom-file-label" for="fileInput">Choose PDF</label>
+					<div class="previewContainer">
+						<img id="pdf-preview"/>
 					</div>
 
-					<label for="angle">Select rotation angle (in multiples of
-						90 degrees):</label> <select id="angle" class="form-control" name="angle">
-						<option value="90">90</option>
-						<option value="180">180</option>
-						<option value="270">270</option>
-						<option value="-90">-90</option>
-						<option value="-180">-180</option>
-						<option value="-270">-270</option>
-					</select> <br>
-					<button type="submit" class="btn btn-primary">Rotate</button>
+					<div class="buttonContainer">
+						<button type="button" class="btn btn-secondary" onclick="rotate(-90)">L</button>
+						<button type="submit" class="btn btn-primary">Complete</button>
+						<button type="button" class="btn btn-secondary" onclick="rotate(90)">R</button>
+					</div>
 				</form>
-				<th:block th:insert="~{fragments/common :: filelist}"></th:block>
 
 			</div>
 		</div>
@@ -44,6 +36,80 @@
 	</div>
 		<div th:insert="~{fragments/footer.html :: footer}"></div>
 	</div>
+
+	<script>
+		const angleInput = document.getElementById("angleInput");
+		const fileInput = document.getElementById("fileInput-input");
+		const preview = document.getElementById("pdf-preview");
+		fileInput.addEventListener("change", async function() {
+			console.log("loading pdf");
+
+			preview.parentElement.style.display = "block";
+			document.querySelector(".buttonContainer").style.display = "flex";
+
+			var file = fileInput.files[0];
+			var url = URL.createObjectURL(file)
+			var loadingTask = pdfjsLib.getDocument(url);
+
+			const pdf = await loadingTask.promise;
+			const page = await pdf.getPage(1);
+
+			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];
+
+			// render the page onto the canvas
+			var renderContext = {
+			  canvasContext: canvas.getContext("2d"),
+			  viewport: page.getViewport({ scale: 1 })
+			};
+
+			await page.render(renderContext).promise;
+			preview.src = canvas.toDataURL();
+		});
+
+		function rotate(deg) {
+			var lastTransform = preview.style.transform;
+			if (!lastTransform) {
+				lastTransform = "0";
+			}
+			const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
+			const newAngle = lastAngle + deg;
+
+			preview.style.transform = "rotate(" + newAngle + "deg)";
+			angleInput.value = newAngle;
+		}
+	</script>
+	<style>
+		#pdf-preview {
+			margin: 0 auto;
+			display: block;
+			max-width: 100%;
+			max-height: 100%;
+    		box-shadow: 0 0 4px rgba(100,100,100,.25);
+    		transition: transform .3s;
+		}
+		.previewContainer {
+			aspect-ratio: 1;
+			width: 100%;
+			border: 1px solid rgba(0,0,0,.125);
+			border-radius: 0.25rem;
+			margin: 1rem 0 0;
+			padding: 15px;
+			display: none;
+			overflow: hidden;
+		}
+
+		.buttonContainer {
+			display: none;
+			justify-content: space-around;
+		}
+		button {
+			top-margin: -100%;
+		}
+	</style>
 </body>
 
 </html>
\ No newline at end of file

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 2/4] 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 {

From 38925ea4cab2efa00b178035254749a6bafea691 Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sun, 5 Feb 2023 22:04:37 +0300
Subject: [PATCH 3/4] Fixed merge conflict. Cleaned up code

---
 .../resources/templates/fragments/common.html |  4 +-
 src/main/resources/templates/rotate-pdf.html  | 58 +++++++++----------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 18352416..4340d5e8 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -102,7 +102,7 @@
 	<div class="custom-file-chooser">
 		<div class="custom-file">
 			<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}">
-			<label class="custom-file-label" th:for="${name}+'-input'">Choose file</label>
+			<label class="custom-file-label" th:for="${name}+'-input'" th:text="#{pdfPrompt}"></label>
 		</div>
 	</div>
 
@@ -113,7 +113,7 @@
 			if (fileNames) {
 				$(this).siblings(".custom-file-label").addClass("selected").html(fileNames);
 			} else {
-				$(this).siblings(".custom-file-label").addClass("selected").html("Choose file");
+				$(this).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
 			}
 		});
 	</script>
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index 2ce89690..68418b69 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -19,24 +19,26 @@
 					<div th:replace="fragments/common :: fileSelector(name='fileInput', multiple=false)"></div>
 					<input type="hidden" id="angleInput" name="angle" value="0">
 
-					<div class="previewContainer">
-						<img id="pdf-preview"/>
-					</div>
+					<div id="editSection" style="display: none">
+						<div class="previewContainer">
+							<img id="pdf-preview"/>
+						</div>
 
-					<div class="buttonContainer">
-						<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)">
-							<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 class="buttonContainer">
+							<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)">
+								<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>
 					</div>
 				</form>
 
@@ -54,14 +56,11 @@
 		fileInput.addEventListener("change", async function() {
 			console.log("loading pdf");
 
-			preview.parentElement.style.display = "block";
-			document.querySelector(".buttonContainer").style.display = "flex";
+			document.querySelector("#editSection").style.display = "";
 
-			var file = fileInput.files[0];
-			var url = URL.createObjectURL(file)
-			var loadingTask = pdfjsLib.getDocument(url);
+			var url = URL.createObjectURL(fileInput.files[0])
 
-			const pdf = await loadingTask.promise;
+			const pdf = await pdfjsLib.getDocument(url).promise;
 			const page = await pdf.getPage(1);
 
 			const canvas = document.createElement("canvas");
@@ -77,8 +76,8 @@
 
 			// render the page onto the canvas
 			var renderContext = {
-			  canvasContext: canvas.getContext("2d"),
-			  viewport: page.getViewport({ scale: 1 })
+			   	canvasContext: canvas.getContext("2d"),
+			  	viewport: page.getViewport({ scale: 1 })
 			};
 
 			await page.render(renderContext).promise;
@@ -115,20 +114,17 @@
 			width: 100%;
 			border: 1px solid rgba(0,0,0,.125);
 			border-radius: 0.25rem;
-			margin: 1rem 0 0;
+			margin: 1rem 0;
 			padding: 15px;
-			display: none;
+			display: block;
 			overflow: hidden;
 			position: relative;
 		}
 
 		.buttonContainer {
-			display: none;
+			display: flex;
 			justify-content: space-around;
 		}
-		button {
-			top-margin: -100%;
-		}
 	</style>
 </body>
 

From 2c8e86297fa2744c45ff576422eb93b1656d4c5b Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Mon, 6 Feb 2023 00:20:25 +0300
Subject: [PATCH 4/4] Fixed missed localisation field

---
 src/main/resources/templates/rotate-pdf.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index 68418b69..fb68049b 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -31,7 +31,7 @@
 									<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="submit" class="btn btn-primary" th:text="#{rotate.submit}"></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"/>