created tool class which keeps track of cursors, incorporates changeTool; made changelog data its own file

README.md

@@ -23,12 +23,6 @@ Suggestions / Planned features:
     - Stack colors when too many
     - Fix popups
 
-- Selections 
-    - New selection tool 
-    - New currentLayer.canvas layer above the drawing layer 
-    - Move when click and drag 
-    - Merge with currentLayer.canvas when click outside 
-
 - Copy/paste
     - Add as selection
     - Show colors which would need to be added to palette
@@ -41,7 +35,6 @@ Suggestions / Planned features:
 - Possibly add collaborate function using together.js
 - Bug fix
     - Alt + scroll broken
-    - Add edge support?
 
 ## How to Contribute
 

changelog.json

@@ -0,0 +1,13 @@
+{
+	"1.2.0 - 4/14/20": [
+		{"change": "Added rectangle / selection tools", "author": "Unsettled"}
+	],
+
+	"1.1.0 - 4/4/19": [
+		{"change": "Added transparency / eraser tool", "author": "Unsettled"}
+	],
+
+	"1.0.0 - 11/17/17": [
+		{"change": "Initial release", "author": "skeddles"}
+	]
+}

css/pixel-editor.scss

@@ -35,6 +35,11 @@ svg {
   outline: 0 !important;
 }
 
+.weak {
+	font-size: 0.8em;
+	color: color(base,foreground,weak);
+}
+
 .drawingCanvas {
   cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
 

js/_changeTool.js

@@ -1,6 +1,11 @@
-function changeTool (selectedTool) {
+function changeTool (newToolName) {
+
+	console.log('changing tool to',newToolName)
+
+	var selectedTool = tool[newToolName];
+
 	// Ending any selection in progress
-    if (currentTool.includes("select") && !selectedTool.includes("select") && !selectionCanceled) {
+    if (currentTool.name.includes("select") && !selectedTool.name.includes("select") && !selectionCanceled) {
     	endSelection();
     }
     //set tool and temp tje tje tpp;
@@ -14,8 +19,8 @@ function changeTool (selectedTool) {
 	}
 
     //give the button of the selected tool the .selected class
-	document.getElementById(selectedTool+"-button").parentNode.classList.add("selected");
+	document.getElementById(selectedTool.name+"-button").parentNode.classList.add("selected");
 
 	//change cursor
-	updateCursor();
+	currentTool.updateCursor();
 }

js/_changeZoom.js

@@ -28,5 +28,5 @@ function changeZoom (layer, direction, cursorLocation) {
 	layer.resize();
 
 	// adjust brush size
-	updateCursor();
+	currentTool.updateCursor();
 }

js/_drawLine.js

@@ -10,12 +10,12 @@ function line(x0,y0,x1,y1, brushSize) {
 	while (true) {
 	    //set pixel
 		// If the current tool is the brush
-		if (currentTool == 'pencil' || currentTool == 'rectangle') {
+		if (currentTool.name == 'pencil' || currentTool.name == 'rectangle') {
 			// I fill the rect
 			currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
-		} else if (currentTool == 'eraser') {
+		} else if (currentTool.name == 'eraser') {
 			// In case I'm using the eraser I must clear the rect
-            currentLayer.context.clearRect(x0-Math.floor(eraserSize/2), y0-Math.floor(eraserSize/2), eraserSize, eraserSize);
+            currentLayer.context.clearRect(x0-Math.floor(tool.eraser.brushSize/2), y0-Math.floor(tool.eraser.brushSize/2), tool.eraser.brushSize, tool.eraser.brushSize);
 		}
 
 		//if we've reached the end goal, exit the loop
@@ -38,12 +38,12 @@ function lineOnLayer(x0,y0,x1,y1, brushSize, context) {
 	while (true) {
 	    //set pixel
 		// If the current tool is the brush
-		if (currentTool == 'pencil' || currentTool == 'rectangle') {
+		if (currentTool.name == 'pencil' || currentTool.name == 'rectangle') {
 			// I fill the rect
 			context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
-		} else if (currentTool == 'eraser') {
+		} else if (currentTool.name == 'eraser') {
 			// In case I'm using the eraser I must clear the rect
-            context.clearRect(x0-Math.floor(eraserSize/2), y0-Math.floor(eraserSize/2), eraserSize, eraserSize);
+            context.clearRect(x0-Math.floor(tool.eraser.brushSize/2), y0-Math.floor(tool.eraser.brushSize/2), tool.eraser.brushSize, tool.eraser.brushSize);
 		}
 
 		//if we've reached the end goal, exit the loop

js/_hotkeyListener.js

@@ -15,39 +15,39 @@ function KeyPress(e) {
 	if (e.key === "Escape") {
 		if (!selectionCanceled) {
 			endSelection();
-			changeTool('pencil');
+			tool.pencil.switchTo();
 		}
 	}
 	else {
 	  	switch (keyboardEvent.keyCode) {
 			//pencil tool - 1, b
 			case 49: case 66:
-				changeTool('pencil');
+				tool.pencil.switchTo();
 				break;
 			//fill tool - 2, f
 			case 50: case 70:
-				changeTool('fill');
+				tool.fill.switchTo();
 				break;
 			//eyedropper - 3, e
 			case 51: case 69:
-				changeTool('eyedropper');
+				tool.eyedropper.switchTo();
 				break;
 			//pan - 4, p,
 			case 52: case 80:
-				changeTool('pan');
+				tool.pan.switchTo();
 				break;
 			//zoom - 5
 			case 53:
-			  changeTool('zoom');
+			  tool.zoom.switchTo();
 			  break;
 			 // eraser -6, r
 		    case 54: case 82:
 		         console.log("Pressed r");
-	            changeTool('eraser');
+	            tool.eraser.switchTo()
 		     	break;
 		    // Rectangular selection
 		    case 77: case 109:
-				changeTool('rectselect');
+				tool.rectselect.switchTo()
 				break;
 			//Z
 			case 90:
@@ -57,19 +57,19 @@ function KeyPress(e) {
 			    redo();
 				if (!selectionCanceled) {
 			    		endSelection();
-			    		changeTool('pencil');
+			    		tool.pencil.switchTo()
 			    	}
 			  //CTRL+Z undo
 			  else if (keyboardEvent.ctrlKey) {
 			    	undo();
 			    	if (!selectionCanceled) {
 			    		endSelection();
-			    		changeTool('pencil');
+			    		tool.pencil.switchTo()
 			    	}
 			    }
 				//Z switch to zoom tool
 				else
-				  changeTool('zoom');
+					tool.zoom.switchTo()
 				break;
 			//redo - ctrl y
 			case 89:

js/_mouseEvents.js

@@ -19,40 +19,41 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	//left or right click ?
 	if (mouseEvent.which == 1) {
 		if (spacePressed)
-			currentTool = 'pan';
+			currentTool = tool.pan;
 		else if (mouseEvent.altKey)
-			currentTool = 'eyedropper';
+			currentTool = tool.eyedropper;
 		else if (mouseEvent.target.className == 'drawingCanvas' &&
-			(currentTool == 'pencil' || currentTool == 'eraser' || currentTool == 'rectangle'))
+			(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle'))
 		    new HistoryStateEditCanvas();
-		else if (currentTool == 'moveselection') {
+		else if (currentTool.name == 'moveselection') {
 			if (!cursorInSelectedArea()) {
-				changeTool('pencil');
+				tool.pencil.switchTo();
 				canDraw = false;
 			}
 		}
 		    //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 
-		updateCursor();
+		currentTool.updateCursor();
 
 		if (canDraw) {
 			draw(mouseEvent);
 		}
 	}
-	else if (currentTool == 'pencil' && mouseEvent.which == 3) {
+	else if (currentTool.name == 'pencil' && mouseEvent.which == 3) {
-		currentTool = 'resize-brush';
+		currentTool = tool.resizebrush;
-		prevBrushSize = pencilSize;
+		tool.pencil.previousBrushSize = tool.pencil.brushSize;
 	}
-	else if (currentTool == 'eraser' && mouseEvent.which == 3) {
+	else if (currentTool.name == 'eraser' && mouseEvent.which == 3) {
-	    currentTool = 'resize-eraser';
+		console.log('resize eraser')
-	    prevEraserSize = eraserSize;
+	    currentTool = tool.resizeeraser;
+	    tool.eraser.previousBrushSize = tool.eraser.brushSize;
     }
-	else if (currentTool == 'rectangle' && mouseEvent.which == 3) {
+	else if (currentTool.name == 'rectangle' && mouseEvent.which == 3) {
-		currentTool = 'resize-rectangle';
+		currentTool = tool.resizerectangle;
-		prevRectangleSize = rectangleSize;
+		tool.rectangle.previousBrushSize = tool.rectangle.brushSize;
 	}
 
-	if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
+	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
 	    eyedropperPreview.style.display = 'block';
 
 	return false;
@@ -69,7 +70,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
 	if (!documentCreated || dialogueOpen) return;
 
-	if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
+	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
 		var cursorLocation = getCursorPosition(mouseEvent);
 		var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
 		var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
@@ -99,7 +100,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	      }
 	    }
 	}
-	else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
+	else if (currentTool.name == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
 	  console.log('filling')
 
 		//get cursor postion
@@ -112,7 +113,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
     //fill starting at the location
 		fill(cursorLocation);
 	}
-	else if (currentTool == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
+	else if (currentTool.name == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
 		let mode;
 		if (mouseEvent.which == 1){
 			mode = "in";
@@ -127,17 +128,17 @@ window.addEventListener("mouseup", function (mouseEvent) {
 			layers[i].copyData(layers[0]);
         }
 	}
-	else if (currentTool == 'rectselect' && isRectSelecting) {
+	else if (currentTool.name == 'rectselect' && isRectSelecting) {
 		endRectSelection(mouseEvent);
 	}
-	else if (currentTool == 'rectangle') {
+	else if (currentTool.name == 'rectangle') {
 		endRectDrawing(mouseEvent);
 	}
 
 	dragging = false;
 	currentTool = currentToolTemp;
 
-	updateCursor();
+	currentTool.updateCursor();
 
 
 }, false);
@@ -160,10 +161,10 @@ function draw (mouseEvent) {
 
 	eyedropperPreview.style.display = 'none';
 
-	if (currentTool == 'pencil') {
+	if (currentTool.name == 'pencil') {
 		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
+		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px';
-		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
+		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px';
 
 		//hide brush preview outside of canvas / canvas view
 		if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
@@ -174,7 +175,7 @@ function draw (mouseEvent) {
 		//draw line to current pixel
 		if (dragging) {
 			if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
-				line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), pencilSize);
+				line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize);
 				lastPos = cursorLocation;
 			}
 		}
@@ -188,11 +189,11 @@ function draw (mouseEvent) {
 		else brushPreview.classList.add('dark');
 	}
 	// Decided to write a different implementation in case of differences between the brush and the eraser tool
-	else if (currentTool == 'eraser') {
+	else if (currentTool.name == 'eraser') {
 	    // Uses the same preview as the brush
         //move the brush preview
-        brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - eraserSize * zoom / 2 + 'px';
+        brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px';
-        brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - eraserSize * zoom / 2 + 'px';
+        brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - currentTool.brushSize * zoom / 2 + 'px';
 
         //hide brush preview outside of canvas / canvas view
         if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas')
@@ -203,16 +204,16 @@ function draw (mouseEvent) {
         //draw line to current pixel
         if (dragging) {
             if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
-                line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), eraserSize);
+                line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize);
                 lastPos = cursorLocation;
             }
         }
 	}
-	else if (currentTool == 'rectangle')
+	else if (currentTool.name == 'rectangle')
 	{
 		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
+		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px';
-		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
+		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - currentTool.brushSize * zoom / 2 + 'px';
 
 		//hide brush preview outside of canvas / canvas view
 		if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
@@ -227,7 +228,7 @@ function draw (mouseEvent) {
 			updateRectDrawing(mouseEvent);
 		}
 	}
-	else if (currentTool == 'pan' && dragging) {
+	else if (currentTool.name == 'pan' && dragging) {
 	    // Setting first layer position
         setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastPos[1]));
 		// Copying that position to the other layers
@@ -235,7 +236,7 @@ function draw (mouseEvent) {
             layers[i].copyData(layers[0]);
         }
     }
-    else if (currentTool == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') {
+    else if (currentTool.name == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') {
         var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
 
         eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
@@ -250,58 +251,58 @@ function draw (mouseEvent) {
 		if (colorLightness>127) eyedropperPreview.classList.remove('dark');
 		else eyedropperPreview.classList.add('dark');
     }
-    else if (currentTool == 'resize-brush' && dragging) {
+    else if (currentTool.name == 'resizebrush' && dragging) {
         //get new brush size based on x distance from original clicking location
         var distanceFromClick = cursorLocation[0] - lastPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);
         //this doesnt work in reverse...  because... it's not basing it off of the brush size which it should be
         var brushSizeChange = Math.round(distanceFromClick/10);
-        var newBrushSize = prevBrushSize + brushSizeChange;
+        var newBrushSize = tool.pencil.previousBrushSize + brushSizeChange;
 
         //set the brush to the new size as long as its bigger than 1
-        pencilSize = Math.max(1,newBrushSize);
+        tool.pencil.brushSize = Math.max(1,newBrushSize);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
+        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px';
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
+        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px';
 
-        updateCursor();
+        currentTool.updateCursor();
     }
-    else if (currentTool == 'resize-eraser' && dragging) {
+    else if (currentTool.name == 'resizeeraser' && dragging) {
         //get new brush size based on x distance from original clicking location
         var distanceFromClick = cursorLocation[0] - lastPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);
         //this doesnt work in reverse...  because... it's not basing it off of the brush size which it should be
         var eraserSizeChange = Math.round(distanceFromClick/10);
-        var newEraserSizeChange = prevEraserSize + eraserSizeChange;
+        var newEraserSizeChange = tool.eraser.previousBrushSize + eraserSizeChange;
 
         //set the brush to the new size as long as its bigger than 1
-        eraserSize = Math.max(1,newEraserSizeChange);
+        tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - eraserSize * zoom / 2 + 'px';
+        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.eraser.brushSize * zoom / 2 + 'px';
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - eraserSize * zoom / 2 + 'px';
+        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.eraser.brushSize * zoom / 2 + 'px';
 
-        updateCursor();
+        currentTool.updateCursor();
     }
-    else if (currentTool == 'resize-rectangle' && dragging) {
+    else if (currentTool.name == 'resizerectangle' && dragging) {
     	//get new brush size based on x distance from original clicking location
         var distanceFromClick = cursorLocation[0] - lastPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);
         //this doesnt work in reverse...  because... it's not basing it off of the brush size which it should be
         var rectangleSizeChange = Math.round(distanceFromClick/10);
-        var newRectangleSize = prevRectangleSize + rectangleSizeChange;
+        var newRectangleSize = tool.rectangle.previousBrushSize + rectangleSizeChange;
 
         //set the brush to the new size as long as its bigger than 1
-        rectangleSize = Math.max(1,newRectangleSize);
+        tool.rectangle.brushSize = Math.max(1,newRectangleSize);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
+        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.rectangle.brushSize * zoom / 2 + 'px';
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
+        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.rectangle.brushSize * zoom / 2 + 'px';
 
-        updateCursor();
+        currentTool.updateCursor();
     }
-    else if (currentTool == 'rectselect') {
+    else if (currentTool.name == 'rectselect') {
     	if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
     		isRectSelecting = true;
     		console.log("cominciata selezione su " + mouseEvent.target.className);
@@ -314,9 +315,9 @@ function draw (mouseEvent) {
     		endRectSelection();
     	}
     }
-    else if (currentTool == 'moveselection') {
+    else if (currentTool.name == 'moveselection') {
     	// Updating the cursor (move if inside rect, cross if not)
-    	updateCursor();
+    	currentTool.updateCursor();
 
     	// If I'm dragging, I move the preview
     	if (dragging && cursorInSelectedArea()) {
@@ -328,7 +329,7 @@ function draw (mouseEvent) {
 //mousewheel scrroll
 canvasView.addEventListener("wheel", function(mouseEvent){
 
-	if (currentTool == 'zoom' || mouseEvent.altKey) {
+	if (currentTool.name == 'zoom' || mouseEvent.altKey) {
 		let mode;
 		if (mouseEvent.deltaY < 0){
 			mode = 'in';

js/_newPixel.js

@@ -75,7 +75,7 @@ function newPixel (width, height, palette) {
 	redoStates = [];
 
 	closeDialogue();
-	updateCursor();
+	currentTool.updateCursor();
 
 	document.getElementById('save-as-button').classList.remove('disabled');
 	documentCreated = true;

js/_onLoad.js

@@ -1,6 +1,6 @@
 //when the page is donw loading, you can get ready to start
 window.onload = function(){
-  updateCursor();
+  currentTool.updateCursor();
 
   //if the user specified dimentions
   if (specifiedDimentions)

js/_rectSelect.js

@@ -62,14 +62,14 @@ function endRectSelection(mouseEvent) {
 	}
 
 	// Selecting the move tool
-	currentTool = 'moveselection';
+	currentTool = tool.moveselection;
 	currentToolTemp = currentTool;
 
 	// Resetting this
 	isRectSelecting = false;
 
 	// Updating the cursor
-	updateCursor();
+	currentTool.updateCursor();
 }
 
 function cutSelection(mouseEvent) {

js/_rectangle.js

@@ -1,5 +1,4 @@
-var rectangleSize = 1;
+
-var prevRectangleSie = rectangleSize;
 var emptySVG = document.getElementById("empty-button-svg");
 var fullSVG = document.getElementById("full-button-svg");
 
@@ -64,13 +63,13 @@ function endRectDrawing(mouseEvent) {
 	endRectX -= 0.5;
 	startRectX -= 0.5;
 
-	currentLayer.context.lineWidth = rectangleSize;
+	currentLayer.context.lineWidth = tool.rectangle.brushSize;
 	currentLayer.context.fillStyle = currentGlobalColor;
 
-	line(startRectX, startRectY, endRectX, startRectY, rectangleSize);
+	line(startRectX, startRectY, endRectX, startRectY, tool.rectangle.brushSize);
-	line(endRectX, startRectY, endRectX, endRectY, rectangleSize);
+	line(endRectX, startRectY, endRectX, endRectY, tool.rectangle.brushSize);
-	line(endRectX, endRectY, startRectX, endRectY, rectangleSize);
+	line(endRectX, endRectY, startRectX, endRectY, tool.rectangle.brushSize);
-	line(startRectX, endRectY, startRectX, startRectY, rectangleSize);
+	line(startRectX, endRectY, startRectX, startRectY, tool.rectangle.brushSize);
 
 	if (drawMode == 'fill') {
 		currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
@@ -88,12 +87,12 @@ function drawRectangle(x, y) {
 	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
 
 	// Drawing the rect
-	vfxContext.lineWidth = rectangleSize;
+	vfxContext.lineWidth = tool.rectangle.brushSize;
 	vfxContext.strokeStyle = currentGlobalColor;
 
 	// Drawing the rect
 	vfxContext.beginPath();
-	if ((rectangleSize % 2 ) == 0) {
+	if ((tool.rectangle.brushSize % 2 ) == 0) {
 		vfxContext.rect(startRectX - 0.5, startRectY - 0.5, x - startRectX, y - startRectY);
 	}
 	else {

js/_toolButtons.js

@@ -1,41 +1,39 @@
 //pencil
 on('click',"pencil-button", function(){
-    changeTool('pencil');
+    tool.pencil.switchTo();
 }, false);
 
 //pencil bigger
 on('click',"pencil-bigger-button", function(){
-    brushSize++;
+    tool.pencil.brushSize++;
-    updateCursor();
 }, false);
 
 //pencil smaller
 on('click',"pencil-smaller-button", function(){
-    if(brushSize > 1) brushSize--;
+    if(tool.pencil.brushSize > 1)
-    updateCursor();
+    	tool.pencil.brushSize--;
 }, false);
 
 //eraser
 on('click',"eraser-button", function(){
-    changeTool('eraser');
+    tool.eraser.switchTo();
 }, false);
 
 //eraser bigger
 on('click',"eraser-bigger-button", function(){
-    eraserSize++;
+    tool.eraser.brushSize++;
-    updateCursor();
 }, false);
 
 //eraser smaller
 on('click',"eraser-smaller-button", function(e){
-    if(eraserSize > 1) eraserSize--;
+    if(tool.eraser.brushSize > 1)
-    updateCursor();
+    	tool.eraser.brushSize--;
 }, false);
 
 // rectangle
 on('click',"rectangle-button", function(){
     // If the user clicks twice on the button, they change the draw mode
-    if (currentTool == 'rectangle') {
+    if (currentTool.name == 'rectangle') {
         if (drawMode == 'empty') {
             drawMode = 'fill';
             setRectToolSvg();
@@ -46,40 +44,39 @@ on('click',"rectangle-button", function(){
         }
     }
     else {
-        changeTool('rectangle');
+        tool.rectangle.switchTo();
     }
 }, false);
 
 // rectangle bigger
 on('click',"rectangle-bigger-button", function(){
-    rectangleSize++;
+    tool.rectangle.brushSize++;
-    updateCursor();
 }, false);
 
 // rectangle smaller
 on('click',"rectangle-smaller-button", function(e){
-    if(rectangleSize > 1) rectangleSize--;
+    if(tool.rectangle.brushSize > 1)
-    updateCursor();
+    	tool.rectangle.brushSize--;
 }, false);
 
 //fill
 on('click',"fill-button", function(){
-    changeTool('fill');
+    tool.fill.switchTo();
 }, false);
 
 //pan
 on('click',"pan-button", function(){
-    changeTool('pan');
+    tool.pan.switchTo();
 }, false);
 
 //eyedropper
 on('click',"eyedropper-button", function(){
-	changeTool('eyedropper');
+	tool.eyedropper.switchTo();
 }, false);
 
 //zoom tool button
 on('click',"zoom-button", function(){
-	changeTool('zoom');
+	tool.zoom.switchTo();
 }, false);
 
 //zoom in button
@@ -103,5 +100,7 @@ on('click',"zoom-out-button", function(){
 
 //rectangular selection button
 on('click', "rectselect-button", function(){
-    changeTool('rectselect');
+    tool.rectselect.switchTo();
 }, false);
+
+/*global on */

js/_tools.js

@@ -0,0 +1,70 @@
+//tools container / list, automatically managed when you create a new Tool();
+var tool = {};
+
+//class for tools
+class Tool {
+	constructor (name, options) {
+
+		//stores the name in object, only needed for legacy functions from when currentTool was just a string
+		this.name = name;
+
+		//copy options to this object
+		if (options.cursor) {
+			//passed statically as a string
+			if (typeof options.cursor == 'string') this.cursor = options.cursor;
+			//passed a function which should be used as a getter function
+			if (typeof options.cursor == 'function') Object.defineProperty(this, 'cursor', { get: options.cursor});
+		}
+
+		if (options.imageCursor) this.cursor = "url(\'/pixel-editor/"+options.imageCursor+".png\'), auto";
+
+		if (options.brushPreview) {
+			this.brushPreview = true;
+			this.currentBrushSize = 1;
+			this.previousBrushSize = 1;
+		}
+
+		//add to tool object so it can be referenced
+		tool[name] = this;
+	}
+
+	get brushSize () {
+		return this.currentBrushSize;
+	}
+
+	set brushSize (value) {
+		this.currentBrushSize = value;
+		this.updateCursor();
+	}
+
+
+	//switch to this tool (replaced global changeTool())
+	switchTo () {
+
+		console.log('changing tool to',this.name)
+
+		// Ending any selection in progress
+	    if (currentTool.name.includes("select") && !this.name.includes("select") && !selectionCanceled) {
+	    	endSelection();
+	    }
+
+	    //set tool and temp tje tje tpp;
+	    currentTool = this;
+		currentToolTemp = this;
+
+	    var tools = document.getElementById("tools-menu").children;
+
+		for (var i = 0; i < tools.length; i++) {
+		    tools[i].classList.remove("selected");
+		}
+
+	    //give the button of the selected tool the .selected class
+		document.getElementById(this.name+"-button").parentNode.classList.add("selected");
+
+		//change cursor
+		this.updateCursor();
+	}
+}
+
+
+/*global dragging currentTool, currentToolTemp, selectionCanceled, endSelection*/

js/_updateCursor.js

@@ -1,23 +1,27 @@
 
+
 //set the correct cursor for the current tool
-function updateCursor () {
+Tool.prototype.updateCursor = function () {
-	if (currentTool == 'pencil' || currentTool == 'resize-brush') {
+
-		canvasView.style.cursor = 'crosshair';
+	console.log('updateCursor()', currentTool)
+
+	//switch to that tools cursor
+	canvasView.style.cursor = this.cursor || 'default';
+
+	//if the tool uses a brush preview, make it visible and update the size
+	if (this.brushPreview) {
+		console.log('brush size',this.currentBrushSize)
 		brushPreview.style.display = 'block';
-		brushPreview.style.width = pencilSize * zoom + 'px';
+        brushPreview.style.width = this.currentBrushSize * zoom + 'px';
-		brushPreview.style.height = pencilSize * zoom + 'px';
+        brushPreview.style.height = this.currentBrushSize * zoom + 'px';
-	} else if (currentTool == 'eraser' || currentTool == 'resize-eraser') {
-        canvasView.style.cursor = 'crosshair';
-        brushPreview.style.display = 'block';
-        brushPreview.style.width = eraserSize * zoom + 'px';
-        brushPreview.style.height = eraserSize * zoom + 'px';
-	} else if (currentTool == 'rectangle' || currentTool == 'resize-rectangle') {
-		canvasView.style.cursor = 'crosshair';
-        brushPreview.style.display = 'block';
-        brushPreview.style.width = rectangleSize * zoom + 'px';
-        brushPreview.style.height = rectangleSize * zoom + 'px';
 	}
-	else if (currentTool == 'moveselection') {
+
+	//show / hide eyedropper color preview
+	if (this.eyedropperPreview) eyedropperPreview.style.display = 'block';
+	else eyedropperPreview.style.display = 'none';
+
+	//moveSelection
+	if (currentTool.name == 'moveselection') {
 		if (cursorInSelectedArea()) {
 			canMoveSelection = true;
 			canvasView.style.cursor = 'move';
@@ -27,28 +31,6 @@ function updateCursor () {
 			canvasView.style.cursor = 'crosshair';
 		}
 	}
-	else if (currentTool == 'rectselect')
-		canvasView.style.cursor = 'crosshair';
-	else
-		brushPreview.style.display = 'none';
-	
-	if (currentTool == 'eyedropper') {
-		canvasView.style.cursor = "url('/pixel-editor/eyedropper.png'), auto";
-	} else 
-		eyedropperPreview.style.display = 'none';
-	
-	if (currentTool == 'pan') 
-		if (dragging)
-			canvasView.style.cursor = "url('/pixel-editor/pan-held.png'), auto";
-		else
-			canvasView.style.cursor = "url('/pixel-editor/pan.png'), auto";
-		
-	if (currentTool == 'fill') 
-		canvasView.style.cursor = "url('/pixel-editor/fill.png'), auto";
-		
-	if (currentTool == 'zoom') 
-		canvasView.style.cursor = "url('/pixel-editor/zoom-in.png'), auto";
-		
-	if (currentTool == 'resize-brush' || currentTool == 'resize-eraser')
-		canvasView.style.cursor = 'default';
 }
+
+/*global Tool, dragging, canvasView, brushPreview, canMoveSelection, cursorInSelectedArea, eyedropperPreview, zoom, currentTool */

js/_variables.js

@@ -2,12 +2,6 @@
 var canvasSize,zoom;
 var dragging = false;
 var lastPos = [0,0];
-var currentTool = 'pencil';
-var currentToolTemp = 'pencil';
-var pencilSize = 1;
-var eraserSize = 1;
-var prevBrushSize = 1;
-var prevEraserSize = 1;
 var dialogueOpen = false;
 var documentCreated = false;
 

js/pixel-editor.js

@@ -1,5 +1,3 @@
-
-
 /**utilities**/
 //=include utilities/on.js
 //=include utilities/onChildren.js
@@ -15,8 +13,6 @@
 //=include libraries/cookies.js
 //=include _pixelEditorUtility.js
 
-
-
 /**init**/
 //=include _consts.js
 //=include _variables.js
@@ -27,6 +23,8 @@
 //=include _palettes.js
 
 /**functions**/
+//=include _tools.js
+//=include tools/*.js
 //=include _newPixel.js
 //=include _createColorPalette.js
 //=include _setCanvasOffset.js
@@ -46,7 +44,6 @@
 //=include _checkerboard.js
 //=include _layer.js
 
-
 /**load file**/
 //=include _loadImage.js
 //=include _loadPalette.js
@@ -65,7 +62,6 @@
 //=include _move.js
 //=include _rectangle.js
 
-
 /**onload**/
 //=include _onLoad.js
 //=include _onbeforeunload.js

js/tools/_eraser.js

@@ -0,0 +1,13 @@
+
+new Tool('eraser', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+
+
+
+new Tool('resizeeraser', {
+	cursor: 'default',
+});
+
+/*global Tool, tool*/

js/tools/_eyedropper.js

@@ -0,0 +1,7 @@
+
+new Tool('eyedropper', {
+	imageCursor: 'eyedropper',
+});
+
+
+/*global Tool, tool*/

js/tools/_fill.js

@@ -0,0 +1,7 @@
+
+new Tool('fill', {
+	imageCursor: 'fill',
+});
+
+
+/*global Tool, tool*/

js/tools/_pan.js

@@ -0,0 +1,10 @@
+
+new Tool('pan', {
+	cursor: function () {
+		if (dragging) return 'url(\'/pixel-editor/pan-held.png\'), auto';
+		else return 'url(\'/pixel-editor/pan.png\'), auto';
+	},
+});
+
+
+/*global Tool, tool*/

js/tools/_pencil.js

@@ -0,0 +1,17 @@
+
+new Tool('pencil', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+
+
+new Tool('resizebrush', {
+	cursor: 'default',
+});
+
+
+//set as default tool
+var currentTool = tool.pencil;
+var currentToolTemp = tool.pencil;
+
+/*global Tool, tool*/

js/tools/_rectangle.js

@@ -0,0 +1,14 @@
+
+new Tool('rectangle', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+
+
+
+new Tool('resizerectangle', {
+	cursor: 'default',
+});
+
+
+/*global Tool, tool*/

js/tools/_select.js

@@ -0,0 +1,13 @@
+
+
+new Tool('rectselect', {
+	cursor: 'crosshair',
+});
+
+
+new Tool('moveselection', {
+	cursor: 'crosshair',
+});
+
+
+/*global Tool, tool*/

js/tools/_zoom.js

@@ -0,0 +1,6 @@
+
+new Tool('zoom', {
+	imageCursor: 'zoom-in',
+});
+
+/*global Tool, tool*/

views/pixel-editor.hbs

@@ -200,13 +200,14 @@
         </div>
         <div id="changelog">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+
 			<h1>Changelog</h1>
-            <h2>Version 1.1.0 - 4/4/19</h2>
+            {{#each changelog}}
-            <p>Added transparency / eraser tool</p>
+            	<h2>Version {{@key}}</h2>
-            <h2>Version 1.1.0</h2>
+            	<ul>{{#each this}}
-            <ul>
+                	<li>{{change}} <span class="weak">- {{author}}</span></li>
-                <li>Initial Release</li>
+            	{{/each}}</ul>
-            </ul>
+            {{/each}}
         </div>
         <div id="credits">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>