Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add redo functionality in demo site for signature path restore when undo path. #763

Merged
merged 1 commit into from
Apr 3, 2024
Merged

docs: Add redo functionality in demo site for signature path restore when undo path. #763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
<meta name="description"
content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Expand All @@ -17,13 +20,14 @@
_gaq.push(['_setAccount', 'UA-39365077-1']);
_gaq.push(['_trackPageview']);

(function() {
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>

<body onselectstart="return false">
<span id="forkongithub">
<a href="https://github.com/szimek/signature_pad">Fork me on GitHub</a>
Expand All @@ -43,13 +47,15 @@
<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>
<button type="button" class="button" data-action="redo">Redo</button>

</div>
<div class="column">
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
<button type="button" class="button save" data-action="save-svg-with-background">Save as SVG with background</button>
<button type="button" class="button save" data-action="save-svg-with-background">Save as SVG with
background</button>
</div>
</div>
</div>
Expand All @@ -58,4 +64,5 @@
<script src="js/signature_pad.umd.js"></script>
<script src="js/app.js"></script>
</body>
</html>

</html>
25 changes: 18 additions & 7 deletions docs/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ 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]");
const saveSVGWithBackgroundButton = wrapper.querySelector("[data-action=save-svg-with-background]");
let undoData = [];
const canvas = wrapper.querySelector("canvas");
const signaturePad = new SignaturePad(canvas, {
// It's Necessary to use an opaque color when saving image as JPEG;
Expand All @@ -22,7 +24,7 @@ function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
const ratio = Math.max(window.devicePixelRatio || 1, 1);
const ratio = Math.max(window.devicePixelRatio || 1, 1);

// This part causes the canvas to be cleared
canvas.width = canvas.offsetWidth * ratio;
Expand All @@ -35,7 +37,7 @@ function resizeCanvas() {
// that the state of this library is consistent with visual state of the canvas, you
// have to clear it manually.
//signaturePad.clear();

// If you want to keep the drawing on resize instead of clearing it you can reset the data.
signaturePad.fromData(signaturePad.toData());
}
Expand Down Expand Up @@ -84,8 +86,17 @@ clearButton.addEventListener("click", () => {
undoButton.addEventListener("click", () => {
const data = signaturePad.toData();

if (data) {
data.pop(); // remove the last dot or line
if (data && data.length > 0) {
const remove = data.pop(); // remove the last dot or line
undoData.push(remove);
signaturePad.fromData(data);
}
});

redoButton.addEventListener("click", () => {
if (undoData.length > 0) {
const data = signaturePad.toData();
data.push(undoData.pop());
signaturePad.fromData(data);
}
});
Expand All @@ -94,7 +105,7 @@ changeBackgroundColorButton.addEventListener("click", () => {
const r = Math.round(Math.random() * 255);
const g = Math.round(Math.random() * 255);
const b = Math.round(Math.random() * 255);
const color = "rgb(" + r + "," + g + "," + b +")";
const color = "rgb(" + r + "," + g + "," + b + ")";

signaturePad.backgroundColor = color;
const data = signaturePad.toData();
Expand All @@ -106,7 +117,7 @@ changeColorButton.addEventListener("click", () => {
const r = Math.round(Math.random() * 255);
const g = Math.round(Math.random() * 255);
const b = Math.round(Math.random() * 255);
const color = "rgb(" + r + "," + g + "," + b +")";
const color = "rgb(" + r + "," + g + "," + b + ")";

signaturePad.penColor = color;
});
Expand Down Expand Up @@ -150,7 +161,7 @@ saveSVGWithBackgroundButton.addEventListener("click", () => {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
const dataURL = signaturePad.toDataURL('image/svg+xml', {includeBackgroundColor: true});
const dataURL = signaturePad.toDataURL('image/svg+xml', { includeBackgroundColor: true });
download(dataURL, "signature.svg");
}
});
Loading