Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-01-05 00:06:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 99 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/main/resources/static/js/draggable-utils.js
View File

@ -9,81 +9,81 @@ const DraggableUtils = {
init() { init() {
interact(".draggable-canvas") interact(".draggable-canvas")
.draggable({ .draggable({
listeners: { listeners: {
move: (event) => { move: (event) => {
const target = event.target; const target = event.target;
const x = (parseFloat(target.getAttribute("data-bs-x")) || 0) const x = (parseFloat(target.getAttribute("data-bs-x")) || 0)
+ event.dx; + event.dx;
const y = (parseFloat(target.getAttribute("data-bs-y")) || 0) const y = (parseFloat(target.getAttribute("data-bs-y")) || 0)
+ event.dy; + event.dy;
target.style.transform = `translate(${x}px, ${y}px)`; target.style.transform = `translate(${x}px, ${y}px)`;
target.setAttribute("data-bs-x", x); target.setAttribute("data-bs-x", x);
target.setAttribute("data-bs-y", y); target.setAttribute("data-bs-y", y);
this.onInteraction(target); this.onInteraction(target);
//update the last interacted element //update the last interacted element
this.lastInteracted = event.target; this.lastInteracted = event.target;
},
}, },
}, })
}) .resizable({
.resizable({ edges: { left: true, right: true, bottom: true, top: true },
edges: { left: true, right: true, bottom: true, top: true }, listeners: {
listeners: { move: (event) => {
move: (event) => { var target = event.target;
var target = event.target; var x = parseFloat(target.getAttribute("data-bs-x")) || 0;
var x = parseFloat(target.getAttribute("data-bs-x")) || 0; var y = parseFloat(target.getAttribute("data-bs-y")) || 0;
var y = parseFloat(target.getAttribute("data-bs-y")) || 0;
// check if control key is pressed // check if control key is pressed
if (event.ctrlKey) { if (event.ctrlKey) {
const aspectRatio = target.offsetWidth / target.offsetHeight; const aspectRatio = target.offsetWidth / target.offsetHeight;
// preserve aspect ratio // preserve aspect ratio
let width = event.rect.width; let width = event.rect.width;
let height = event.rect.height; let height = event.rect.height;
if (Math.abs(event.deltaRect.width) >= Math.abs( if (Math.abs(event.deltaRect.width) >= Math.abs(
event.deltaRect.height)) { event.deltaRect.height)) {
height = width / aspectRatio; height = width / aspectRatio;
} else { } else {
width = height * aspectRatio; width = height * aspectRatio;
}
event.rect.width = width;
event.rect.height = height;
} }
event.rect.width = width; target.style.width = event.rect.width + "px";
event.rect.height = height; target.style.height = event.rect.height + "px";
}
target.style.width = event.rect.width + "px"; // translate when resizing from top or left edges
target.style.height = event.rect.height + "px"; x += event.deltaRect.left;
y += event.deltaRect.top;
// translate when resizing from top or left edges target.style.transform = "translate(" + x + "px," + y + "px)";
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.transform = "translate(" + x + "px," + y + "px)"; target.setAttribute("data-bs-x", x);
target.setAttribute("data-bs-y", y);
target.setAttribute("data-bs-x", x); target.textContent = Math.round(event.rect.width) + "\u00D7"
target.setAttribute("data-bs-y", y);
target.textContent = Math.round(event.rect.width) + "\u00D7"
+ Math.round(event.rect.height); + Math.round(event.rect.height);
this.onInteraction(target); this.onInteraction(target);
},
}, },
},
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
}); });
} }
} }