From 6da84338dc9f1071033f3de5ca90850b036dbace Mon Sep 17 00:00:00 2001 From: Reece Browne <74901996+reecebrowne@users.noreply.github.com> Date: Tue, 15 Apr 2025 21:44:21 +1200 Subject: [PATCH] Bug/498/signature slow firefox mobile (#3322) # Description of Changes Please provide a summary of the changes, including: - What was changed - Why the change was made - Any challenges encountered Closes #(498) --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] 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) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Reece Browne --- .../static/js/sign/signature-canvas.js | 46 ++++++++++--------- src/main/resources/templates/sign.html | 8 ++-- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/src/main/resources/static/js/sign/signature-canvas.js b/src/main/resources/static/js/sign/signature-canvas.js index bd06e8456..a3f7b1e90 100644 --- a/src/main/resources/static/js/sign/signature-canvas.js +++ b/src/main/resources/static/js/sign/signature-canvas.js @@ -26,7 +26,6 @@ window.addEventListener("keydown", (event) => { function undoDraw() { const data = signaturePad.toData(); - if (data && data.length > 0) { const removed = data.pop(); undoData.push(removed); @@ -35,7 +34,6 @@ function undoDraw() { } function redoDraw() { - if (undoData.length > 0) { const data = signaturePad.toData(); data.push(undoData.pop()); @@ -52,24 +50,18 @@ function addDraggableFromPad() { } function getCroppedCanvasDataUrl(canvas) { - let originalCtx = canvas.getContext('2d'); + let originalCtx = canvas.getContext('2d', { willReadFrequently: true }); let originalWidth = canvas.width; let originalHeight = canvas.height; let imageData = originalCtx.getImageData(0, 0, originalWidth, originalHeight); - let minX = originalWidth + 1, - maxX = -1, - minY = originalHeight + 1, - maxY = -1, - x = 0, - y = 0, - currentPixelColorValueIndex; + let minX = originalWidth + 1, maxX = -1, minY = originalHeight + 1, maxY = -1; - for (y = 0; y < originalHeight; y++) { - for (x = 0; x < originalWidth; x++) { - currentPixelColorValueIndex = (y * originalWidth + x) * 4; - let currentPixelAlphaValue = imageData.data[currentPixelColorValueIndex + 3]; - if (currentPixelAlphaValue > 0) { + for (let y = 0; y < originalHeight; y++) { + for (let x = 0; x < originalWidth; x++) { + let idx = (y * originalWidth + x) * 4; + let alpha = imageData.data[idx + 3]; + if (alpha > 0) { if (minX > x) minX = x; if (maxX < x) maxX = x; if (minY > y) minY = y; @@ -81,14 +73,14 @@ function getCroppedCanvasDataUrl(canvas) { let croppedWidth = maxX - minX; let croppedHeight = maxY - minY; if (croppedWidth < 0 || croppedHeight < 0) return null; - let cuttedImageData = originalCtx.getImageData(minX, minY, croppedWidth, croppedHeight); + let cutImageData = originalCtx.getImageData(minX, minY, croppedWidth, croppedHeight); - let croppedCanvas = document.createElement('canvas'), - croppedCtx = croppedCanvas.getContext('2d'); + let croppedCanvas = document.createElement('canvas'); + let croppedCtx = croppedCanvas.getContext('2d'); croppedCanvas.width = croppedWidth; croppedCanvas.height = croppedHeight; - croppedCtx.putImageData(cuttedImageData, 0, 0); + croppedCtx.putImageData(cutImageData, 0, 0); return croppedCanvas.toDataURL(); } @@ -114,10 +106,20 @@ function resizeCanvas() { signaturePad.clear(); } -new IntersectionObserver((entries, observer) => { +const debounce = (fn, delay = 100) => { + let timer; + return (...args) => { + clearTimeout(timer); + timer = setTimeout(() => fn(...args), delay); + }; +}; + +const debouncedResize = debounce(resizeCanvas, 200); + +new IntersectionObserver((entries) => { if (entries.some((entry) => entry.intersectionRatio > 0)) { - resizeCanvas(); + debouncedResize(); } }).observe(signaturePadCanvas); -new ResizeObserver(resizeCanvas).observe(signaturePadCanvas); +new ResizeObserver(debouncedResize).observe(signaturePadCanvas); diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index b0c66c27e..ef815d1d2 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -43,13 +43,13 @@
-
+
-
+

-
+
@@ -134,7 +134,7 @@
-
+