Initial doodle support

app/javascript/mastodon/features/ui/components/doodle_modal.js

@@ -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>
+    );
+  }
+
+}

app/javascript/mastodon/features/ui/components/modal_root.js

@@ -7,6 +7,7 @@ import ActionsModal from './actions_modal';
 import MediaModal from './media_modal';
 import VideoModal from './video_modal';
 import BoostModal from './boost_modal';
+import DoodleModal from './doodle_modal';
 import ConfirmationModal from './confirmation_modal';
 import {
   OnboardingModal,
@@ -21,6 +22,7 @@ const MODAL_COMPONENTS = {
   'ONBOARDING': OnboardingModal,
   'VIDEO': () => Promise.resolve({ default: VideoModal }),
   'BOOST': () => Promise.resolve({ default: BoostModal }),
+  'DOODLE': () => Promise.resolve({ default: DoodleModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
   'REPORT': ReportModal,
@@ -88,7 +90,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {