feature : allow to delete current selection

* Users can now use DEL to delete the current selection
* Cheatsheet has been updated accordingly
* Cheatsheet has been refactored to mutualize markup creation code

src/css/cheatsheet.css

@@ -17,7 +17,7 @@
   width: 100%;
   height:  100%;
   box-sizing: border-box;
-  padding: 20px 10%;
+  padding: 20px 3%;
   border-radius: 3px;
   background: rgba(0,0,0,0.9);
   overflow: auto;
@@ -30,7 +30,7 @@
 
 .cheatsheet-section {
   float: left;
-  width : 50%;
+  width : 33%;
 }
 
 .cheatsheet-shortcut {

src/js/selection/SelectionManager.js

@@ -16,6 +16,7 @@
     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));
+    pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
@@ -46,20 +47,23 @@
     this.cleanSelection_();
   };
 
+  ns.SelectionManager.prototype.erase = function () {
+    var pixels = this.currentSelection.pixels;
+    var currentFrame = this.piskelController.getCurrentFrame();
+    for(var i=0, l=pixels.length; i<l; i++) {
+      try {
+        currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+      } catch(e) {
+        // Catching out of frame's bound pixels without testing
+      }
+    }
+  };
+
   ns.SelectionManager.prototype.cut = function() {
     if(this.currentSelection) {
       // Put cut target into the selection:
       this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
-
-      var pixels = this.currentSelection.pixels;
-      var currentFrame = this.piskelController.getCurrentFrame();
-      for(var i=0, l=pixels.length; i<l; i++) {
-        try {
-          currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
-        } catch(e) {
-          // Catching out of frame's bound pixels without testing
-        }
-      }
+      this.erase();
     }
     else {
       throw "Bad state for CUT callback in SelectionManager";

src/js/service/keyboard/CheatsheetService.js

@@ -47,58 +47,70 @@
   ns.CheatsheetService.prototype.initMarkup_ = function () {
     this.initMarkupForTools_();
     this.initMarkupForMisc_();
+    this.initMarkupForSelection_();
+  };
+
+  ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
+    return {
+      'shortcut' : shortcut,
+      'description' : description,
+      'icon' : icon
+    };
+  };
+
+  ns.CheatsheetService.prototype.getDomFromDescriptor_ = function (descriptor) {
+    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+    var markup = pskl.utils.Template.replace(shortcutTemplate, {
+      shortcutIcon : descriptor.icon,
+      shortcutDescription : descriptor.description,
+      shortcutKey : descriptor.shortcut
+    });
+
+    return pskl.utils.Template.createFromHTML(markup);
+  };
+
+  ns.CheatsheetService.prototype.initMarkupAbstract_ = function (descriptors, containerSelector) {
+    var container = $(containerSelector, this.cheatsheetEl_).get(0);
+    for (var i = 0 ; i < descriptors.length ; i++) {
+      var descriptor = descriptors[i];
+      var shortcutEl = this.getDomFromDescriptor_(descriptor);
+      container.appendChild(shortcutEl);
+    }
   };
 
   ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
-    var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
+    var descriptors = pskl.app.toolController.tools.map(function (tool) {
+      return this.toDescriptor_(tool.shortcut, tool.instance.helpText, 'tool-icon ' + tool.instance.toolId);
+    }.bind(this));
 
-    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);
-    }
+    this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');
   };
 
   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')
+    var descriptors = [
+      this.toDescriptor_('X', 'Swap primary/secondary colors'),
+      this.toDescriptor_('D', 'Reset default colors'),
+      this.toDescriptor_('ctrl + Z', 'Undo'),
+      this.toDescriptor_('ctrl + Y', 'Redo'),
+      this.toDescriptor_('&#65514;', 'Select previous frame'), /* ASCII for up-arrow */
+      this.toDescriptor_('&#65516;', 'Select next frame'), /* ASCII for down-arrow */
+      this.toDescriptor_('N', 'Create new frame'),
+      this.toDescriptor_('shift + N', 'Duplicate selected frame'),
+      this.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);
-    }
+
+    this.initMarkupAbstract_(descriptors, '.cheatsheet-misc-shortcuts');
+  };
+
+  ns.CheatsheetService.prototype.initMarkupForSelection_ = function () {
+    var descriptors = [
+      this.toDescriptor_('ctrl + X', 'Cut selection'),
+      this.toDescriptor_('ctrl + C', 'Copy selection'),
+      this.toDescriptor_('ctrl + V', 'Paste selection'),
+      this.toDescriptor_('del', 'Delete selection')
+    ];
+
+    this.initMarkupAbstract_(descriptors, '.cheatsheet-selection-shortcuts');
   };
 
 })();

src/js/service/keyboard/KeycodeTranslator.js

@@ -3,7 +3,8 @@
     191 : "?",
     27 : "esc",
     38 : "up",
-    40 : "down"
+    40 : "down",
+    46 : "del"
   };
 
   var ns = $.namespace('pskl.service.keyboard');

src/templates/cheatsheet.html

@@ -8,6 +8,10 @@
       <h3>Misc shortcuts</h3>
       <ul class="cheatsheet-misc-shortcuts"></ul>
     </div>
+    <div class="cheatsheet-section">
+      <h3>Selection shortcuts</h3>
+      <ul class="cheatsheet-selection-shortcuts"></ul>
+    </div>
   </div>
 </div>
 <script type="text/template" id="cheatsheet-shortcut-template">