Release v5

CHANGELOG.md

@@ -1,3 +1,25 @@
+# [5.0.0-beta.1](https://github.com/szimek/signature_pad/compare/v4.2.0...v5.0.0-beta.1) (2024-04-05)
+
+
+### Bug Fixes
+
+* allow drawing outside canvas for a smoother signature ([#765](https://github.com/szimek/signature_pad/issues/765)) ([29a8b5a](https://github.com/szimek/signature_pad/commit/29a8b5a2a19387782c3eec1055389011eb7f9699))
+
+
+### BREAKING CHANGES
+
+* Drawing outside of the canvas will record data outside the canvas
+* Update SignatureEvent to store the original event, x, y, pressure
+* move and up events are attached once down is triggered and they are on the window/ownerDocument target
+
+#### v4:
+
+![sig1](https://user-images.githubusercontent.com/97994/221343969-1d8b0353-1e03-4205-9904-9587974cf11e.gif)
+
+#### v5
+
+![sig2](https://github.com/szimek/signature_pad/assets/97994/b9f1cfc2-aef5-4320-b97c-9fbb5cfe98ed)
+
 # [4.2.0](https://github.com/szimek/signature_pad/compare/v4.1.7...v4.2.0) (2024-03-10)
 
 

docs/css/signature-pad.css

@@ -78,6 +78,11 @@ body {
   -ms-flex: 1;
   flex: 1;
   border: 1px solid #f4f4f4;
+  border-radius: 4px;
+}
+
+.signature-pad--body.empty {
+  background-color: #333;
 }
 
 .signature-pad--body canvas {

docs/index.html

@@ -34,7 +34,7 @@
   </span>
 
   <div id="signature-pad" class="signature-pad">
-    <div class="signature-pad--body">
+    <div id="canvas-wrapper" class="signature-pad--body">
       <canvas></canvas>
     </div>
     <div class="signature-pad--footer">
@@ -59,6 +59,10 @@
             background</button>
         </div>
       </div>
+
+      <div>
+        <button type="button" class="button" data-action="open-in-window">Open in Window</button>
+      </div>
     </div>
   </div>
 

docs/js/app.js

@@ -1,4 +1,5 @@
 const wrapper = document.getElementById("signature-pad");
+const canvasWrapper = document.getElementById("canvas-wrapper");
 const clearButton = wrapper.querySelector("[data-action=clear]");
 const changeBackgroundColorButton = wrapper.querySelector("[data-action=change-background-color]");
 const changeColorButton = wrapper.querySelector("[data-action=change-color]");
@@ -9,6 +10,7 @@ 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]");
+const openInWindowButton = wrapper.querySelector("[data-action=open-in-window]");
 let undoData = [];
 const canvas = wrapper.querySelector("canvas");
 const signaturePad = new SignaturePad(canvas, {
@@ -182,3 +184,20 @@ saveSVGWithBackgroundButton.addEventListener("click", () => {
     download(dataURL, "signature.svg");
   }
 });
+
+openInWindowButton.addEventListener("click", () => {
+	var externalWin = window.open('', '', `width=${canvas.width / window.devicePixelRatio},height=${canvas.height / window.devicePixelRatio}`);
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  externalWin.onresize = resizeCanvas;
+  externalWin.document.body.style.margin = '0';
+	externalWin.document.body.appendChild(canvas);
+  canvasWrapper.classList.add("empty");
+  externalWin.onbeforeunload = () => {
+    canvas.style.width = "";
+    canvas.style.height = "";
+    canvasWrapper.classList.remove("empty");
+    canvasWrapper.appendChild(canvas);
+    resizeCanvas();
+  };
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "signature_pad",
   "description": "Library for drawing smooth signatures.",
-  "version": "4.2.0",
+  "version": "5.0.0-beta.1",
   "homepage": "https://github.com/szimek/signature_pad",
   "author": {
     "name": "Szymon Nowak",