Implemented undo and redo mechanism for drawing signature (#3152)

# Description of Changes

Please provide a summary of the changes, including:

Added undo and redo button for drawing signature, and provided
translation properties for the buttons

Closes
[#(2454)](https://github.com/Stirling-Tools/Stirling-PDF/issues/2454)

---

## Checklist

### General

- [](https://emojipedia.org/check-mark-button)I have read the
[Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [](https://emojipedia.org/check-mark-button) I have read the
[Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
-[](https://emojipedia.org/check-mark-button)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)
- [](https://emojipedia.org/check-mark-button) I have performed a
self-review of my own code
-[](https://emojipedia.org/check-mark-button) My changes generate no
new warnings


### UI Changes (if applicable)
![Screenshot 2025-03-10
142354](https://github.com/user-attachments/assets/4f36553f-4f8a-4cd3-854f-3acc2056f91e)


### Testing (if applicable)

- [](https://emojipedia.org/check-mark-button) 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.
This commit is contained in:
Ryan Tang 2025-03-12 15:58:32 +08:00 committed by GitHub
parent 07f55c4fe0
commit 9469d0aeb5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 122 additions and 40 deletions

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=إصلاح

View File

@ -860,7 +860,8 @@ sign.last=Son səhifə
sign.next=Növbəti səhifə
sign.previous=Əvvəlki səhifə
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Bərpa Et

View File

@ -860,7 +860,8 @@ sign.last=Последна страница
sign.next=Следваща страница
sign.previous=Предишна стараница
sign.maintainRatio=Превключване за поддържане на съотношението на страните
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Поправи

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparar

View File

@ -860,7 +860,8 @@ sign.last=Poslední stránka
sign.next=Další stránka
sign.previous=Předchozí stránka
sign.maintainRatio=Přepnout zachování poměru stran
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Opravit

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparér

View File

@ -860,7 +860,8 @@ sign.last=Letzte Seite
sign.next=Nächste Seite
sign.previous=Vorherige Seite
sign.maintainRatio=Seitenverhältnis beibehalten ein-/ausschalten
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparieren

View File

@ -860,7 +860,8 @@ sign.last=Τελευταία σελίδα
sign.next=Επόμενη σελίδα
sign.previous=Προηγούμενη σελίδα
sign.maintainRatio=Εναλλαγή διατήρησης αναλογίας διαστάσεων
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Επιδιόρθωση

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Repair

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Repair

View File

@ -860,7 +860,8 @@ sign.last=Última página
sign.next=Siguiente página
sign.previous=Página anterior
sign.maintainRatio=Activar/desactivar la relación de aspecto
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparar

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Konpondu

View File

@ -860,7 +860,8 @@ sign.last=صفحه آخر
sign.next=صفحه بعدی
sign.previous=صفحه قبلی
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=تعمیر

View File

@ -860,7 +860,8 @@ sign.last=Dernière page
sign.next=Page suivante
sign.previous=Page précédente
sign.maintainRatio=Conserver les proportions
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Réparer

View File

@ -860,7 +860,8 @@ sign.last=An leathanach deiridh
sign.next=An chéad leathanach eile
sign.previous=Leathanach roimhe seo
sign.maintainRatio=Scoránaigh, coinnigh an cóimheas gné
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Deisiúchán

View File

@ -860,7 +860,8 @@ sign.last=अंतिम पृष्ठ
sign.next=अगला पृष्ठ
sign.previous=पिछला पृष्ठ
sign.maintainRatio=आनुपातिक अनुपात बनाए रखें टॉगल करें
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=मरम्मत

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Popravi

View File

@ -860,7 +860,8 @@ sign.last=Utolsó oldal
sign.next=Következő oldal
sign.previous=Előző oldal
sign.maintainRatio=Képarány fenntartása váltása
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Javítás

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Perbaiki

View File

@ -860,7 +860,8 @@ sign.last=Ultima pagina
sign.next=Prossima pagina
sign.previous=Pagina precedente
sign.maintainRatio=Attiva il mantenimento delle proporzioni
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Ripara

View File

@ -860,7 +860,8 @@ sign.last=最後のページ
sign.next=次のページ
sign.previous=前のページ
sign.maintainRatio=アスペクト比を維持を切替え
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=修復

View File

@ -860,7 +860,8 @@ sign.last=마지막 페이지
sign.next=다음 페이지
sign.previous=이전 페이지
sign.maintainRatio=종횡비 유지 토글
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=복구

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Repareren

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparer

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Napraw

View File

@ -860,7 +860,8 @@ sign.last=Última página
sign.next=Próxima página
sign.previous=Página anterior
sign.maintainRatio=Habilitar manter proporção
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparar

View File

@ -860,7 +860,8 @@ sign.last=Última página
sign.next=Próxima página
sign.previous=Página anterior
sign.maintainRatio=Alternar manter proporção
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparar

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Repară

View File

@ -860,7 +860,8 @@ sign.last=Последняя страница
sign.next=Следующая страница
sign.previous=Предыдущая страница
sign.maintainRatio=Переключить сохранение пропорций
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Восстановление

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Opraviť

View File

@ -860,7 +860,8 @@ sign.last=Zadnja stran
sign.next=Naslednja stran
sign.previous=Prejšnja stran
sign.maintainRatio=Preklopi ohranjanje razmerja stranic
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Popravilo

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Popravi

View File

@ -860,7 +860,8 @@ sign.last=Sista sidan
sign.next=Nästa sida
sign.previous=Föregående sida
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Reparera

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=ซ่อมแซม

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Onar

View File

@ -860,7 +860,8 @@ sign.last=Остання сторінка
sign.next=Наступна сторінка
sign.previous=Попередня сторінка
sign.maintainRatio=Переключити збереження пропорцій
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Ремонт

View File

@ -860,7 +860,8 @@ sign.last=Last page
sign.next=Next page
sign.previous=Previous page
sign.maintainRatio=Toggle maintain aspect ratio
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=Sửa chữa

View File

@ -860,7 +860,8 @@ sign.last=ཤོག་ངོས་མཐའ་མ།
sign.next=ཤོག་ངོས་རྗེས་མ།
sign.previous=ཤོག་ངོས་སྔོན་མ།
sign.maintainRatio=བསྡུར་ཚད་རྒྱུན་འཁྱོངས་སྒོ་རྒྱག་པ།
sign.undo=Undo
sign.redo=Redo
#repair
repair.title=བཟོ་བཅོས།

View File

@ -860,7 +860,8 @@ sign.last=末页
sign.next=下一页
sign.previous=上一页
sign.maintainRatio=切换保持长宽比
sign.undo=撤销
sign.redo=重做
#repair
repair.title=修复

View File

@ -860,7 +860,8 @@ sign.last=最後一頁
sign.next=下一頁
sign.previous=上一頁
sign.maintainRatio=切換維持長寬比
sign.undo=撤销
sign.redo=重做
#repair
repair.title=修復

View File

@ -1,10 +1,48 @@
const signaturePadCanvas = document.getElementById('drawing-pad-canvas');
const undoButton = document.getElementById("signature-undo-button");
const redoButton = document.getElementById("signature-redo-button");
const signaturePad = new SignaturePad(signaturePadCanvas, {
minWidth: 1,
maxWidth: 2,
penColor: 'black',
});
let undoData = [];
signaturePad.addEventListener("endStroke", () => {
undoData = [];
});
window.addEventListener("keydown", (event) => {
switch (true) {
case event.key === "z" && event.ctrlKey:
undoButton.click();
break;
case event.key === "y" && event.ctrlKey:
redoButton.click();
break;
}
});
function undoDraw() {
const data = signaturePad.toData();
if (data && data.length > 0) {
const removed = data.pop();
undoData.push(removed);
signaturePad.fromData(data);
}
}
function redoDraw() {
if (undoData.length > 0) {
const data = signaturePad.toData();
data.push(undoData.pop());
signaturePad.fromData(data);
}
}
function addDraggableFromPad() {
if (signaturePad.isEmpty()) return;
const startTime = Date.now();

View File

@ -56,6 +56,10 @@
th:text="#{sign.clear}"></button>
<button id="save-signature" class="btn btn-outline-success mt-2" onclick="addDraggableFromPad()"
th:text="#{sign.add}"></button>
<button id="signature-undo-button" class="btn btn-outline-secondary mt-2" th:text="#{sign.undo}"
onclick="undoDraw()"></button>
<button id="signature-redo-button" class="btn btn-outline-secondary mt-2" th:text="#{sign.redo}"
onclick="redoDraw()"></button>
</div>
<div class="tab-container" th:title="#{sign.saved}" th:data-title="#{sign.saved}">