Added back eraser tool

css/_tools-menu.scss

@@ -77,7 +77,7 @@
 	}
 }
 
-#tools-menu li button#pencil-bigger-button,
+#tools-menu li button#brush-bigger-button,
 #tools-menu li button#zoom-in-button,
 #tools-menu li button#eraser-bigger-button,
 #tools-menu li button#rectangle-bigger-button,
@@ -86,7 +86,7 @@
 	left: 0;
 }
 
-#tools-menu li button#pencil-smaller-button,
+#tools-menu li button#brush-smaller-button,
 #tools-menu li button#zoom-out-button,
 #tools-menu li button#eraser-smaller-button,
 #tools-menu li button#rectangle-smaller-button,
@@ -95,8 +95,8 @@
 	right: 0;
 }
 
-#tools-menu li.selected button#pencil-bigger-button,
+#tools-menu li.selected button#brush-bigger-button,
-#tools-menu li.selected button#pencil-smaller-button,
+#tools-menu li.selected button#brush-smaller-button,
 #tools-menu li.selected button#zoom-in-button,
 #tools-menu li.selected button#zoom-out-button,
 #tools-menu li.selected button#eraser-bigger-button,

js/ToolManager.js

@@ -1,5 +1,7 @@
 const ToolManager = (() => {
-    brush = new BrushTool("brush", {type: 'html'});
+    brush = new BrushTool("brush", {type: 'html'}, switchTool);
+    eraser = new EraserTool("eraser", {type: 'html'}, switchTool);
+
     currTool = brush;
 
     Events.on("mouseup", window, onMouseUp);
@@ -63,6 +65,14 @@ const ToolManager = (() => {
         return currTool;
     }
 
+    function switchTool(newTool) {
+        console.log("switch");
+
+        currTool.onDeselect();
+        currTool = newTool;
+        currTool.onSelect();
+    }
+
     return {
         currentTool
     }

js/_drawLine.js

@@ -14,7 +14,7 @@ function line(x0,y0,x1,y1, brushSize) {
 			currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
 		} else if (ToolManager.currentTool().name == 'eraser') {
 			// In case I'm using the eraser I must clear the rect
-            currentLayer.context.clearRect(x0-Math.floor(tool.eraser.brushSize/2), y0-Math.floor(tool.eraser.brushSize/2), tool.eraser.brushSize, tool.eraser.brushSize);
+            currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
 		}
 
 		//if we've reached the end goal, exit the loop

js/_toolButtons.js

@@ -1,22 +1,4 @@
 // REFACTOR: add to single Tool implementations
-
-//eraser
-Events.on('click',"eraser-button", function(){
-    console.log("selecting eraser");
-    tool.eraser.switchTo();
-}, false);
-
-//eraser bigger
-Events.on('click',"eraser-bigger-button", function(){
-    tool.eraser.brushSize++;
-}, false);
-
-//eraser smaller
-Events.on('click',"eraser-smaller-button", function(e){
-    if(tool.eraser.brushSize > 1)
-    	tool.eraser.brushSize--;
-}, false);
-
 // rectangle
 Events.on('click','rectangle-button', function(e){
     // If the user clicks twice on the button, they change the draw mode

js/_tools.js

@@ -27,9 +27,14 @@ class Tool {
 	constructor (name, options) {
 		this.name = name;
 		this.cursorType = options;
+		
+		this.mainButton = document.getElementById(name + "-button");
+		this.biggerButton = document.getElementById(name + "-bigger-button");
+		this.smallerButton = document.getElementById(name + "-smaller-button");
 	}
 
 	onSelect() {
+		this.mainButton.parentElement.classList.add("selected");
 	/*
 		//copy options to this object
 		if (options.cursor) {
@@ -46,6 +51,8 @@ class Tool {
 		}*/
 	}
 
+	updateCursor() {}
+
 	onHover(cursorLocation, cursorTarget) {
 		this.prevMousePos = this.currMousePos;
 		this.currMousePos = cursorLocation;
@@ -79,7 +86,7 @@ class Tool {
 	}
 
 	onDeselect() {
-
+		this.mainButton.parentElement.classList.remove("selected");
 	}
 
 	onStart(mousePos) {
@@ -110,46 +117,6 @@ class Tool {
 	get size() {
 		return this.currSize;
 	}
-
-	//switch to this tool (replaced global changeTool())
-	switchTo () {
-		// Ending any selection in progress
-	    /*if (currentTool.name.includes("select") && !this.name.includes("select") && !selectionCanceled) {
-	    	endSelection();
-	    }*/
-
-	    var tools = document.getElementById("tools-menu").children;
-
-		for (var i = 0; i < tools.length; i++) {
-		    tools[i].classList.remove("selected");
-		}
-
-		let buttonNode = document.getElementById(this.name + "-button");
-	    //give the button of the selected tool the .selected class if the tool has a button
-	    if(buttonNode != null && buttonNode.parentNode != null) {
-			document.getElementById(this.name+"-button").parentNode.classList.add("selected");
-		}
-
-		//change cursor
-		this.updateCursor();
-	}
-
-	updateCursor () {
-		//switch to that tools cursor
-		canvasView.style.cursor = this.cursor || 'default';
-
-		//moveSelection
-		/*if (currentTool.name == 'moveselection') {
-			if (cursorInSelectedArea()) {
-				canMoveSelection = true;
-				canvasView.style.cursor = 'move';
-				brushPreview.style.display = 'none';
-			}
-			else {
-				canvasView.style.cursor = 'crosshair';
-			}
-		}*/
-	}
 }
 
 

js/tools/BrushTool.js

@@ -1,16 +1,14 @@
 class BrushTool extends Tool {
-    constructor(name, options) {
+    constructor(name, options, switchFunction) {
         super(name, options);
 
-        // Selection button, brush size buttons
+        Events.on('click', this.mainButton, switchFunction, this);
-        Events.on('click',"pencil-button", this.onSelect);
+        Events.on('click', this.biggerButton, this.increaseSize.bind(this));
-        Events.on('click',"pencil-bigger-button", this.increaseSize.bind(this));
+        Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
-        Events.on('click',"pencil-smaller-button", this.decreaseSize.bind(this));
     }
 
     onStart(mousePos) {
         super.onStart(mousePos);
-		this.startMousePos = mousePos;
 	}
 
 	onDrag(mousePos, cursorTarget) {
@@ -35,4 +33,12 @@ class BrushTool extends Tool {
         super.onEnd(mousePos);
 		this.endMousePos = mousePos;
 	}
+
+    onSelect() {
+        super.onSelect();
+    }
+
+    onDeselect() {
+        super.onDeselect();
+    }
 }

js/tools/EraserTool.js

@@ -0,0 +1,44 @@
+class EraserTool extends Tool {
+    constructor(name, options, switchFunction) {
+        super(name, options);
+
+        Events.on('click', this.mainButton, switchFunction, this);
+        Events.on('click', this.biggerButton, this.increaseSize.bind(this));
+        Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+    }
+
+    onStart(mousePos) {
+        super.onStart(mousePos);
+	}
+
+	onDrag(mousePos, cursorTarget) {
+        super.onDrag(mousePos);
+
+        if (cursorTarget === undefined)
+            return;
+        //draw line to current pixel
+        if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
+            line(Math.floor(this.prevMousePos[0]/zoom),
+                Math.floor(this.prevMousePos[1]/zoom),
+                Math.floor(this.currMousePos[0]/zoom),
+                Math.floor(this.currMousePos[1]/zoom), 
+                this.currSize
+            );
+        }
+
+        currentLayer.updateLayerPreview();
+	}
+
+	onEnd(mousePos) {
+        super.onEnd(mousePos);
+		this.endMousePos = mousePos;
+	}
+
+    onSelect() {
+        super.onSelect();
+    }
+
+    onDeselect() {
+        super.onDeselect();
+    }
+}

js/tools/_all.js

@@ -1,11 +1,3 @@
-new Tool('eraser', {
-	cursor: 'none',
-	brushPreview: true,
-});
-new Tool('resizeeraser', {
-	cursor: 'default',
-});
-
 new Tool('eyedropper', {
 	imageCursor: 'eyedropper',
 });
@@ -29,13 +21,6 @@ new Tool('pan', {
 	},
 });
 
-new Tool('pencil', {
-	cursor: 'none',
-	brushPreview: true,
-});
-new Tool('resizebrush', {
-	cursor: 'default',
-});
 
 new Tool('rectangle', {
 	cursor: 'none',
@@ -61,9 +46,4 @@ new Tool('moveselection', {
 
 new Tool('zoom', {
 	imageCursor: 'zoom-in',
-});
+});
-
-//set a default tool
-// REFACTOR: move to FileManager
-var currentTool = tool.pencil;
-var currentToolTemp = tool.pencil;

views/tools-menu.hbs

@@ -1,8 +1,8 @@
 <ul id="tools-menu">
 	<li class="selected expanded">
-		<button title="Pencil Tool (B)" id="pencil-button">{{svg "pencil.svg" width="32" height="32"}}</button>
+		<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="32" height="32"}}</button>
-		<button title="Increase Brush Size" id="pencil-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+		<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-		<button title="Decrease Brush Size" id="pencil-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+		<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
 	</li>
 
 	<li class = "expanded">