Doodle palette, options, fill tool (#172)

app/javascript/mastodon/actions/compose.js

@@ -45,6 +45,8 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST     = 'COMPOSE_UPLOAD_UPDATE_REQUEST'
 export const COMPOSE_UPLOAD_CHANGE_SUCCESS     = 'COMPOSE_UPLOAD_UPDATE_SUCCESS';
 export const COMPOSE_UPLOAD_CHANGE_FAIL        = 'COMPOSE_UPLOAD_UPDATE_FAIL';
 
+export const COMPOSE_DOODLE_SET        = 'COMPOSE_DOODLE_SET';
+
 export function changeCompose(text) {
   return {
     type: COMPOSE_CHANGE,
@@ -158,6 +160,13 @@ export function submitComposeFail(error) {
   };
 };
 
+export function doodleSet(options) {
+  return {
+    type: COMPOSE_DOODLE_SET,
+    options: options,
+  };
+};
+
 export function uploadCompose(files) {
   return function (dispatch, getState) {
     if (getState().getIn(['compose', 'media_attachments']).size > 3) {

app/javascript/mastodon/components/icon_button.js

@@ -22,6 +22,7 @@ export default class IconButton extends React.PureComponent {
     flip: PropTypes.bool,
     overlay: PropTypes.bool,
     tabIndex: PropTypes.string,
+    label: PropTypes.string,
   };
 
   static defaultProps = {
@@ -42,14 +43,18 @@ export default class IconButton extends React.PureComponent {
   }
 
   render () {
-    const style = {
+    let style = {
       fontSize: `${this.props.size}px`,
-      width: `${this.props.size * 1.28571429}px`,
       height: `${this.props.size * 1.28571429}px`,
       lineHeight: `${this.props.size}px`,
       ...this.props.style,
       ...(this.props.active ? this.props.activeStyle : {}),
     };
+    if (!this.props.label) {
+      style.width = `${this.props.size * 1.28571429}px`;
+    } else {
+      style.textAlign = 'left';
+    }
 
     const classes = ['icon-button'];
 
@@ -102,6 +107,7 @@ export default class IconButton extends React.PureComponent {
             tabIndex={this.props.tabIndex}
           >
             <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
+            {this.props.label}
           </button>
         }
       </Motion>

app/javascript/mastodon/features/compose/containers/doodle_button_container.js

@@ -1,33 +1,15 @@
 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')]));
-      },
-    }));
+    dispatch(openModal('DOODLE', {}));
   },
-
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(DoodleButton);

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

@@ -3,55 +3,319 @@ import PropTypes from 'prop-types';
 import Button from '../../../components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Atrament from 'atrament'; // the doodling library
+import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { doodleSet, uploadCompose } from '../../../actions/compose';
+import IconButton from '../../../components/icon_button';
+import { debounce } from 'lodash';
 
+// palette nicked from MyPaint, CC0
+const palette = [
+  ['rgb(  0,    0,    0)', 'Black'],
+  ['rgb( 38,   38,   38)', 'Gray 15'],
+  ['rgb( 77,   77,   77)', 'Grey 30'],
+  ['rgb(128,  128,  128)', 'Grey 50'],
+  ['rgb(171,  171,  171)', 'Grey 67'],
+  ['rgb(217,  217,  217)', 'Grey 85'],
+  ['rgb(255,  255,  255)', 'White'],
+  ['rgb(128,    0,    0)', 'Maroon'],
+  ['rgb(209,    0,    0)', 'English-red'],
+  ['rgb(255,   54,   34)', 'Tomato'],
+  ['rgb(252,   60,    3)', 'Orange-red'],
+  ['rgb(255,  140,  105)', 'Salmon'],
+  ['rgb(252,  232,   32)', 'Cadium-yellow'],
+  ['rgb(243,  253,   37)', 'Lemon yellow'],
+  ['rgb(121,    5,   35)', 'Dark crimson'],
+  ['rgb(169,   32,   62)', 'Deep carmine'],
+  ['rgb(255,  140,    0)', 'Orange'],
+  ['rgb(255,  168,   18)', 'Dark tangerine'],
+  ['rgb(217,  144,   88)', 'Persian orange'],
+  ['rgb(194,  178,  128)', 'Sand'],
+  ['rgb(255,  229,  180)', 'Peach'],
+  ['rgb(100,   54,   46)', 'Bole'],
+  ['rgb(108,   41,   52)', 'Dark cordovan'],
+  ['rgb(163,   65,   44)', 'Chestnut'],
+  ['rgb(228,  136,  100)', 'Dark salmon'],
+  ['rgb(255,  195,  143)', 'Apricot'],
+  ['rgb(255,  219,  188)', 'Unbleached silk'],
+  ['rgb(242,  227,  198)', 'Straw'],
+  ['rgb( 53,   19,   13)', 'Bistre'],
+  ['rgb( 84,   42,   14)', 'Dark chocolate'],
+  ['rgb(102,   51,   43)', 'Burnt sienna'],
+  ['rgb(184,   66,    0)', 'Sienna'],
+  ['rgb(216,  153,   12)', 'Yellow ochre'],
+  ['rgb(210,  180,  140)', 'Tan'],
+  ['rgb(232,  204,  144)', 'Dark wheat'],
+  ['rgb(  0,   49,   83)', 'Prussian blue'],
+  ['rgb( 48,   69,  119)', 'Dark grey blue'],
+  ['rgb(  0,   71,  171)', 'Cobalt blue'],
+  ['rgb( 31,  117,  254)', 'Blue'],
+  ['rgb(120,  180,  255)', 'Bright french blue'],
+  ['rgb(171,  200,  255)', 'Bright steel blue'],
+  ['rgb(208,  231,  255)', 'Ice blue'],
+  ['rgb( 30,   51,   58)', 'Medium jungle green'],
+  ['rgb( 47,   79,   79)', 'Dark slate grey'],
+  ['rgb( 74,  104,   93)', 'Dark grullo green'],
+  ['rgb(  0,  128,  128)', 'Teal'],
+  ['rgb( 67,  170,  176)', 'Turquoise'],
+  ['rgb(109,  174,  199)', 'Cerulean frost'],
+  ['rgb(173,  217,  186)', 'Tiffany green'],
+  ['rgb( 22,   34,   29)', 'Gray-asparagus'],
+  ['rgb( 36,   48,   45)', 'Medium dark teal'],
+  ['rgb( 74,  104,   93)', 'Xanadu'],
+  ['rgb(119,  198,  121)', 'Mint'],
+  ['rgb(175,  205,  182)', 'Timberwolf'],
+  ['rgb(185,  245,  246)', 'Celeste'],
+  ['rgb(193,  255,  234)', 'Aquamarine'],
+  ['rgb( 29,   52,   35)', 'Cal Poly Pomona'],
+  ['rgb(  1,   68,   33)', 'Forest green'],
+  ['rgb( 42,  128,    0)', 'Napier green'],
+  ['rgb(128,  128,    0)', 'Olive'],
+  ['rgb( 65,  156,  105)', 'Sea green'],
+  ['rgb(189,  246,   29)', 'Green-yellow'],
+  ['rgb(231,  244,  134)', 'Bright chartreuse'],
+  ['rgb(138,   23,  137)', 'Purple'],
+  ['rgb( 78,   39,  138)', 'Violet'],
+  ['rgb(193,   75,  110)', 'Dark thulian pink'],
+  ['rgb(222,   49,   99)', 'Cerise'],
+  ['rgb(255,   20,  147)', 'Deep pink'],
+  ['rgb(255,  102,  204)', 'Rose pink'],
+  ['rgb(255,  203,  219)', 'Pink'],
+  ['rgb(255,  255,  255)', 'White'],
+  ['rgb(229,   17,    1)', 'RGB Red'],
+  ['rgb(  0,  255,    0)', 'RGB Green'],
+  ['rgb(  0,    0,  255)', 'RGB Blue'],
+  ['rgb(  0,  255,  255)', 'CMYK Cyan'],
+  ['rgb(255,    0,  255)', 'CMYK Magenta'],
+  ['rgb(255,  255,    0)', 'CMYK Yellow'],
+];
+
+// re-arrange to the right order for display
+let palReordered = [];
+for (let row = 0; row < 7; row++) {
+  for (let col = 0; col < 11; col++) {
+    palReordered.push(palette[col * 7 + row]);
+  }
+  palReordered.push(null); // null indicates a <br />
+}
+
+// Utility for converting base64 image to binary for upload
+// 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 mapStateToProps = state => ({
+  options: state.getIn(['compose', 'doodle']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  setOpt: (opts) => dispatch(doodleSet(opts)),
+  submit: (file) => dispatch(uploadCompose([file])),
+});
+
+@connect(mapStateToProps, mapDispatchToProps)
 export default class DoodleModal extends ImmutablePureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object,
+  static propTypes = {
+    options: ImmutablePropTypes.map,
+    onClose: PropTypes.func.isRequired,
+    setOpt: PropTypes.func.isRequired,
+    submit: PropTypes.func.isRequired,
   };
 
-  static propTypes = {
-    onDoodleSubmit: PropTypes.func.isRequired, // gets the base64 as argument
-    onClose: PropTypes.func.isRequired,
-  };
+  //region Option getters/setters
+
+  get fg () {
+    return this.props.options.get('fg');
+  }
+
+  set fg (value) {
+    this.props.setOpt({ fg: value });
+  }
+
+  get bg () {
+    return this.props.options.get('bg');
+  }
+
+  set bg (value) {
+    this.props.setOpt({ bg: value });
+  }
+
+  get mode () {
+    return this.props.options.get('mode');
+  }
+
+  set mode (value) {
+    this.props.setOpt({ mode: value });
+  }
+
+  get weight () {
+    return this.props.options.get('weight');
+  }
+
+  set weight (value) {
+    this.props.setOpt({ weight: value });
+  }
+
+  get opacity () {
+    return this.props.options.get('opacity');
+  }
+
+  set opacity (value) {
+    this.props.setOpt({ opacity: value });
+  }
+
+  get adaptiveStroke () {
+    return this.props.options.get('adaptiveStroke');
+  }
+
+  set adaptiveStroke (value) {
+    this.props.setOpt({ adaptiveStroke: value });
+  }
+
+  get smoothing () {
+    return this.props.options.get('smoothing');
+  }
+
+  set smoothing (value) {
+    this.props.setOpt({ smoothing: value });
+  }
+
+  //endregion
 
   handleKeyUp = (e) => {
     if (e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault();
       this.clearScreen();
     }
-  }
 
-  clearScreen () {
-    this.sketcher.context.fillStyle = 'white';
-    this.sketcher.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
-  }
+    if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      this.undo();
+    }
+  };
 
   componentDidMount () {
     window.addEventListener('keyup', this.handleKeyUp, false);
+  };
+
+  componentWillUnmount () {
+    window.removeEventListener('keyup', this.handleKeyUp, false);
   }
 
+  clearScreen = () => {
+    this.sketcher.context.fillStyle = this.bg;
+    this.sketcher.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    this.undos = [];
+
+    this.doSaveUndo();
+  };
+
   handleDone = () => {
-    this.props.onDoodleSubmit(this.sketcher.toImage());
+    const dataUrl = this.sketcher.toImage();
+    const file = dataURLtoFile(dataUrl, 'doodle.png');
+    this.props.submit(file);
+
     this.sketcher.destroy();
     this.props.onClose();
+  };
+
+  updateSketcherSettings () {
+    if (!this.sketcher) return;
+
+    this.sketcher.color = this.fg;
+    this.sketcher.opacity = this.opacity;
+    this.sketcher.weight = this.weight;
+    this.sketcher.mode = this.mode;
+    this.sketcher.smoothing = this.smoothing;
+    this.sketcher.adaptiveStroke = this.adaptiveStroke;
+  }
+
+  initSketcher (elem) {
+    this.sketcher = new Atrament(elem, 500, 500);
+
+    this.mode = 'draw'; // Reset mode - it's confusing if left at 'fill'
+
+    this.updateSketcherSettings();
+    this.clearScreen();
   }
 
   setCanvasRef = (elem) => {
     this.canvas = elem;
     if (elem) {
-      this.sketcher = new Atrament(elem, 500, 500, 'black');
+      elem.addEventListener('dirty', () => {
+        this.saveUndo();
+        this.sketcher._dirty = false;
+      });
+      elem.addEventListener('click', () => {
+        // sketcher bug - does not fire dirty on fill
+        if (this.mode === 'fill') {
+          this.saveUndo();
+        }
+      });
 
-      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
+      this.initSketcher(elem);
     }
-  }
+  };
+
+  onPaletteClick = (e) => {
+    this.fg = e.target.dataset.color;
+    e.target.blur();
+  };
+
+  setModeDraw = (e) => {
+    this.mode = 'draw';
+    e.target.blur();
+  };
+
+  setModeFill = (e) => {
+    this.mode = 'fill';
+    e.target.blur();
+  };
+
+  tglSmooth = (e) => {
+    this.smoothing = !this.smoothing;
+    e.target.blur();
+  };
+
+  tglAdaptive = (e) => {
+    this.adaptiveStroke = !this.adaptiveStroke;
+    e.target.blur();
+  };
+
+  setWeight = (e) => {
+    this.weight = +e.target.value || 1;
+  };
+
+  undo = () => {
+    if (this.undos.length > 1) {
+      this.undos.pop();
+      const buf = this.undos.pop();
+
+      this.sketcher.clear();
+      this.sketcher.context.putImageData(buf, 0, 0);
+      this.doSaveUndo();
+    }
+  };
+
+  doSaveUndo = () => {
+    this.undos.push(this.sketcher.context.getImageData(0, 0, this.canvas.width, this.canvas.height));
+  };
+
+  saveUndo = debounce(() => {
+    this.doSaveUndo();
+  }, 100);
 
   render () {
+    this.updateSketcherSettings();
+
     return (
       <div className='modal-root__modal doodle-modal'>
         <div className='doodle-modal__container'>
@@ -60,6 +324,49 @@ export default class DoodleModal extends ImmutablePureComponent {
 
         <div className='doodle-modal__action-bar'>
           <Button text='Done' onClick={this.handleDone} />
+          <div className='filler' />
+          <div className='doodle-toolbar with-inputs'>
+            <div>
+              <label htmlFor='dd_smoothing'>Smoothing</label>
+              <span className='val'>
+                <input type='checkbox' id='dd_smoothing' onChange={this.tglSmooth} checked={this.smoothing} />
+              </span>
+            </div>
+            <div>
+              <label htmlFor='dd_adaptive'>Adaptive</label>
+              <span className='val'>
+                <input type='checkbox' id='dd_adaptive' onChange={this.tglAdaptive} checked={this.adaptiveStroke} />
+              </span>
+            </div>
+            <div>
+              <label htmlFor='dd_weight'>Weight</label>
+              <span className='val'>
+                <input type='number' min={1} id='dd_weight' value={this.weight} onChange={this.setWeight} />
+              </span>
+            </div>
+          </div>
+          <div className='doodle-toolbar'>
+            <IconButton icon='pencil' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === 'draw'} inverted />
+            <IconButton icon='bath' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === 'fill'} inverted />
+            <IconButton icon='undo' label='Undo' onClick={this.undo} size={18} inverted />
+            <IconButton icon='trash' label='Clear' onClick={this.clearScreen} size={18} inverted />
+          </div>
+          <div className='doodle-palette'>
+            {
+              palReordered.map((c, i) =>
+                c === null ?
+                  <br key={i} /> :
+                  <button
+                    key={i}
+                    style={{ backgroundColor: c[0] }}
+                    onClick={this.onPaletteClick}
+                    data-color={c[0]}
+                    title={c[1]}
+                    className={this.fg === c[0] ? 'selected' : ''}
+                  />
+              )
+            }
+          </div>
         </div>
       </div>
     );

app/javascript/mastodon/reducers/compose.js

@@ -26,6 +26,7 @@ import {
   COMPOSE_UPLOAD_CHANGE_REQUEST,
   COMPOSE_UPLOAD_CHANGE_SUCCESS,
   COMPOSE_UPLOAD_CHANGE_FAIL,
+  COMPOSE_DOODLE_SET,
   COMPOSE_RESET,
 } from '../actions/compose';
 import { TIMELINE_DELETE } from '../actions/timelines';
@@ -61,6 +62,15 @@ const initialState = ImmutableMap({
   default_sensitive: false,
   resetFileKey: Math.floor((Math.random() * 0x10000)),
   idempotencyKey: null,
+  doodle: ImmutableMap({
+    fg: 'rgb(  0,    0,    0)',
+    bg: 'rgb(255,  255,  255)',
+    mode: 'draw',
+    weight: 2,
+    opacity: 1,
+    adaptiveStroke: true,
+    smoothing: false,
+  }),
 });
 
 function statusToTextMentions(state, status) {
@@ -288,6 +298,8 @@ export default function compose(state = initialState, action) {
 
         return item;
       }));
+  case COMPOSE_DOODLE_SET:
+    return state.mergeIn(['doodle'], action.options);
   default:
     return state;
   }

app/javascript/styles/components.scss

@@ -3874,7 +3874,6 @@ button.icon-button.active i.fa-retweet {
 }
 
 .boost-modal,
-.doodle-modal,
 .confirmation-modal,
 .report-modal,
 .actions-modal,
@@ -3893,10 +3892,6 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.doodle-modal {
-  width: unset;
-}
-
 .actions-modal {
   .status {
     background: $white;
@@ -3920,7 +3915,6 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.doodle-modal__action-bar,
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
@@ -4785,3 +4779,5 @@ noscript {
     }
   }
 }
+
+@import 'doodle';

app/javascript/styles/doodle.scss

@@ -0,0 +1,70 @@
+.doodle-modal {
+  @extend .boost-modal;
+  width: unset;
+}
+
+.doodle-modal__container {
+  line-height: 0; // remove weird gap under canvas
+  canvas {
+    border: 5px solid #d9e1e8;
+  }
+}
+
+.doodle-modal__action-bar {
+  @extend .boost-modal__action-bar;
+
+  .filler {
+    flex-grow: 1;
+  }
+
+  .doodle-toolbar {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    justify-content: space-around;
+
+    &.with-inputs {
+      label {
+        display: inline-block;
+        width: 70px;
+        text-align: right;
+        margin-right: 2px;
+      }
+
+      input[type="number"],input[type="text"] {
+        width: 40px;
+      }
+      span.val {
+        display: inline-block;
+        text-align: left;
+        width: 50px;
+      }
+    }
+  }
+
+  .doodle-palette {
+    padding-right: 0 !important;
+    border: 1px solid black;
+    line-height: .2rem;
+    flex-grow: 0;
+    background: white;
+
+    button {
+      appearance: none;
+      width: 1rem;
+      height: 1rem;
+      margin: 0; padding: 0;
+      text-align: center;
+      color: black;
+      text-shadow: 0 0 1px white;
+      cursor: pointer;
+      box-shadow: inset 0 0 1px rgba(white, .5);
+      border: 1px solid black;
+
+      &.selected {
+        outline-offset:-1px;
+        outline: 1px dotted white;
+      }
+    }
+  }
+}