From 8dfb5940cae5b156a77a83aa8b4c531e7eed8b60 Mon Sep 17 00:00:00 2001 From: Renan <82916964+thisisrenan@users.noreply.github.com> Date: Sat, 16 Nov 2024 05:55:40 -0300 Subject: [PATCH] Fixing bug: Add Image makes random changes to image (#2246) (#2256) Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> --- .../resources/static/js/draggable-utils.js | 161 +++++++++++------- 1 file changed, 99 insertions(+), 62 deletions(-) diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js index 6064e398..bdcb8161 100644 --- a/src/main/resources/static/js/draggable-utils.js +++ b/src/main/resources/static/js/draggable-utils.js @@ -9,81 +9,81 @@ const DraggableUtils = { init() { interact(".draggable-canvas") - .draggable({ - listeners: { - move: (event) => { - const target = event.target; - const x = (parseFloat(target.getAttribute("data-bs-x")) || 0) + .draggable({ + listeners: { + move: (event) => { + const target = event.target; + const x = (parseFloat(target.getAttribute("data-bs-x")) || 0) + event.dx; - const y = (parseFloat(target.getAttribute("data-bs-y")) || 0) + const y = (parseFloat(target.getAttribute("data-bs-y")) || 0) + event.dy; - target.style.transform = `translate(${x}px, ${y}px)`; - target.setAttribute("data-bs-x", x); - target.setAttribute("data-bs-y", y); + target.style.transform = `translate(${x}px, ${y}px)`; + target.setAttribute("data-bs-x", x); + target.setAttribute("data-bs-y", y); - this.onInteraction(target); - //update the last interacted element - this.lastInteracted = event.target; + this.onInteraction(target); + //update the last interacted element + this.lastInteracted = event.target; + }, }, - }, - }) - .resizable({ - edges: { left: true, right: true, bottom: true, top: true }, - listeners: { - move: (event) => { - var target = event.target; - var x = parseFloat(target.getAttribute("data-bs-x")) || 0; - var y = parseFloat(target.getAttribute("data-bs-y")) || 0; + }) + .resizable({ + edges: { left: true, right: true, bottom: true, top: true }, + listeners: { + move: (event) => { + var target = event.target; + var x = parseFloat(target.getAttribute("data-bs-x")) || 0; + var y = parseFloat(target.getAttribute("data-bs-y")) || 0; - // check if control key is pressed - if (event.ctrlKey) { - const aspectRatio = target.offsetWidth / target.offsetHeight; - // preserve aspect ratio - let width = event.rect.width; - let height = event.rect.height; + // check if control key is pressed + if (event.ctrlKey) { + const aspectRatio = target.offsetWidth / target.offsetHeight; + // preserve aspect ratio + let width = event.rect.width; + let height = event.rect.height; - if (Math.abs(event.deltaRect.width) >= Math.abs( + if (Math.abs(event.deltaRect.width) >= Math.abs( event.deltaRect.height)) { - height = width / aspectRatio; - } else { - width = height * aspectRatio; + height = width / aspectRatio; + } else { + width = height * aspectRatio; + } + + event.rect.width = width; + event.rect.height = height; } - event.rect.width = width; - event.rect.height = height; - } + target.style.width = event.rect.width + "px"; + target.style.height = event.rect.height + "px"; - target.style.width = event.rect.width + "px"; - target.style.height = event.rect.height + "px"; + // translate when resizing from top or left edges + x += event.deltaRect.left; + y += event.deltaRect.top; - // translate when resizing from top or left edges - x += event.deltaRect.left; - y += event.deltaRect.top; + 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-y", y); - target.textContent = Math.round(event.rect.width) + "\u00D7" + target.setAttribute("data-bs-x", x); + target.setAttribute("data-bs-y", y); + target.textContent = Math.round(event.rect.width) + "\u00D7" + Math.round(event.rect.height); - this.onInteraction(target); + this.onInteraction(target); + }, }, - }, - modifiers: [ - interact.modifiers.restrictSize({ - min: {width: 5, height: 5}, - }), - ], - inertia: true, - }); + modifiers: [ + interact.modifiers.restrictSize({ + min: { width: 5, height: 5 }, + }), + ], + inertia: true, + }); //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) => { //Check for last interacted element - if (!this.lastInteracted){ + if (!this.lastInteracted) { return; } // Get the currently selected element @@ -288,7 +288,7 @@ const DraggableUtils = { } }, - parseTransform(element) {}, + parseTransform(element) { }, async getOverlayedPdfDocument() { const pdfBytes = await this.pdfDoc.getData(); const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, { @@ -308,6 +308,7 @@ const DraggableUtils = { const offsetWidth = pagesMap[pageIdx + "-offsetWidth"]; const offsetHeight = pagesMap[pageIdx + "-offsetHeight"]; + for (const draggableData of draggablesData) { // embed the draggable canvas const draggableElement = draggableData.element; @@ -324,6 +325,24 @@ const DraggableUtils = { width: draggableData.offsetWidth, 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 = { x: draggablePositionPixels.x / offsetWidth, y: draggablePositionPixels.y / offsetHeight, @@ -331,18 +350,36 @@ const DraggableUtils = { height: draggablePositionPixels.height / offsetHeight, }; const draggablePositionPdf = { - x: draggablePositionRelative.x * page.getWidth(), - y: draggablePositionRelative.y * page.getHeight(), - width: draggablePositionRelative.width * page.getWidth(), - height: draggablePositionRelative.height * page.getHeight(), + x: draggablePositionRelative.x * widthAdjusted, + y: draggablePositionRelative.y * heightAdjusted, + width: draggablePositionRelative.width * widthAdjusted, + 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 page.drawImage(pdfImageObject, { - x: draggablePositionPdf.x, - y: page.getHeight() - draggablePositionPdf.y - draggablePositionPdf.height, + x: x, + y: y, width: draggablePositionPdf.width, height: draggablePositionPdf.height, + rotate: rotation }); } }