kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-10-06 03:00:10 +02:00
Code

Merge branch 'cleanups' of git@github.com:Frooodle/Stirling-PDF.git into cleanups

Browse Source
This commit is contained in:
Anthony Stirling 2023-05-06 18:10:08 +01:00
commit 42d0d49682
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/main/resources/templates/sign.html
View File

@ -109,7 +109,7 @@
<div id="pdf-container"> <div id="pdf-container">
<canvas id="pdf-canvas"></canvas> <canvas id="pdf-canvas"></canvas>
<canvas id="signature-canvas" hidden style="position: absolute;"></canvas> <canvas id="signature-canvas" hidden style="position: absolute;" data-scale="1"></canvas>
</div> </div>
<button id="download-pdf" class="btn btn-primary mb-2">Download PDF</button> <button id="download-pdf" class="btn btn-primary mb-2">Download PDF</button>
@ -220,6 +220,8 @@
const x = 0; const x = 0;
const y = 0; const y = 0;
signatureCanvas.style.transform = `translate(${x}px, ${y}px)`; signatureCanvas.style.transform = `translate(${x}px, ${y}px)`;
signatureCanvas.setAttribute('data-x', x);
signatureCanvas.setAttribute('data-y', y);
// calcualte the max size // calcualte the max size
const containerWidth = parseInt(getComputedStyle(pdfCanvas).width.replace('px','')); const containerWidth = parseInt(getComputedStyle(pdfCanvas).width.replace('px',''));
@ -286,10 +288,13 @@
.draggable({ .draggable({
listeners: { listeners: {
move: (event) => { move: (event) => {
const transform = parseTransform(event.target) const target = event.target;
const x = (transform.x || 0) + event.dx; const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
const y = (transform.y || 0) + event.dy; const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
event.target.style.transform = `translate(${x}px, ${y}px)`;
target.style.transform = `translate(${x}px, ${y}px)`;
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}, },
}, },
}) })
@ -297,13 +302,23 @@
edges: { left: true, right: true, bottom: true, top: true }, edges: { left: true, right: true, bottom: true, top: true },
listeners: { listeners: {
move: (event) => { move: (event) => {
const target = event.target; var target = event.target
var x = (parseFloat(target.getAttribute('data-x')) || 0)
var y = (parseFloat(target.getAttribute('data-y')) || 0)
const newWidth = event.rect.width; // update the element's style
const newHeight = event.rect.height; target.style.width = event.rect.width + 'px'
target.style.height = event.rect.height + 'px'
target.style.width = newWidth + 'px'; // translate when resizing from top or left edges
target.style.height = newHeight + 'px'; x += event.deltaRect.left
y += event.deltaRect.top
target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
}, },
}, },
modifiers: [ modifiers: [