Masto/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx

import PropTypes from "prop-types";

import classNames from "classnames";

import ImmutablePropTypes from "react-immutable-proptypes";
import ImmutablePureComponent from "react-immutable-pure-component";
import { connect } from "react-redux";

import Atrament from "atrament"; // the doodling library
import { debounce, mapValues } from "lodash";

import { doodleSet, uploadCompose } from "flavours/glitch/actions/compose";
import Button from "flavours/glitch/components/button";
import { IconButton } from "flavours/glitch/components/icon_button";
// 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 });
}
/** Doodle canvas size options */
const DOODLE_SIZES = {
  normal: [500, 500, "Square 500"],
  tootbanner: [702, 330, "Tootbanner"],
  s640x480: [640, 480, "640×480 - 480p"],
  s800x600: [800, 600, "800×600 - SVGA"],
  s720x480: [720, 405, "720x405 - 16:9"],
};


const mapStateToProps = state => ({
  options: state.getIn(["compose", "doodle"]),
});

const mapDispatchToProps = dispatch => ({
  /**
   * Set options in the redux store
   * @param {Object} opts
   */
  setOpt: (opts) => dispatch(doodleSet(opts)),
  /**
   * Submit doodle for upload
   * @param {File} file
   */
  submit: (file) => dispatch(uploadCompose([file])),
});

/**
 * Doodling dialog with drawing canvas
 *
 * Keyboard shortcuts:
 * - Delete: Clear screen, fill with background color
 * - Backspace, Ctrl+Z: Undo one step
 * - Ctrl held while drawing: Use background color
 * - Shift held while clicking screen: Use fill tool
 *
 * Palette:
 * - Left mouse button: pick foreground
 * - Ctrl + left mouse button: pick background
 * - Right mouse button: pick background
 */
class DoodleModal extends ImmutablePureComponent {

  static propTypes = {
    options: ImmutablePropTypes.map,
    onClose: PropTypes.func.isRequired,
    setOpt: PropTypes.func.isRequired,
    submit: PropTypes.func.isRequired,
  };

  //region Option getters/setters

  /** Foreground color */
  get fg () {
    return this.props.options.get("fg");
  }
  set fg (value) {
    this.props.setOpt({ fg: value });
  }

  /** Background color */
  get bg () {
    return this.props.options.get("bg");
  }
  set bg (value) {
    this.props.setOpt({ bg: value });
  }

  /** Swap Fg and Bg for drawing */
  get swapped () {
    return this.props.options.get("swapped");
  }
  set swapped (value) {
    this.props.setOpt({ swapped: value });
  }

  /** Mode - 'draw' or 'fill' */
  get mode () {
    return this.props.options.get("mode");
  }
  set mode (value) {
    this.props.setOpt({ mode: value });
  }

  /** Base line weight */
  get weight () {
    return this.props.options.get("weight");
  }
  set weight (value) {
    this.props.setOpt({ weight: value });
  }

  /** Drawing opacity */
  get opacity () {
    return this.props.options.get("opacity");
  }
  set opacity (value) {
    this.props.setOpt({ opacity: value });
  }

  /** Adaptive stroke - change width with speed */
  get adaptiveStroke () {
    return this.props.options.get("adaptiveStroke");
  }
  set adaptiveStroke (value) {
    this.props.setOpt({ adaptiveStroke: value });
  }

  /** Smoothing (for mouse drawing) */
  get smoothing () {
    return this.props.options.get("smoothing");
  }
  set smoothing (value) {
    this.props.setOpt({ smoothing: value });
  }

  /** Size preset */
  get size () {
    return this.props.options.get("size");
  }
  set size (value) {
    this.props.setOpt({ size: value });
  }

  //endregion

  /**
   * Key up handler
   * @param {KeyboardEvent} e
   */
  handleKeyUp = (e) => {
    if (e.target.nodeName === "INPUT") {
      return;
    }

    if (e.key === "Delete") {
      e.preventDefault();
      this.handleClearBtn();
      return;
    }

    if (e.key === "Backspace" || (e.key === "z" && (e.ctrlKey || e.metaKey))) {
      e.preventDefault();
      this.undo();
    }

    if (e.key === "Control" || e.key === "Meta") {
      this.controlHeld = false;
      this.swapped = false;
    }

    if (e.key === "Shift") {
      this.shiftHeld = false;
      this.mode = "draw";
    }
  };

  /**
   * Key down handler
   * @param {KeyboardEvent} e
   */
  handleKeyDown = (e) => {
    if (e.key === "Control" || e.key === "Meta") {
      this.controlHeld = true;
      this.swapped = true;
    }

    if (e.key === "Shift") {
      this.shiftHeld = true;
      this.mode = "fill";
    }
  };

  /**
   * Component installed in the DOM, do some initial set-up
   */
  componentDidMount () {
    this.controlHeld = false;
    this.shiftHeld = false;
    this.swapped = false;
    window.addEventListener("keyup", this.handleKeyUp, false);
    window.addEventListener("keydown", this.handleKeyDown, false);
  }

  /**
   * Tear component down
   */
  componentWillUnmount () {
    window.removeEventListener("keyup", this.handleKeyUp, false);
    window.removeEventListener("keydown", this.handleKeyDown, false);
    if (this.sketcher) {
      this.sketcher.destroy();
    }
  }

  /**
   * Set reference to the canvas element.
   * This is called during component init
   * @param {HTMLCanvasElement} elem - canvas element
   */
  setCanvasRef = (elem) => {
    this.canvas = elem;
    if (elem) {
      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();
        }
      });

      // prevent context menu
      elem.addEventListener("contextmenu", (e) => {
        e.preventDefault();
      });

      elem.addEventListener("mousedown", (e) => {
        if (e.button === 2) {
          this.swapped = true;
        }
      });

      elem.addEventListener("mouseup", (e) => {
        if (e.button === 2) {
          this.swapped = this.controlHeld;
        }
      });

      this.initSketcher(elem);
      this.mode = "draw"; // Reset mode - it's confusing if left at 'fill'
    }
  };

  /**
   * Set up the sketcher instance
   * @param {HTMLCanvasElement | null} canvas - canvas element. Null if we're just resizing
   */
  initSketcher (canvas = null) {
    const sizepreset = DOODLE_SIZES[this.size];

    if (this.sketcher) {
      this.sketcher.destroy();
    }
    this.sketcher = new Atrament(canvas || this.canvas, sizepreset[0], sizepreset[1]);

    if (canvas) {
      this.ctx = this.sketcher.context;
      this.updateSketcherSettings();
    }

    this.clearScreen();
  }

  /**
   * Done button handler
   */
  onDoneButton = () => {
    const dataUrl = this.sketcher.toImage();
    const file = dataURLtoFile(dataUrl, "doodle.png");
    this.props.submit(file);
    this.props.onClose(); // close dialog
  };

  /**
   * Cancel button handler
   */
  onCancelButton = () => {
    if (this.undos.length > 1 && !confirm("Discard doodle? All changes will be lost!")) {
      return;
    }

    this.props.onClose(); // close dialog
  };

  /**
   * Update sketcher options based on state
   */
  updateSketcherSettings () {
    if (!this.sketcher) {
      return;
    }

    if (this.oldSize !== this.size) {
      this.initSketcher();
    }

    this.sketcher.color = (this.swapped ? this.bg : 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;

    this.oldSize = this.size;
  }

  /**
   * Fill screen with background color
   */
  clearScreen = () => {
    this.ctx.fillStyle = this.bg;
    this.ctx.fillRect(-1, -1, this.canvas.width+2, this.canvas.height+2);
    this.undos = [];

    this.doSaveUndo();
  };

  /**
   * Undo one step
   */
  undo = () => {
    if (this.undos.length > 1) {
      this.undos.pop();
      const buf = this.undos.pop();

      this.sketcher.clear();
      this.ctx.putImageData(buf, 0, 0);
      this.doSaveUndo();
    }
  };

  /**
   * Save canvas content into the undo buffer immediately
   */
  doSaveUndo = () => {
    this.undos.push(this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height));
  };

  /**
   * Called on each canvas change.
   * Saves canvas content to the undo buffer after some period of inactivity.
   */
  saveUndo = debounce(() => {
    this.doSaveUndo();
  }, 100);

  /**
   * Palette left click.
   * Selects Fg color (or Bg, if Control/Meta is held)
   * @param {MouseEvent<HTMLButtonElement>} e - event
   */
  onPaletteClick = (e) => {
    const c = e.target.dataset.color;

    if (this.controlHeld) {
      this.bg = c;
    } else {
      this.fg = c;
    }

    e.target.blur();
    e.preventDefault();
  };

  /**
   * Palette right click.
   * Selects Bg color
   * @param {MouseEvent<HTMLButtonElement>} e - event
   */
  onPaletteRClick = (e) => {
    this.bg = e.target.dataset.color;
    e.target.blur();
    e.preventDefault();
  };

  /**
   * Handle click on the Draw mode button
   * @param {MouseEvent<HTMLButtonElement>} e - event
   */
  setModeDraw = (e) => {
    this.mode = "draw";
    e.target.blur();
  };

  /**
   * Handle click on the Fill mode button
   * @param {MouseEvent<HTMLButtonElement>} e - event
   */
  setModeFill = (e) => {
    this.mode = "fill";
    e.target.blur();
  };

  /**
   * Handle click on Smooth checkbox
   * @param {ChangeEvent<HTMLInputElement>} e - event
   */
  tglSmooth = (e) => {
    this.smoothing = !this.smoothing;
    e.target.blur();
  };

  /**
   * Handle click on Adaptive checkbox
   * @param {ChangeEvent<HTMLInputElement>} e - event
   */
  tglAdaptive = (e) => {
    this.adaptiveStroke = !this.adaptiveStroke;
    e.target.blur();
  };

  /**
   * Handle change of the Weight input field
   * @param {ChangeEvent<HTMLInputElement>} e - event
   */
  setWeight = (e) => {
    this.weight = +e.target.value || 1;
  };

  /**
   * Set size - clalback from the select box
   * @param {ChangeEvent<HTMLSelectElement>} e - event
   */
  changeSize = (e) => {
    let newSize = e.target.value;
    if (newSize === this.oldSize) {
      return;
    }

    if (this.undos.length > 1 && !confirm("Change canvas size? This will erase your current drawing!")) {
      return;
    }

    this.size = newSize;
  };

  handleClearBtn = () => {
    if (this.undos.length > 1 && !confirm("Clear canvas? This will erase your current drawing!")) {
      return;
    }

    this.clearScreen();
  };

  /**
   * Render the component
   */
  render () {
    this.updateSketcherSettings();

    return (
      <div className='modal-root__modal doodle-modal'>
        <div className='doodle-modal__container'>
          <canvas ref={this.setCanvasRef} />
        </div>

        <div className='doodle-modal__action-bar'>
          <div className='doodle-toolbar'>
            <Button text='Done' onClick={this.onDoneButton} />
            <Button text='Cancel' onClick={this.onCancelButton} />
          </div>
          <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>
              <select aria-label='Canvas size' onInput={this.changeSize} defaultValue={this.size}>
                { Object.values(mapValues(DOODLE_SIZES, (val, k) =>
                  <option key={k} value={k}>{val[2]}</option>,
                )) }
              </select>
            </div>
          </div>
          <div className='doodle-toolbar'>
            <IconButton icon='pencil-simple-line' title='Draw' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === "draw"} inverted />
            <IconButton icon='paint-bucket' title='Fill' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === "fill"} inverted />
            <IconButton icon='arrow-counter-clockwise' title='Undo' label='Undo' onClick={this.undo} size={18} inverted />
            <IconButton icon='trash' title='Clear' label='Clear' onClick={this.handleClearBtn} 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}
                    onContextMenu={this.onPaletteRClick}
                    data-color={c[0]}
                    title={c[1]}
                    className={classNames({
                      "foreground": this.fg === c[0],
                      "background": this.bg === c[0],
                    })}
                  />,
              )
            }
          </div>
        </div>
      </div>
    );
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(DoodleModal);