Almost finished recangle tool

There's a Math.round bug, sometimes the opacity is off.

js/_clickedColor.js

@@ -10,6 +10,7 @@ function clickedColor (e){
 
     	//set current color
     	currentLayer.context.fillStyle = this.style.backgroundColor;
+      currentGlobalColor = this.style.backgroundColor;
     	
     	//make color selected
     	e.target.parentElement.classList.add('selected');

js/_colorChanged.js

@@ -28,9 +28,6 @@ function colorChanged(e) {
 	var newColor = hexToRgb(e.target.value);
 	var oldColor = e.target.oldColor;
 	
-	console.log('newColor',newColor)
-	console.log('oldColor',oldColor)
-	
 	//save undo state
 	//saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 	new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor));
@@ -50,15 +47,14 @@ function colorChanged(e) {
   
   //loop through all colors in palette
   for (var i = 0; i < colors.length; i++) {
-    console.log('%c'+newColorHex +' '+ colors[i].jscolor.toString(), colorCheckingStyle)
     
     //if generated color matches this color
     if (newColorHex == colors[i].jscolor.toString()) {
-      console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
+      //console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
 
       //if the color isnt the one that has the picker currently open
       if (!colors[i].parentElement.classList.contains('jscolor-active')) {
-        console.log('%cColor is duplicate', colorCheckingStyle)
+        //console.log('%cColor is duplicate', colorCheckingStyle)
         
         //show the duplicate color warning
         duplicateColorWarning.style.visibility = 'visible';
@@ -83,13 +79,12 @@ function colorChanged(e) {
 	
 	//set new old color to changed color
 	e.target.oldColor = newColor;
-	
-	console.log(e.target.colorElement);
+
 	
 	//if this is the current color, update the drawing color
 	if (e.target.colorElement.parentElement.classList.contains('selected')) {
-	  console.log('this color is the current color');
-	  context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
+	  //console.log('this color is the current color');
+	  context.fillStyle = currentColor;
 	}
 	/* this is wrong and bad
 	if (settings.switchToChangedColor) {

js/_mouseEvents.js

@@ -1,4 +1,6 @@
 var currentMouseEvent;
+// TODO: replace every position calculation with lastMousePos
+var lastMousePos;
 
 //mousedown - start drawing
 window.addEventListener("mousedown", function (mouseEvent) {
@@ -56,9 +58,9 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	if (currentTool == '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]);
-		
-		console.log(newColor);
+		var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);	
+
+		currentGlobalColor = "#" + newColor;
 		
 		var colors = document.getElementsByClassName('color-button');
 	    for (var i = 0; i < colors.length; i++) {
@@ -114,6 +116,9 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	else if (currentTool == 'rectselect') {
 		endRectSelection(mouseEvent);
 	}
+	else if (currentTool == 'rectangle') {
+		endRectDrawing(mouseEvent);
+	}
 
 	dragging = false;
 	currentTool = currentToolTemp;
@@ -127,10 +132,11 @@ window.addEventListener("mouseup", function (mouseEvent) {
 //mouse is moving on canvas		
 window.addEventListener("mousemove", draw, false);
 function draw (mouseEvent) {
+	lastMousePos = getCursorPosition(mouseEvent);
 	// Saving the event in case something else needs it
 	currentMouseEvent = mouseEvent;
 
-	var cursorLocation = getCursorPosition(mouseEvent);
+	var cursorLocation = lastMousePos;
 	
 	//if a document hasnt yet been created, exit this function
 	if (!documentCreated || dialogueOpen) return;
@@ -187,6 +193,15 @@ function draw (mouseEvent) {
             }
         }
 	}
+	else if (currentTool == 'rectangle')
+	{
+		if (!isDrawingRect && dragging) {
+			startRectDrawing(mouseEvent);
+		}
+		else if (dragging){
+			updateRectDrawing(mouseEvent);
+		}
+	}
 	else if (currentTool == '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]));
@@ -197,6 +212,7 @@ function draw (mouseEvent) {
     }
     else if (currentTool == '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]);
         eyedropperPreview.style.display = 'block';
        

js/_move.js

@@ -1,6 +1,5 @@
 var imageDataToMove;
 var canMoveSelection = false;
-let lastMousePos;
 
 // TODO: move with arrows
 function updateMovePreview(mouseEvent) {

js/_newPixel.js

@@ -66,6 +66,7 @@ function newPixel (width, height, palette) {
 		
 		//set current drawing color as foreground color
 		currentLayer.context.fillStyle = '#'+defaultForegroundColor;
+		currentGlobalColor = '#' + defaultForegroundColor;
 		selectedPalette = 'none';
 	}
 		

js/_rectSelect.js

@@ -3,13 +3,10 @@ let startX;
 let startY;
 let endX;
 let endY;
-let workingLayer;
 
 function startRectSelection(mouseEvent) {
 	// Putting the vfx layer on top of everything
 	VFXCanvas.style.zIndex = MAX_Z_INDEX;
-	// Saving the layer the user is working on
-	workingLayer = currentLayer;
 
 	// Saving the start coords of the rect
 	let cursorPos = getCursorPosition(mouseEvent);
@@ -92,6 +89,7 @@ function drawRect(x, y) {
 	// Clearing the vfx canvas
 	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
 	vfxContext.lineWidth = 1;
+	vfxContext.fillStyle = "black";
 	vfxContext.setLineDash([4]);
 
 	// Drawing the rect

js/_rectangle.js

@@ -0,0 +1,90 @@
+var rectangleSize = 1;
+var drawMode = 'empty';
+var isDrawingRect = false;
+
+let startRectX;
+let startRectY;
+let endRectX;
+let endRectY;
+
+
+function startRectDrawing(mouseEvent) {
+	// Putting the vfx layer on top of everything
+	VFXCanvas.style.zIndex = MAX_Z_INDEX;
+	// Updating flag
+	isDrawingRect = true;
+
+	// Saving the start coords of the rect
+	let cursorPos = getCursorPosition(mouseEvent);
+	startRectX = Math.round(cursorPos[0] / zoom) + 0.5;
+	startRectY = Math.round(cursorPos[1] / zoom) + 0.5;
+
+	drawRectangle(startRectX, startRectY);
+}
+
+function updateRectDrawing(mouseEvent) {
+	let pos = getCursorPosition(mouseEvent);
+	
+	// Drawing the rect
+	drawRectangle(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
+}
+
+function endRectDrawing(mouseEvent) {
+	// Getting the end position
+	let currentPos = getCursorPosition(mouseEvent);
+	let vfxContext = VFXCanvas.getContext("2d");
+
+	endRectX = Math.round(currentPos[0] / zoom);
+	endRectY = Math.round(currentPos[1] / zoom);
+
+	// Inverting end and start (start must always be the top left corner)
+	if (endRectX < startRectX) {
+		let tmp = endRectX;
+		endRectX = startRectX;
+		startRectX = tmp;
+	}
+	// Same for the y
+	if (endRectY < startRectY) {
+		let tmp = endRectY;
+		endRectY = startRectY;
+		startRectY = tmp;
+	}
+
+	// Resetting this
+	isDrawingRect = false;
+	// Drawing the final rectangle
+	currentLayer.context.lineWidth = rectangleSize;
+	currentLayer.context.strokeStyle = currentGlobalColor;
+
+	// Drawing the rect
+	currentLayer.context.beginPath();
+	currentLayer.context.rect(startRectX, startRectY, endRectX - startRectX + 0.5, endRectY - startRectY + 0.5);
+	currentLayer.context.setLineDash([]);
+
+	currentLayer.context.stroke();
+}
+
+function drawRectangle(x, y) {
+	// Getting the vfx context
+	let vfxContext = VFXCanvas.getContext("2d");
+
+	// Clearing the vfx canvas
+	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+
+	// Drawing the rect
+	vfxContext.lineWidth = rectangleSize;
+	vfxContext.strokeStyle = currentGlobalColor;
+	console.log("color: " + currentGlobalColor);
+	// Drawing the rect
+	vfxContext.beginPath();
+	vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY);
+	vfxContext.setLineDash([]);
+
+	vfxContext.stroke();
+
+	// TODO: make the rect blink from black to white in case of dark backgrounds
+}
+
+function applyChanges() {
+	VFXCanvas.style.zIndex = MIN_Z_INDEX;
+}

js/_toolButtons.js

@@ -32,6 +32,34 @@ on('click',"eraser-smaller-button", function(e){
     updateCursor();
 }, false);
 
+// rectangle
+on('click',"rectangle-button", function(){
+    // If the user clicks twice on the button, they change the draw mode
+    if (currentTool == 'rectangle') {
+        if (drawMode == 'empty') {
+            drawMode = 'full';
+        }
+        else {
+            drawMode = 'empty';
+        }
+    }
+    else {
+        changeTool('rectangle');
+    }
+}, false);
+
+// rectangle bigger
+on('click',"rectangle-bigger-button", function(){
+    rectangleSize++;
+    updateCursor();
+}, false);
+
+// rectangle smaller
+on('click',"rectangle-smaller-button", function(e){
+    if(rectangleSize > 1) rectangleSize--;
+    updateCursor();
+}, false);
+
 //fill
 on('click',"fill-button", function(){
     changeTool('fill');

js/_updateCursor.js

@@ -21,7 +21,7 @@ function updateCursor () {
 			canvasView.style.cursor = 'crosshair';
 		}
 	}
-	else if (currentTool == 'rectselect')
+	else if (currentTool == 'rectselect' || currentTool == 'rectangle')
 		canvasView.style.cursor = 'crosshair';
 	else
 		brushPreview.style.display = 'none';

js/_variables.js

@@ -32,6 +32,7 @@ var popUpContainer = document.getElementById("pop-up-container");
 // main canvas
 var canvas = document.getElementById("pixel-canvas");
 var context = canvas.getContext("2d");
+var currentGlobalColor;
 
 // Layers
 var layers = [];

js/pixel-editor.js

@@ -62,6 +62,7 @@
 //=include _createButton.js 
 //=include _rectSelect.js
 //=include _move.js
+//=include _rectangle.js
 
 
 /**onload**/