commit
daa04c39b6
@ -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,68 @@
|
|||||||
|
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.clearScreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearScreen () {
|
||||||
|
this.sketcher.context.fillStyle = 'white';
|
||||||
|
this.sketcher.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
|
||||||
|
this.clearScreen();
|
||||||
|
|
||||||
|
// .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