Add a button to delete the selection in canvas

customize.dist/translations/messages.fr.js

@@ -146,6 +146,7 @@ define(function () {
 
     // Canvas
     out.canvas_clear = "Nettoyer";
+    out.canvas_delete = "Supprimer la sélection";
     out.canvas_disable = "Désactiver le dessin";
     out.canvas_enable = "Activer le dessin";
 

customize.dist/translations/messages.js

@@ -148,6 +148,7 @@ define(function () {
 
     // Canvas
     out.canvas_clear = "Clear";
+    out.canvas_delete = "Delete selection";
     out.canvas_disable = "Disable draw";
     out.canvas_enable = "Enable draw";
 

www/whiteboard/index.html

@@ -23,6 +23,7 @@
     <div id="controls">
         <button id="clear" data-localization="canvas_clear">Clear</button>
         <button id="toggleDraw" data-localization="canvas_disable"></button>
+        <button id="delete" style="display: none;" data-localization="canvas_delete"></button>
         <input id="width" type="range" value="5" min="1" max="100"></input><label for="width">5</label>
         <span class="selected"></span>
     </div>

www/whiteboard/main.js

@@ -47,6 +47,7 @@ define([
         var $pickers = $('#pickers');
         var $colors = $('#colors');
         var $cursors = $('#cursors');
+        var $deleteButton = $('#delete');
 
         var $toggle = $('#toggleDraw');
         var $width = $('#width');
@@ -151,23 +152,27 @@ define([
             module.draw = !module.draw;
             canvas.isDrawingMode = module.draw;
             $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
+            if (module.draw) { $deleteButton.hide(); }
+            else { $deleteButton.show(); }
         };
         $toggle.click(toggleDrawMode);
 
-        $(window).on('keyup', function (e) {
-            if (e.which === 46) {
-                if (canvas.getActiveObject()) {
-                    canvas.getActiveObject().remove();
-                }
-                if (canvas.getActiveGroup()) {
-                    canvas.getActiveGroup()._objects.forEach(function (el) {
-                        el.remove();
-                    });
-                    canvas.discardActiveGroup();
-                }
-                canvas.renderAll();
-                onLocal();
+        var deleteSelection = function () {
+            if (canvas.getActiveObject()) {
+                canvas.getActiveObject().remove();
             }
+            if (canvas.getActiveGroup()) {
+                canvas.getActiveGroup()._objects.forEach(function (el) {
+                    el.remove();
+                });
+                canvas.discardActiveGroup();
+            }
+            canvas.renderAll();
+            onLocal();
+        };
+        $deleteButton.click(deleteSelection);
+        $(window).on('keyup', function (e) {
+            if (e.which === 46) { deleteSelection (); }
         });
 
         var setEditable = function (bool) {

www/whiteboard/whiteboard.css

@@ -38,6 +38,7 @@ body {
   vertical-align: middle;
 }
 #controls #clear,
+#controls #delete,
 #controls #toggleDraw {
   display: inline;
   vertical-align: middle;

www/whiteboard/whiteboard.less

@@ -45,7 +45,7 @@ body {
     #width {
         .middle;
     }
-    #clear, #toggleDraw {
+    #clear, #delete, #toggleDraw {
         display: inline;
         vertical-align: middle;
     }