19_1_keyboard_bindings.html

<div></div>
<script>
  // The original PixelEditor class. Extend the constructor.
  class PixelEditor {
    constructor(state, config) {
      let { tools, controls, dispatch } = config;
      this.state = state;

      this.canvas = new PictureCanvas(state.picture, pos => {
        let tool = tools[this.state.tool];
        let onMove = tool(pos, this.state, dispatch);
        if (onMove) {
          return pos => onMove(pos, this.state, dispatch);
        }
      });
      this.controls = controls.map(Control => new Control(state, config));
      this.dom = elt(
        'div',
        {
          tabIndex: 1,
          onkeydown: e => {
            e.preventDefault;
            Object.keys(config.tools).forEach(t => {
              if (event.ctrlKey && event.key === 'z') dispatch({ undo: true });
              else if (t[0] === event.key) dispatch({ tool: letterTools[event.key] });
            });
          }
        },
        this.canvas.dom,
        elt('br'),
        ...this.controls.reduce((a, c) => a.concat(' ', c.dom), [])
      );
    }
    syncState(state) {
      this.state = state;
      this.canvas.syncState(state.picture);
      for (let ctrl of this.controls) ctrl.syncState(state);
    }
  }

  document.querySelector('div').appendChild(startPixelEditor({}));
</script>