Started refactoring the code

- Can now zoom without selecting the zom tool
- Moved updateCursor to the tool class, deleted _updateCursor.js
- Removed as many references to canvas as possible, removed every global reference to context
- Added methods in Tool class to move the brush preview

js/_addColorButton.js

@@ -44,7 +44,7 @@ on('click', 'add-color-button', function(){
     //add new color and make it selected
     var addedColor = addColor(newColor);
     addedColor.classList.add('selected');
-    context.fillStyle = '#' + newColor;
+    currentLayer.context.fillStyle = '#' + newColor;
 
     //add history state
     //saveHistoryState({type: 'addcolor', colorValue: addedColor.firstElementChild.jscolor.toString()});

js/_drawLine.js

@@ -30,7 +30,5 @@ function line(x0,y0,x1,y1, brushSize) {
 			err +=dx; 
 			y0+=sy;
 		}
-
-		console.log(x0 + ", " + x1);
 	}
 }

js/_mouseEvents.js

@@ -1,5 +1,5 @@
 var currentMouseEvent;
-var lastMousePos;
+var lastMouseMovePos;
 
 //mousedown - start drawing
 window.addEventListener("mousedown", function (mouseEvent) {
@@ -12,7 +12,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	//prevent right mouse clicks and such, which will open unwanted menus
 	//mouseEvent.preventDefault();
 
-	lastPos = getCursorPosition(mouseEvent);
+	lastMouseClickPos = getCursorPosition(mouseEvent);
 
 	dragging = true;
 	//left or right click ?
@@ -176,23 +176,21 @@ function setPreviewPosition(preview, cursor, size){
 //mouse is moving on canvas
 window.addEventListener("mousemove", draw, false);
 function draw (mouseEvent) {
-	lastMousePos = getCursorPosition(mouseEvent);
+	lastMouseMovePos = getCursorPosition(mouseEvent);
 	// Saving the event in case something else needs it
 	currentMouseEvent = mouseEvent;
 
-	var cursorLocation = lastMousePos;
+	var cursorLocation = lastMouseMovePos;
 
 	//if a document hasnt yet been created or the current layer is locked, exit this function
 	if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
 
-
+	// Moving brush preview
+	currentTool.moveBrushPreview(cursorLocation);
+	// Hiding eyedropper, will be shown if it's needed
 	eyedropperPreview.style.display = 'none';
 
 	if (currentTool.name == 'pencil') {
-		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * 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')
 		  brushPreview.style.visibility = 'visible';
@@ -202,13 +200,13 @@ 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), tool.pencil.brushSize);
+				line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize);
-				lastPos = cursorLocation;
+				lastMouseClickPos = cursorLocation;
 			}
 		}
 
 		//get lightness value of color
-		var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
+		var selectedColor = currentLayer.context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
 		var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2])
 
 		//for the darkest 50% of colors, change the brush preview to dark mode
@@ -219,11 +217,6 @@ function draw (mouseEvent) {
 	}
 	// Decided to write a different implementation in case of differences between the brush and the eraser tool
 	else if (currentTool.name == 'eraser') {
-	    // Uses the same preview as the brush
-        //move the brush preview
-        brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - currentTool.brushSize * 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')
             brushPreview.style.visibility = 'visible';
@@ -233,8 +226,8 @@ 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), currentTool.brushSize);
+                line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize);
-                lastPos = cursorLocation;
+                lastMouseClickPos = cursorLocation;
             }
         }
 
@@ -242,10 +235,6 @@ function draw (mouseEvent) {
 	}
 	else if (currentTool.name == 'rectangle')
 	{
-		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - currentTool.brushSize * 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')
 		  brushPreview.style.visibility = 'visible';
@@ -261,7 +250,7 @@ function draw (mouseEvent) {
 	}
 	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]));
+        setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1]));
         // Copying that position to the other layers
         for (let i=1; i<layers.length; i++) {
             layers[i].copyData(layers[0]);
@@ -284,7 +273,7 @@ function draw (mouseEvent) {
     }
     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 distanceFromClick = cursorLocation[0] - lastMouseClickPos[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);
@@ -294,31 +283,27 @@ function draw (mouseEvent) {
         tool.pencil.brushSize = Math.max(1,newBrushSize);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px';
+        tool.pencil.moveBrushPreview(lastMouseClickPos);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px';
-
         currentTool.updateCursor();
     }
     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 distanceFromClick = cursorLocation[0] - lastMouseClickPos[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 = tool.eraser.previousBrushSize + eraserSizeChange;
 
         //set the brush to the new size as long as its bigger than 1
-        tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
+		tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
-
+		
-        //fix offset so the cursor stays centered
+		//fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.eraser.brushSize * zoom / 2 + 'px';
+		tool.eraser.moveBrushPreview(lastMouseClickPos);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.eraser.brushSize * zoom / 2 + 'px';
-
         currentTool.updateCursor();
     }
     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 distanceFromClick = cursorLocation[0] - lastMouseClickPos[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);
@@ -327,10 +312,8 @@ function draw (mouseEvent) {
         //set the brush to the new size as long as its bigger than 1
         tool.rectangle.brushSize = Math.max(1,newRectangleSize);
 
-        //fix offset so the cursor stays centered
+		//fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.rectangle.brushSize * zoom / 2 + 'px';
+		tool.rectangle.moveBrushPreview(lastMouseClickPos);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.rectangle.brushSize * zoom / 2 + 'px';
-
         currentTool.updateCursor();
     }
     else if (currentTool.name == 'rectselect') {
@@ -356,25 +339,21 @@ function draw (mouseEvent) {
     }
 }
 
-//mousewheel scrroll
+//mousewheel scroll
 canvasView.addEventListener("wheel", function(mouseEvent){
-
+	let mode;
-	if (currentTool.name == 'zoom' || mouseEvent.altKey) {
+	if (mouseEvent.deltaY < 0){
-		let mode;
+		mode = 'in';
-		if (mouseEvent.deltaY < 0){
+	}
-			mode = 'in';
+	else if (mouseEvent.deltaY > 0) {
-        }
+		mode = 'out';
-        else if (mouseEvent.deltaY > 0) {
-            mode = 'out';
-        }
-
-        // Changing zoom and position of the first layer
-        changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
-
-        for (let i=1; i<layers.length; i++) {
-            // Copying first layer's data into the other layers
-            layers[i].copyData(layers[0]);
-		}
 	}
 
+	// Changing zoom and position of the first layer
+	changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
+
+	for (let i=1; i<layers.length; i++) {
+		// Copying first layer's data into the other layers
+		layers[i].copyData(layers[0]);
+	}
 });

js/_newPixel.js

@@ -8,9 +8,8 @@ function newPixel (width, height, editorMode, fileContent = null) {
 		layerList = document.getElementById("layers-menu");
 		layerListEntry = layerList.firstElementChild;
 
-		// Setting up the current layer
 	    currentLayer = new Layer(width, height, canvas, layerListEntry);
-	    canvas.style.zIndex = 2;
+	    currentLayer.canvas.style.zIndex = 2;
 	}
 	else {
 		let nLayers = layers.length;
@@ -41,9 +40,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	    layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
 	    currentLayer = layers[1];
 
-	    canvas = currentLayer.canvas;
+	    currentLayer.canvas.style.zIndex = 2;
-	    context = currentLayer.context;
-	    canvas.style.zIndex = 2;
 	}
 
     // Adding the checkerboard behind it

js/_tools.js

@@ -64,6 +64,40 @@ class Tool {
 		//change cursor
 		this.updateCursor();
 	}
+
+	updateCursor () {
+		//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 = this.currentBrushSize * zoom + 'px';
+			brushPreview.style.height = this.currentBrushSize * zoom + 'px';
+		}
+	
+		//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';
+				brushPreview.style.display = 'none';
+			}
+			else {
+				canvasView.style.cursor = 'crosshair';
+			}
+		}
+	}
+
+	moveBrushPreview(cursorLocation) {
+		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - this.currentBrushSize * zoom / 2 + 'px';
+		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - this.currentBrushSize * zoom / 2 + 'px';
+	}
 }
 
 

js/_updateCursor.js

@@ -1,35 +0,0 @@
-
-
-//set the correct cursor for the current tool
-Tool.prototype.updateCursor = function () {
-	//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 = this.currentBrushSize * zoom + 'px';
-        brushPreview.style.height = this.currentBrushSize * zoom + 'px';
-	}
-
-	//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';
-			brushPreview.style.display = 'none';
-		}
-		else {
-			canvasView.style.cursor = 'crosshair';
-		}
-	}
-}
-
-/*global Tool, dragging, canvasView, brushPreview, canMoveSelection, cursorInSelectedArea, eyedropperPreview, zoom, currentTool */

js/_variables.js

@@ -1,7 +1,7 @@
 //init variables
 var canvasSize,zoom;
 var dragging = false;
-var lastPos = [0,0];
+var lastMouseClickPos = [0,0];
 var dialogueOpen = false;
 var documentCreated = false;
 var pixelEditorMode;
@@ -26,7 +26,6 @@ var popUpContainer = document.getElementById("pop-up-container");
 
 // main canvas
 var canvas = document.getElementById('pixel-canvas');
-var context = canvas.getContext('2d');
 var currentGlobalColor;
 
 // Layers

js/tools/_select.js

@@ -2,6 +2,7 @@
 
 new Tool('rectselect', {
 	cursor: 'crosshair',
+	brushPreview: true,
 });
 
 

views/pixel-editor.hbs

@@ -187,6 +187,7 @@
         </li>
     </ul>
 
+    <!-- TOOL PREVIEWS -->
     <div id="eyedropper-preview"></div>
     <div id="brush-preview"></div>