Added eraser icon, added management of eraser size, added event listener for R key (connected to the eraser tool). Started eraser cursor management in _updateCursors.js

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>

.gitignore

@@ -1,4 +1,5 @@
 _ext
 routes
 build
-node_modules
+node_modules
+.idea

css/pixel-editor.scss

@@ -414,19 +414,23 @@ svg {
 }
 
 #tools-menu li button#pencil-bigger-button,
-#tools-menu li button#zoom-in-button {
+#tools-menu li button#zoom-in-button,
+#tools-menu li button#eraser-bigger-button{
   left: 0;
 }
 
 #tools-menu li button#pencil-smaller-button,
-#tools-menu li button#zoom-out-button {
+#tools-menu li button#zoom-out-button,
+#tools-menu li button#eraser-smaller-button{
   right: 0;
 }
 
 #tools-menu li.selected button#pencil-bigger-button,
 #tools-menu li.selected button#pencil-smaller-button,
 #tools-menu li.selected button#zoom-in-button,
-#tools-menu li.selected button#zoom-out-button {
+#tools-menu li.selected button#zoom-out-button,
+#tools-menu li.selected button#eraser-bigger-button,
+#tools-menu li.selected button#eraser-smaller-button{
   display: block;
 }
 

js/_hotkeyListener.js

@@ -33,6 +33,10 @@ function KeyPress(e) {
 		case 53:
 		  changeTool('zoom');
 		  break;
+		 // eraser -6, r
+	     case 54: case 72:
+	     	changeTool('eraser');
+	     	break;
 		//Z
 		case 90:
 		  console.log('PRESSED Z ', keyboardEvent.ctrlKey)

js/_toolButtons.js

@@ -1,19 +1,36 @@
 //pencil
 on('click',"pencil-button", function(){
-	changeTool('pencil');
-}, false);		
+    changeTool('pencil');
+}, false);
 
 //pencil bigger
 on('click',"pencil-bigger-button", function(){
-	brushSize++;
-	updateCursor();
-}, false);		
+    brushSize++;
+    updateCursor();
+}, false);
 
 //pencil smaller
-on('click',"pencil-smaller-button", function(e){
-	if(brushSize > 1) brushSize--;
-	updateCursor();
-}, false);		
+on('click',"pencil-smaller-button", function(){
+    if(brushSize > 1) brushSize--;
+    updateCursor();
+}, false);
+
+//eraser
+on('click',"eraser-button", function(){
+    changeTool('eraser');
+}, false);
+
+//eraser bigger
+on('click',"eraser-bigger-button", function(){
+    eraserSize++;
+    updateCursor();
+}, false);
+
+//eraser smaller
+on('click',"eraser-smaller-button", function(e){
+    if(eraserSize > 1) eraserSize--;
+    updateCursor();
+}, false);
 
 //fill
 on('click',"fill-button", function(){

js/_updateCursor.js

@@ -6,7 +6,13 @@ function updateCursor () {
 		brushPreview.style.display = 'block';
 		brushPreview.style.width = brushSize * zoom + 'px';
 		brushPreview.style.height = brushSize * zoom + 'px';
-	} else 
+	} else if (currentTool == 'eraser') {
+		console.log("Eraser size: " + eraserSize);
+        canvasView.style.cursor = 'crosshair';
+        brushPreview.style.display = 'block';
+        brushPreview.style.width = eraserSize * zoom + 'px';
+        brushPreview.style.height = eraserSize * zoom + 'px';
+	} else
 		brushPreview.style.display = 'none';
 	
 	if (currentTool == 'eyedropper') {
@@ -28,5 +34,4 @@ function updateCursor () {
 		
 	if (currentTool == 'resize-brush') 
 		canvasView.style.cursor = 'default';
-
 }

js/_variables.js

@@ -6,7 +6,9 @@ var canvasPosition;
 var currentTool = 'pencil';
 var currentToolTemp = 'pencil';
 var brushSize = 1;
+var eraserSize = 1;
 var prevBrushSize = 1;
+var prevEraserSize = 1;
 var menuOpen = false;
 var dialogueOpen = false;
 var documentCreated = false;

package.json

@@ -16,9 +16,9 @@
     "gulp-include": "^2.3.1",
     "handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git",
     "hbs": "^4.0.3",
-    "opn": "^6.0.0",
-    "sass": "^1.17.3",
     "hbs-register-helpers": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-helpers.git",
-    "hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git"
+    "hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git",
+    "opn": "^6.0.0",
+    "sass": "^1.17.3"
   }
 }

views/pixel-editor.hbs

@@ -33,6 +33,7 @@
         <img src="/pixel-editor/pan-held.png" />
         <img src="/pixel-editor/pencil.png" />
         <img src="/pixel-editor/zoom-in.png" />
+        <img src = "/pixel-editor/eraser.png"/>
     </div>
     <ul id="main-menu">
         <li class="logo">Lospec Pixel Editor</li>
@@ -77,6 +78,11 @@
             <button title="Zoom In" id="zoom-in-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
             <button title="Zoom Out" id="zoom-out-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
         </li>
+        <li class = "expanded">
+            <button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button>
+            <button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+            <button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+        </li>
     </ul>
 
     <ul id="colors-menu">