Skip to content

Commit 56cf03d

Browse files
lopisagilgur5
authored andcommitted
(feat): add prop to prevent clearing canvas on resize
- if `clearOnResize` is `false`, then a window resize will no longer cause the canvas to clear itself - defaults to `true` for backward compatibility
1 parent 8d87057 commit 56cf03d

File tree

1 file changed

+14
-4
lines changed

1 file changed

+14
-4
lines changed

src/index.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export default class SignatureCanvas extends Component {
1414
penColor: PropTypes.string,
1515
onEnd: PropTypes.func,
1616
onBegin: PropTypes.func,
17-
canvasProps: PropTypes.object
17+
canvasProps: PropTypes.object,
18+
clearOnResize: PropTypes.bool
1819
}
1920

2021
static defaultProps = {
@@ -27,7 +28,8 @@ export default class SignatureCanvas extends Component {
2728
penColor: 'black',
2829
backgroundColor: 'rgba(0,0,0,0)',
2930
onEnd: () => {},
30-
onBegin: () => {}
31+
onBegin: () => {},
32+
clearOnResize: true
3133
}
3234

3335
componentDidMount () {
@@ -83,6 +85,13 @@ export default class SignatureCanvas extends Component {
8385

8486
isEmpty = () => this._isEmpty
8587

88+
_checkClearOnResize = () => {
89+
if (!this.props.clearOnResize) {
90+
return
91+
}
92+
this._resizeCanvas()
93+
}
94+
8695
_resizeCanvas = () => {
8796
let canvasProps = this.props.canvasProps || {}
8897
let {width, height} = canvasProps
@@ -120,7 +129,8 @@ export default class SignatureCanvas extends Component {
120129
this._canvas.addEventListener('mousedown', this._handleMouseDown)
121130
this._canvas.addEventListener('mousemove', this._handleMouseMove)
122131
document.addEventListener('mouseup', this._handleMouseUp)
123-
window.addEventListener('resize', this._resizeCanvas)
132+
133+
window.addEventListener('resize', this._checkClearOnResize)
124134
}
125135

126136
_handleTouchEvents = () => {
@@ -141,7 +151,7 @@ export default class SignatureCanvas extends Component {
141151
this._canvas.removeEventListener("touchmove", this._handleTouchMove)
142152
document.removeEventListener("touchend", this._handleTouchEnd)
143153

144-
window.removeEventListener("resize", this._resizeCanvas)
154+
window.addEventListener('resize', this._checkClearOnResize)
145155
}
146156

147157
_handleMouseDown = (ev) => {

0 commit comments

Comments
 (0)