Merge pull request #143 from juliandescottes/add-keyboard-shortcuts

Add keyboard shortcuts

css/cheatsheet.css

@@ -0,0 +1,77 @@
+#cheatsheet-wrapper {
+  position: absolute;
+  z-index: 10000;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  padding: 50px;
+  box-sizing: border-box;
+
+  color: white;
+}
+
+.cheatsheet-container {
+  width: 100%;
+  height:  100%;
+  box-sizing: border-box;
+  padding: 20px 10%;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.9);
+  overflow: auto;
+}
+
+.cheatsheet-container h3 {
+  font-size:24px;
+  margin-top: 0;
+}
+
+.cheatsheet-section {
+  float: left;
+  width : 50%;
+}
+
+.cheatsheet-shortcut {
+  overflow: hidden;
+  margin: 10px 0;
+}
+
+.cheatsheet-icon.tool-icon {
+  float: left;
+  display: inline-block;
+
+  height: 30px;
+  width: 30px;
+  margin: 0 20px 0 0;
+
+  background-size: 20px 20px;
+  background-position: 5px 5px;
+}
+
+.cheatsheet-description {
+  font-family:Courier;
+  color: white;
+  font-size : 13px;
+  margin-left: 20px;
+  line-height : 30px;
+}
+
+.cheatsheet-key {
+  display : inline-block;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+
+  border : 1px solid gold;
+  border-radius: 2px;
+
+  box-sizing: border-box;
+
+  text-align: center;
+  font-family:Courier;
+  font-weight: bold;
+  font-size : 18px;
+  color: gold;
+}

index.html

@@ -12,6 +12,7 @@
   <link rel="stylesheet" type="text/css" href="css/forms.css">
   <link rel="stylesheet" type="text/css" href="css/settings.css">
   <link rel="stylesheet" type="text/css" href="css/tools.css">
+  <link rel="stylesheet" type="text/css" href="css/cheatsheet.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
   <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
@@ -54,9 +55,8 @@
         </div>
       </div>
     </div>
-
   </div>
-
+  <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <script type="text/javascript" src="piskel-boot.js"></script>
 </body>
 </html>

js/Events.js

@@ -3,10 +3,8 @@ var Events = {
 
   TOOL_SELECTED : "TOOL_SELECTED",
   TOOL_RELEASED : "TOOL_RELEASED",
-  PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED",
-  PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED",
-  SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED",
-  SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED",
+  SELECT_PRIMARY_COLOR: "SELECT_PRIMARY_COLOR",
+  SELECT_SECONDARY_COLOR: "SELECT_SECONDARY_COLOR",
 
   /**
    *  When this event is emitted, a request is sent to the localstorage
@@ -15,22 +13,6 @@ var Events = {
    */
   LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
 
-  CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
-
-  /**
-   * Event to request a refresh of the display.
-   * A bit overkill but, it's just workaround in our current drawing system.
-   * TODO: Remove or rework when redraw system is refactored.
-   */
-  REFRESH: "REFRESH",
-
-  /**
-   * Temporary event to bind the redraw of right preview film to the canvas.
-   * This redraw should be driven by model updates.
-   * TODO(vincz): Remove.
-   */
-  REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
-
   /**
    * Fired each time a user setting change.
    * The payload will be:
@@ -39,7 +21,6 @@ var Events = {
    */
   USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED",
 
-  /* Listened to by SettingsController */
   CLOSE_SETTINGS_DRAWER : "CLOSE_SETTINGS_DRAWER",
 
   /**
@@ -50,8 +31,6 @@ var Events = {
 
   FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
 
-  CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
-
   SELECTION_CREATED: "SELECTION_CREATED",
   SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
   SELECTION_DISMISSED: "SELECTION_DISMISSED",
@@ -59,9 +38,6 @@ var Events = {
   SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
   HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
 
-  UNDO: "UNDO",
-  REDO: "REDO",
-  CUT: "CUT",
-  COPY: "COPY",
-  PASTE: "PASTE"
+  // Events triggered by keyboard
+  SELECT_TOOL : "SELECT_TOOL"
 };

js/app.js

@@ -10,6 +10,9 @@
   ns.app = {
 
     init : function () {
+      this.shortcutService = new pskl.service.keyboard.ShortcutService();
+      this.shortcutService.init();
+
       var size = this.readSizeFromURL_();
       var piskel = new pskl.model.Piskel(size.width, size.height);
 
@@ -20,8 +23,12 @@
       piskel.addLayer(layer);
 
       this.piskelController = new pskl.controller.PiskelController(piskel);
+      this.piskelController.init();
 
-      this.drawingController = new pskl.controller.DrawingController(this.piskelController, $('#drawing-canvas-container'));
+      this.paletteController = new pskl.controller.PaletteController();
+      this.paletteController.init();
+
+      this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
       this.drawingController.init();
 
       this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
@@ -39,15 +46,15 @@
       this.settingsController = new pskl.controller.settings.SettingsController(this.piskelController);
       this.settingsController.init();
 
+      this.toolController = new pskl.controller.ToolController();
+      this.toolController.init();
+
       this.selectionManager = new pskl.selection.SelectionManager(this.piskelController);
       this.selectionManager.init();
 
       this.historyService = new pskl.service.HistoryService(this.piskelController);
       this.historyService.init();
 
-      this.keyboardEventService = new pskl.service.KeyboardEventService();
-      this.keyboardEventService.init();
-
       this.notificationController = new pskl.controller.NotificationController();
       this.notificationController.init();
 
@@ -57,11 +64,10 @@
       this.imageUploadService = new pskl.service.ImageUploadService();
       this.imageUploadService.init();
 
-      this.toolController = new pskl.controller.ToolController();
-      this.toolController.init();
 
-      this.paletteController = new pskl.controller.PaletteController();
-      this.paletteController.init();
+      this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
+      this.cheatsheetService.init();
+
 
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);

js/controller/DrawingController.js

@@ -1,11 +1,13 @@
 (function () {
   var ns = $.namespace("pskl.controller");
-  ns.DrawingController = function (piskelController, container) {
+  ns.DrawingController = function (piskelController, paletteController,container) {
     /**
      * @public
      */
     this.piskelController = piskelController;
 
+    this.paletteController = paletteController;
+
     /**
      * @public
      */
@@ -41,34 +43,16 @@
     this.isRightClicked = false;
     this.previousMousemoveTime = 0;
     this.currentToolBehavior = null;
-    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
   };
 
   ns.DrawingController.prototype.init = function () {
     this.initMouseBehavior();
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
-      console.log("Tool selected: ", toolBehavior);
       this.currentToolBehavior = toolBehavior;
       this.overlayFrame.clear();
     }, this));
     
-    /**
-     * TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
-     *     Find a better place to store that. Perhaps PaletteController?
-     */
-    $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-      console.log("Primary color selected: ", color);
-      this.primaryColor = color;
-      $.publish(Events.PRIMARY_COLOR_UPDATED, [color]);
-    }, this));
-    $.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) {
-      console.log("Secondary color selected: ", color);
-      this.secondaryColor = color;
-      $.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
-    }, this));
-
     $(window).resize($.proxy(this.startResizeTimer_, this));
 
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@@ -127,7 +111,6 @@
 
     if(event.button == 2) { // right click
       this.isRightClicked = true;
-      $.publish(Events.CANVAS_RIGHT_CLICKED);
     }
 
     var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
@@ -249,9 +232,9 @@
    */
   ns.DrawingController.prototype.getCurrentColor_ = function () {
     if(this.isRightClicked) {
-      return this.secondaryColor;
+      return this.paletteController.getSecondaryColor();
     } else {
-      return this.primaryColor;
+      return this.paletteController.getPrimaryColor();
     }
   };
 

js/controller/PaletteController.js

@@ -1,7 +1,10 @@
 (function () {
   var ns = $.namespace("pskl.controller");
 
-  ns.PaletteController = function () {};
+  ns.PaletteController = function () {
+    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
+    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
+  };
 
   /**
    * @public
@@ -10,22 +13,20 @@
     var transparentColorPalette = $(".palette-color[data-color=TRANSPARENT]");
     transparentColorPalette.mouseup($.proxy(this.onPaletteColorClick_, this));
 
-    $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
-      this.updateColorPicker_(color, $('#color-picker'));
-    }, this));
+    $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true}));
+    $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false}));
 
-    $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
-      this.updateColorPicker_(color, $('#secondary-color-picker'));
-    }, this));
+    pskl.app.shortcutService.addShortcut('X', this.swapColors.bind(this));
+    pskl.app.shortcutService.addShortcut('D', this.resetColors.bind(this));
 
     // Initialize colorpickers:
     var colorPicker = $('#color-picker');
-    colorPicker.val(Constants.DEFAULT_PEN_COLOR);
+    colorPicker.val(this.primaryColor);
     colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
 
 
     var secondaryColorPicker = $('#secondary-color-picker');
-    secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
+    secondaryColorPicker.val(this.secondaryColor);
     secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
 
     window.jscolor.install();
@@ -37,12 +38,53 @@
   ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
     var inputPicker = $(evt.target);
     if(evt.data.isPrimary) {
-      $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
+      this.setPrimaryColor(inputPicker.val());
     } else {
-      $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
+      this.setSecondaryColor(inputPicker.val());
     }
   };
 
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
+    var inputPicker = $(evt.target);
+    if(args.isPrimary) {
+      this.setPrimaryColor(color);
+    } else {
+      this.setSecondaryColor(color);
+    }
+  };
+
+  ns.PaletteController.prototype.setPrimaryColor = function (color) {
+    this.primaryColor = color;
+    this.updateColorPicker_(color, $('#color-picker'));
+  };
+
+  ns.PaletteController.prototype.setSecondaryColor = function (color) {
+    this.secondaryColor = color;
+    this.updateColorPicker_(color, $('#secondary-color-picker'));
+  };
+
+  ns.PaletteController.prototype.getPrimaryColor = function () {
+    return this.primaryColor;
+  };
+
+  ns.PaletteController.prototype.getSecondaryColor = function () {
+    return this.secondaryColor;
+  };
+
+  ns.PaletteController.prototype.swapColors = function () {
+    var primaryColor = this.getPrimaryColor();
+    this.setPrimaryColor(this.getSecondaryColor());
+    this.setSecondaryColor(primaryColor);
+  };
+
+  ns.PaletteController.prototype.resetColors = function () {
+    this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
+    this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
+  };
+
   /**
    * @private
    */

js/controller/PiskelController.js

@@ -15,6 +15,13 @@
     this.currentFrameIndex = 0;
 
     this.layerIdCounter = 1;
+  };
+
+  ns.PiskelController.prototype.init = function () {
+    pskl.app.shortcutService.addShortcut('up', this.selectPreviousFrame.bind(this));
+    pskl.app.shortcutService.addShortcut('down', this.selectNextFrame.bind(this));
+    pskl.app.shortcutService.addShortcut('n', this.addFrameAtCurrentIndex.bind(this));
+    pskl.app.shortcutService.addShortcut('shift+n', this.duplicateCurrentFrame.bind(this));
 
     $.publish(Events.PISKEL_RESET);
     $.publish(Events.FRAME_SIZE_CHANGED);
@@ -63,15 +70,21 @@
     return !!this.getCurrentLayer().getFrameAt(index);
   };
 
-  // backward from framesheet
-  ns.PiskelController.prototype.getFrameByIndex =
-    ns.PiskelController.prototype.getMergedFrameAt;
+  ns.PiskelController.prototype.addFrame = function () {
+    this.addFrameAt(this.getFrameCount());
+  };
 
-  ns.PiskelController.prototype.addEmptyFrame = function () {
+  ns.PiskelController.prototype.addFrameAtCurrentIndex = function () {
+    this.addFrameAt(this.currentFrameIndex + 1);
+  };
+
+  ns.PiskelController.prototype.addFrameAt = function (index) {
     var layers = this.getLayers();
     layers.forEach(function (l) {
-      l.addFrame(this.createEmptyFrame_());
+      l.addFrameAt(this.createEmptyFrame_(), index);
     }.bind(this));
+
+    $.publish(Events.PISKEL_RESET);
   };
 
   ns.PiskelController.prototype.createEmptyFrame_ = function () {
@@ -92,11 +105,17 @@
     $.publish(Events.PISKEL_RESET);
   };
 
+  ns.PiskelController.prototype.duplicateCurrentFrame = function () {
+    this.duplicateFrameAt(this.currentFrameIndex);
+  };
+
   ns.PiskelController.prototype.duplicateFrameAt = function (index) {
     var layers = this.getLayers();
     layers.forEach(function (l) {
       l.duplicateFrameAt(index);
     });
+
+    $.publish(Events.PISKEL_RESET);
   };
 
   ns.PiskelController.prototype.moveFrame = function (fromIndex, toIndex) {
@@ -116,6 +135,20 @@
     $.publish(Events.PISKEL_RESET);
   };
 
+  ns.PiskelController.prototype.selectNextFrame = function () {
+    var nextIndex = this.currentFrameIndex + 1;
+    if (nextIndex < this.getFrameCount()) {
+      this.setCurrentFrameIndex(nextIndex);
+    }
+  };
+
+  ns.PiskelController.prototype.selectPreviousFrame = function () {
+    var nextIndex = this.currentFrameIndex - 1;
+    if (nextIndex >= 0) {
+      this.setCurrentFrameIndex(nextIndex);
+    }
+  };
+
   ns.PiskelController.prototype.setCurrentLayerIndex = function (index) {
     this.currentLayerIndex = index;
     $.publish(Events.PISKEL_RESET);

js/controller/PreviewFilmController.js

@@ -19,7 +19,7 @@
   };
 
   ns.PreviewFilmController.prototype.addFrame = function () {
-    this.piskelController.addEmptyFrame();
+    this.piskelController.addFrame();
     this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
     this.updateScrollerOverflows();
   };

js/controller/ToolController.js

@@ -3,34 +3,38 @@
 
 
   ns.ToolController = function () {
-  
-    this.toolInstances = {
-      "simplePen" : new pskl.drawingtools.SimplePen(),
-      "verticalMirrorPen" : new pskl.drawingtools.VerticalMirrorPen(),
-      "eraser" : new pskl.drawingtools.Eraser(),
-      "paintBucket" : new pskl.drawingtools.PaintBucket(),
-      "stroke" : new pskl.drawingtools.Stroke(),
-      "rectangle" : new pskl.drawingtools.Rectangle(),
-      "circle" : new pskl.drawingtools.Circle(),
-      "move" : new pskl.drawingtools.Move(),
-      "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
-      "shapeSelect" : new pskl.drawingtools.ShapeSelect(),
-      "colorPicker" : new pskl.drawingtools.ColorPicker()
+    var toDescriptor = function (id, shortcut, instance) {
+      return {id:id, shortcut:shortcut, instance:instance};
     };
 
-    this.currentSelectedTool = this.toolInstances.simplePen;
-    this.previousSelectedTool = this.toolInstances.simplePen;
+    this.tools = [
+      toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
+      toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
+      toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
+      toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
+      toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
+      toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),
+      toDescriptor('circle', 'C', new pskl.drawingtools.Circle()),
+      toDescriptor('move', 'M', new pskl.drawingtools.Move()),
+      toDescriptor('rectangleSelect', 'S', new pskl.drawingtools.RectangleSelect()),
+      toDescriptor('shapeSelect', 'Z', new pskl.drawingtools.ShapeSelect()),
+      toDescriptor('colorPicker', 'O', new pskl.drawingtools.ColorPicker())
+    ];
+
+    this.currentSelectedTool = this.tools[0];
+    this.previousSelectedTool = this.tools[0];
   };
 
   /**
    * @public
    */
   ns.ToolController.prototype.init = function() {
-    this.createToolMarkup_();
+    this.createToolsDom_();
+    this.addKeyboardShortcuts_();
 
     // Initialize tool:
     // Set SimplePen as default selected tool:
-    this.selectTool_(this.toolInstances.simplePen);
+    this.selectTool_(this.tools[0]);
     // Activate listener on tool panel:
     $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
   };
@@ -44,18 +48,24 @@
     if(previousSelectedToolClass) {
       stage.removeClass(previousSelectedToolClass);
     }
-    stage.addClass(tool.toolId);
-    stage.data("selected-tool-class", tool.toolId);
+    stage.addClass(tool.instance.toolId);
+    stage.data("selected-tool-class", tool.instance.toolId);
   };
 
   /**
    * @private
    */
   ns.ToolController.prototype.selectTool_ = function(tool) {
-    console.log("Selecting Tool:" , this.currentSelectedTool);
     this.currentSelectedTool = tool;
     this.activateToolOnStage_(this.currentSelectedTool);
-    $.publish(Events.TOOL_SELECTED, [tool]);
+
+    var selectedToolElement = $('#tool-section .tool-icon.selected');
+    var toolElement = $('[data-tool-id=' + tool.instance.toolId + ']');
+
+    selectedToolElement.removeClass('selected');
+    toolElement.addClass('selected');
+
+    $.publish(Events.TOOL_SELECTED, [tool.instance]);
   };
 
   /**
@@ -70,18 +80,24 @@
       var tool = this.getToolById_(toolId);
       if (tool) {
         this.selectTool_(tool);
+      }
+    }
+  };
 
-        // Show tool as selected:
-        $('#tool-section .tool-icon.selected').removeClass('selected');
-        clickedTool.addClass('selected');
+  ns.ToolController.prototype.onKeyboardShortcut_ = function(charkey) {
+    for (var i = 0 ; i < this.tools.length ; i++) {
+      var tool = this.tools[i];
+      if (tool.shortcut.toLowerCase() === charkey.toLowerCase()) {
+        this.selectTool_(tool);
       }
     }
   };
 
   ns.ToolController.prototype.getToolById_ = function (toolId) {
-    for(var key in this.toolInstances) {
-      if (this.toolInstances[key].toolId == toolId) {
-        return this.toolInstances[key];
+    for(var i = 0 ; i < this.tools.length ; i++) {
+      var tool = this.tools[i];
+      if (tool.instance.toolId == toolId) {
+        return tool;
       }
     }
     return null;
@@ -90,18 +106,32 @@
   /**
    * @private
    */
-  ns.ToolController.prototype.createToolMarkup_ = function() {
-    var currentTool, toolMarkup = '', extraClass;
-    // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
-    for (var toolKey in this.toolInstances) {
-      currentTool = this.toolInstances[toolKey];
-      extraClass = currentTool.toolId;
-      if (this.currentSelectedTool == currentTool) {
-        extraClass = extraClass + " selected";
-      }
-      toolMarkup += '<li rel="tooltip" data-placement="right" class="tool-icon ' + extraClass + '" data-tool-id="' + currentTool.toolId +
-              '" title="' + currentTool.helpText + '"></li>';
+  ns.ToolController.prototype.createToolsDom_ = function() {
+    var toolMarkup = '';
+    for(var i = 0 ; i < this.tools.length ; i++) {
+      toolMarkup += this.getToolMarkup_(this.tools[i]);
     }
     $('#tools-container').html(toolMarkup);
   };
+
+  /**
+   * @private
+   */
+  ns.ToolController.prototype.getToolMarkup_ = function(tool) {
+    var instance = tool.instance;
+
+    var classList = ['tool-icon', instance.toolId];
+    if (this.currentSelectedTool == tool) {
+      classList.push('selected');
+    }
+
+    return '<li rel="tooltip" data-placement="right" class="' + classList.join(' ') + '" data-tool-id="' + instance.toolId +
+              '" title="' + instance.helpText + '"></li>';
+  };
+
+  ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
+    for(var i = 0 ; i < this.tools.length ; i++) {
+      pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
+    }
+  };
 })();

js/drawingtools/ColorPicker.js

@@ -20,9 +20,9 @@
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
       if (context.button == Constants.LEFT_BUTTON) {
-        $.publish(Events.PRIMARY_COLOR_SELECTED, [sampledColor]);
+        $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]);
       } else if (context.button == Constants.RIGHT_BUTTON) {
-        $.publish(Events.SECONDARY_COLOR_SELECTED, [sampledColor]);
+        $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]);
       }
     }
   };

js/selection/SelectionManager.js

@@ -13,9 +13,9 @@
     $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
 
-    $.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
-    $.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
-    $.subscribe(Events.CUT, $.proxy(this.onCut_, this));
+    pskl.app.shortcutService.addShortcut('ctrl+V', this.paste.bind(this));
+    pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
+    pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
@@ -46,10 +46,7 @@
     this.cleanSelection_();
   };
 
-  /**
-   * @private
-   */
-  ns.SelectionManager.prototype.onCut_ = function(evt) {
+  ns.SelectionManager.prototype.cut = function() {
     if(this.currentSelection) {
       // Put cut target into the selection:
       this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
@@ -59,9 +56,8 @@
       for(var i=0, l=pixels.length; i<l; i++) {
         try {
           currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
-        }
-        catch(e) {
-          // Catchng out of frame's bound pixels without testing
+        } catch(e) {
+          // Catching out of frame's bound pixels without testing
         }
       }
     }
@@ -70,7 +66,7 @@
     }
   };
 
-  ns.SelectionManager.prototype.onPaste_ = function(evt) {
+  ns.SelectionManager.prototype.paste = function() {
     if(this.currentSelection && this.currentSelection.hasPastedContent) {
       var pixels = this.currentSelection.pixels;
       var currentFrame = this.piskelController.getCurrentFrame();
@@ -79,22 +75,17 @@
           currentFrame.setPixel(
             pixels[i].col, pixels[i].row,
             pixels[i].copiedColor);
-        }
-        catch(e) {
-          // Catchng out of frame's bound pixels without testing
+        } catch(e) {
+          // Catching out of frame's bound pixels without testing
         }
       }
     }
   };
 
-  /**
-   * @private
-   */
-  ns.SelectionManager.prototype.onCopy_ = function(evt) {
+  ns.SelectionManager.prototype.copy = function() {
     if(this.currentSelection && this.piskelController.getCurrentFrame()) {
       this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
-    }
-    else {
+    } else {
       throw "Bad state for CUT callback in SelectionManager";
     }
   };

js/service/HistoryService.js

@@ -7,8 +7,9 @@
   ns.HistoryService.prototype.init = function () {
 
     $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
-    $.subscribe(Events.UNDO, this.undo.bind(this));
-    $.subscribe(Events.REDO, this.redo.bind(this));
+
+    pskl.app.shortcutService.addShortcut('ctrl+Z', this.undo.bind(this));
+    pskl.app.shortcutService.addShortcut('ctrl+Y', this.redo.bind(this));
   };
 
   ns.HistoryService.prototype.saveState = function () {

js/service/KeyboardEventService.js

@@ -1,64 +0,0 @@
-(function () {
-  var ns = $.namespace("pskl.service");
-
-  ns.KeyboardEventService = function () {};
-
-  /**
-   * @private
-   */
-  ns.KeyboardEventService.prototype.KeyboardActions_ = {
-
-    "ctrl" : {
-      "z" : Events.UNDO,
-      "y" : Events.REDO,
-      "x" : Events.CUT,
-      "c" : Events.COPY,
-      "v" : Events.PASTE
-    }
-  };
-
-  /**
-   * @private
-   */
-  ns.KeyboardEventService.prototype.CharCodeToKeyCodeMap_ = {
-
-    90 : "z",
-    89 : "y",
-    88 : "x",
-    67 : "c",
-    86 : "v"
-  };
-
-  /**
-   * @private
-   */
-  ns.KeyboardEventService.prototype.onKeyUp_ = function(evt) {
-    var isMac = false;
-    if (navigator.appVersion.indexOf("Mac")!=-1) {
-      // Welcome in mac world where vowels are consons and meta used instead of ctrl:
-      isMac = true;
-    }
-    
-    if (isMac ? evt.metaKey : evt.ctrlKey) {
-      // Get key pressed:
-      var letter = this.CharCodeToKeyCodeMap_[evt.which];
-      if(letter) {
-        var eventToTrigger = this.KeyboardActions_.ctrl[letter];
-        if(eventToTrigger) {
-          $.publish(eventToTrigger);
-
-          evt.preventDefault();
-          return false;
-        }
-      }
-    }
-  };
-
-  /**
-   * @public
-   */
-  ns.KeyboardEventService.prototype.init = function() {
-    $(document.body).keydown($.proxy(this.onKeyUp_, this));
-  };
-  
-})();

js/service/keyboard/CheatsheetService.js

@@ -0,0 +1,104 @@
+(function () {
+  var ns = $.namespace('pskl.service.keyboard');
+
+  ns.CheatsheetService = function () {
+    this.isDisplayed_ = false;
+  };
+
+  ns.CheatsheetService.prototype.init = function () {
+    this.cheatsheetEl_ = document.getElementById('cheatsheet-wrapper');
+    if (!this.cheatsheetEl_) {
+      throw 'cheatsheetEl_ DOM element could not be retrieved';
+    }
+    this.initMarkup_();
+    pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
+    pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
+    $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
+    $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
+  };
+
+  ns.CheatsheetService.prototype.toggleCheatsheet_ = function () {
+    if (this.isDisplayed_) {
+      this.hideCheatsheet_();
+    } else {
+      this.showCheatsheet_();
+    }
+  };
+
+  ns.CheatsheetService.prototype.onEscape_ = function () {
+    if (this.isDisplayed_) {
+      this.hideCheatsheet_();
+    }
+  };
+
+  ns.CheatsheetService.prototype.showCheatsheet_ = function () {
+    pskl.app.shortcutService.addShortcut('ESC', this.hideCheatsheet_.bind(this));
+    this.cheatsheetEl_.style.display = 'block';
+    this.isDisplayed_ = true;
+  };
+
+
+  ns.CheatsheetService.prototype.hideCheatsheet_ = function () {
+    pskl.app.shortcutService.removeShortcut('ESC');
+    this.cheatsheetEl_.style.display = 'none';
+    this.isDisplayed_ = false;
+  };
+
+  ns.CheatsheetService.prototype.initMarkup_ = function () {
+    this.initMarkupForTools_();
+    this.initMarkupForMisc_();
+  };
+
+  ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
+    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+
+    var toolShortcutsContainer = $('.cheatsheet-tool-shortcuts', this.cheatsheetEl_).get(0);
+    var tools = pskl.app.toolController.tools;
+    for (var i = 0 ; i < tools.length ; i++) {
+      var tool = tools[i];
+      var shortcutEl = pskl.utils.Template.createFromHTML(
+        pskl.utils.Template.replace(shortcutTemplate, {
+          shortcutIcon : 'tool-icon ' + tool.instance.toolId,
+          shortcutDescription : tool.instance.helpText,
+          shortcutKey : tool.shortcut
+        })
+      );
+      toolShortcutsContainer.appendChild(shortcutEl);
+    }
+  };
+
+  ns.CheatsheetService.prototype.initMarkupForMisc_ = function () {
+    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+
+    var miscShortcutsContainer = $('.cheatsheet-misc-shortcuts', this.cheatsheetEl_).get(0);
+    var toDescriptor = function (shortcut, description) {
+      return {shortcut:shortcut, description:description};
+    };
+    var miscKeys = [
+      toDescriptor('X', 'Swap primary/secondary colors'),
+      toDescriptor('D', 'Reset default colors'),
+      toDescriptor('ctrl + X', 'Cut selection'),
+      toDescriptor('ctrl + C', 'Copy selection'),
+      toDescriptor('ctrl + V', 'Paste selection'),
+      toDescriptor('ctrl + Z', 'Undo'),
+      toDescriptor('ctrl + Y', 'Redo'),
+      toDescriptor('&#65514;', 'Select previous frame'), /* ASCII for up-arrow */
+      toDescriptor('&#65516;', 'Select next frame'), /* ASCII for down-arrow */
+      toDescriptor('N', 'Create new frame'),
+      toDescriptor('shift + N', 'Duplicate selected frame'),
+      toDescriptor('shift + ?', 'Open/Close this popup')
+    ];
+    for (var i = 0 ; i < miscKeys.length ; i++) {
+      var key = miscKeys[i];
+      var shortcutEl = pskl.utils.Template.createFromHTML(
+        pskl.utils.Template.replace(shortcutTemplate, {
+          shortcutIcon : '',
+          shortcutDescription : key.description,
+          shortcutKey : key.shortcut
+        })
+      );
+      miscShortcutsContainer.appendChild(shortcutEl);
+    }
+  };
+
+})();

js/service/keyboard/KeycodeTranslator.js

@@ -0,0 +1,24 @@
+(function () {
+  var specialKeys = {
+    191 : "?",
+    27 : "esc",
+    38 : "up",
+    40 : "down"
+  };
+
+  var ns = $.namespace('pskl.service.keyboard');
+
+  ns.KeycodeTranslator= {
+    toChar : function (keycode) {
+      if (keycode >= 48 && keycode <= 57) {
+        // key is 0-9
+        return (keycode - 48) + "";
+      } else if (keycode >= 65 && keycode <= 90) {
+        // key is a-z, use base 36 to get the string representation
+        return (keycode - 65 + 10).toString(36);
+      } else {
+        return specialKeys[keycode];
+      }
+    }
+  };
+})();

js/service/keyboard/ShortcutService.js

@@ -0,0 +1,90 @@
+(function () {
+  var ns = $.namespace('pskl.service.keyboard');
+
+  ns.ShortcutService = function () {
+    this.shortcuts_ = {};
+  };
+
+  /**
+   * @public
+   */
+  ns.ShortcutService.prototype.init = function() {
+    $(document.body).keydown($.proxy(this.onKeyUp_, this));
+  };
+
+  ns.ShortcutService.prototype.addShortcut = function (rawKey, callback) {
+    var parsedKey = this.parseKey_(rawKey.toLowerCase());
+
+    var key = parsedKey.key,
+      meta = parsedKey.meta;
+
+    this.shortcuts_[key] = this.shortcuts_[key] || {};
+
+    if (this.shortcuts_[key][meta]) {
+      throw 'Shortcut ' + meta + ' + ' + key + ' already registered';
+    } else {
+      this.shortcuts_[key][meta] = callback;
+    }
+  };
+
+  ns.ShortcutService.prototype.removeShortcut = function (rawKey) {
+    var parsedKey = this.parseKey_(rawKey.toLowerCase());
+
+    var key = parsedKey.key,
+      meta = parsedKey.meta;
+
+    this.shortcuts_[key] = this.shortcuts_[key] || {};
+
+    this.shortcuts_[key][meta] = null;
+  };
+
+  ns.ShortcutService.prototype.parseKey_ = function (key) {
+    var meta = 'normal';
+    if (key.indexOf('ctrl+') === 0) {
+      meta = 'ctrl';
+      key = key.replace('ctrl+', '');
+    } else if (key.indexOf('shift+') === 0) {
+      meta = 'shift';
+      key = key.replace('shift+', '');
+    }
+    return {meta : meta, key : key};
+  };
+
+  /**
+   * @private
+   */
+  ns.ShortcutService.prototype.onKeyUp_ = function(evt) {
+    // jquery names FTW ...
+    var keycode = evt.which;
+    var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
+
+    var keyShortcuts = this.shortcuts_[charkey];
+    if(keyShortcuts) {
+      var cb;
+      if (this.isCtrlKeyPressed_(evt)) {
+        cb = keyShortcuts.ctrl;
+      } else if (this.isShiftKeyPressed_(evt)) {
+        cb = keyShortcuts.shift;
+      } else {
+        cb = keyShortcuts.normal;
+      }
+
+      if(cb) {
+        cb(charkey);
+        evt.preventDefault();
+      }
+    }
+  };
+
+  ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
+    return this.isMac_() ? evt.metaKey : evt.ctrlKey;
+  };
+
+  ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
+    return evt.shiftKey;
+  };
+
+  ns.ShortcutService.prototype.isMac_ = function () {
+    return navigator.appVersion.indexOf("Mac") != -1;
+  };
+})();

piskel-script-list.js

@@ -74,7 +74,9 @@ exports.scripts = [
   // Services
   "js/service/LocalStorageService.js",
   "js/service/HistoryService.js",
-  "js/service/KeyboardEventService.js",
+  "js/service/keyboard/ShortcutService.js",
+  "js/service/keyboard/KeycodeTranslator.js",
+  "js/service/keyboard/CheatsheetService.js",
   "js/service/ImageUploadService.js",
 
   // Tools

templates/cheatsheet.html

@@ -0,0 +1,19 @@
+<div id="cheatsheet-wrapper" style="display:none">
+  <div class="cheatsheet-container">
+    <div class="cheatsheet-section">
+      <h3>Tool shortcuts</h3>
+      <ul class="cheatsheet-tool-shortcuts"></ul>
+    </div>
+    <div class="cheatsheet-section">
+      <h3>Misc shortcuts</h3>
+      <ul class="cheatsheet-misc-shortcuts"></ul>
+    </div>
+  </div>
+</div>
+<script type="text/template" id="cheatsheet-shortcut-template">
+  <li class="cheatsheet-shortcut">
+    <div class="cheatsheet-icon {{shortcutIcon}}"></div>
+    <span class="cheatsheet-key">{{shortcutKey}}</span>
+    <span class="cheatsheet-description">{{shortcutDescription}}</span>
+  </li>
+</script>