add redo

szimek · Apr 2, 2024 · e1e4630 · e1e4630
1 parent 813dbb4
commit e1e4630
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -39,10 +39,12 @@
       <div class="signature-pad--actions">
         <div class="column">
           <button type="button" class="button clear" data-action="clear">Clear</button>
+          <button type="button" class="button" data-action="undo">Undo</button>
+          <button type="button" class="button" data-action="redo">Redo</button>
+          <br/>
           <button type="button" class="button" data-action="change-background-color">Change background color</button>
           <button type="button" class="button" data-action="change-color">Change color</button>
           <button type="button" class="button" data-action="change-width">Change width</button>
-          <button type="button" class="button" data-action="undo">Undo</button>
 
         </div>
         <div class="column">

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -4,6 +4,7 @@ const changeBackgroundColorButton = wrapper.querySelector("[data-action=change-b
 const changeColorButton = wrapper.querySelector("[data-action=change-color]");
 const changeWidthButton = wrapper.querySelector("[data-action=change-width]");
 const undoButton = wrapper.querySelector("[data-action=undo]");
+const redoButton = wrapper.querySelector("[data-action=redo]");
 const savePNGButton = wrapper.querySelector("[data-action=save-png]");
 const saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
 const saveSVGButton = wrapper.querySelector("[data-action=save-svg]");
@@ -14,6 +15,7 @@ const signaturePad = new SignaturePad(canvas, {
   // this option can be omitted if only saving as PNG or SVG
   backgroundColor: 'rgb(255, 255, 255)'
 });
+const undoData = [];
 
 // Adjust canvas coordinate space taking into account pixel ratio,
 // to make it look crisp on mobile devices.
@@ -77,20 +79,37 @@ function dataURLToBlob(dataURL) {
   return new Blob([uInt8Array], { type: contentType });
 }
 
+signaturePad.addEventListener("endStroke", () => {
+  undoData.length = 0;
+})
+
 clearButton.addEventListener("click", () => {
   signaturePad.clear();
 });
 
 undoButton.addEventListener("click", () => {
   const data = signaturePad.toData();
 
-  if (data) {
-    // remove the last dot or line
-    while(!data.pop().beginLine);
+  if (data.length > 0) {
+    const lineData = [];
+    let lastLine;
+    do {
+      lastLine = data.pop();
+      lineData.unshift(lastLine);
+    } while (!lastLine.beginLine)
+
+    undoData.push(lineData);
     signaturePad.fromData(data);
   }
 });
 
+redoButton.addEventListener("click", () => {
+  if (undoData.length > 0) {
+    const data = signaturePad.toData();
+    signaturePad.fromData(data.concat(undoData.pop()));
+  }
+});
+
 changeBackgroundColorButton.addEventListener("click", () => {
   const r = Math.round(Math.random() * 255);
   const g = Math.round(Math.random() * 255);