feature : add keyboard shortcuts : initial impl

+ added shortcuts for all tools in ToolController
+ modified structure of tools in Controller to Array of descriptors to
allow to declare shortcuts directly when setting up the tool controller

js/Events.js

@@ -40,9 +40,11 @@ var Events = {
   SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
   HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
 
+  // Events triggered by keyboard
   UNDO: "UNDO",
   REDO: "REDO",
   CUT: "CUT",
   COPY: "COPY",
-  PASTE: "PASTE"
+  PASTE: "PASTE",
+  SELECT_TOOL : "SELECT_TOOL"
 };

js/controller/ToolController.js

@@ -3,23 +3,26 @@
 
 
   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];
   };
 
   /**
@@ -30,9 +33,11 @@
 
     // 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));
+
+    $.subscribe(Events.SELECT_TOOL, $.proxy(this.onKeyboardShortcut_, this));
   };
 
   /**
@@ -44,18 +49,18 @@
     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);
+    console.log("Selecting Tool:" , this.currentSelectedTool.name);
     this.currentSelectedTool = tool;
     this.activateToolOnStage_(this.currentSelectedTool);
-    $.publish(Events.TOOL_SELECTED, [tool]);
+    $.publish(Events.TOOL_SELECTED, [tool.instance]);
   };
 
   /**
@@ -78,10 +83,20 @@
     }
   };
 
+  ns.ToolController.prototype.onKeyboardShortcut_ = function(evt, 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;
@@ -93,14 +108,16 @@
   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) {
+    for(var i = 0 ; i < this.tools.length ; i++) {
+      var tool = this.tools[i];
+      var instance = tool.instance;
+
+      extraClass = instance.toolId;
+      if (this.currentSelectedTool == tool) {
         extraClass = extraClass + " selected";
       }
-      toolMarkup += '<li rel="tooltip" data-placement="right" class="tool-icon ' + extraClass + '" data-tool-id="' + currentTool.toolId +
-              '" title="' + currentTool.helpText + '"></li>';
+      toolMarkup += '<li rel="tooltip" data-placement="right" class="tool-icon ' + extraClass + '" data-tool-id="' + instance.toolId +
+              '" title="' + instance.helpText + '"></li>';
     }
     $('#tools-container').html(toolMarkup);
   };

js/service/KeyboardEventService.js

@@ -11,6 +11,13 @@
         "v" : Events.PASTE
       }
     };
+
+    // See ToolController
+    // TODO : Allow for other classes to register new shortcuts
+    var toolKeys = 'pveblrcmzso'.split('');
+    toolKeys.forEach(function (key) {
+      this.keyboardActions_[key] = Events.SELECT_TOOL;
+    }.bind(this));
   };
 
 
@@ -34,13 +41,15 @@
     if(charkey) {
       if (this.isCtrlKeyPressed_(evt)) {
         eventToTrigger = this.keyboardActions_.ctrl[charkey];
-      }
+      } else {
+        eventToTrigger = this.keyboardActions_[charkey];
       }
 
       if(eventToTrigger) {
-      $.publish(eventToTrigger);
+        $.publish(eventToTrigger, charkey);
         evt.preventDefault();
       }
+    }
   };
 
   ns.KeyboardEventService.prototype.isCtrlKeyPressed_ = function (evt) {

js/service/keyboard/KeycodeTranslator.js

@@ -1,7 +1,7 @@
 (function () {
   var specialKeys = {};
 
-  var ns = $.namespace('service.keyboard');
+  var ns = $.namespace('pskl.service.keyboard');
 
   ns.KeycodeTranslator= {
     toChar : function (keycode) {