javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/improved signature element (#2489)

Browse Source 
# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] 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)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Co-authored-by: Reece Browne <reece@stirling.pdf>
This commit is contained in:
reecebrowne
2025-01-02 15:49:29 +00:00
committed by GitHub
parent 715efca25d
commit 49fb634690
12 changed files with 964 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,75 +7,137 @@ const DraggableUtils = {
elementAllPages: [],
documentsMap: new Map(),
lastInteracted: null,
padding: 15,
maintainRatioEnabled: true,
init() {
interact('.draggable-canvas')
.draggable({
listeners: {
start(event) {
const target = event.target;
x = parseFloat(target.getAttribute('data-bs-x'));
y = parseFloat(target.getAttribute('data-bs-y'));
},
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) + event.dy;
// Retrieve position attributes
let x = parseFloat(target.getAttribute('data-bs-x')) || 0;
let y = parseFloat(target.getAttribute('data-bs-y')) || 0;
const angle = parseFloat(target.getAttribute('data-angle')) || 0;
// Update position based on drag movement
x += event.dx;
y += event.dy;
// Apply translation to the parent container (bounding box)
target.style.transform = `translate(${x}px, ${y}px)`;
// Preserve rotation on the inner canvas
const canvas = target.querySelector('.display-canvas');
const canvasWidth = parseFloat(canvas.style.width);
const canvasHeight = parseFloat(canvas.style.height);
const cosAngle = Math.abs(Math.cos(angle));
const sinAngle = Math.abs(Math.sin(angle));
const rotatedWidth = canvasWidth * cosAngle + canvasHeight * sinAngle;
const rotatedHeight = canvasWidth * sinAngle + canvasHeight * cosAngle;
const offsetX = (rotatedWidth - canvasWidth) / 2;
const offsetY = (rotatedHeight - canvasHeight) / 2;
canvas.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${angle}rad)`;
// Update attributes for persistence
target.setAttribute('data-bs-x', x);
target.setAttribute('data-bs-y', y);
this.onInteraction(target);
//update the last interacted element
this.lastInteracted = event.target;
// Set the last interacted element
this.lastInteracted = target;
},
},
})
.resizable({
edges: {left: true, right: true, bottom: true, top: true},
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
start: (event) => {
const target = event.target;
x = parseFloat(target.getAttribute('data-bs-x')) || 0;
y = parseFloat(target.getAttribute('data-bs-y')) || 0;
},
move: (event) => {
var target = event.target;
var x = parseFloat(target.getAttribute('data-bs-x')) || 0;
var y = parseFloat(target.getAttribute('data-bs-y')) || 0;
const target = event.target;
// 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;
const MAX_CHANGE = 60;
if (Math.abs(event.deltaRect.width) >= Math.abs(event.deltaRect.height)) {
height = width / aspectRatio;
} else {
width = height * aspectRatio;
let width = event.rect.width - 2 * this.padding;
let height = event.rect.height - 2 * this.padding;
const canvas = target.querySelector('.display-canvas');
if (canvas) {
const originalWidth = parseFloat(canvas.style.width) || canvas.width;
const originalHeight = parseFloat(canvas.style.height) || canvas.height;
const angle = parseFloat(target.getAttribute('data-angle')) || 0;
const aspectRatio = originalWidth / originalHeight;
if (!event.ctrlKey && this.maintainRatioEnabled) {
if (Math.abs(event.deltaRect.width) >= Math.abs(event.deltaRect.height)) {
height = width / aspectRatio;
} else {
width = height * aspectRatio;
}
}
event.rect.width = width;
event.rect.height = height;
const widthChange = width - originalWidth;
const heightChange = height - originalHeight;
if (Math.abs(widthChange) > MAX_CHANGE || Math.abs(heightChange) > MAX_CHANGE) {
const scale = MAX_CHANGE / Math.max(Math.abs(widthChange), Math.abs(heightChange));
width = originalWidth + widthChange * scale;
height = originalHeight + heightChange * scale;
}
const cosAngle = Math.abs(Math.cos(angle));
const sinAngle = Math.abs(Math.sin(angle));
const boundingWidth = width * cosAngle + height * sinAngle;
const boundingHeight = width * sinAngle + height * cosAngle;
if (event.edges.left) {
const dx = event.deltaRect.left;
x += dx;
}
if (event.edges.top) {
const dy = event.deltaRect.top;
y += dy;
}
target.style.transform = `translate(${x}px, ${y}px)`;
target.style.width = `${boundingWidth + 2 * this.padding}px`;
target.style.height = `${boundingHeight + 2 * this.padding}px`;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
canvas.style.transform = `translate(${(boundingWidth - width) / 2}px, ${(boundingHeight - height) / 2
}px) rotate(${angle}rad)`;
target.setAttribute('data-bs-x', x);
target.setAttribute('data-bs-y', y);
this.lastInteracted = target;
}
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;
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' + Math.round(event.rect.height);
this.onInteraction(target);
},
},
modifiers: [
interact.modifiers.restrictSize({
min: {width: 5, height: 5},
min: { width: 50, height: 50 },
}),
],
inertia: true,
});
//Arrow key Support for Add-Image and Sign pages
if (window.location.pathname.endsWith('sign') || window.location.pathname.endsWith('add-image')) {
window.addEventListener('keydown', (event) => {
@@ -117,7 +179,8 @@ const DraggableUtils = {
}
// Update position
target.style.transform = `translate(${x}px, ${y}px)`;
const angle = parseFloat(target.getAttribute('data-angle')) || 0;
target.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
target.setAttribute('data-bs-x', x);
target.setAttribute('data-bs-y', y);
@@ -125,72 +188,97 @@ const DraggableUtils = {
});
}
},
onInteraction(target) {
this.boxDragContainer.appendChild(target);
},
createDraggableCanvas() {
const createdCanvas = document.createElement('canvas');
createdCanvas.id = `draggable-canvas-${this.nextId++}`;
createdCanvas.classList.add('draggable-canvas');
const x = 0;
const y = 20;
createdCanvas.style.transform = `translate(${x}px, ${y}px)`;
createdCanvas.setAttribute('data-bs-x', x);
createdCanvas.setAttribute('data-bs-y', y);
//Click element in order to enable arrow keys
createdCanvas.addEventListener('click', () => {
this.lastInteracted = createdCanvas;
});
createdCanvas.onclick = (e) => this.onInteraction(e.target);
this.boxDragContainer.appendChild(createdCanvas);
//Enable Arrow keys directly after the element is created
this.lastInteracted = createdCanvas;
return createdCanvas;
this.lastInteracted = target;
// this.boxDragContainer.appendChild(target);
// target.appendChild(target.querySelector(".display-canvas"));
},
createDraggableCanvasFromUrl(dataUrl) {
return new Promise((resolve) => {
var myImage = new Image();
const canvasContainer = document.createElement('div');
const createdCanvas = document.createElement('canvas'); // Inner canvas
const padding = this.padding;
canvasContainer.id = `draggable-canvas-${this.nextId++}`;
canvasContainer.classList.add('draggable-canvas');
createdCanvas.classList.add('display-canvas');
canvasContainer.style.position = 'absolute';
canvasContainer.style.padding = `${padding}px`;
canvasContainer.style.overflow = 'hidden';
let x = 0,
y = 30,
angle = 0;
canvasContainer.style.transform = `translate(${x}px, ${y}px)`;
canvasContainer.setAttribute('data-bs-x', x);
canvasContainer.setAttribute('data-bs-y', y);
canvasContainer.setAttribute('data-angle', angle);
canvasContainer.addEventListener('click', () => {
this.lastInteracted = canvasContainer;
this.showRotationControls(canvasContainer);
});
canvasContainer.appendChild(createdCanvas);
this.boxDragContainer.appendChild(canvasContainer);
const myImage = new Image();
myImage.src = dataUrl;
myImage.onload = () => {
var createdCanvas = this.createDraggableCanvas();
const context = createdCanvas.getContext('2d');
createdCanvas.width = myImage.width;
createdCanvas.height = myImage.height;
const imgAspect = myImage.width / myImage.height;
const pdfAspect = this.boxDragContainer.offsetWidth / this.boxDragContainer.offsetHeight;
const containerWidth = this.boxDragContainer.offsetWidth;
const containerHeight = this.boxDragContainer.offsetHeight;
var scaleMultiplier;
if (imgAspect > pdfAspect) {
scaleMultiplier = this.boxDragContainer.offsetWidth / myImage.width;
} else {
scaleMultiplier = this.boxDragContainer.offsetHeight / myImage.height;
}
let scaleMultiplier = Math.min(containerWidth / myImage.width, containerHeight / myImage.height);
const scaleFactor = 0.5;
var newWidth = createdCanvas.width;
var newHeight = createdCanvas.height;
if (scaleMultiplier < 1) {
newWidth = newWidth * scaleMultiplier;
newHeight = newHeight * scaleMultiplier;
}
const newWidth = myImage.width * scaleMultiplier * scaleFactor;
const newHeight = myImage.height * scaleMultiplier * scaleFactor;
createdCanvas.style.width = newWidth + 'px';
createdCanvas.style.height = newHeight + 'px';
// Calculate initial bounding box size
const cosAngle = Math.abs(Math.cos(angle));
const sinAngle = Math.abs(Math.sin(angle));
const boundingWidth = newWidth * cosAngle + newHeight * sinAngle;
const boundingHeight = newWidth * sinAngle + newHeight * cosAngle;
var myContext = createdCanvas.getContext('2d');
myContext.drawImage(myImage, 0, 0);
resolve(createdCanvas);
createdCanvas.style.width = `${newWidth}px`;
createdCanvas.style.height = `${newHeight}px`;
canvasContainer.style.width = `${boundingWidth + 2 * padding}px`;
canvasContainer.style.height = `${boundingHeight + 2 * padding}px`;
context.imageSmoothingEnabled = true;
context.imageSmoothingQuality = 'high';
context.drawImage(myImage, 0, 0, myImage.width, myImage.height);
this.showRotationControls(canvasContainer);
this.lastInteracted = canvasContainer;
resolve(canvasContainer);
};
myImage.onerror = () => {
console.error('Failed to load the image.');
resolve(null);
};
});
},
toggleMaintainRatio() {
this.maintainRatioEnabled = !this.maintainRatioEnabled;
const button = document.getElementById('ratioToggleBtn');
if (this.maintainRatioEnabled) {
button.classList.remove('btn-danger');
button.classList.add('btn-outline-secondary');
} else {
button.classList.remove('btn-outline-secondary');
button.classList.add('btn-danger');
}
},
deleteAllDraggableCanvases() {
this.boxDragContainer.querySelectorAll('.draggable-canvas').forEach((el) => el.remove());
},
@@ -266,9 +354,61 @@ const DraggableUtils = {
}
},
getLastInteracted() {
return this.boxDragContainer.querySelector('.draggable-canvas:last-of-type');
return this.lastInteracted;
},
showRotationControls(element) {
const rotationControls = document.getElementById('rotation-controls');
const rotationInput = document.getElementById('rotation-input');
rotationControls.style.display = 'flex';
rotationInput.value = Math.round((parseFloat(element.getAttribute('data-angle')) * 180) / Math.PI);
rotationInput.addEventListener('input', this.handleRotationInputChange);
},
hideRotationControls() {
const rotationControls = document.getElementById('rotation-controls');
const rotationInput = document.getElementById('rotation-input');
rotationControls.style.display = 'none';
rotationInput.addEventListener('input', this.handleRotationInputChange);
},
applyRotationToElement(element, degrees) {
const radians = degrees * (Math.PI / 180); // Convert degrees to radians
// Get current position
const x = parseFloat(element.getAttribute('data-bs-x')) || 0;
const y = parseFloat(element.getAttribute('data-bs-y')) || 0;
// Get the inner canvas (image)
const canvas = element.querySelector('.display-canvas');
if (canvas) {
const originalWidth = parseFloat(canvas.style.width);
const originalHeight = parseFloat(canvas.style.height);
const padding = this.padding; // Access the padding value
// Calculate rotated bounding box dimensions
const cosAngle = Math.abs(Math.cos(radians));
const sinAngle = Math.abs(Math.sin(radians));
const boundingWidth = originalWidth * cosAngle + originalHeight * sinAngle + 2 * padding;
const boundingHeight = originalWidth * sinAngle + originalHeight * cosAngle + 2 * padding;
// Update parent container to fit the rotated bounding box
element.style.width = `${boundingWidth}px`;
element.style.height = `${boundingHeight}px`;
// Center the canvas within the bounding box, accounting for padding
const offsetX = (boundingWidth - originalWidth) / 2 - padding;
const offsetY = (boundingHeight - originalHeight) / 2 - padding;
canvas.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${radians}rad)`;
}
// Keep the bounding box positioned properly
element.style.transform = `translate(${x}px, ${y}px)`;
element.setAttribute('data-angle', radians);
},
handleRotationInputChange() {
const rotationInput = document.getElementById('rotation-input');
const degrees = parseFloat(rotationInput.value) || 0;
DraggableUtils.applyRotationToElement(DraggableUtils.lastInteracted, degrees);
},
storePageContents() {
var pagesMap = this.documentsMap.get(this.pdfDoc);
if (!pagesMap) {
@@ -325,7 +465,7 @@ const DraggableUtils = {
// render the page onto the canvas
var renderContext = {
canvasContext: this.pdfCanvas.getContext('2d'),
viewport: page.getViewport({scale: 1}),
viewport: page.getViewport({ scale: 1 }),
};
await page.render(renderContext).promise;
@@ -352,8 +492,6 @@ const DraggableUtils = {
this.loadPageContents();
}
},
parseTransform(element) {},
async getOverlayedPdfDocument() {
const pdfBytes = await this.pdfDoc.getData();
const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, {
@@ -367,7 +505,6 @@ const DraggableUtils = {
if (pageIdx.includes('offset')) {
continue;
}
console.log(typeof pageIdx);
const page = pdfDocModified.getPage(parseInt(pageIdx));
let draggablesData = pagesMap[pageIdx];
@@ -376,45 +513,61 @@ const DraggableUtils = {
const offsetHeight = pagesMap[pageIdx + '-offsetHeight'];
for (const draggableData of draggablesData) {
// embed the draggable canvas
const draggableElement = draggableData.element;
// Embed the draggable canvas
const draggableElement = draggableData.element.querySelector('.display-canvas');
const response = await fetch(draggableElement.toDataURL());
const draggableImgBytes = await response.arrayBuffer();
const pdfImageObject = await pdfDocModified.embedPng(draggableImgBytes);
// calculate the position in the pdf document
const tansform = draggableElement.style.transform.replace(/[^.,-\d]/g, '');
const transformComponents = tansform.split(',');
// Extract transformation data
const transform = draggableData.element.style.transform || '';
const translateRegex = /translate\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/;
const translateMatch = transform.match(translateRegex);
const translateX = translateMatch ? parseFloat(translateMatch[1]) : 0;
const translateY = translateMatch ? parseFloat(translateMatch[2]) : 0;
const childTransform = draggableElement.style.transform || '';
const childTranslateMatch = childTransform.match(translateRegex);
const childOffsetX = childTranslateMatch ? parseFloat(childTranslateMatch[1]) : 0;
const childOffsetY = childTranslateMatch ? parseFloat(childTranslateMatch[2]) : 0;
const rotateAngle = parseFloat(draggableData.element.getAttribute('data-angle')) || 0;
const draggablePositionPixels = {
x: parseFloat(transformComponents[0]),
y: parseFloat(transformComponents[1]),
width: draggableData.offsetWidth,
height: draggableData.offsetHeight,
x: translateX + childOffsetX + this.padding + 2,
y: translateY + childOffsetY + this.padding + 2,
width: parseFloat(draggableElement.style.width),
height: parseFloat(draggableElement.style.height),
angle: rotateAngle, // Store rotation
};
//Auxiliary variables
// Auxiliary variables
let widthAdjusted = page.getWidth();
let heightAdjusted = page.getHeight();
const rotation = page.getRotation();
//Normalizing angle
// Normalize page rotation angle
let normalizedAngle = rotation.angle % 360;
if (normalizedAngle < 0) {
normalizedAngle += 360;
}
//Changing the page dimension if the angle is 90 or 270
// Adjust page dimensions for rotated pages
if (normalizedAngle === 90 || normalizedAngle === 270) {
let widthTemp = widthAdjusted;
widthAdjusted = heightAdjusted;
heightAdjusted = widthTemp;
[widthAdjusted, heightAdjusted] = [heightAdjusted, widthAdjusted];
}
const draggablePositionRelative = {
x: draggablePositionPixels.x / offsetWidth,
y: draggablePositionPixels.y / offsetHeight,
width: draggablePositionPixels.width / offsetWidth,
height: draggablePositionPixels.height / offsetHeight,
angle: draggablePositionPixels.angle,
};
const draggablePositionPdf = {
x: draggablePositionRelative.x * widthAdjusted,
y: draggablePositionRelative.y * heightAdjusted,
@@ -422,11 +575,13 @@ const DraggableUtils = {
height: draggablePositionRelative.height * heightAdjusted,
};
//Defining the image if the page has a 0-degree angle
// Calculate position based on normalized page rotation
let x = draggablePositionPdf.x;
let y = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height;
//Defining the image position if it is at other angles
let originx = x + draggablePositionPdf.width / 2;
let originy = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height / 2;
if (normalizedAngle === 90) {
x = draggablePositionPdf.y + draggablePositionPdf.height;
y = draggablePositionPdf.x;
@@ -437,17 +592,32 @@ const DraggableUtils = {
x = heightAdjusted - draggablePositionPdf.y - draggablePositionPdf.height;
y = widthAdjusted - draggablePositionPdf.x;
}
// draw the image
// let angle = draggablePositionPixels.angle % 360;
// if (angle < 0) angle += 360; // Normalize to positive angle
const radians = -draggablePositionPixels.angle; // Convert angle to radians
page.pushOperators(
PDFLib.pushGraphicsState(),
PDFLib.concatTransformationMatrix(1, 0, 0, 1, originx, originy),
PDFLib.concatTransformationMatrix(
Math.cos(radians),
Math.sin(radians),
-Math.sin(radians),
Math.cos(radians),
0,
0
),
PDFLib.concatTransformationMatrix(1, 0, 0, 1, -1 * originx, -1 * originy)
);
page.drawImage(pdfImageObject, {
x: x,
y: y,
width: draggablePositionPdf.width,
height: draggablePositionPdf.height,
rotate: rotation,
});
page.pushOperators(PDFLib.popGraphicsState());
}
}
this.loadPageContents();
return pdfDocModified;
},