Skip to content

Commit a703e22

Browse files
committed
(refactor): Wrap upstream signature_pad
- Apparently react-signature-pad (what this repo forked from) just copy+pasted most of an older version of signature_pad when it was first created - In order to get all the latest features, fix bugs, and reduce the maintenance burden an general surface of this library and its API, react-signature-canvas is now a React wrapper around signature_pad - It retains the features it added on top of signature_pad, such as automatic resizing, a trim feature, and idiomatic React updates via props - And now has new features like fromDataURL options, toDataURL, fromData, and toData! And new props like minDistance and throttle - Return SignaturePad instance via getSignaturePad - Use componentDidMount to trigger prop updates via Object.assign on the SignaturePad instance - Move all wrapper methods to below render for better organization - Update README with new props and API methods - Add links to signature_pad in the props and API sections - Change intro to reflect the new changes in this library / repo - Remove bezier.js and point.js as they are wrapped - Remove all mouse / click / touch handling and other core calculations that are now wrapped - Remove defaultProps that were for the signature_pad implementation - This also once again changes up how the dotSize function works - It is now back to how it worked pre-v0.2.0 - Still debatable if this is a bugfix or a breaking change (see v0.2.2) - Left in propTypes for signature_pad, but maybe those should be removed too?
1 parent 9099197 commit a703e22

File tree

6 files changed

+67
-317
lines changed

6 files changed

+67
-317
lines changed

README.md

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111

1212
[![NPM](https://nodei.co/npm/react-signature-canvas.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/package/react-signature-canvas)
1313

14-
A [signature pad](https://github.com/szimek/signature_pad) implementation in
15-
React.
14+
A React wrapper component around [signature_pad](https://github.com/szimek/signature_pad).
1615

17-
This is an _unopinionated_ fork of
16+
Originally, this was just an _unopinionated_ fork of
1817
[react-signature-pad](https://github.com/blackjk3/react-signature-pad)
19-
that does not impose any styling or wrap any other unwanted elements around
18+
that did not impose any styling or wrap any other unwanted elements around
2019
your canvas -- it's just a wrapper around a single canvas element! Hence the
2120
naming difference.
21+
Nowadays, this repo / library has significantly evolved, introducing new features, fixing various bugs, and now wrapping the upstream `signature_pad` to have its updates and bugfixes baked in.
2222

2323
This fork also allows you to directly pass [props](#props) to the underlying
2424
canvas element, has new, documented [API methods](#api) you can use, and has
@@ -50,9 +50,11 @@ used in drawing. All props are **optional**.
5050
- `velocityFilterWeight` : `number`, default: `0.7`
5151
- `minWidth` : `number`, default: `0.5`
5252
- `maxWidth` : `number`, default: `2.5`
53+
- `minDistance`: `number`, default: `5`
5354
- `dotSize` : `number` or `function`,
54-
default: `(minWidth, maxWidth) => (minWidth + maxWidth) / 2`
55+
default: `() => (this.minWidth + this.maxWidth) / 2`
5556
- `penColor` : `string`, default: `'black'`
57+
- `throttle`: `number`, default: `16`
5658

5759
There are also two callbacks that will be called when a stroke ends and one
5860
begins, respectively.
@@ -70,6 +72,9 @@ Additional props are used to control the canvas element.
7072
- `clearOnResize`: `bool`, default: `true`
7173
- whether or not the canvas should be cleared when the window resizes
7274

75+
Of these props, all, except for `canvasProps` and `clearOnResize`, are passed through to `signature_pad` as its [options](https://github.com/szimek/signature_pad#options).
76+
`signature_pad`'s internal state is automatically kept in sync with prop updates for you (via a `componentDidUpdate` hook).
77+
7378
### API
7479

7580
All API methods require a ref to the SignatureCanvas in order to use and are
@@ -81,13 +86,21 @@ instance methods of the ref.
8186

8287
- `isEmpty()` : `boolean`, self-explanatory
8388
- `clear()` : `void`, clears the canvas using the `backgroundColor` prop
84-
- `fromDataURL(base64String)` : `void`, writes a base64 image to canvas
89+
- `fromDataURL(base64String, options)` : `void`, writes a base64 image to canvas
90+
- `toDataURL(mimetype, encoderOptions)`: `base64string`, returns the signature image as a data URL
91+
- `fromData(pointGroupArray)`: `void`, draws signature image from an array of point groups
92+
- `toData()`: `pointGroupArray`, returns signature image as an array of point groups
8593
- `off()`: `void`, unbinds all event handlers
8694
- `on()`: `void`, rebinds all event handlers
8795
- `getCanvas()`: `canvas`, returns the underlying canvas ref. Allows you to
8896
modify the canvas however you want or call methods such as `toDataURL()`
8997
- `getTrimmedCanvas()`: `canvas`, creates a copy of the canvas and returns a
9098
trimmed version of it, with all whitespace removed.
99+
- `getSignaturePad()`: `SignaturePad`, returns the underlying SignaturePad reference.
100+
101+
The API methods are _mostly_ just wrappers around [`signature_pad`'s API](https://github.com/szimek/signature_pad#api).
102+
`on()` and `off()` will, in addition, bind/unbind the window resize event handler.
103+
`getCanvas()`, `getTrimmedCanvas()`, and `getSignaturePad()` are new.
91104

92105
## Example
93106

package-lock.json

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"react-dom": "0.14 - 16"
4848
},
4949
"dependencies": {
50+
"signature_pad": "^2.3.2",
5051
"trim-canvas": "^0.1.0"
5152
}
5253
}

src/bezier.js

Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

Comments
 (0)