mirror of
				https://github.com/Frooodle/Stirling-PDF.git
				synced 2025-10-25 11:17:28 +02:00 
			
		
		
		
	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)  ### 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:
		
							parent
							
								
									07f55c4fe0
								
							
						
					
					
						commit
						9469d0aeb5
					
				| @ -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=إصلاح | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=Последна страница | ||||
| sign.next=Следваща страница | ||||
| sign.previous=Предишна стараница | ||||
| sign.maintainRatio=Превключване за поддържане на съотношението на страните | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=Поправи | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=Τελευταία σελίδα | ||||
| sign.next=Επόμενη σελίδα | ||||
| sign.previous=Προηγούμενη σελίδα | ||||
| sign.maintainRatio=Εναλλαγή διατήρησης αναλογίας διαστάσεων | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=Επιδιόρθωση | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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=تعمیر | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=अंतिम पृष्ठ | ||||
| sign.next=अगला पृष्ठ | ||||
| sign.previous=पिछला पृष्ठ | ||||
| sign.maintainRatio=आनुपातिक अनुपात बनाए रखें टॉगल करें | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=मरम्मत | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=最後のページ | ||||
| sign.next=次のページ | ||||
| sign.previous=前のページ | ||||
| sign.maintainRatio=アスペクト比を維持を切替え | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=修復 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=마지막 페이지 | ||||
| sign.next=다음 페이지 | ||||
| sign.previous=이전 페이지 | ||||
| sign.maintainRatio=종횡비 유지 토글 | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=복구 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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ă | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=Последняя страница | ||||
| sign.next=Следующая страница | ||||
| sign.previous=Предыдущая страница | ||||
| sign.maintainRatio=Переключить сохранение пропорций | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=Восстановление | ||||
|  | ||||
| @ -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ť | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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=ซ่อมแซม | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=Остання сторінка | ||||
| sign.next=Наступна сторінка | ||||
| sign.previous=Попередня сторінка | ||||
| sign.maintainRatio=Переключити збереження пропорцій | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=Ремонт | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=ཤོག་ངོས་མཐའ་མ། | ||||
| sign.next=ཤོག་ངོས་རྗེས་མ། | ||||
| sign.previous=ཤོག་ངོས་སྔོན་མ། | ||||
| sign.maintainRatio=བསྡུར་ཚད་རྒྱུན་འཁྱོངས་སྒོ་རྒྱག་པ། | ||||
| 
 | ||||
| sign.undo=Undo | ||||
| sign.redo=Redo | ||||
| 
 | ||||
| #repair | ||||
| repair.title=བཟོ་བཅོས། | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=末页 | ||||
| sign.next=下一页 | ||||
| sign.previous=上一页 | ||||
| sign.maintainRatio=切换保持长宽比 | ||||
| 
 | ||||
| sign.undo=撤销 | ||||
| sign.redo=重做 | ||||
| 
 | ||||
| #repair | ||||
| repair.title=修复 | ||||
|  | ||||
| @ -860,7 +860,8 @@ sign.last=最後一頁 | ||||
| sign.next=下一頁 | ||||
| sign.previous=上一頁 | ||||
| sign.maintainRatio=切換維持長寬比 | ||||
| 
 | ||||
| sign.undo=撤销 | ||||
| sign.redo=重做 | ||||
| 
 | ||||
| #repair | ||||
| repair.title=修復 | ||||
|  | ||||
| @ -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(); | ||||
|  | ||||
| @ -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}"> | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user