From 3fda82e39d6a6922143394c2b4a9d758496aff4d Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Wed, 16 Apr 2025 16:21:08 +0100 Subject: [PATCH] 2728 bug signed rotated document different than preview (#3360) # Description of Changes Please provide a summary of the changes, including: - Change the maths for accounting for rotation in add image and sign. - Images are now placed in the expected place Closes #2728 --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [x] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [x] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details. --- .../resources/static/js/draggable-utils.js | 67 ++++++++++--------- src/main/resources/static/js/fileInput.js | 2 +- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js index b6fa73b5..2e9769ee 100644 --- a/src/main/resources/static/js/draggable-utils.js +++ b/src/main/resources/static/js/draggable-utils.js @@ -544,21 +544,17 @@ const DraggableUtils = { angle: rotateAngle, // Store rotation }; - // Auxiliary variables - let widthAdjusted = page.getWidth(); - let heightAdjusted = page.getHeight(); - const rotation = page.getRotation(); + const pageRotation = page.getRotation(); // Normalize page rotation angle - let normalizedAngle = rotation.angle % 360; + let normalizedAngle = pageRotation.angle % 360; if (normalizedAngle < 0) { normalizedAngle += 360; } - // Adjust page dimensions for rotated pages - if (normalizedAngle === 90 || normalizedAngle === 270) { - [widthAdjusted, heightAdjusted] = [heightAdjusted, widthAdjusted]; - } + // Determine the viewed page dimensions based on the normalized rotation angle + let viewedPageWidth = (normalizedAngle === 90 || normalizedAngle === 270) ? page.getHeight() : page.getWidth(); + let viewedPageHeight = (normalizedAngle === 90 || normalizedAngle === 270) ? page.getWidth() : page.getHeight(); const draggablePositionRelative = { x: draggablePositionPixels.x / offsetWidth, @@ -569,51 +565,58 @@ const DraggableUtils = { }; const draggablePositionPdf = { - x: draggablePositionRelative.x * widthAdjusted, - y: draggablePositionRelative.y * heightAdjusted, - width: draggablePositionRelative.width * widthAdjusted, - height: draggablePositionRelative.height * heightAdjusted, + x: draggablePositionRelative.x * viewedPageWidth, + y: draggablePositionRelative.y * viewedPageHeight, + width: draggablePositionRelative.width * viewedPageWidth, + height: draggablePositionRelative.height * viewedPageHeight, }; // Calculate position based on normalized page rotation let x = draggablePositionPdf.x; - let y = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height; - - let originx = x + draggablePositionPdf.width / 2; - let originy = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height / 2; + let y = viewedPageHeight - draggablePositionPdf.y - draggablePositionPdf.height; if (normalizedAngle === 90) { - x = draggablePositionPdf.y + draggablePositionPdf.height; + x = draggablePositionPdf.y; y = draggablePositionPdf.x; } else if (normalizedAngle === 180) { - x = widthAdjusted - draggablePositionPdf.x; - y = draggablePositionPdf.y + draggablePositionPdf.height; + x = viewedPageWidth - draggablePositionPdf.x - draggablePositionPdf.width; + y = draggablePositionPdf.y; } else if (normalizedAngle === 270) { - x = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height; - y = widthAdjusted - draggablePositionPdf.x; + x = viewedPageHeight - draggablePositionPdf.y - draggablePositionPdf.height; + y = viewedPageWidth - draggablePositionPdf.x - draggablePositionPdf.width; } - // let angle = draggablePositionPixels.angle % 360; - // if (angle < 0) angle += 360; // Normalize to positive angle - const radians = -draggablePositionPixels.angle; // Convert angle to radians + + // Convert rotation angle to radians + let pageRotationInRadians = PDFLib.degreesToRadians(normalizedAngle); + const rotationInRadians = pageRotationInRadians - draggablePositionPixels.angle; + + // Calculate the center of the image + const imageCenterX = x + draggablePositionPdf.width / 2; + const imageCenterY = y + draggablePositionPdf.height / 2; + + // Apply transformations to rotate the image about its center page.pushOperators( PDFLib.pushGraphicsState(), - PDFLib.concatTransformationMatrix(1, 0, 0, 1, originx, originy), + PDFLib.concatTransformationMatrix(1, 0, 0, 1, imageCenterX, imageCenterY), // Translate to center PDFLib.concatTransformationMatrix( - Math.cos(radians), - Math.sin(radians), - -Math.sin(radians), - Math.cos(radians), + Math.cos(rotationInRadians), + Math.sin(rotationInRadians), + -Math.sin(rotationInRadians), + Math.cos(rotationInRadians), 0, 0 - ), - PDFLib.concatTransformationMatrix(1, 0, 0, 1, -1 * originx, -1 * originy) + ), // Rotate + PDFLib.concatTransformationMatrix(1, 0, 0, 1, -imageCenterX, -imageCenterY) // Translate back ); + page.drawImage(pdfImageObject, { x: x, y: y, width: draggablePositionPdf.width, height: draggablePositionPdf.height, }); + + // Restore the graphics state page.pushOperators(PDFLib.popGraphicsState()); } } diff --git a/src/main/resources/static/js/fileInput.js b/src/main/resources/static/js/fileInput.js index b24563c0..e874ea1c 100644 --- a/src/main/resources/static/js/fileInput.js +++ b/src/main/resources/static/js/fileInput.js @@ -170,7 +170,7 @@ function setupFileInput(chooser) { inputContainer.querySelector('#fileInputText').innerHTML = window.fileInput.loading; async function checkZipFile() { - const hasZipFiles = allFiles.some(file => file.type && zipTypes.includes(file.type)); + const hasZipFiles = allFiles.some(file => ((typeof(file.type) != undefined) && zipTypes.includes(file.type))); // Only change to extractPDF message if we actually have zip files if (hasZipFiles) {