Ondřej Hruška
7 years ago
parent
e960e2c1d2
commit
f1f6d8220a
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
const messages = defineMessages({
|
||||
doodle: { id: 'doodle_button.label', defaultMessage: 'Add a drawing' },
|
||||
});
|
||||
|
||||
const iconStyle = {
|
||||
height: null,
|
||||
lineHeight: '27px',
|
||||
};
|
||||
|
||||
@injectIntl
|
||||
export default class UploadButton extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
onOpenCanvas: PropTypes.func.isRequired,
|
||||
style: PropTypes.object,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.props.onOpenCanvas();
|
||||
}
|
||||
|
||||
render () {
|
||||
|
||||
const { intl, disabled } = this.props;
|
||||
|
||||
return (
|
||||
<div className='compose-form__upload-button'>
|
||||
<IconButton icon='pencil' title={intl.formatMessage(messages.doodle)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import { connect } from 'react-redux';
|
||||
import DoodleButton from '../components/doodle_button';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
import { uploadCompose } from '../../../actions/compose';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
|
||||
});
|
||||
|
||||
//https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while(n--){
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime });
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onOpenCanvas () {
|
||||
dispatch(openModal('DOODLE', {
|
||||
status,
|
||||
onDoodleSubmit: (b64data) => {
|
||||
dispatch(uploadCompose([dataURLtoFile(b64data, 'doodle.png')]));
|
||||
},
|
||||
}));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DoodleButton);
|
||||
@ -0,0 +1,65 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue