66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import Button from '../../../components/button';
|
||
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||
|
|
import Atrament from 'atrament'; // the doodling library
|
||
|
|
|
||
|
|
export default class DoodleModal extends ImmutablePureComponent {
|
||
|
|
|
||
|
|
static contextTypes = {
|
||
|
|
router: PropTypes.object,
|
||
|
|
};
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
onDoodleSubmit: PropTypes.func.isRequired, // gets the base64 as argument
|
||
|
|
onClose: PropTypes.func.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
handleKeyUp = (e) => {
|
||
|
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||
|
|
this.sketcher.clear();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount () {
|
||
|
|
window.addEventListener('keyup', this.handleKeyUp, false);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleDone = () => {
|
||
|
|
this.props.onDoodleSubmit(this.sketcher.toImage());
|
||
|
|
this.sketcher.destroy();
|
||
|
|
this.props.onClose();
|
||
|
|
}
|
||
|
|
|
||
|
|
setCanvasRef = (elem) => {
|
||
|
|
this.canvas = elem;
|
||
|
|
if (elem) {
|
||
|
|
this.sketcher = new Atrament(elem, 500, 500, 'black');
|
||
|
|
|
||
|
|
// pre-fill with white
|
||
|
|
this.sketcher.context.fillStyle = 'white';
|
||
|
|
this.sketcher.context.fillRect(0, 0, elem.width, elem.height);
|
||
|
|
|
||
|
|
// .smoothing looks good with mouse but works really poorly with a tablet
|
||
|
|
this.sketcher.smoothing = false;
|
||
|
|
|
||
|
|
// There's a bunch of options we should add UI controls for later
|
||
|
|
// ref: https://github.com/jakubfiala/atrament.js
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render () {
|
||
|
|
return (
|
||
|
|
<div className='modal-root__modal doodle-modal'>
|
||
|
|
<div className='doodle-modal__container'>
|
||
|
|
<canvas ref={this.setCanvasRef} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className='doodle-modal__action-bar'>
|
||
|
|
<Button text='Done' onClick={this.handleDone} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|