Enhancement : Selection tools various enhancements

- can use BACKSPACE key to delete selection content
  when no selection, backspace retains the default behavior
- cursor for rectangle selection has been changed to crosshair
- fixed a bug where selection seemed to be cropped when released out of
  the visible canvas

src/css/tools.css

@@ -130,7 +130,7 @@
 }
 
 .tool-rectangle-select .drawing-canvas-container:hover {
-  cursor: url(../img/icons/select.png) 15 15, pointer;
+  cursor: crosshair;
 }
 
 .tool-shape-select .drawing-canvas-container:hover {

src/js/drawingtools/Eraser.js

@@ -8,6 +8,7 @@
   var ns = $.namespace("pskl.drawingtools");
 
   ns.Eraser = function() {
+    this.superclass.constructor.call(this);
     this.toolId = "tool-eraser";
     this.helpText = "Eraser tool";
   };

src/js/drawingtools/selectiontools/BaseSelect.js

@@ -13,6 +13,8 @@
     // Select's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
+
+    this.selection = null;
   };
 
   pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
@@ -50,8 +52,7 @@
   ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
     if(this.mode == "select") {
       this.onSelect_(col, row, color, frame, overlay);
-    }
+    } else if(this.mode == "moveSelection") {
-    else if(this.mode == "moveSelection") {
       this.onSelectionDrag_(col, row, color, frame, overlay);
     }
   };
@@ -95,31 +96,13 @@
    * For each pixel in the selection draw it in white transparent on the tool overlay
    * @protected
    */
-  ns.BaseSelect.prototype.drawSelectionOnOverlay_ = function (selection, overlay) {
+  ns.BaseSelect.prototype.drawSelectionOnOverlay_ = function (overlay) {
-    var pixels = selection.pixels;
+    var pixels = this.selection.pixels;
     for(var i=0, l=pixels.length; i<l; i++) {
       overlay.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
     }
   };
 
-  /**
-   * Move the overlay frame filled with semi-transparent pixels that represent the selection.
-   * @private
-   */
-  ns.BaseSelect.prototype.shiftOverlayFrame_ = function (colDiff, rowDiff, overlayFrame, reference) {
-    var color;
-    for (var col = 0 ; col < overlayFrame.getWidth() ; col++) {
-      for (var row = 0 ; row < overlayFrame.getHeight() ; row++) {
-        if (reference.containsPixel(col - colDiff, row - rowDiff)) {
-          color = reference.getPixel(col - colDiff, row - rowDiff);
-        } else {
-          color = Constants.TRANSPARENT_COLOR;
-        }
-        overlayFrame.setPixel(col, row, color);
-      }
-    }
-  };
-
 
   // The list of callbacks to implement by specialized tools to implement the selection creation behavior.
   /** @protected */
@@ -133,9 +116,6 @@
   // 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) {
-    // Since we will move the overlayFrame in which  the current selection is rendered,
-    // we clone it to have a reference for the later shifting process.
-    this.overlayFrameReference = overlay.clone();
   };
 
   /** @private */
@@ -145,11 +125,10 @@
 
     var colDiff = col - this.startCol, rowDiff = row - this.startRow;
 
-    // Shifting selection on overlay frame:
+    this.selection.move(deltaCol, deltaRow);
-    this.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
 
-    // Update selection model:
+    overlay.clear();
-    $.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
+    this.drawSelectionOnOverlay_(overlay);
 
     this.lastCol = col;
     this.lastRow = row;

src/js/drawingtools/selectiontools/RectangleSelect.js

@@ -11,6 +11,7 @@
     this.helpText = "Rectangle selection tool";
 
     ns.BaseSelect.call(this);
+    this.hasSelection = false;
   };
 
   pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
@@ -20,9 +21,16 @@
    * @override
    */
   ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
-    $.publish(Events.DRAG_START, [col, row]);
+    if (this.hasSelection) {
-    // Drawing the first point of the rectangle in the fake overlay canvas:
+      this.hasSelection = false;
-    overlay.setPixel(col, row, color);
+      overlay.clear();
+      $.publish(Events.SELECTION_DISMISSED);
+    } else {
+      this.hasSelection = true;
+      $.publish(Events.DRAG_START, [col, row]);
+      // Drawing the first point of the rectangle in the fake overlay canvas:
+      overlay.setPixel(col, row, color);
+    }
   };
 
   /**
@@ -32,23 +40,20 @@
    * @override
    */
   ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {
-    overlay.clear();
+    if (this.hasSelection) {
-    if(this.startCol == col &&this.startRow == row) {
+      overlay.clear();
-      $.publish(Events.SELECTION_DISMISSED);
+      this.selection = new pskl.selection.RectangularSelection(
-    } else {
-      var selection = new pskl.selection.RectangularSelection(
         this.startCol, this.startRow, col, row);
-      $.publish(Events.SELECTION_CREATED, [selection]);
+      $.publish(Events.SELECTION_CREATED, [this.selection]);
-      this.drawSelectionOnOverlay_(selection, overlay);
+      this.drawSelectionOnOverlay_(overlay);
     }
   };
 
-  /**
-   * @override
-   */
   ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
-    this.onSelect_(col, row, color, frame, overlay);
+    if (this.hasSelection) {
-    $.publish(Events.DRAG_END, [col, row]);
+      this.onSelect_(col, row, color, frame, overlay);
+      $.publish(Events.DRAG_END, [col, row]);
+    }
   };
 
 })();

src/js/drawingtools/selectiontools/ShapeSelect.js

@@ -9,12 +9,12 @@
   ns.ShapeSelect = function() {
     this.toolId = "tool-shape-select";
     this.helpText = "Shape selection tool";
-    
+
     ns.BaseSelect.call(this);
   };
 
   pskl.utils.inherit(ns.ShapeSelect, ns.BaseSelect);
-  
+
   /**
    * For the shape select tool, you just need to click one time to create a selection.
    * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
@@ -24,13 +24,13 @@
     // Clean previous selection:
     $.publish(Events.SELECTION_DISMISSED);
     overlay.clear();
-    
+
     // From the pixel cliked, get shape using an algorithm similar to the paintbucket one:
     var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
-    var selection = new pskl.selection.ShapeSelection(pixels);
+    this.selection = new pskl.selection.ShapeSelection(pixels);
 
-    $.publish(Events.SELECTION_CREATED, [selection]);
+    $.publish(Events.SELECTION_CREATED, [this.selection]);
-    this.drawSelectionOnOverlay_(selection, overlay);
+    this.drawSelectionOnOverlay_(overlay);
   };
 
 })();

src/js/selection/SelectionManager.js

@@ -22,6 +22,7 @@
     pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
     pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
     pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
+    pskl.app.shortcutService.addShortcut('back', this.onBackPressed_.bind(this));
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
@@ -32,6 +33,7 @@
   ns.SelectionManager.prototype.cleanSelection_ = function() {
     if(this.currentSelection) {
       this.currentSelection.reset();
+      this.currentSelection = null;
     }
   };
 
@@ -52,6 +54,14 @@
     this.cleanSelection_();
   };
 
+  ns.SelectionManager.prototype.onBackPressed_ = function(evt) {
+    if (this.currentSelection) {
+      this.erase();
+    } else {
+      return true; // bubble
+    }
+  };
+
   ns.SelectionManager.prototype.erase = function () {
     var pixels = this.currentSelection.pixels;
     var currentFrame = this.piskelController.getCurrentFrame();

src/js/service/keyboard/KeycodeTranslator.js

@@ -1,6 +1,7 @@
 (function () {
   var specialKeys = {
     191 : "?",
+    8 : "back",
     27 : "esc",
     38 : "up",
     40 : "down",

src/js/service/keyboard/ShortcutService.js

@@ -12,6 +12,13 @@
     $(document.body).keydown($.proxy(this.onKeyUp_, this));
   };
 
+  /**
+   * Add a keyboard shortcut
+   * @param {String}   rawKey   (case insensitive) key can be a meta (optional) + [a-z0-9] or
+   *                            a special key (check list of supported keys in KeycodeTranslator)
+   *                            eg. 'ctrl+A', 'del'
+   * @param {Function} callback should return true to let the original event perform its default action
+   */
   ns.ShortcutService.prototype.addShortcut = function (rawKey, callback) {
     var parsedKey = this.parseKey_(rawKey.toLowerCase());
 
@@ -78,8 +85,10 @@
         }
 
         if(cb) {
-          cb(charkey);
+          var bubble = cb(charkey);
-          evt.preventDefault();
+          if (bubble !== true) {
+            evt.preventDefault();
+          }
         }
       }
     }