Fixing bug: Add Image makes random changes to image (#2246) (#2256)

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
This commit is contained in:
Renan 2024-11-16 05:55:40 -03:00 committed by GitHub
parent 0ce479e1e3
commit 8dfb5940ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -74,16 +74,16 @@ const DraggableUtils = {
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 //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) => { window.addEventListener('keydown', (event) => {
//Check for last interacted element //Check for last interacted element
if (!this.lastInteracted){ if (!this.lastInteracted) {
return; return;
} }
// Get the currently selected element // Get the currently selected element
@ -288,7 +288,7 @@ const DraggableUtils = {
} }
}, },
parseTransform(element) {}, parseTransform(element) { },
async getOverlayedPdfDocument() { async getOverlayedPdfDocument() {
const pdfBytes = await this.pdfDoc.getData(); const pdfBytes = await this.pdfDoc.getData();
const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, { const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, {
@ -308,6 +308,7 @@ const DraggableUtils = {
const offsetWidth = pagesMap[pageIdx + "-offsetWidth"]; const offsetWidth = pagesMap[pageIdx + "-offsetWidth"];
const offsetHeight = pagesMap[pageIdx + "-offsetHeight"]; const offsetHeight = pagesMap[pageIdx + "-offsetHeight"];
for (const draggableData of draggablesData) { for (const draggableData of draggablesData) {
// embed the draggable canvas // embed the draggable canvas
const draggableElement = draggableData.element; const draggableElement = draggableData.element;
@ -324,6 +325,24 @@ const DraggableUtils = {
width: draggableData.offsetWidth, width: draggableData.offsetWidth,
height: draggableData.offsetHeight, 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 = { const draggablePositionRelative = {
x: draggablePositionPixels.x / offsetWidth, x: draggablePositionPixels.x / offsetWidth,
y: draggablePositionPixels.y / offsetHeight, y: draggablePositionPixels.y / offsetHeight,
@ -331,18 +350,36 @@ const DraggableUtils = {
height: draggablePositionPixels.height / offsetHeight, height: draggablePositionPixels.height / offsetHeight,
}; };
const draggablePositionPdf = { 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 // draw the image
page.drawImage(pdfImageObject, { page.drawImage(pdfImageObject, {
x: draggablePositionPdf.x, x: x,
y: page.getHeight() - draggablePositionPdf.y - draggablePositionPdf.height, y: y,
width: draggablePositionPdf.width, width: draggablePositionPdf.width,
height: draggablePositionPdf.height, height: draggablePositionPdf.height,
rotate: rotation
}); });
} }
} }