Issue #215 : Dev environment : support keyboard/undo/redo events in drawing tests

src/js/Events.js

@@ -59,9 +59,9 @@ var Events = {
 
   CURRENT_COLORS_UPDATED : 'CURRENT_COLORS_UPDATED',
 
-  MOUSE_EVENT : 'MOUSE_EVENT',
-
   // Tests
+  MOUSE_EVENT : 'MOUSE_EVENT',
+  KEYBOARD_EVENT : 'KEYBOARD_EVENT',
   TEST_RECORD_END : 'TEST_RECORD_END',
   TEST_CASE_END : 'TEST_CASE_END',
   TEST_SUITE_END : 'TEST_SUITE_END'

src/js/devtools/DrawingTestPlayer.js

@@ -59,6 +59,9 @@
     };
   };
 
+  /**
+   * Catch all mouse events to avoid perturbations during the test
+   */
   ns.DrawingTestPlayer.prototype.createMouseShim_ = function () {
     this.shim = document.createElement('DIV');
     this.shim.style.cssText = 'position:fixed;top:0;left:0;right:0;left:0;bottom:0;z-index:15000';
@@ -80,6 +83,8 @@
 
       if (recordEvent.type === 'mouse-event') {
         this.playMouseEvent_(recordEvent);
+      } else if (recordEvent.type === 'keyboard-event') {
+        this.playKeyboardEvent_(recordEvent);
       } else if (recordEvent.type === 'color-event') {
         this.playColorEvent_(recordEvent);
       } else if (recordEvent.type === 'tool-event') {
@@ -114,6 +119,16 @@
     }
   };
 
+  ns.DrawingTestPlayer.prototype.playKeyboardEvent_ = function (recordEvent) {
+    var event = recordEvent.event;
+    if (pskl.utils.UserAgent.isMac && event.ctrlKey) {
+      event.metaKey = true;
+    }
+
+    event.preventDefault = function () {};
+    pskl.app.shortcutService.onKeyUp_(event);
+  };
+
   ns.DrawingTestPlayer.prototype.playColorEvent_ = function (recordEvent) {
     if (recordEvent.isPrimary) {
       $.publish(Events.SELECT_PRIMARY_COLOR, [recordEvent.color]);

src/js/devtools/DrawingTestRecorder.js

@@ -9,6 +9,7 @@
 
   ns.DrawingTestRecorder.prototype.init = function () {
     $.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this));
+    $.subscribe(Events.KEYBOARD_EVENT, this.onKeyboardEvent_.bind(this));
     $.subscribe(Events.TOOL_SELECTED, this.onToolEvent_.bind(this));
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorEvent_.bind(this, true));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorEvent_.bind(this, false));
@@ -73,6 +74,23 @@
     }
   };
 
+  ns.DrawingTestRecorder.prototype.onKeyboardEvent_ = function (evt, keyboardEvent) {
+    if (this.isRecording) {
+      var recordEvent = {};
+      recordEvent.type = 'keyboard-event';
+      recordEvent.event = {
+        which : keyboardEvent.which,
+        shiftKey : keyboardEvent.shiftKey,
+        altKey : keyboardEvent.altKey,
+        ctrlKey : keyboardEvent.ctrlKey,
+        target : {
+          nodeName : keyboardEvent.target.nodeName
+        }
+      };
+      this.events.push(recordEvent);
+    }
+  };
+
   ns.DrawingTestRecorder.prototype.onColorEvent_ = function (isPrimary, evt, color) {
     if (this.isRecording) {
       var recordEvent = {};

src/js/devtools/TestRecordController.js

@@ -70,7 +70,7 @@
   };
 
   ns.TestRecordController.prototype.onTestRecordEnd_  = function (evt, success) {
-    window.alert('Test finished : ', success);
+    window.alert('Test finished : ' + (success ? 'success' : 'failed'));
   };
 
 })();

src/js/service/keyboard/ShortcutService.js

@@ -77,6 +77,7 @@
       return 'normal';
     }
   };
+
   /**
    * @private
    */
@@ -84,7 +85,6 @@
     if (!this.isInInput_(evt)) {
       // jquery names FTW ...
       var keycode = evt.which;
-      var targetTagName = evt.target.nodeName.toUpperCase();
       var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
 
       var keyShortcuts = this.shortcuts_[charkey];
@@ -101,6 +101,7 @@
           if (bubble !== true) {
             evt.preventDefault();
           }
+          $.publish(Events.KEYBOARD_EVENT, [evt]);
         }
       }
     }

src/js/tools/drawing/selection/BaseSelect.js

@@ -133,8 +133,7 @@
 
   // The list of callbacks that define the drag'n drop behavior of the selection.
   /** @private */
-  ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {
+  ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {};
-  };
 
   /** @private */
   ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {

src/js/tools/drawing/selection/RectangleSelect.js

@@ -13,6 +13,8 @@
 
     ns.BaseSelect.call(this);
     this.hasSelection = false;
+
+    this.selectionOrigin_ = null;
   };
 
   pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
@@ -21,18 +23,26 @@
    * @override
    */
   ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
+    this.selectionOrigin_ = {
+      col : col,
+      row : row
+    };
     if (this.hasSelection) {
       this.hasSelection = false;
       overlay.clear();
       $.publish(Events.SELECTION_DISMISSED);
     } else {
-      this.hasSelection = true;
+      this.startSelection_();
-      $.publish(Events.DRAG_START, [col, row]);
-      // Drawing the first point of the rectangle in the fake overlay canvas:
       overlay.setPixel(col, row, color);
     }
   };
 
+  ns.RectangleSelect.prototype.startSelection_ = function (col, row, color) {
+    this.hasSelection = true;
+    $.publish(Events.DRAG_START, [col, row]);
+    // Drawing the first point of the rectangle in the fake overlay canvas:
+  };
+
   /**
    * When creating the rectangle selection, we clear the current overlayFrame and
    * redraw the current rectangle based on the orgin coordinate and
@@ -40,6 +50,10 @@
    * @override
    */
   ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {
+    if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) {
+      this.startSelection_();
+    }
+
     if (this.hasSelection) {
       overlay.clear();
       this.selection = new pskl.selection.RectangularSelection(

test/drawing/DrawingTests.browser.js

@@ -8,6 +8,7 @@
   "lighten.darken.json",
   "move.json",
   "pen.secondary.color.json",
+  "selection.rectangular.json",
   "squares.circles.json",
   "stroke.json",
   "verticalpen.drawing.json"

test/drawing/DrawingTests.casper.js

@@ -6,6 +6,7 @@
   "layers.merge.json",
   "move.json",
   "pen.secondary.color.json",
+  "selection.rectangular.json",
   "squares.circles.json",
   "stroke.json",
   "verticalpen.drawing.json"