From af52d9a96ab14c796798ac5902620db626921be6 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Wed, 23 Apr 2014 23:47:23 +0200
Subject: [PATCH] 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                             |  2 +-
 src/js/drawingtools/Eraser.js                 |  1 +
 .../drawingtools/selectiontools/BaseSelect.js | 37 ++++---------------
 .../selectiontools/RectangleSelect.js         | 35 ++++++++++--------
 .../selectiontools/ShapeSelect.js             | 12 +++---
 src/js/selection/SelectionManager.js          | 10 +++++
 src/js/service/keyboard/KeycodeTranslator.js  |  1 +
 src/js/service/keyboard/ShortcutService.js    | 13 ++++++-
 8 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/src/css/tools.css b/src/css/tools.css
index 3b0dbcf2..6f38e313 100644
--- a/src/css/tools.css
+++ b/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 {
diff --git a/src/js/drawingtools/Eraser.js b/src/js/drawingtools/Eraser.js
index 57570fe9..27e169c7 100644
--- a/src/js/drawingtools/Eraser.js
+++ b/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";
   };
diff --git a/src/js/drawingtools/selectiontools/BaseSelect.js b/src/js/drawingtools/selectiontools/BaseSelect.js
index 78cae0a3..896fac11 100644
--- a/src/js/drawingtools/selectiontools/BaseSelect.js
+++ b/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) {
-    var pixels = selection.pixels;
+  ns.BaseSelect.prototype.drawSelectionOnOverlay_ = function (overlay) {
+    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.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
+    this.selection.move(deltaCol, deltaRow);
 
-    // Update selection model:
-    $.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
+    overlay.clear();
+    this.drawSelectionOnOverlay_(overlay);
 
     this.lastCol = col;
     this.lastRow = row;
diff --git a/src/js/drawingtools/selectiontools/RectangleSelect.js b/src/js/drawingtools/selectiontools/RectangleSelect.js
index 5e6282c5..4eaa6bd1 100644
--- a/src/js/drawingtools/selectiontools/RectangleSelect.js
+++ b/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]);
-    // Drawing the first point of the rectangle in the fake overlay canvas:
-    overlay.setPixel(col, row, color);
+    if (this.hasSelection) {
+      this.hasSelection = false;
+      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.startCol == col &&this.startRow == row) {
-      $.publish(Events.SELECTION_DISMISSED);
-    } else {
-      var selection = new pskl.selection.RectangularSelection(
+    if (this.hasSelection) {
+      overlay.clear();
+      this.selection = new pskl.selection.RectangularSelection(
         this.startCol, this.startRow, col, row);
-      $.publish(Events.SELECTION_CREATED, [selection]);
-      this.drawSelectionOnOverlay_(selection, overlay);
+      $.publish(Events.SELECTION_CREATED, [this.selection]);
+      this.drawSelectionOnOverlay_(overlay);
     }
   };
 
-  /**
-   * @override
-   */
   ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
-    this.onSelect_(col, row, color, frame, overlay);
-    $.publish(Events.DRAG_END, [col, row]);
+    if (this.hasSelection) {
+      this.onSelect_(col, row, color, frame, overlay);
+      $.publish(Events.DRAG_END, [col, row]);
+    }
   };
 
 })();
diff --git a/src/js/drawingtools/selectiontools/ShapeSelect.js b/src/js/drawingtools/selectiontools/ShapeSelect.js
index ffe3a628..1c7690a1 100644
--- a/src/js/drawingtools/selectiontools/ShapeSelect.js
+++ b/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]);
-    this.drawSelectionOnOverlay_(selection, overlay);
+    $.publish(Events.SELECTION_CREATED, [this.selection]);
+    this.drawSelectionOnOverlay_(overlay);
   };
 
 })();
diff --git a/src/js/selection/SelectionManager.js b/src/js/selection/SelectionManager.js
index d9337ae4..6a63c6ce 100644
--- a/src/js/selection/SelectionManager.js
+++ b/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();
diff --git a/src/js/service/keyboard/KeycodeTranslator.js b/src/js/service/keyboard/KeycodeTranslator.js
index d478dd66..00005dc7 100644
--- a/src/js/service/keyboard/KeycodeTranslator.js
+++ b/src/js/service/keyboard/KeycodeTranslator.js
@@ -1,6 +1,7 @@
 (function () {
   var specialKeys = {
     191 : "?",
+    8 : "back",
     27 : "esc",
     38 : "up",
     40 : "down",
diff --git a/src/js/service/keyboard/ShortcutService.js b/src/js/service/keyboard/ShortcutService.js
index bd2aea39..ca921e81 100644
--- a/src/js/service/keyboard/ShortcutService.js
+++ b/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);
-          evt.preventDefault();
+          var bubble = cb(charkey);
+          if (bubble !== true) {
+            evt.preventDefault();
+          }
         }
       }
     }