Release V4.0.0 (#574)

* update deps

* update changelog

* update readme

* fix changelog

CHANGELOG.md

@@ -1,6 +1,26 @@
 ## Changelog
 
-### master
+### 4.0.0
+#### Bug fixes
+- Added Anonymous to crossOrigin prop ([#542](https://github.com/szimek/signature_pad/pull/542))
+- Set SVG viewBox size from canvas width and height ([#411](https://github.com/szimek/signature_pad/pull/411))
+- Save line Properties in point group ([#571](https://github.com/szimek/signature_pad/pull/571))
+- Don't throw error when Coordinates are strings ([#573](https://github.com/szimek/signature_pad/pull/573))
+- Update Dependencies
+
+#### Features
+- Allow offsets when loading image via fromDataURL ([#538](https://github.com/szimek/signature_pad/pull/538))
+- Add clear option to fromData ([#570](https://github.com/szimek/signature_pad/pull/570))
+- Capture pressure when signing ([#566](https://github.com/szimek/signature_pad/pull/566))
+
+#### Breaking changes
+- SignaturePad is an event emitter. ([#567](https://github.com/szimek/signature_pad/pull/567)) `onBegin` and `onEnd` options have been moved to events.
+
+  The following events were added:
+  - `beginStroke`
+  - `endStroke`
+  - `beforeUpdateStroke`
+  - `afterUpdateStroke`
 
 ### 3.0.0-beta.4
 #### Bug fixes
@@ -34,7 +54,7 @@ dist/signature_pad.umd.min.js # minified UMD
 dist/signature_pad.m.js       # unminified ES module
 dist/signature_pad.m.min.js   # minified ES module
 ```
-- Change structure of data returned from `SignaturePad#toData method. Each point group now has 2 fields: `color` and `points`. Individual points no longer have `color` field.
+- Change structure of data returned from `SignaturePad#toData` method. Each point group now has 2 fields: `color` and `points`. Individual points no longer have `color` field.
 
 #### Bug Fixes
 - Allow scrolling via touch after calling `SignaturePad#off` ([felixhammerl](https://github.com/felixhammerl) and [patrickbussmann](https://github.com/patrickbussmann)).

README.md

@@ -38,9 +38,9 @@ This library is provided as UMD (Universal Module Definition) and ES6 module.
 ## Usage
 ### API
 ``` javascript
-var canvas = document.querySelector("canvas");
+const canvas = document.querySelector("canvas");
 
-var signaturePad = new SignaturePad(canvas);
+const signaturePad = new SignaturePad(canvas);
 
 // Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
 signaturePad.toDataURL(); // save image as PNG
@@ -57,7 +57,7 @@ const data = signaturePad.toData();
 // Draws signature image from an array of point groups
 signaturePad.fromData(data);
 
-// Draws signature image from an array of point groups, without clearing your existing image (second parameter defaults to true if null)
+// Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)
 signaturePad.fromData(data, { clear: false });
 
 // Clears the canvas
@@ -91,35 +91,50 @@ signaturePad.on();
 <dd>(string) Color used to draw the lines. Can be any color format accepted by <code>context.fillStyle</code>. Defaults to <code>"black"</code>.</dd>
 <dt>velocityFilterWeight</dt>
 <dd>(float) Weight used to modify new velocity based on the previous velocity. Defaults to <code>0.7</code>.</dd>
-<dt>onBegin</dt>
-<dd>(function) Callback when stroke begin.</dd>
-<dt>onEnd</dt>
-<dd>(function) Callback when stroke end.</dd>
 </dl>
 
 You can set options during initialization:
 ```javascript
-var signaturePad = new SignaturePad(canvas, {
+const signaturePad = new SignaturePad(canvas, {
     minWidth: 5,
     maxWidth: 10,
     penColor: "rgb(66, 133, 244)"
 });
 ```
 or during runtime:
 ```javascript
-var signaturePad = new SignaturePad(canvas);
+const signaturePad = new SignaturePad(canvas);
 signaturePad.minWidth = 5;
 signaturePad.maxWidth = 10;
 signaturePad.penColor = "rgb(66, 133, 244)";
 ```
 
+### Events
+<dl>
+<dt>beginStroke</dt>
+<dd>Triggered before stroke begins.</dd>
+<dt>endStroke</dt>
+<dd>Triggered after stroke ends.</dd>
+<dt>beforeUpdateStroke</dt>
+<dd>Triggered before stroke update.</dd>
+<dt>afterUpdateStroke</dt>
+<dd>Triggered after stroke update.</dd>
+</dl>
+
+You can add listeners to events with [`.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener):
+```javascript
+const signaturePad = new SignaturePad(canvas);
+signaturePad.addEventListener("beginStroke", () => {
+  console.log("Signature started");
+}, { once: true });
+```
 
 ### Tips and tricks
 #### Handling high DPI screens
 To correctly handle canvas on low and high DPI screens one has to take `devicePixelRatio` into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded via `SignaturePad#fromDataURL`. Here's an example how it can be done:
 ```javascript
 function resizeCanvas() {
-    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
+    const ratio =  Math.max(window.devicePixelRatio || 1, 1);
     canvas.width = canvas.offsetWidth * ratio;
     canvas.height = canvas.offsetHeight * ratio;
     canvas.getContext("2d").scale(ratio, ratio);
@@ -172,7 +187,7 @@ Here's an example in C# for ASP.NET:
 
 ``` csharp
 var dataUri = "data:image/png;base64,iVBORw0K...";
-var encodedImage = dataUri.Split(',')[1];            
+var encodedImage = dataUri.Split(',')[1];
 var decodedImage = Convert.FromBase64String(encodedImage);
 System.IO.File.WriteAllBytes("signature.png", decodedImage);
 ```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "signature_pad",
   "description": "Library for drawing smooth signatures.",
-  "version": "3.0.0-beta.4",
+  "version": "4.0.0",
   "homepage": "https://github.com/szimek/signature_pad",
   "author": {
     "name": "Szymon Nowak",
@@ -37,26 +37,26 @@
   ],
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.3.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.11.7",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
+    "@types/jest": "^27.0.3",
+    "@types/node": "^16.11.9",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "canvas": "^2.8.0",
     "cp-cli": "^2.0.0",
     "del": "^6.0.0",
     "del-cli": "^4.0.1",
-    "eslint": "^8.2.0",
+    "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
-    "lint-staged": "^12.0.1",
+    "lint-staged": "^12.1.2",
     "prettier": "^2.4.1",
-    "rollup": "^2.60.0",
+    "rollup": "^2.60.1",
     "rollup-plugin-terser": "^7.0.2",
     "serve": "^13.0.2",
     "ts-jest": "^27.0.7",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "lint-staged": {
     "*.ts": "prettier --write"

prettier.config.js

@@ -8,6 +8,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   bracketSpacing: true,
-  jsxBracketSameLine: false,
   arrowParens: 'always',
 };